Web Design Profile Home Page

Guidelines Categorized by Profile


No Expectations If you're designing for this audience, you probably don't need guidelines.

Kevin Benko: The Square Peg

All Affect
Use color, imagery and backgrounds to set a mood and evoke a response in your audience. Adopt media models that evoke responses in your audience similar to the ones you want them to have for your site.
Use links for suspense, aesthetic unity, branching storylines and annotations. (Jorn)
Be sure the audience will experience what you intend.

  • Test your page on multiple browsers and platforms, and over a 14.4 modem.
  • Use a Web-safe palette to index images so that they give the same impression on both PC and Macintosh computers.
  • Pay attention to the experience audiences will have watching your pages load; not just the experience of seeing them after they are loaded.

    • Mars Attacks: The Movie


    The Spot

    All Content
    Use the simplest and most direct layout possible.

  • Limit the number of heading sizes, font sizes and colors, font treatments, embedded lists and clarifying graphical elements (decorative bullet points and horizontal bars) to the smallest number for which a distinct and justifiable purpose may be stated.
  • Use your limited number of typographic cues (font sizes, font treatments, heading sizes), spatial cues (embedded lists) and graphical cues (bullet points and decorative bars) consistently throughout the site.
  • Use BLOCKQUOTE tags and tables to limit the width of text blocks and improve readbility.

    • Use the simplest and most direct structure possible.

  • Keep content as high in the hierarchy as possible -- create "shallow" structures. Rule of Thumb: Limit your discrete hierarchical levels to four. When a "shallow" structure results in more than 7 - 10 major choices, group the choices into a perceptually smaller number.
  • Provide links back to your home page on all lower levels.
  • Present coherent documents as wholes (REES), but keep them under 32K (JORN) or under 5 screens long (LYNCH).
  • Pare down text. Even when you have a lot of information, rewrite text to be as concise as possible.

    • Consider every graphic critically for its information value.

  • Use only "content critical" graphics -- images that convey or support the primary content of your site.
  • Test on several platforms with different browsers to be sure your graphics are clear enough on screen to be accurately interpreted.


    • Yahoo! Main Page

    High Affect

    Make a clear distinction between what is content and what is not.
  • Make buttons look like buttons and non-buttons not look like buttons.
  • Make buttons that lead to content look different than ones that don't.
  • Use consistent layout for the content segments of the site.

    • Make sure the graphical treatment of your pages (background images and colors, large graphics, alternate colors of text, animated images) doesn't interfere with the readability of content-bearing text and graphics.

    Don't give the impression that your site holds more content than it does.
  • Except for navigation, link everything only once (the first time a word or phrase occurs -- not every time).
  • Don't chop content into tiny chunks on many separate pages. Even if the site contains a small amount of content relative to the entertainment, or affective portions, group it together or provide an optional link where it is all accessible in one place.


    • Harley Davidson Home Page

    High Content

    Use graphics to create a visual identity and sustain it throughout the site.
  • Use small graphics and buttons to build site identity and a smaller "signature graphic" for lower level pages that can double as a button to return to the main page.
  • Make sure that the images used for identity convey an appropriate message about you and your site. Be careful to avoid media models that do not match the identity you want for your site.
  • Use few enough colors in your identity graphics that your site has an identifiable color scheme, and sustain the color scheme throughout the site.

    • Use a grid-based layout for the site.

    Supply text alternatives for all graphic elements in the site, and use very few text treatments (bold, italic, heading sizes). Too many typographic treatments add visual noise to pages that also display small graphics.

    First Monday: Peer-reviewed Journal on the Internet


    Thinkshop

    Noblesville School District

    Mixed

    Great Expectations

    Use graphics to create a visual identity and sustain it throughout the site.
  • Use small graphics and buttons to build site identity and a smaller "signature graphic" for lower level pages that can double as a button to return to the main page.
  • Make sure that the images used for identity convey an appropriate message about you and your site. Be careful to avoid media models that do not match the identity you want for your site.
  • Use few enough colors in your identity graphics that your site has an identifiable color scheme, and sustain the color scheme throughout the site.

    • Establish different treatments for the "content heavy" and "affect heavy" portions of the pages and/or the site.

    When in doubt, err on the side of content.

    National Center for Missing & Exploited Children


    Toad Head

    Universal
    WEB Guidelines

    		Discriminate between what's amusing or informative and what's distracting. Eliminate the distractions.
  • Blinking text and animated images are the visual equivalent of tugging repeatedly on someone's sleeve -- after you've first gotten their attention the continued tugging can get pretty annoying. Find someone who has no stake in your site and no hesitation about giving you bad news. Ask that person to make your animated/blinking page their browser "home page" for a week and then ask them whether or not the moving parts of it are distracting.
  • Make pages viewable without adjustment beyond the default window size of most browsers (no wider than 472 pixels and critical information viewable within 325 - 350 pixels vertically).
  • "Under construction" notices and repeated exhortations to "Check out ..." this and that are verbal distractions. Unless your site is a parody of Web jargon, don't make it sound like one.
  • Waiting for pages to load is a distraction, no matter what other expectations your audience may have. If your site has an All Affect profile you won't eliminate your large image files but you should employ every trick you can to lower wait times for your pages.

    • Instill confidence in your primary audience.
  • Provide update information so that people know when someone last changed the page.
  • Provide valid contact information so that people know where to ask questions and so that they know who is behind the experience/information they are getting.
  • Visual design is susceptible to the equivalent of misspellings, inaccuracies and grammatical errors. Check for:
  • stray pixels,
  • images that didn't get processed properly for transparency or indexed color,
  • misspelled words in image files (very common since most graphics programs don't provide spell checking),
  • images loaded into the wrong file name so that they don't match the text or are mislabelled, or
  • graphics that give unintended effects when they are seen next to each other (strange color combinations, a person in one image appearing to point to someone else, the semantic content of images producing unintended juxtapositions).
    • Provide for users with low-end systems and browsers unless you have hard data showing that your primary audience has the same capabilities you do.
  • Use ALT tags to show text when images do not load or will not display.
  • Warn users when links lead to large image or media files or graphics-intensive pages and sites.
  • Try your pages out in a text-only browser so you know what kind of experience they are giving to that audience.
    		• Samples

    Following Media Models

    "Media models" are recognizable combinations of color, imagery, layout and graphical treatment that people are used to seeing in advertising, television shows, movies, video games and other media. People associate different models with the messages they are used to getting in those forms ... black and white photographs accompanied by closely set text in narrow columns is a simple model associated with newspapers, so the use of these elements in combination may suggest journalism, accuracy of fact, realism and authenticity.

    The New York Times.

    By observing the components of media models you can adopt their "looks" and use them to encourage the response you want from your audience. Remember that people seek out different media models as cues to the experiences they will get, and they are not always in the mood to have the same kind of experience. An investment analyst may repond positively to the clean, open layout and rich accent detail in an expensive hobbyist magazine when she is pursuing her interest in philately, but seek out garish purple-and-pink color schemes accompanied by outsized, ornate fonts and baroque curliques when she is looking for an entertaining romance story to read over the weekend.

    Have a Look at Swedish Stamps.

    Romance Web

    go back to the All Affect model

    Avoiding Media Models

    "Media models" are recognizable combinations of color, imagery, layout and graphical treatment that people are used to seeing in advertising, television shows, movies, video games and other media. People associate different models with the messages they are used to getting in those forms ... grainy black and white photographs accompanied by closely set text in narrow columns is a simple model associated with newspapers, so the use of these elements in combination may suggest to an audience journalism, accuracy of fact, realism and authenticity.

    If you have ever been to a toy store with a 10-12 year old boy you may have noticed that it is almost impossible to get him to go down the "pink aisle" where all the dolls are displayed, but that he has an unerring eye for the strong color combinations typical of video game displays. When you are planning the visual identity for a site you can't afford to use a media model that inadvertently offends or disinterests your audience.

    Barbie Collectibles.

    Engage.

    go back to the High Content model

    References

    Web references

    Art and the Zen of Web Sites, Tony Karp, TLC Systems Corp.

    Design Issues and Conventions for Web Pages, Elizabeth Boling and Sonny Kirkley, Indiana University.

    Elements of HTML Style, J.K. Cohen, University of California.

    HyperContent, HyperJunk: Hypertext theory as if the WWWeb matters , Jorn Barger.

    Indiana University Basics of Web Design, Indiana University.

    Style Guide, Gareth Rees, University of Cambridge.

    Guide to Web Style, Rick Levine, Sun Microsystems, Inc.

    WSC Style Guide for Online Hypertext, Tim Berners-Lee, World Wide Web Consortium.

    Web Style Manual, Patrick Lynch, Yale Center for Advanced Instructional Media.

    Print references

    Niederst, J. & Freedman, E. (1996). Designing for the Web: Getting started in a new medium. Sebastopol, CA: O'Reilly. (See O'Reilly for a description of this book.)

    Waters, C. (1996). Web concept and design: A comprehensive guide for creating effective Web sites. Indianapolis, IN: New Riders. (See typo.com for an overview of this book.)

    back to the top of the page

    Web Design Profile Home Page
    AECT 1997 Conference, Albuquerque, NM
    Elizabeth Boling, Kurt Squire, Sonny Kirkley
    Indiana University
    Last updated 7 January 1997
    URL: http://www.indiana.edu/~iirg/ARTICLES/AECT97/guidelines.html

    iirg logo