Introduction to Graphical Human Machine Interfaces
Web Usability and Web Design
WEDNESDAY, MARCH 26, 1997
Instructor: G. Bowden Wise
Rensselaer Polytechnic Institute
Usability is concerned with these aspects:
What makes a web page usable?
What kinds of things can be done to make a web site more usable?
- Establish goals
- Identify customers
- Identify reader's tasks
- Organize the site
- Design the site
Jakob Nielsen's Web Site on Usability
In particular, his Alertbox column.
ACM SIGCHI Web HCI Page
Lots of pointers to other sites, conferencs, books, columns, etc.
Also a mailing list: email@example.com (firstname.lastname@example.org)
The HCI-Index: http://www.ida.liu.se/ miker/hci/www.html
Jakob's hotlist: http://www.useit.com/hotlist/
- 1993: Server frenzy!
Just putting up a server showed you had web prowess.
- 1994: Information overload!
Look at all my hotlists, and long bullted lists....impressive!
- 1995: Value-added information became key.
Information overload...frustrated users...
Web designers must provided better organization, purpose for their users.
Emphasis on a small set of quality of Web pages.
- 1996: Web-surfing is dead!
Too much information
Hard to find information you want... search engines help .. not always!
Users tend to visit a small-number of useful sites regularly.
- Another trend: ``user-see-what-designer-see''
Focus on presentation aspects of Web pages
(e.g., 12-point Garamond font).
This is hard to do due to the differences among browsers, hardware...
- 1997: Busineeses/commerce take the Web seriously.
Also, return to semantic encoding, which is what the Web was
originally intended for
...separate content and display-specific instructions ...
Use of style sheets will help bring more control to
presentation aspects in a more consistent way (can have a style sheet
for browsers, PDAs, WebTVs, etc)
- Any other predictions?
From Nielsen, Interface Design for Sun's WWW Site
- A web must provide value-added information.
- No longer can you succeed with ``cool'' web pages
- People are suffocating from information overload
- Remember ``less is more''
- emphasising everything leaves nothing prominent
- web designers must prioritize information space
- use hypertext principles: let the user browse the information space,
and dive deeper to his liking
- People have very little patience for poor design
- poor organization, bad links, etc decrease the merit or faith users
have in the information in the page
Users do not want to scroll
- Information not at the top of a page will not be read, except by
very interested readers
Users do not want to read
- reading speeds are 25% slower for screens than paper
- write 50% less than you would for paper (!)
- users tend to skip over fluff (welcome/intro) and skim headings (links)
Users do not want to wait for downloads!
- minimum goal: get pages to users in less than 10 seconds
- (some might wait 15 seconds) or longer if they really want it
- keep graphics to a minimum; use thumbnails; re-use images on pages
(browser will cache)
From Alertbox, March 1 and 15, 1997
- Be succinct
- reading from screens is 25% slower than paper
- users do not like to scroll
- write 50% less text than you would for paper
- Write for scannability
- don't require users to read long contiguous blocks of text
- help users scan:
- meaingingful headings, sub-headnigs
- use highlighting and emphasis
- Use hypertext to split up information into multiple pages
- encourge readers to browse and dive deeper
- make text short without sacrificing depth of content
- split into multiple nodes connected by links
- proper hypertext is not single flow; rather the information is
split up into coherent chunks
- allows users to be selective about what they read
From Alertbox, May 1996
- Using frames
- Gratuitous use of bleeding edge technology
- Scrolling text, marquees, and constantly running animations
- Complex URLs
- Orphan pages
- Long scrolling pages
- Lack of navigation support
- Non-standard link colors
(standard: links not seen are BLUE; those seen are PURPLE/RED)
- Outdated information
- Overly long download times
You may wish to check out these other titles at
- Inverted Pyramids in Cyberspace (June 1996)
- The Rise of the Sub-Site (September 1996)
- Accessible Design for Users With Disabilities (October 1996)
- Why Frames Suck (Most of the Time) (December 1996)
- Web site architecture is understanding the difference between
desiging Web pages and desiging Web sites
- Web Architecture is:
creating consistent and functional systems for navigation, graphics,
page layout, and title labeling so that the user knows
- where she is,
- where to go,
- what to do, and
- will feel encouraged to return,
and, the site designer knows how to add and link new content
- without having to re-engineer the site completely
- Research to determnie the site's
- content and functions
- Use familiar metaphors
- to organize the site in an obvious and useful manner
- Use web technology apporiately
- search engines
- Java applets
- Address the needs of multiple audiences
- specialized architectural approaches
- Use site blueprints and style guides
- to get site consistency
- to better maintain the site
- Short title
- Meaningful headlines
- Sign and date paegs
- Short documents
- Each page should stand-alone
- Provide text alternatives to images using ALT
- Specify the size of images with WIDTH and HEIGHT
- Use thumbnails instead of large graphics
- A logically designed ISMAP is better than many seperate buttons
- Avoid blinking; use a blinking '*' instead
- Use logical formatting (e.g., CITE rather than TT)
Visual Appearance (continued)
- Keep in mind ``plus or minus seven rule'' for graphics, lists, and
headings (or group information)
- Aim for consistency
- Provide links on each page to other relevant pages
- Re-use icons where possible
- Provide size and type for downloaded information.
- Avoid meaningless links (e.g., ``click here'')
- Check links on a regular basis
- Test the usability of your web system
- make sure that services offered work correctly
- Check log files to gauge user acceptance of system or to identify
The process of defining and gathering information about the web's
audience, purpose, objectives, and policies for information
development and use.
Involves evaluating information consistency and correctness as well as
checking the technical make-up of the web.
The process of creating a map of the relationships among the pages, as
well as specifying the look and feel of individual pages.
The process of creating files of HTML and associated software (CGI
scripts, Java applets).
The process of providing publicity releases for general Web audiences,
potential users, and current users.
The process of continuously and creatively working to improve the web
to meet user needs.
- Target Audience
A store of knowledge about the target audience for the web as well as
the actual audience who will use the web.
Defines the reasons for and scope of the web's existence.
- Objective Statement
Defines the specific goals the web should accomplish
- Domain Information
A collection of knowledge and information about the subject domain the
A detailed description of the constraints and elements that will go
into the web
The full description of the technical structures (hypertext and other
media) by which the web is delivered to users.
in other words
- Does the audience exist on the Web?
- Is the purpose already accomplished elsewhere?
- Do the purpose, objective, and spefication work together?
- Is the domain information accurate?
- Is the Web presenation yielding results consistent with
the Web's design and purpose?
- Do the audience needs, objective, and results of the Web use
correspond to each other?
- Attempts to reach an audience
- Contributes new information
- Is self-consistent
- Is correct
- Is accessed in a balanced manner, both in terms of its own files
and outside links into it
- Is accmplishing objectives that meet the needs of its
Principles and goals
- Meet the user's needs
- Efficiently use resources
- Create a consistent, pleasing, and efficient look and feel
- HTML, CGI, Java, etc...
- WebSearch engines
- Make existence known to other on-line communities
- Continuously and creatively working for improvement to meet uer
- Based on analysis, user testing, and focus groups, identifying
new user needs
- Identifying new technologies that may help meet user needs better
Wed Mar 26 12:51:23 EST 1997