Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Testing your Websites for Usability

   

1. Using a re-direct link action to automatically
re-direct web users from an old URL to an new URL

  1. Here is the code for this aciton, which should
    be placed in the head tag of the weblink that
    you want to re-direct:

    <META HTTP-EQUIV="Refresh"
    CONTENT="0;URL=http://artinbethany.topcities.com/">

  2. See an example of two webpages that have a
    simple re-direct on them:

    http://www.colorado.edu/AmStudies/index.html

    and

    http://www.colorado.edu/AmStudies/index.htm

    3. You can change the time the browser pauses
    before re-directing the link by setting content
    to equal 5, which means five seconds.

  3. Do NOT wrap this code, very few browsers can
    deal with that. Do not wrap this code like this:

    <META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://artinbethany.topcities.com/">

    Mainly because browsers cannot deal with whitespace
    of any sort inside the CONTENT attribute, which
    would include the space shown before the end of
    the string. So the above should not work except in
    ideal conditions, while this works all the time:

    <META HTTP-EQUIV="Refresh"
    CONTENT="0;URL=http://artinbethany.topcities.com/">

2. Adding video to Flash movies

  1. See my example of a simple Flash movie that
    contains Mpeg video that I shot using my
    digital camera: Flashmovie
  2. Notice that I have put three movies in this
    Flash movie.
  3. I added the movies by first taking out the
    sound that went with the movies. I want
    to put the sound on another layer in
    my Flash movie.
  4. Notice that I can make these movies
    symbols and movie clips and fully
    integrate them into my Flash movie
  5. However, Mpeg movies are very big. Be
    careful about putting too long and too
    big of a movie in your Flash movie.
  6. When you add the Mpeg movie into the Flash
    movie using the "File menu" and selecting
    "import," Flash gives you the option to
    reduce the quality and size of your movie
    so that it won't make such a big file.
  7. Notice that I made this movie an Mpeg movie
    not a quicktime movie. You can run the movie
    in Flash using quicktime, but this makes the
    Flash movie a little clunky and dependent on
    the Quicktime player.
  8. On Friday, I will demo a Flash website using
    simple mpeg movies to add interest and
    action to a Flash movie.

3.  Two good books on Designing Web Usability

  1. Jakob Nielsen, Designing Web Usability: 
    The Practice of Simplicity,
    (New York: New Riders, 2000).

  2. Steve Krug, Don't Make me Think: 
    A Commonsense Approach to Web Usability,
    (New York: New Riders, 2000).

  3. Jakob Nielsen and Marie Tahir, Homepage
    Usability: 50 Websites Deconstructed,
    (Indianapolis, IN: New Riders Publishing, 2002)

2. What is Web Usability?

  1. Jakob Nielsen:

    Useit.com (Usable Information Technology)

    "Usability rules the Web....If the customer can't
       find a product, then he or she will not buy it."

    "The web is the ultimate customer-empowering
       environment.  He or she who clicks the mouse
       gets to decide everything.  It is so easy to go
       elsewhere; all the competitors in the world
       are but a mouseclick away."

    "The main goal of most web projects should be
       to make it easy for customers to perform 
       useful tasks and satisfy their needs."


What are the top four reasons users come to a site?
This can be summarized by the acronym "Home":

1) High-quality content
2) Often updated
3) Minimal download time
4) Ease of use


"The Ultimate test of web usability is to
 try to download and navigate a website 
 using or 28K or 56K modem.  It can be
 really frustrating waiting more than
 30 or 40 seconds for a webpage to
 download."
                  
Chris Lewis


3.  Jakob Nielsen on Web Usability Surprises for Web Designers

  1. Jakob Nielsen's Useit.com

  2. Got usability- Talking with Jakob Nielsen

  3. Nielsen- Print design vs. Web design

  4. Simplicity is priceless

  5. Building Really Annoying Websites.com

  6. Webpagesthatsuck.com

  7. Top Ten Web Design Tips

  8. As Simple as Possible
  9. All Things Web- The Usable Web
  10. The Usable Web
  11. User Testing Techniques: A Checklist

4.  Basic Web Usability Principles

  1. Example of a "Suckie" Flash website
  2. Examples of 7 Suckie Websites
  3. Example of Simple Flash movie banner ad
  4. Usability comes first even if a site is not trying
    to sell anything.  Users won't return to sites that
    are too difficult to use and don't provide useful 
    content.

  5. Remember that sites are "naturally selected" by
    a user's mouseclick.  The higher a site's usability,
    the more likely users will return to it.

  6. This Design Darwinism will lead ultimately to the
    survival of the most usable sites High
    usability means more users and more sales,
    and thus makes sites thrive.

  7. You should design for all screen resolutionsDesign
    resolution-independent pages that adapt to whatever
    size screen they are displayed on.
    This can be done
    with variable-length tables.

  8. Users have different preferences with respect to font
    size, so ensure that your designs work well with both
    larger and smaller fonts than your personal
    preferences.

  9. Design for "late web adopters" and novice users. Don't
    assume that your users are like you and are 
    "early adopters."


  10. Design for the lower common denominator, not
    the lowest common denominator. 
    Most major
    websites design for the lower common denominator.

  11. Hold off for a one-year waiting period before you use
    the latest technologies on your website. 
    If you use
    new technologies, make sure to provide your
    content in an alternative format for the sake of
    users who have not yet upgraded and, therefore,
    cannot use the newest and latest feature.

  12. Make sure pages download fast.  The minimum goal
    is to get pages to users in no more than 10 seconds
    ,
    because that's the limit of people's ability to keep
    their attention focused while waiting.

  13. Graphics should be kept to a minimum, and multimedia
    effects should be used only when they truly add to
    the user's understanding of the information. Remove
    graphics; increase traffic.

  14. Be sure that your pages include Width and Height
    attributes on all images and table columns.
      The more
    information a browser has the faster it can render a page.

  15. Links to a directory should include the final slash in
    the URL when embedded in web pages
    .   The slash
    should be left out when writing the URL for human
    consumption. This decreases download time:

     For example:   http://www.useit.com/alertbox/

  16. Use link titles to help users predict what will happen if
    they follow a link.
      Link titles should be in simple, plain
    text that describes the destination of and the kind of
    information available in a link. Link titles should rarely
    ever exceed 60 characters. For example: Jakob Nielsen.

    <A HREF="http://www.useit.com/jakob/
       TITLE="Author biography"> Jakob Nielsen</A>

  17. Make sure that you retain the standard color coding for
    links
    : blue for unopened links and purple or red for
    opened links.  If you use non-standard link colors,
    some users can't determine which sites they have
    visited and which sites they haven't visited.

  18. A firm rule for home page design is "more is less":
    the more buttons you put on the home page, the less
    users are capable of quickly finding the information
    they need.

  19. If you insist on using frames, then at least provide a
    non-framed version for the many users who prefer
    to avoid frames.  

  20. If you use frames, make the frame borders invisible.
    Users don't need to know how the design is implemented.
    The design either works or it doesn't.

  21. One of the main goals of a great website is to establish
    your credibility as a professionally run operation. Don't
    fill your page with amateur junk like heavy backgrounds
    and flashy animated gifs.

  22. Because a lot of users print out webpages that they want
    to read carefully, make sure you provide printable
    versions of any long documents
    .  Optimize the layout for
    easy printing by making it no bigger than 8.5  by 11 inches.

  23. Simplicity should be the goal of page design.  Users come
    to a site not to focus on its design but on its content.

  24. Remember, going to a website is an experience.  If your
    site is hard to use and users have a bad experience, then
    users won't be back.

  25. Make sure that all pages work on two-year-old browsers
    and two-year-old versions of all plug-ins and other
    software.

  26. Web users scan text and pick out keywords, sentences,
    and paragraphs of interest while skipping over those
    parts of the text they care less about.

  27. Be succinct.  Write for scannability.  Use short
    paragraphs, subheadings, and bulleted lists. Use
    links to split up long information into multiple pages.

  28. Start each page with a conclusion.  Present the most
    important material up front, using the so-called
    inverted pyramid principle.  Readers should be able
    to tell in a glance what the page is about and what
    it can do for them.

  29. Use "pull quotes" to add visual interest to the page 
    and help users scan the page to pick out the parts
    of the story that may interest them. 

  30.  Use hyperlinks to point to secondary arguments or in-depth examples.  Remember, chunk long articles into shorter hypertext pages.

  31. For people using search engines, your page only exists
    in the form of a title.  Unless the title makes it absolutely 
    clear what the page is about, users will never open it.

  32. Titles do not need to be grammatical sentences; they
    need to be more in the nature of billboard slogans.  

    Limit titles to between two and six words, or between
    40 and 60 characters.

  33. Almost all text should be left-justified.  Also, remember 
    that small text is more readable in sans-serif typefaces
    such as Arial and Verdana.

  34. No matter what multimedia technologies you use, it
    is best to stay at least one year behind the evolution
    in the play-back software.

  35. In general, it is best to minimize the use of animation.
    Also, never make animations loop indefinitely.  Almost
    all users hate moving text and scrolling marquees.

  36. The web is an attention economy where the ultimate
    currency is the users' time.  What do they look at, 
    where do they decide to stay, and where are they
    going to return to at a later date.

  37. From a usability perspective, website design is more
    challenging and usually also more important than
    page design.

  38. The first immediate goal of any site's home page is to
    answer the questions "Where am I?" and "What does
    this site do?"

  39. The most prominent design element on the home page
    should be the name of the company or the site.

  40. Navigation interfaces need to help users answer the
    three fundamental questions of navigation:

    1) Where am I?
    2) Where have I been?
    3) Where can I go?

  41. The first rule of navigation is to include your site's
    logo on every page, and make sure that it is placed
    in the same spot on every page.

  42. Make your pages relatively short and make sure
    that the most important links will be visible on most
    common monitors without any scrolling.

  43. Limit your use of "within-page" links (bookmarks 
    anchors)  because users expect links to take them
    to a different page.

  44. Because underlining now has a strong perceived
    clickability perception, it is best not to underline any
    text that cannot be clicked.

  45. It is rare for users to spend more than a few minutes
    at a time at any given site.  Users often jump from
    site to site.  Because of this rapid movement, users
    feel that they are using the Web as a whole rather
    than any specific site.

  46. Usability studies show that slightly more than half of
    all users are search-dominant, about a fifth of the
    users are link-dominant, and the rest of users
    demonstrate mixed behaviors.

  47. If you plan to create an internal website search
    capability for your site, make sure you use focused
    and highly descriptive keywords in your META
    tags for each page.

  48. The most important component of a URL is the
    domain main.  If users can remember your domain name,
    they can at least get to your home page.

  49. Mobile access will be the third "killer application" for 
    the internet, after e-mail and web browsing.  So make
    sure your web pages scale and work on many different
    sizes of display.

  50. Remember, people read differently online, so writers
    need to change their writing style.  The rules of good
    writing are a little different on the web.

  51. What are the top four reasons users come to a site?
    This can be summarized by the acronym "Home":

    1) High-quality content
    2) Often updated
    3) Minimal download time
    4) Ease of use

  52. The web is not print.  And a home page is not a
    magazine cover.  Don't simply repurpose print 
    and magazine materials onto the web.

  53. Always test your websites for usability by asking
    your friends and users to "test your site for
    usability."  Is your site easy to use and full of
    useful, current content and information?

 

 

 

 

 

 

 

 

 

 

 

 

 

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
4861      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 23 April, 2004
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/bility.htm

Digital Design Course homepage