Piano Tutorial Online

onlinepianist.com is a website that teaches people how to play piano online. The site would be a great resource if you like to know how to play your favourite song. By watching the animated piano, for sale I felt that I was sitting infront of a virtual tutor.

Upon visiting the homepage, I was greeted by animated “Happy Birthday” graphic below the top menu. Mmmmm, was that the website logo or just a graphic? If that is the company logo, than it should be on every page and be in a consistent position. The main content area showcased the top song tutorials and some ads. Each song had a thumbnail beside it but some of the thumbnails appeared to be squashed. I like to see more spacing in the content area. The footer had some links as well but was not as obvious. Perhaps using a different background colour and font could make the footer stand out better.


fig 1. Flash animated piano

The website had very little text. In fact, the highlight of the site was the flash animated piano. It would be great if the author could make finding the music easier. I like the idea of a centralised search system where user can search for the song artists, piano sheets, difficulty, rating and tutorials in one search box.

I thought the song categories under the song tutorials section was well thought of. The author splited the categories into kids, rock, pop, jazz…etc. The categories should be more obvious and on every page. It was hard finding the music I liked from the home page.

I found the Piano Chord Chart interesting. I could learn how to play D7 for example by selecting D7 from the drop down list. For piano newbies, it might be a good idea for the animation to be slower. Better still, give user the ability to chose the animation speed – maybe a slider bar above the keyboard. I know nothing about piano, so I like to know what a major and dim are. Any extra textual information about piano chords would be cool. By the way, this piano chords page did not have a footer.


fig 2. A typo in the faq section

The FAQ page again had a different layout from the rest. I strongly suggest having a fix layout for all the pages.

Conclusion

The usability of the website was affected by the layout consistency. I found every page slightly different from each other. Perhaps the author should consider using a proper CMS to manage the content. Still, Online Piano provides a service that is unique to itself and I am sure many people would find the site a valuable resource to learn piano online. If the author could work on the the aesthetics more, the site could attract more traffic.

Free vector art

www.vector-finder.com is a website that allows users to download free vector graphics from one central location. The standard header looked cool and the front page seemed to be quite busy. Users would need to scroll down a bit to see the flashy graphics in the main content area though.

Home Page and Navigation

I was not sure the need to emphasis “GPL License, CC 3.0 License…etc” on every header on the site. The word “free” might be good enough? The flowers looked really cool but the navigation was confusing as the navigation menus were sandwiched by the big search and google ads in between. To add to the confusion, there was another google search box at the top right. I also found the “Search vector” menu a bit confusing when it was just above the search box. Perhaps the author should consider pre-populating the search box with the word “vector” and get rid of the “search vector” link. If the user feels like searching for free vectors, they can just click on the search button immediately. The google search was confusing, getting rid of it is a good idea.

There were also some repetition of the links in the menus, ie Free Vector. Shouldn’t “free vector” be the same as search vector? Perhaps some menus were there for seo reasons but they definitely affected usability.


Fig 1. smashingmag footer?

The ads at the side seemed to complement the look and feel of the website well but the search and headers needed some extra thoughts. I thought the footer looked good as well until I saw the “smashing magazine” graphic. Does this website belong to smashing magazine?

The Detail Page

When I clicked on one of the Free vector items, I was brought to the detail page of the vector art where I could download the file in zip format.


Fig 2. Nice detail view of the vector art

I really liked the big red button as I could not miss it. Clicking on the preview image invoked a bigger popup which was cool as well. Looking further down were the shutterstock and graphicdriver thumbnails separated again by google ads. I wasn’t sure if those thumbnails worked for me as people would have stopped looking once they downloaded what they want.

Others

Clicking on the “Free Icons” link redirected me to Free Icons. Interestingly, this site looked like the sister site of vector-finder.com, possibly using the same cms system. Instead of putting the sister site link prominently on the top menu, it might be a better idea to put it in the footer. The “about” link was also misleading. The same content seemed to have been ported over from freeiconsweb.com without modification.

Conclusion

vector-finder.com might have been duplicated from freeiconsweb.com but the author needed to put in more effort to make it unique. That might include going through the about us page and changing the layout and css.

Perhaps the top menu could go and be replaced the the secondary menu from the homepage.

Divination, Astrology and Spirituality

findyourfate.com is an online portal on divination, astrology, horoscope and a wide range of esoteric practices. There is a good chance that a spiritual person or someone into divination would find what they want in there.

The homepage was packed with information. I was drawn to the mid section of the page displaying a wide range of clickable topics like Astrology, Horoscopes, Numerology, Prophecy, Planets…etc. Comparatively, the top menu didn’t seem to be that obvious.


fig 1. Table design needs to be relooked

I thought the table borders looked ancient. There were no consistency in table design. In fig1, the width of the bottom table was smaller than the top table. There were also nested tables with different border colours. Perhaps it is time to re-look at the layout and go for tableless design?


fig 2. The footer in the homepage


fig 3. The footer in the subpage

Looking at fig 2 and fig 3, I could see that they were designed differently without proper templates. The footer needs to be more consistent across different pages of the site. The frontpage seemed to be promoting subdomains more than the sub pages. The subdomains again looked very different from the main site. Perhaps the website was undergoing an overhaul and the webmaster was trying out some new things.

The Pisces Horoscope sub-domain looked more modernised but the header was equally inconsistent. Clicking on different links within the sub-domain brought me to a different world again. I felt like I was alice lost in the wonderland.


fig 4. A brand new modelling website

It looked like findyourfate branched out into modelling as well. I was not sure whether it was a good idea because I could not relate divination and astrology to modelling. My mood was changing so rapidly on every pages that I clicked and I was starting to get more and more confused.

A quote from http://www.findyourfate.com/model/

“findyourfate.com is not just a fashion portal.Its realms extend much beyond its presence on the networked world.”

I also saw many other interesting sections like matrimonials, and even dating. Perhaps findyourfate.com moved too far away from their primary business?

Conclusion

findyourfate.com scores very highly in content and I am sure spiritual people would find the “main site” interesting.

The problem I had was the lack of focus in the topics. When venturing into not so related business like dating, modelling and gem shopping, it might be better to branch them out as a different business (different domain names) and not try to relate them to findyourfate. I was totally lost with the different navigation system and layout of the subsites eventhough some of the subsites looked much better than the findyourfate.com main site.

Just like some of the subpages, findyourfate should use a modern content management system to provide more consistency in terms of layout which would also improve usability.

Enjoy Your Life in Berkshire and Buckinghamshire

berksandbucks is an online lifestyle magazine about everything in berkshire and buckinghamshire. The portal has many great articles on food, events, properties and competitions – You name it, you get it. The website is a subsite of greatbritishlife.co.uk and share the same layout and colors.


fig1. blurry logo?

upon first visit, I was struck by the logo on the top left corner. The words "Buckinghamshire Life" on the logo was hard to read. The homepage looked really busy with a lot of events happening. I could not control myself not to look at the pictures in the content area which seemed to be interesting.

The general layout looked quite standard and professional. I couldn’t find any broken links and all urls were nicely structured. Adverts were nicely placed on the top, right column and footer. The cms seemed to be doing its job well quite well.

Although the navigation menu was well structured, the content was quite overwhelming. The top navigation was 2-tier and there was also the left menu to look at. Where should I start? I thought there were some redundant sections. For example, there was a "blogs" and "forum" in every top category like property, style, family, magazine…etc and also a "community blog" and a "community forum" on the left menu. How about removing blogs and forum from the top menu?


fig 2. About us in a weird category

I wanted to find out what the website was about but couldn’t find "about us". I eventually found it under magazine. I thought that was a weird category to be in as I expected it to be a category by itself. Putting it in the footer might be a better idea?


fig 3. Is she Mary, Tessa or Sara?

The about us page was informational. The was a blurry picture of a lady (Is she the owner?) which was great but I didn’t have a clue who she might be until I moused over a "get in touch" link. I eventually saw a link "click here to view the full list of contacts" which led me to nowhere as well. A bit more information or clearer picture of the team behind the website would be great.


fig 4. Language translation

I particularly liked the "translate" feature although I don’t believe there are any real good translators out there. The translation was slow (probably using a third party system). Nevertheless, it was a good effort to be multi-lingual.


fig 5. firebug showed that top flash banner didn’t stop loading

It looked like the top banner was keeping the page busy by constantly downloading new flash images. It might be interesting to keep the user busy with changing top banner – an interesting concept but I was not sure I liked that.


fig6. Nice detail article page

Most of the articles were all laid out nicely. I was impressed at the quality of images with the main content. The Bershire Food and Drink category looked really cool and interesting. Looking at the rating and comments, there didn’t seem to be a lot of user participation. This might be another area for the author to look at – how to engage their users in their website activities? How about running a competition that get people to use the website?

Conclusion

Berkshire and Buckinghamshire Life is a website very rich in content. Most images looked great and all content seemed to be carefully edited. This is all well and good but I still feel that it is too overwhelming for most people and that the content could be better categorised to improve usability.

The editors might want to sit down and re-plan the site navigational structure, possibly streamlining the number categories in the website. I would start looking at some popular news portal bbc.co.uk and wn.com as a start.

Antique Books

Golden Books Group is a UK company that buys and sells antique or rare leather bound books. goldentbooksgroup.co.uk is their online platform to showcase their company and sell their books to the world.

Form and Function

As compared to other modern day e-commerce websites, goldenbooksgroup.co.uk appeared to be a bit boring although this could be due to the nature of the business. The standard 3 column layout was pretty consistent throughout all the pages. I noticed the left and right menu had fixed width with the centre column stretchable. This might look OK if users are on 800 x 600 resolution but nowadays, people with high resolution screen might not find the layout appealing, ie there would be too much white space in the centre column.

From the usability point of view, it took me a few clicks to browse to the products I want. Unless people know what they want, trying to navigate via the categories can be confusing. I suggest less words but more visuals. Having the categories as graphics in the centre content area in the home page might help navigation – or perhaps showcase some books directly on the home page so that user can have a one click checkout.


fig 1. Category landing page is a bit confusing.

I found the category header image in the products page a bit confusing. Say I wanted to order the angela brazil collection (see fig 1), why give me the option to enlarge the header image? How is that image related to the brazil collection? It took me a few seconds to see the “add to shopping cart” button mainly because the button and the quantity box was in a different location.


fig 2. Books detail page looks better.

Clicking on the Angela Brazil collection of 30 Decorative Girls Book Library led me to another detail page (fig 2) which was making more sense. I was now able to view a larger image of the product I want, change the quantity and add the library to the shopping cart or wish list.


fig 3. Why show off the accreditations in the headers?

I was not sure why the author chose to include logos of various memberships in the page header. Perhaps they were there to give users some confidence when purchasing from the site? Putting them under about us should be enough?

Conclusion

In conclusion, goldenbooksgroup.co.uk has great content but lacks the “black hole effect”. As such, people who know what they are looking for may stay but passerbys may not stay for long. I believed another reason why the whole site looked a bit plain was because there wasn’t much activity going on. I would suggest running some marketing campaigns, promotions, discount vouchers, mailing lists..etc. Although the graphics had been optimised, most of them looked a bit low quality and dark to me. Perhaps someone could take pictures of all the books again with better lighting.

I am sure there are many ways to make the site more interesting and usable and I looked forward to see some great change. One good example of a site that runs a similar business is http://www.baumanrarebooks.com

Photographs of Galway City

www.galwayphotographssite.com is a website displaying selection of photographs taken in Galway city and county including Connemara, hospital Galway Bay and Lough Corrib in Ireland. At a glance, sales the site seems like a bait to other monetizing channels like zazzle, medicine adsense and amazon.

The whole website looks like a quick mash up so as to start monetizing from various channels as quickly as possible. The layout is simple – 2 column with adverts and links on the left and pictures as the main content in the center. There is minimal content and not much of design going on – The title is just a text.

The images are really big in the home page. Many of them are more than 200kb and they should be trimmed down to thumbnail versions. There are also advertisements in a lot of pages, luring users to click on them. I feel that the advertisements actually killed the site. To actually get users to click on the links, the author has to consider the question of how to make the users stay longer. There are some nice photographs in the site, redesigning the site and placing them in strategic positions might actually encourage more click throughs.

The about us page tells the reader about other sites containing their photographs and it is kind of confusing for me. A lot more work can also be done on the contact us page.

Conclusion

I really hope to see more content. The images are nice but more words would be cool. I hope the author can put more effort on the design and layout. There are also too much advertising. The author should provide more valuable content and make the user stay longer.

Digital Art to Go!

Introduction

With a tagline of “digital art to go”, Zymmetrical is a website where digital art can be bought and sold. Photos, graphics, microstock, fonts and videos can be sold for 50% commission (not a bad commission for microstock or amateur contributers looking to sell their personal stuff).

Form

It takes awhile to load, but the Zymmetrical website is interestingly simple and quite modern looking. The colours used are classical greys and blacks with a hint of colour and the fonts vary within a modicrum of small. On the home page, additional touches such as the multicoloured arrows under “buy art” and the different font sizes which wobble under mouseover under “popular tags” add a bit of uniqueness to the website, as does the small person silhouette in reference to the artists.

Function

With simple menus and easy-to-find sections, navigation on Zymmetrical is quite easy to the user and a good example of what can be achieved with quite a few links placed in the correct areas. I noticed that some tabs on the header has different mouseover and mouseclick as compared to how the rest of the site functions. This may confuse the viewer and I would recommend staying with the same format of mouseover or mouseclick for navigational purposes. Perhaps the designer is still updating the site?

Loading time is a little slow on my machine, not sure if it is due to the complex code or galleries of images. However, this is normal for websites of art and photography, so it is not a huge concern. Clicking on an item brings up pricing, dimensions and file size so this works well; clicking on an artist brings up a search box which could be a bit confusing to someone who wanted to view an artist’s profile. The mouseovers in the galleries (for example the zooming on photos) doesn’t work fast – you need to be on the page for awhile for it to load correctly and this could be an issue for people who click through looking for a stock image photo they want to use in a hurry.

There seems to be a fair few images on the site, but the artist profiles are sadly lacking in photos and there is generally not much information in their profiles. I hope the database will grow as time passes – giving good incentives to artist to sell stock images through their site might work? May I also suggest making the profile submission compulsory when signing up? PageRank is good and there seems to be good stock photos and art available for graphic design in the microstock site. Considering the website is listed as Copyright 2007, I’d say overall it is off to a good start.

Conclusion

A cute and simple site to visit, just needs a few tweaks to get it really user-friendly. The design and concept is excellent and is a good resource for graphic design. I feel that http://www.zymmetrical.com is a candidate for Sitecritic.net Awards if it has abit more content. I am always excited by websites which offer genuine opportunities to the web audience. You may support them by visiting their buy stock images page. Finally, I look forward to seeing how this microstock website develops over time.

www.zymmetrical.com.1
Multicoloured arrows add interest

www.zymmetrical.com.2
Mouseover images helps viewing

www.zymmetrical.com.3
Detail for purchasing product

Route 5: The Road Less Travelled

Introduction

Route 5 is a website containing a gallery of American crafts for sale, sick with over 500 artisans contributing high quality contemporary crafts made of pottery, for sale glass, recipe metal and other materials. As an online shop, Route 5 is getting there, but needs more work to make it truly a unique and professional experience.

Form and Function

The opening page contains some interesting images and features the main categories of artwork (eg, Jewellery, Pottery, Home Décor etc). The images used for the product categories are excellent and well presented, however the textual links above the categories detract from the overall page, especially as they are in a blue colour, which doesn’t suit the natural tones of the page. The NEW featured products are listed below the product categories and unfortunately, can’t be viewed directly when the page is first opened – maybe moving these featured products up to the top might draw more attention to them?

The right menu bar seems well placed in relation to design and is a refreshing change from the usual left/top menu bar in most websites. It was good to see that the designer took time to check that the right menu bar moved appropriately when the page was viewed in 600 x 800 browser resolution. The menu bar itself is very simple and easy to navigate, but I felt that the font was a bit ordinary looking and could be spruced up. Maybe the blue product category text and the menu bar text could be changed to a more attractive font group and made a little smaller to enhance the images and other content on the page. I also feel that containing the product categories in a subtle box might help to give the impression of an online store when first entering the site.

On visiting the other pages, I was disappointed to see that the background colour, fonts, menu bar and design changed, lessening the consistency of the site. It would be a good idea to repeat the first page design (including fonts, menu bar and background) throughout the site to maintain consistency and give it that “natural” feel. The images on the product pages are once again excellent, but the loading time can be a bit slow. With the inclusion of buttons on these pages but not on the first page, maybe the buttons could be replaced with a simple textual link (like the first page) to speed up loading time, as well as optimising the images to smaller file sizes.

Not all of the products pictured have a link to “add to your shopping cart” and I would recommend that this be added to all, to ensure that as many as possible are sold. For example, even though I know that the Kevin Dyer Framed Wall Art 24″ x 24″ is a one-of-a-kind that isn’t for sale, maybe this needs to be separated from the online store as some customers might want to purchase it (maybe a craft gallery could help?)

Since there is a “Specials” section, I would mention this on the first page to attract attention – this would work best if a link to it was put near the “Featured Products” at the top of the page.

It’s good to see some security measures in place for the e-cart. I had a trial go at some online shopping and was disappointed that the only method of payment was a credit card. As a potential international buyer, there was no currency conversion or relevant shipping either, so I would not be able to purchase from the site. More attention needs to be given to different forms of payment and international customers.

Conclusion

Overall, the designer has tried hard to add uniqueness to Route 5 and I commend them on coming up with something that instantly communicates the “natural feel” of handmade products to their audience. However, while all the images look terrific, the pages are inconsistent with fonts, menu bars, buttons, backgrounds and layout and this does not portray the professional edge needed for the “trustworthy” quality of an e-shop.

www.route5.com.1

www.route5.com.2

www.route5.com.3

www.route5.com.4

Verbal Assurance is never enough as a Web Design Firm

Introduction

Shackelford Web Design is a web design firm based in New York & New Jersey. The things that spice up my curiousity is that they have totally no visual marketing features in their website. Things like the usual portfolio of works, client listing are all missing. However, we can see a lot of written assurance in the whole website promising this and that. Is that really effective? We shall take a look.

Function and Function

Have you came across a Web Design firm that does not promote their quality of works and have totally no samples of their previously successful clients? I bet you haven’t seen one or maybe, not that often.

Shackelford Web Design’s company website had their focuses on writing how well they can provide their service to the clients. With a clean and direct layout, they attempt to convince potential clients to trust in their capabilities without showing any previous samples openly on their website. Perhaps this is one way of protecting their previous clients or it has been restricted to do so by their clients.

The Good:
On first entrance to the website, I was presented with a fast loading clean site, and easy to read content. Indeed, the site design has a perfect layout and usage of CSS and colors. Its professional and it presents everything so clear that you feel so comfortable to navigate on their site.

Relevant information like services is being linked from within the body text. The links design and naming conventions are perfectly clear. Each section is separated by a small thin line of color code, e.g. Services are in green, Pricing is in Yellow. Subtle enhancements like this are pleasing to the users eyes. Also, a simple header graphic was used to differentiate each section.

On rollover of each links, you notice a slight hover effect of increasing the text size. This is one of the ways to show the site being responsive to the user’s mouse interaction, and also a good usage of CSS.

There is also a clear footer links that adds to site usability In all the section, I can noticed one obvious tactic they used is to be as DIRECT as possible. Most of their contents are in short, simple paragraphs that talks straight to the point. This is a good example of copy writing for the web.

Can Be Better:
Under the category of “Successful Design”, Shackelford should have added some successful samples done by them. It should not have just text on how successful their works can be. Quality assurance should include visual assurance too.

At the very top of the website, there is no need for the words “New Jersey Web Design and New York Web Design”. It seems unneccessary but it could be there for seo purposes. The logo on the top left, should also be linked to the home page as most users tend to click on the logo to return back to the index.

Conclusion

Overall, as a consumer, I will not be attracted to the verbal assurance given by Shackelford. Although the website is done pretty well, it does not have any marketing value to their services. Maybe the website is quite new and I believe only as time goes by, they will show more samples of what they can do.

www.shackelfordwebdesign.com.1

www.shackelfordwebdesign.com.2

www.shackelfordwebdesign.com.3

www.shackelfordwebdesign.com.4

Everyone loves a good gripe…

Introduction

The Weekly Gripe website offers a platform for discussion about problems, complaints and ‘gripes’. It offers that place to just ‘publicly’ get it off your chest, without having to stand up and do it.

Form and Function

Upon landing on the main page of The Weekly Gripe, it reminded me of a newspaper since the first place my eye was drawn was to the logo. While I do not feel that the logo relays the idea behind the purpose of the site, I WAS drawn to it and was not turned off. It is just ok for me.

My eye passed the logo and went immediately to the navigation. That is good (tell me where I am, and show me the way to go) – I give high marks for clear navigation – ‘my gripe’ would be that Sitemap and Home should be at the end of the list, moving Your Gripe and Browse to the first two slots. For usability it makes more sense to get users right into either posting or looking.

The h1 tag used as the lead in, styled as it is, should either have the underline removed or be linked to the ‘your gripe’ page, since underlines to most users means links, and especially set at that size. I personally would link it, as it just adds another entrance to the purpose – to post a gripe.

The layout of the site I found very usable, easy and effortless. Good job to the designer in that. However, I am a real stickler for web standards, and this one is not compliant. I was actually disapointed to see that.

Aesthetically, I am not fond of the comment graphics – too much shadow for my liking, and I dislike the comment submission button. It does not match the style of the rest of the site (bevel and font).

Conclusion

This site has a great deal of potential if restructured a bit, especially since my PR checker says Google is it’s friend. That should be really looked at… I consider a switch to standards, add in some of the social-networking tools available to give it more “passibility”.

www.weeklygripe.co.uk.1

www.weeklygripe.co.uk.2