Internet Application Dev Lectures   <- IAD Lectures   <-  Sean Forman   <-  You Are Here

  

• Sean Forman
  Dept. of Mathematics and Computer Science
  Saint Joseph's University
  Philadelphia, PA

• Topic: Usability, Part I

• Props needed:

• Note: this lecture may contain freely-available, copyrighted material from Internet Application workbook by Philip Greenspun, Eve Andersson, and Andrew Grumet.

• Note: this lecture may contain material from books listed in the lecture reading list.

What is usability?

• The ease with which users can complete tasks

• The enjoyment the users find when completing those tasks

• Making problems easier to solve

• Don't Make the Me Think!

Why is it important?

• Improved usability leads to reduced customer service calls.

• Improved usability leads to improved word of mouth.

• Improved usability leads to customers who return.

• Dramatic improvements in usability can lead to billions of dollars: AOL IM, Napster, Palm Pilot, Mosaic

How does web usability differ from GUI usability?

• In GUI design, the user buys the product prior to experiencing it. Once purchased, there is no competition.

• In GUI design, the designer controls nearly all aspects of the design. Check the shrinkwrapped box for the minimum requirements.

• In GUI design, manuals included with software.

• In web design, user tries the site before committing to it.

• In web design, the user does not read the manual.

• In web design, the user can have a huge variety of equipment.

• In web design, competition is fierce.

• If VCR's were web sites, everyone would be able to set the clock on their VCR because no one would buy the other VCR's.

Is this art?

• Has more to do with engineering. Solving problems for the user.

• There are rules. Rules can be broken for a very good reason.

• Best place to find rules: useit.com, Amazon.com: Designing Web Usability

Fundamental Mistakes

• Designing as if the web site were a brochure

• Designing as if the web site were an internal project

• Designing as if the web site were a mirror of company infrastructure

• Designing as if the web site were a design contest

• Designing as if the web site were a magazine

• Designing as if the web site were not connected to the internet

Screen Real Estate

• Content should be maximized on the screen.

• Navigation, graphics, branding, advertising, search, etc. may be necessary, but should be minimized.

• Some pages will be navigational and some destination. Destination pages should be 50-80% content.

• Slate.com
• Yahoo!Map
• Barnes and Noble

Designing across platforms, resolutions and browsers

• You have NO control over how the user's equipment. A useful tool for testing different size displays.. Try Slate.com at 1152 x 768.

• Page designs should flow for various sizes. Visit this site and vary the size of the browser window.

• This is achieved by not using fixed-width tables. Place colored navigation elements into tables with the same background color.

• You have no control as to how users find your site. A random search

• You must maintain page-to-page consistency, so that users can
  1. Instantly, recognize where they are.

  2. Instantly, see where they can go.

  3. Imagine time travel movies. Traveler is always disoriented when they first arrive. How can you orient a new visitor?

• You have no control over the platform used: web-enabled phones, (vision phones are the newest thing), palm pilots, super-sized browsers, text-based browsers.

• One way to handle this is to separate content and presentation. Cascading Style Sheets attempt to separate the content and the presentation, so different style sheets could be used to design for separate platforms.

• In addition different browsers have some unique tags and render some designs differently.

• Prior to launch test over different platforms (Windows, Mac, Linux, Unix) and different resolutions, and different browsers (mozilla, IE, etc.).

• A package like VMware can allow easy testing across different platforms.

• BrowserCam.com allows you to view your site on a dozens of different browsers and platforms.

Response Times

• From Robert Miller (1968), reacting within 0.1 seconds will make the user feel the system reacts instantaneously, within 1 second for the user's thoughts to remain uninterrupted, and within 10 seconds to keep the user focused on the dialogue at hand. Over ten seconds and the user will drift back and forth from the discussion.

• Can be checked with some HTML Validators. A bigger list. You can find others all over.

• Users don't care why the web page is slow. They just know that it is slow. If you have slow response times figure out why and fix it.

• Large pages cost more. Baseball-Reference.com home page is downloaded 25,000 times a day. It is currently 12.5 KB. If I made that 50KB it would cost me an extra $4/day in bandwidth.

• Speed must be an overriding concern. Be creative. Colored table cells, re-use images so that they will be cached. Use only a few colors in images. PhotoShop and other tools will allow you to optimize image sizes.

• If you have a bigger page (content may be big, large image), then make sure than the screen can render before all of the elements are downloaded.
  1. Provide width and height tags for all images

  2. Do not place the entire page into a single table.

  3. Place top-level info into a separate table that will load first.

• Just for fun: the 5k org design competition. Sample entry

Linking

• Types of links
  1. Structural Navigation: Homepage

  2. Associative: Information within content

  3. See also:

• Use standard links colors. Have we visited all the links on this page?

• Users learn how to surf on other sites.

• Utilize internet-wide standards. The upper left corner of every page should contain a logo (often a smaller version of front page) that is a link to the home page. Do not go against conventions.

• The blinker system on current cars may or may not be the absolute best, but every new car copies what has been done previously.

• On less serious conventions, you can make changes (like windshield wiper controls).

• Avoid ``Click Here'' links. Make the link's text descriptive.

• Compare For the previous Best Picture Oscar winners, click here with Previous Best Picture Oscar winners.

• Some browsers allow a TITLE=description parameter in a A HREF tag. For an example

• Text Links are obviously clickable. Images are not always obviously clickable. What exactly is clickable here?. Is there a good reason to remove the underlines?

• Somehow identify outbound links. Failure to do so will disorient the user.

• Use the same name to refer to links on different pages. Don't change from ``Log out'' to ``Logout'' to ``Sign Out''.

• Do nothing to jeopardize incoming links. Encourage deep linking with simple URL's. Amazon does this poorly

• Other nice features: Send an e-mail to another user with this link and printer friendly links.

Content Design

• Users are on information finding missions.

• They do not want anything that obscures information.

• SJU Academic Affairs. Why do we need a welcome message? Has anyone ever read it? When was it last updated?

• People do not read on the web. People do not read on the web. People do not read on the web.

• They scan.

• Text should be shorter. Omit useless words. Break things up into small easy to digest parts. Highlighting or bold-faced letters should be used appropriately.

• A movie review in the paper works fine (because people read the paper). On the web, it should be re-packaged.

• Have some attitude and humor. If you are knowledgeable in the area, you will be able to add some interesting customizations to the area. See goofs at IMDB.

• Error messages must be informative. You can anticipate some user errors. Check your server logs for errors. Recurring errors can be corrected through server customization (htaccess in apache) or better design. Example at BR.com (replace PHI in URL with phi). Search for ``Yaz''.

• If you have a choice between a design that forces scrolling and one that doesn't. Use the one that doesn't. Scrolling keeps you from presenting all options at once.

Page titles

• Search engines will index your pages using page titles. History lists will use page titles. Bookmarks use page titles.

• Make them descriptive.

• Front page: Name of site - tagline.

• Interior page: Name of Page - Site Name

• Headlines should be short and descriptive. Should be re-used when linking.

• Users will resent being tricked into clicking on something. Users may not click on something they aren't sure will interest them.

• Bad Headline: A Great Review of a New Car

• Good Headline: Donald Norman Reviews the Powerful Volkswagon Jetta

Readibility

• Make sure text is easy to read. High contrast between background and text. Easier to read.

• Do not force users into a certain font or size. Some people may prefer large or small fonts.

• Typography is a specialized and well-studied field, so be careful when breaking conventions.

Multimedia, Animation, etc.

• Users may be hesitant to download new plugins or programs to their computers. Fear of viruses, etc.

• Stay a year or two behind the technology curve. Do not implement the latest and greatest technologies if it is integral to the use of the page. If people have to use the latest version of flash to surf your site, most will not surf your site.

• Tell people what types of files they will be downloading, how big they are (if bigger than 100KB or so), and how long the clip is for.

• Animation is hard to use well. Users now have ad banner blindness that most people will instinctively ignore anything on the screen that moves.

• Well thought out animations can be very helpful.

• Video has obvious uses like movie trailers, and previews. It should be used in very short snippets. The web is an active medium unlike TV, so you shouldn't force your users to sit and watch.

• Also, the video quality is so poor that it can be painful to watch. You may be better off digitizing it as an mpeg and allowing the user to download it to their browser rather than watching it as streaming media.

• Audio interfaces can be a nice supplement to visual interfaces.

• Efforts to represent 3-D spaces in two dimensions have typically failed.

Utilize Internet Conventions

• Logo in upper right-hand corner is a link to home page.

• Search is displayed prominently near the top of the site.

• Corporate info, jobs, etc. appears at the bottom of the page.

• Navigation is typically along the left and the top of the page.

• Terms used by other sites should be maintained. Shopping Cart, Your Account, Help, Search, etc.

Next Time

• Site-wide design

• Homepages

• Navigation

• Use of Metaphor

• Search

Reading List

• Designing Homepage Usability by Jakob Nielsen

• Design of Everyday Things by Donald Norman

• Homepage Usability by Jakob Nielsen and Marie Tahir

• Cluetrain Manifesto by Doc Searls, et al

• Don't Make me Think! by Steve Krug

About this document ...

This document was generated using the LaTeX2HTML translator Version 2002 (1.62)

Copyright © 1993, 1994, 1995, 1996, Nikos Drakos, Computer Based Learning Unit, University of Leeds.
Copyright © 1997, 1998, 1999, Ross Moore, Mathematics Department, Macquarie University, Sydney.

The command line arguments were:
latex2html lecture_10 -split 0 -init_file ./.latex2html-initOne -t 'Usability, Part I '

The translation was initiated by Sean Forman on 2005-09-30