Web Site User Interface Design: Principles and Development

Web Site User Interface Design: Principles and Development

Web Site User Interface Design: Principles and Development Process Minder Chen References Donald Norman, The Psychology of Everyday Things, Basic Books, 1988. http://www.nngroup.com/ Jacob Nielsen, Designing Web Usability, New Riders Publishing, Dec. 1999. http://www.useit.com/ Steve Drug, Don't Make Me Think: A Common Sense Approach to Web Usability,

2nd Edition, New Riders Press, August 28, 2005. http://www.sensible.com/chapter.html Web Style Guide: Basic Design Principles for Creating Web Sites, 3rd edition, Yale University Press, Jan. 15, 2009 http://webstyleguide.com/wsg3/index.html Accessibility standards: http://www.section508.gov/ http://www.w3.org/WAI/ http://www.webaim.org/standards/508/checklist Minder Chen, 1997-2009 Web Process and GUI - 2

Form vs. Function the process of inventing things which display new physical order, organization, form, in response to function Notes on the Synthesis of Form, by Christopher Alexander Minder Chen, 1997-2009 Web Process and GUI - 3 Form follows function Communicate with your Architect

http://www.architecture411.com/notes/note.php?id_note=17 Minder Chen, 1997-2009 Web Process and GUI - 4 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-2009

Web Process and GUI - 5 User-Centered Design principles 1. Use both knowledge in the world and in the head 2. Simplify the structure of tasks 3. Make things visible 4. Get the mappings right 5. Exploit the powers of constraints-Natural & Artificial 6. Design for Error 7. When all else fails, standardize Source: http ://en.wikipedia.org/wiki/Donald_Norman

Minder Chen, 1997-2009 Web Process and GUI - 6 Get the Mappings Right Minder Chen, 1997-2009 Web Process and GUI - 7 Making Things Visible Minder Chen, 1997-2009 Web Process and GUI - 8

Design for Errors CTRL-ALT-DELETE Minder Chen, 1997-2009 Web Process and GUI - 9 Initial Screen Design for Telephone Directory service operator PORT073 MANTEL INFO RELEASE 4.2 USER=JOHNSMIT

08-10-09 11:27:23 --------------------------------------------C O M P U T E R T E L E P H O N E I N D E X --------------------------------------------- > THE SUBSCRIPER IS > JONES > BROWN > 17 PINE STREET > > NEW YORK > NY 10012 PF1=HELP PF2=DIRECTORY INFORMATION

PF4=VIDEOTEX Minder Chen, 1997-2009 PF5=OTHER SERVICES Web Process and GUI - 10 Usability Problems Classification in the Dialogue

Simple and natural dialogue Speak the users language Minimize the users memory load Be consistent Provide feedback Provide clearly marked exits Provide shortcuts Provide good error messages Error prevention Minder Chen, 1997-2009

Web Process and GUI - 11 Improved Dialogue Design (CUI) TELEPHONE INDEX ==================== Telephone number (212) 345-6789 has the following subscriber: Jim E. Jones 17 Pine Street New York, NY 10012 Press: RETURN ESC to PF1 to PF2 to

PF4 to PF5 to key to be able to enter a new telephone number leave the Telephone Index get Help about how to use this system go to the Directory Information system go to the general Videotext service get a list of Other Services available Minder Chen, 1997-2009 Web Process and GUI - 12 Improved Dialogue Design (GUI)

TELEPHONE INDEX Enter telephone number to retrieve information of its subscriber: (212) 345-6789 Subscriber's Name: Jim E. Jones Street Address: 17 Pine Street City, State, ZIP: New York, NY 10012 Search a new telephone number Go to Directory Information System Go to the General Videotext Service Go to other services Minder Chen, 1997-2009 Online Help (F1)

Exit Web Process and GUI - 13 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-2009 Web Process and GUI - 14 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-2009 Web Process and GUI - 15 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-2009 Web Process and GUI - 16 Minder Chen, 1997-2009 Web Process and GUI - 17 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-2009 Web Process and GUI - 18

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-2009 Web Process and GUI - 19 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-2009 Web Process and GUI - 20 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-2009 Web Process and GUI - 21 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-2009 Web Process and GUI - 22

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-2009 Web Process and GUI - 23

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-2009 Web Process and GUI - 24

Web Site Design Could be more than one level Minder Chen, 1997-2009 Web Process and GUI - 25 Minder Chen, 1997-2009 Web Process and GUI - 26

Minder Chen, 1997-2009 Web Process and GUI - 27 Web Site Architecture Design Example Navigation Diagram and Page Banner FrontPage 2000 Minder Chen, 1997-2009 Web Process and GUI - 29 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-2009 Web Process and GUI - 30 Navigation Bars & Buttons Image Map is used. Tab control style is the standard in the industry for navigation bar. Minder Chen, 1997-2009 Web Process and GUI - 31

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-2009 Web Process and GUI - 32

Page Layout Minder Chen, 1997-2009 Web Process and GUI - 33 What the designer Build Minder Chen, 1997-2009 Web Process and GUI - 34 What another user sees Minder Chen, 1997-2009

Web Process and GUI - 35 Layout Minder Chen, 1997-2009 Web Process and GUI - 36 Search Function: Ziprealty.com Minder Chen, 1997-2009 Web Process and GUI - 37

Show the result Minder Chen, 1997-2009 Web Process and GUI - 38 Gifts.com: Gift Finder Minder Chen, 1997-2009 Web Process and GUI - 39 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-2009 Web Process and GUI - 40 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-2009 Web Process and GUI - 41 Usability Intuitive interaction Natural task flow Following user's expectation

Satisfying user's goal Assimilation vs. Accommodation Source: Phil Green, AMS Minder Chen, 1997-2009 Web Process and GUI - 42 Criteria

Trust Comfort Familiarity Clarity Reliability Appeal: Flashy, Colorful Function vs. Form Minder Chen, 1997-2009 Web Process and GUI - 43

Recently Viewed Presentations

  • Ceramic Capacitors - Wilfrid Laurier University

    Ceramic Capacitors - Wilfrid Laurier University

    Tahoma Times New Roman Wingdings Symbol Monotype Sorts Goudy Old Style MS LineDraw Arial Default Design Microsoft Excel Worksheet Microsoft Word Picture Microsoft Word Document Passive Components: Capacitors & Resistors PowerPoint Presentation Thru-Hole Assembly PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation...
  • CADD 15298 - Sheridan College

    CADD 15298 - Sheridan College

    1. Sheridan Networks. It is expected that most students have some familiarity with the Windows operating system. In this course we will be using Windows 7. The following procedures will be reviewed by your instructor during the first week of...
  • Chapter 16: Using Therapeutic Exercise in Rehabilitation

    Chapter 16: Using Therapeutic Exercise in Rehabilitation

    Joint Mobilization & Traction Techniques in Rehabilitation Chapter 13 ... movements done voluntarily Osteokinematics - motions of the bones Accessory Movements - movements within the joint & surrounding tissues that are necessary for normal ROM, but can not be voluntarily...
  • Epithelial odontogenic tumors

    Epithelial odontogenic tumors

    Definition . A locally invasive epithelial odontogenic neoplasm characterized by development of intra-epithelial structures ( of amyloid-like nature), which become calcified and liberated when the cell break down.
  • CS193J: Programming in Java Summer Quarter 2003 Lecture

    CS193J: Programming in Java Summer Quarter 2003 Lecture

    CS193J: Programming in Java Summer Quarter 2003 Lecture 2 OOP/Java Manu Kumar [email protected]
  • Lessons Learned from the Reverse Distribution Industry and ...

    Lessons Learned from the Reverse Distribution Industry and ...

    Arial Times New Roman Verdana Wingdings ind_0614_slide A Reverse Distribution Perspective Of The Issues Of Pharmaceutical Collection The 1st National Pharmaceutical Product Stewardship Dialogue Meeting June 19th, 2008 Sacramento, California Mark Harvey Director of Operations EXP Pharmaceutical ...
  • Antigone Background Notes

    Antigone Background Notes

    Antigone Background Notes I. Origin of Tragedy A. Religious festivals in the spring to honor Dionysus B. Thespis, "Father of Drama" (thespians) 1. introduced the first actor and dialogue C. Sophocles 1. added third actor 2. ... Look back at...
  • Electrode Placement for Chest Leads, V1 to V6

    Electrode Placement for Chest Leads, V1 to V6

    Motor Learning (continued) Motor Control Motor programs are proposed memory mechanisms that allow movements to be controlled. As motor programs are developed, they become more automatic, allowing the performer to concentrate on the use of the movement in performance situations....