Monday, 13 February 2012

Web Designs: Good vs Bad

In this post, we take a look at how some of the design guidelines discussed in lecture 2 can be applied to web design. Here is a comparison of how two websites fare with respect to these guidelines:

Bad: (Fig. 1) Good: (Fig. 4)
Visibility - No distinct functions can be identified.
- Links are not properly organized.
- Links are cluttered and fighting to attract attention.
- Functions can be easily identified.
- Search box is prominent (since it is a search engine).
- Sections are well categorized and organized (Fig. 5).
- Tabs bar helps in organizing links.
Consistency - Fonts are differently sized.
- Inconsistent colour scheme.
- Headings and contents appropriately sized (headings larger than contents or details).
- Font sizes are consistent.
- Sections are well-aligned.
- Tabs bar stays at the top of every page.
Familiarity - No proper metaphor for the page, links are just placed haphazardly.
- Users have trouble finding what to look for and where to start.
- Intuitive buttons.
Affordance - Unconventional design that confuses users.- Conventional designs that make it easy for the user to navigate.
- Layouts for different sections are consistent, so users can get used to it quickly.
Navigation - Easy to understand where some links lead to but usually not well executed (telling users where links lead to in long cumbersome sentences).
- Destination of other links are ambiguous.
- Website has no focus.
- Search bars can be found at the top and the bottom of the page, so users who read to the bottom of a page will not have to scroll all the way back to the top to use it.
- Tabs are highlighted for the sections being visited, so users know which page they are at and can navigate accordingly.
Flexibility - Gives user a choice of an “easier” navigation alternative, but it is not a huge improvement over the classic view.
- No scrollbar in the alternate interface.
- Users can select the home page for the country they reside in (Fig. 6).
Style - No central theme.
- Supposed to be a bridal website but has many unrelated contents.
- e.g. There is a link to an Apple Pie recipe on the homepage (Fig. 2).
- e.g. More unrelated pictures of fishes further down the homepage (Fig. 3).
- Color scheme is appealing.
- Minimal variations of colour which makes outlook of the page easy on the eye.
- Simple yet elegant design.
Recovery - No. Just no.
- Horrible website.
- Logo of the homepage appears in every section of the site, allowing user to return to the homepage from any location in the site.

WARNING: The bad design may give you a shock or a heart attack... ~+**V8**+~

Fig. 1. Home page of Yvette's Bridal Formal

Fig. 2. Random Apple Pie recipe

Fig.3. Aww cute fishes... NOT

Fig. 4. Homepage of xinmsn

Fig. 5. Entertainment section of xinmsn

Fig. 6. msn Worldwide for users to select their countries

1 comment:

  1. good comparison between the two examples! Would be useful if you have a list of what makes a good web design and what makes a bad one! nice examples(: