Web Site User Interface Design: Principles and Development Process Minder Chen

Web Site User Interface Design:Web Site User Interface Design: Principles and Development Process

Minder Chen

© Minder Chen, 1997-2002 Web Process and GUI - 2

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

http://info.med.yale.edu/caim/manual/

http://www.useit.com/alertbox/

http://www.lynda.com/

http://www.webofculture.com/home/mistakes.html

http://www.hotwired.com/webmonkey/design/site_building/

http://msdn.microsoft.com/workshop/design/layout/site021599.asp


• 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 On Globalization

• http://www.webtechniques.com/archives/2000/09/ On Globalization

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

http://www.webpagesthatsuck.com/

http://csis.pace.edu/~dsachs/7keys.html

http://www.businessweek.com/ebiz/0003/wm0323.htm

http://www.informationweek.com/773/web.htm


Additional Web Sites• IBM Ease of Use Web Site:

www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/561www-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/instructionalwebsites/instruct.htm

• Accessibility standards: www.access-board.gov/508.htm & www.cast.org/babby www.section508.gov www.w3.org/WAI/


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


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


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


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


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.


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.


Navigation Diagram and Page Banner• FrontPage 2000


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.


Navigation Bars & Buttons

Image Map is used. Tab control style is the standard in the industry for navigation bar.


Site Elements• Home page

– Menu-driven– News-oriented – Path-based – Splash screens or image maps

• 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

Source: Web Style Guide


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.


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


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


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.


Web Site Design

Could be more than one level

Web Site Architecture Design Example


Site Cover for Transaction Sites


Gifts.com: Gift Finder


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


Usability• Intuitive interaction• Natural task flow• Following user's expectation• Satisfying user's goal• Assimilation vs. Accommodation

Source: Phil Green, AMS


Criteria • Trust• Comfort• Familiarity• Clarity • Reliability• Appeal: Flashy, Colorful• Function vs. Form


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?


• 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)

Web Site User Interface Design: Principles and Development Process Minder Chen

Documents

Transcript of Web Site User Interface Design: Principles and Development Process Minder Chen