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


Graphic Design, Web Design, 
and Usability

   

Assignment:  (Do after Class) Work on finishing
your Flash website which is due on Friday.



1. Flash Site examples

  1. See Cross My Heart Flash Site

  2. See sd2.fla for a reminder about buttons and 
    inserting sound.
  3. In order to set the actions for a "button", you
    must first turn off "Enable Simple Buttons". 
    You can do this by going to "Control" and
    deselecting "Enable Simple Buttons."
  4. You need to turn your buttons off in your Flash
    movie so that you can get into their actions and
    edit them.
  5. Remember, you must select the button, not the
    frame a button is in, in order to create actions
    for that button in your Flash movie.

2.  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. 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


4.  Jared Spool on Web Usability Surprises for Web Designers

  1. Jared Spool: Real Implications from Usability Testing

  2. Web Graphic Design- It's Not What You Think

  3. Jared Spool: Trouble in Paradise- Problems Facing the
     Usability Community

  4. WebReview- Content Must Suck- Pulling Users 
    In with Jared Spool

  5. CIO- Spool on Studying Design

  6. Macromedia Flash Usability Tips

  7. Designing Usable Web Sites for the Disabled

  8. Design Tips for Usable Web Designs.

5. Learning from Good and Bad Design

  1. The Webby Awards Websites

  2. Webpages that Suck

  3. The Original Web Pages
    That Suck Examples
  4. Building Really Annoying Websites

6.  Basic Web Usability Principles

  1. 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.

  2. 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.

  3. 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.

  4. You should design for all screen resolutions.  Design
    resolution-independent pages that adapt to whatever
    size screen they are displayed on.

  5. 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.

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

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

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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/

  13. 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>

  14. 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.

  15. 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.

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

  17. 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.

  18. 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.

  19. 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.

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

  21. 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.

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

  23. 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.

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

  25. 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.

  26. 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. 

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

  28. 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.

  29. 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.

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

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

  32. 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.

  33. 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.

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

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

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

  37. 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?

  38. 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.

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

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

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

  42. 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.

  43. 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.

  44. 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.

  45. 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.

  46. 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.

  47. 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.

  48. 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

  49. 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.

  50. 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: 
4564      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 2003
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/webusa.htm

Digital Design Course homepage