Transcript   Web Site User Interface Design: Principles and Development Process

Web Site User Interface Design:
Principles and Development Process
Minder Chen


References
•
Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press,
March of 1999
– http://info.med.yale.edu/caim/manual/
•
Designing Web Usability, Jacob Nielsen, New Riders Publishing, Dec. 1999.
•
David Siegel, Creating Killer Web Sites, Second Edition
– http://www.killersites.com/core.html
Collaborative Web Development: Strategies and Best Practices for Web
Teams, by Jessica R. Burdman, Addison-Wesley, 1999.
Jakob Nielsen, Interface Design for Sun's WWW Site
– http://www.sun.com/sun-on-net/uidesign/
Jakob Nielsen on web user interface design
– http://www.useit.com/
http://www.useit.com/alertbox/
•
•
•
• Designing Web Graphics.3 by Lynda Weinman, New Rider, 1999
• Lynda's web site at http://www.lynda.com/
• http://www.nngroup.com/
•
•
Webmonkey design site_building at
http://www.hotwired.com/webmonkey/design/site_building/
Web Workshop - Electronic Commerce Site Design at
http://msdn.microsoft.com/workshop/design/layout/site021599.asp
© Minder Chen, 1997-2002
Web Process and GUI - 2
• http://www.webpagesthatsuck.com/
• The Seven Keys to Effective Web Sites at
http://csis.pace.edu/~dsachs/7keys.html
• Can a site get too sticky? Web Site Makeover
– http://www.businessweek.com/ebiz/0003/wm0323.htm
•
Usability on the web Isn't a Luxury, at
http://www.informationweek.com/773/web.htm
•
http://www.webofculture.com/home/mistakes.html
•
http://www.webtechniques.com/archives/2000/09/
•
Microsoft, The Window Interface Guidelines for Software Design, Microsoft
Press, 1995.
•
Donald Norman, The Psychology of Everyday Things, Basic Books, 1988.
(a paperback version of the book entitled The Design of Everyday Things is
published by Doubleday, 1989)
•
Ben Shneiderman, Designing the User Interface: Strategies for Effective
Human-Computer Interaction, 3rd edition, Addison-Wesley, 1997.
© Minder Chen, 1997-2002
On Globalization
On Globalization
Web Process and GUI - 3
Additional Web Sites
• IBM Ease of Use Web Site:
www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/561
www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572PrintView
• Builder.com Web User Interface:
www.builder.com/Graphics/UserInterface/
• Webmonkey Design Curriculum:
www.hotwired.com/webmonkey/99/22/index5a.html
• Webmonkey's Anatomy of a Redesign:
www.hotwired.com/webmonkey/design/tutorials/tutorial4.html
•
Jocob Nielsen amd Marie Tahir, Home Page Usability: 50 Websites
Deconstructed
•
Steve Krug and Roger Black, Don't Make Me Think: A Common Sense
Approach to Web Usability
• Build Your Instructional Web Site,
http://www.irc.gmu.edu/wkshpmaterials/instructionalwe
bsites/instruct.htm
•
Accessibility standards: www.access-board.gov/508.htm &
www.cast.org/babby www.section508.gov www.w3.org/WAI/
© Minder Chen, 1997-2002
Web Process and GUI - 4
Web Development Layers
• Web management: the usability of a web site is
more a function of how it is managed than how
good its designers are.
• Interaction design
–
–
–
–
Navigation support
Web page layout
Templates
Search
• Content design: The actual writing on the pages
– The message is the message
© Minder Chen, 1997-2002
Web Process and GUI - 5
10 Mistake of Web Management
• Not know why
• Design for your own VPs
• Letting the site structure mirror your
organizational chart
• Outsourcing to multiple agencies
• Forget to budget for maintenance
• Treating the web as a secondary medium
• Wasting linking opportunity
• Treating the internet and intranet sites the same
• Confusing market research and usability
engineering
• Underestimate the strategic impact of the web
© Minder Chen, 1997-2002
Web Process and GUI - 6
Web Development Life Cycle
• Identify goals
– Every web site has goals
– Work with clients to define them
– Multiple goals
• Identify target users
– User platforms
– Technical knowledge of the user
– Domain knowledge of the user
• Determine task requirements
• Design the web site
– Determine the major themes of the web sites
– Define navigation maps
• Implement the web site
• Evaluate the web site
• Modify and improve the web site
© Minder Chen, 1997-2002
Web Process and GUI - 7
Roles and Responsibilities
• Client (Customer)
– Funding
– Requirements
– Constraints
• Designer
– Overall tone of the web site
– Look and Feel
– Color
• Interactive Media Developer
– Build the web pages
• User Interface Designer
– Navigation
– Layout
– Easy to use (Usability)
• Project manager
–
–
–
–
Leadership
Coordination
Assign tasks
Manage schedule and budget
• Business Manager
– Managing client relationships
© Minder Chen, 1997-2002
Web Process and GUI - 8
Separate content from the interface
•
Developing content independently from the user interface allows you to
develop both more efficiently. If the two are developed interdependently,
then every change made in one would have to be immediately considered
in the other. Frames, JavaScript, and Java applets all allow you to separate
the interface from the content. For example, the text in this guideline is
used in both the print-all version and the frames version without
modification.
© Minder Chen, 1997-2002
Web Process and GUI - 9
Web Site Design
Page design sometimes gets the most attention.
After all, with current web browsers, you see only
one page at a time. The site itself is never explicitly
represented on the screen. But from a usability
perspective, site design is more challenging and
usually also more important than page design.
-- Jacob Nielsen.
© Minder Chen, 1997-2002
Web Process and GUI - 10
Navigation Diagram and Page Banner
• FrontPage 2000
© Minder Chen, 1997-2002
Web Process and GUI - 11
Navigation Bars & Buttons
• Button bars are also the most logical place to put links back to your home
page, or to other menu pages related to the current page. A button bar
can be built with text (like ours at C/AIM, below), or a series of individual
button graphics at the top or bottom of the page.
© Minder Chen, 1997-2002
Web Process and GUI - 12
Navigation Bars & Buttons
Image Map is used. Tab control style is the standard in the industry for navigation bar.
© Minder Chen, 1997-2002
Web Process and GUI - 13
Site Elements
• Home page
–
–
–
–
Menu-driven
News-oriented
Path-based
Splash screens or image maps
Source: Web Style Guide
• Graphics and texts
• Submenus pages and subsites (alternative home pages for special
audiences)
• Tables of contents, site indexes, site maps
• Product/service/information pages
• "What's new" pages
• Search features
• Contact information
– Street address, phone number, fax numbers, maps, travel directions,
parking information
•
•
•
•
User feedback and virtual community pages
Bibliographies and appendixes
FAQ (Frequently Asked Questions) pages
Customized server error pages
© Minder Chen, 1997-2002
Web Process and GUI - 14
Adding content to your site
• Consider creating, borrowing, buying, or
licensing content from other sources.
• Producing interesting content is a matter of
finding time, thinking creatively, writing
coherently, listening to your customers, and, in
some cases, asking for their help.
• Content categories:
– informational content
– interactive content
– multimedia content
– software content.
© Minder Chen, 1997-2002
Web Process and GUI - 15
Informational content
• Product descriptions
• Photos and graphics
• FAQs
– (Frequently Asked Questions) are a common element of most Web sites. They
serve as an easy way to answer questions about your business and how the site
works. Good FAQs should dramatically cut down on e-mail. Your FAQs should
include information about the products you sell, how to order, what credit cards
are accepted, what secure transaction system is used, and where to find specific
information on your site.
• News sections
• Reviews
• Guest columns
• Newsletters
• Databases
• Testimonials
• Customer-generated articles and reviews
© Minder Chen, 1997-2002
Web Process and GUI - 16
Interactive Content
• While informational content is a basic offering,
interactive content gives customers something to do
and contribute to the contents as well as build up a
sense of community.
– Contests
– Polls
– Chat Rooms and Message Boards
– Web boards
© Minder Chen, 1997-2002
Web Process and GUI - 17
Multimedia and Software Content
• Multimedia Contents
– Video: QuickTime and AVI files
– Sound: AIFF and WAV files
– Virtual reality photography
• Software Content: programs that users download
from your site.
– software demos
– custom programs
– shareware.
© Minder Chen, 1997-2002
Web Process and GUI - 18
Web Site Design
Could be
more than
one level
© Minder Chen, 1997-2002
Web Process and GUI - 19
© Minder Chen, 1997-2002
Web Process and GUI - 20
© Minder Chen, 1997-2002
Web Process and GUI - 21
Web Site Architecture Design Example
Site Cover for Transaction Sites
© Minder Chen, 1997-2002
Web Process and GUI - 23
Gifts.com: Gift Finder
© Minder Chen, 1997-2002
Web Process and GUI - 24
Data Collections from Customers
• If you make your customers fill out voluminous
forms, you may find your site littered with
abandoned shopping carts.
• By putting your visitors to work as soon as they
step into your cyber shop – making them fill out
personal information – you run the risk of
running them out faster than they came in. If
you make it hard to buy something, they won't.
• Don't treat your site like an exclusive club or
some kind of secret-handshake society
© Minder Chen, 1997-2002
Web Process and GUI - 25
Usability
•
•
•
•
•
Intuitive interaction
Natural task flow
Following user's expectation
Satisfying user's goal
Assimilation vs. Accommodation
Source: Phil Green, AMS
© Minder Chen, 1997-2002
Web Process and GUI - 26
Criteria
•
•
•
•
•
•
•
Trust
Comfort
Familiarity
Clarity
Reliability
Appeal: Flashy, Colorful
Function vs. Form
© Minder Chen, 1997-2002
Web Process and GUI - 27
Web Site Evaluation
•
•
•
•
•
•
•
•
•
•
•
•
•
Is the purpose of the site clear?
Does the site clearly address a particular audience?
Is the site useful and relevant to its audience?
Is the site interesting and engaging?
Does the site enable users to accomplish all the tasks
they need or want to accomplish?
Can these tasks be accomplished easily?
Is the information organized in a way that users will
expect and understand?
Is the most important information easiest to find?
Is textual information clear, grammatically correct, and
easy to read?
Do you have a clear idea of what the site contains?
Do you always know where you are, and how to get
where you want to go?
Is the presentation attractive?
Do pages load quickly enough?
© Minder Chen, 1997-2002
Web Process and GUI - 28
• This is the presidential election ballot form from election
headquarters in Palm Beach County, Florida November 8, 2000. The
confusion over which spot to punch for the Gore/Lieberman ticket
has created controversy as there were officially 3,407 votes for
Buchanan in Palm Beach County yet there are only 304 registered
Reform party voters in that county. (Marc Serota/Reuters)
© Minder Chen, 1997-2002
Web Process and GUI - 29