CS 66-460
Introduction to Graphical Human Machine Interfaces
Web Usability and Web Design
WEDNESDAY, MARCH 26, 1997
Instructor: G. Bowden Wise
Rensselaer Polytechnic Institute
Spring 1997
Usability is concerned with these aspects:
- Learnability
- Efficiency
- Errors
- Satisfaction
- Memorability
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
http://wwww.useit.com
In particular, his Alertbox column.
ACM SIGCHI Web HCI Page
http://www.acm.org/sigchi/webhci/
Lots of pointers to other sites, conferencs, books, columns, etc.
Also a mailing list: chi-web@acm.org (listserv@acm.org)
Indexes
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
http://www.useit.com/alertbox/
- 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
- mission
- intent
- audience(s)
- content and functions
- Use familiar metaphors
- to organize the site in an obvious and useful manner
- Use web technology apporiately
- search engines
- forms
- 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
Content
- Short title
- Meaningful headlines
- Sign and date paegs
- Short documents
- Each page should stand-alone
Visual Appearance
- 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
Navigation
- 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'')
Testing
- 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
navigational problems
- Planning
The process of defining and gathering information about the web's
audience, purpose, objectives, and policies for information
development and use.
- Analysis
Involves evaluating information consistency and correctness as well as
checking the technical make-up of the web.
- Design
The process of creating a map of the relationships among the pages, as
well as specifying the look and feel of individual pages.
- Implementation
The process of creating files of HTML and associated software (CGI
scripts, Java applets).
- Promotion
The process of providing publicity releases for general Web audiences,
potential users, and current users.
- Innovation
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.
- Purpose
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
web covers
- Specification
A detailed description of the constraints and elements that will go
into the web
- Presentation
The full description of the technical structures (hypertext and other
media) by which the web is delivered to users.
- 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?
in other words
- 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
intended audience
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
needs;
- Based on analysis, user testing, and focus groups, identifying
new user needs
- Identifying new technologies that may help meet user needs better
Bowden Wise
Wed Mar 26 12:51:23 EST 1997