CS3240 Human-Computer Interaction: 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: yvettesbridalformal.com (Fig. 1)	Good: xinmsn.com (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.