Tuesday, October 26, 2010

Website Usability Review

My class has taken a break from the hard-nosed, numerical, inorganic blob that is software engineering, and focused on a much subtler topic: Website Utility. I say subtle, as various authorities each have their own view of what a well-designed website should be.  After pouring over dozens of "top-ten" lists, I have simplified them into a list of frequently occurring topics.

The Common Law of Web Design
  • Important information is readily displayed.
    • Make sure it's useful and pertinent
  • Navigation is easy to use and understand.
    • Don't do anything tricky.
  • The page should be easy to read.
    • Use less text.
    • The use of white space should focus the user's attention.
    • Avoid unnecessary noise (flash,animations,ads,music).
  • Appease the user.
    • Don't open links in a new window
    • Don't use fixed text sizes
To simplify the above list,
Web pages should be targeted toward their audience and deliver information quickly and simply
Examples:

The Good:

http://www.pixelumbrella.com/
The online portfolio of Nick Robinson, a web designer and developer.  Because the products he develops are largely visual, pictures are better suited than words to show off his talent.  The page immediately points out two things, that Nick Designs things, and Makes Websites.  Navigation is inherently simple, click the picture, and you go to the page.  This is a very clean, elegant and effective website.

http://www.hawaii.edu/parking/
The University of Hawaii's parking website.  A dark green header tells users where they are, and ensures them that this is an official page.  A light green background offsets the navigation bar from the rest of the page, while bold text and simple rollover animations tell users that these are links.  Bright yellow icons and short announcements separated by white space draw the users attention from one item to the next.  This is another very clean, simple, and informative page.

The Bad:
http://art.yale.edu/
Yale University's School of Art website.  After landing on this page, users might wonder what just happened.  The lack of any sort of header makes a user wonder where they are, and what organisation this page is associated with.  The noisy background makes it very difficult to differentiate the actual page content.  Everything just blends together into a mish-mash of flowing orange lines and plain text.  It's difficult to tell, but the plain text that camouflages itself on the left is actually the navigation bar.  The rollover animation is the only indicator that this isn't just a bunch of text, or a part of the background.  If I were an unsuspecting visitor, I would leave the page immediately.

http://www.usabilitynet.org/home.htm
Supposedly a site sponsored by the European Union to promote "usability and user-centered design."  This page definitely isn't user friendly.  Curiously, this page has a normal navigation bar, but then chooses to expand all of it's navigation tabs, enumerating every possible link on one page.  Users don't like having to hunt and search for the link they want.  Topics should be logically arranged, so that the list of available choices the user has at any given time is very short.  The European Union might want to re-think this page.

No comments:

Post a Comment