(Web Site or GUI) User Interface Design: Principles and Development Process Minder Chen

1. (Web Site or GUI) User Interface Design: Principles and Development Process Minder Chen  

2. User Interface: How Important Is It? • "To the end user, the interface is the system." -- Bob Kuo -- • "The real problem of the interface is that it is an interface. Interfaces get in the way. I don't want to focus my energies on an interface. I want to focus on my job." -- Donald Norman --

3. Conceptual Framework of Interface Design User's Mental Model of the System Design Model User's Task Model Designer User System User Interface System Image System Functionalities * Adopted from Donald Norman, The Design of Everyday Thing, Doubleday, 1988.

4. Initial Screen Design PORT073 MANTEL INFO RELEASE 4.2 USER=JOHNSMIT 17-OCT-95 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 > JIM R. > 17 PINE STREET > > NEW YORK > NY 10012 PF1=HELP PF2=DIRECTORY INFORMATION PF5=OTHER SERVICES PF4=VIDEOTEX

5. Usability Problems Classification in the Dialogue • Simple and natural dialogue • Speak the user’s language • Minimize the user’s memory load • Be consistent • Provide feedback • Provide clearly marked exits • Provide shortcuts • Provide good error messages • Error prevention

6. 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 key to be able to enter a new telephone number ESC to leave the Telephone Index PF1 to get Help about how to use this system PF2 to go to the Directory Information system PF4 to go to the general Videotext service PF5 to get a list of Other Services available

7. 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 Online Help (F1) Go to the General Videotext Service Exit Go to other services

8. Complete GUI Process Model Define Users and Usability Requirements usability requirements user classes user classes UTM Model User Tasks Model User Objects Define Style Guide UOM UOM style guide Design GUI task models & task scenarios usability problems Prototype GUI Evaluate GUI usability requirements GUI Design • UOM: User Object Model • UTM: User Task Model

9. GUI Prototype • Objectives: • Investigate and improve usability of the proposed GUI design. • Provide feedback on task model, user object model, and style guide. • Benefits: • Better communication with the user • Improve design through feedback and iteration • Reduce development risk • User education • Greater user acceptance Define Users and Usability Requirements Model User Tasks Model User Objects Define Style Guide Design GUI Prototype GUI Evaluate GUI GUI Design

10. Prototyping Activities Define prototyping objectives Prototype profile Prototype objectives GUI Design Choose prototyping tools Tool chosen Build prototype Task scenarios Initial prototype Design Feedback Investigate prototype

11. GUI Prototyping • Throw-away vs. evolutionary prototyping • User-participated vs. user-driven prototyping • Fedelity (realism) GUI Prototype Breadth of coverage (Horizontal) Global Local Shallow Interface only Vertical Stored data Processing functions Deep Depth of system

12. Navigation Diagram: A Paper-Based Prototype

13. Paper-Based Prototype

14. Examples of Windows Controls

15. Use of Controls for Selections of Value or Action * The use of these controls should be discouraged as they are often difficult to understand.

16. Examples of Feedback

17. Preserving Work History • What are the features in a web browser that supports the preservation of work history?

20. Object-Action, Not Action-Object Action-Object Paradigm: • In most traditional CUI applications, the user selects an action (e.g. selects a menu, presses a function key or types a command) and then enters the data to which the command is to be applied. • Example: • Action: Select a 'Delete customer' option • Object: Type in a customer code. Object-Action Paradigm: • In most GUI applications, the object is selected first (often from a graphical representation) and then the action is defined. • Example: • Object: Select a customer code from a scrollable list displayed in a window. • Action: Select a 'delete' option from a pull-down menu. Design GUI

21. An Example of Task Analysis • Task: Customer Inquiry on Publication • Task Goal: to give the customer information about a publication (e.g. title, price, date, whether available in stock) • Frequency - 200/day • Inputs: • customer requirements for information • information on publications from the system • Outputs: information on publication to the customer • When performed: in response to customer telephone call. Random timing in the office. • Constraints: • the customer is on the telephone, so they can't see the screen. • time is costing them money • delays/absences should be avoided (e.g. "I'll just go and look...."). • Sub-tasks: • ask the customer exactly what information they require (if it concerns a specific publication) • attempt to trace the publication in the system give the customer the requested information. • (if the inquiry is more general) attempt to identify a list of publications which might meet the customer's requirements read the list to the customer. • Contingencies: customer switches from "I'd like to inquire about......." to "Can I order that please".

22. Task Scenario Scripts Help to Define Window Navigation Order Entry • customer gives details the publication they want to order • Apply Filter [Publication List] • Find Publication [Publication List] • Examine Publication [Publication List] • give customer details of publication (including price)customer confirms want to order (the first publication) • Create Order [Order] • Order Publication [Order] • customer gives details of second publication • Apply Filter [Publication List] • Find Publication [Publication List] • Examine Publication [Publication] • give customer details of publication (including price) customer confirms want to order (an additional publication) • Order Publication [Order] • ask for customer name and address • Find Customer [Customer] • if not found, • Create Customer [Customer] • Associate Order with Customer [Order] • give order total, ask for payment details customer gives payment details • Create Payment [Payment] • Verify Payment [Payment] • inform customer order accepted.

23. Using State Transition Diagram (STD) to Define Window Navigation Example Notation ops application: open State A open w_ops_main condition action Order Processing Main Window (w_ops_main) State B cb_ops: clicked Open w_ops cb_pick_cust: clicked Open w_pick_cust Order processing window (w_ops) cb_go_to_main: clicked Return to w_ops_main with customer_id cb_go_to_main:clicked Close w_ops Return to w_ops_main File/Exit menu item: clicked Close w_ops Close w_ops_main Pick customer window (w_pick_cust) Return to the Window environment

24. An Example of GUI Design: Login Screen Define Users and Usability Requirements Model User Tasks Model User Objects Define Style Guide Design GUI Prototype GUI Evaluate GUI GUI Design Design GUI

25. Using Drop-down Menu for Triggering Window Actions • Being a modeless primary window, the window is not dependent upon other windows, except the application window. • For example a Customer window the menu window actions are: Customer Edit Status Help New Undo Suspend Open Cut Re-instate Print Copy Delete Paste GUI Design

26. Define Actions for Windows, User Objects, and Entities Define Users and Usability Requirements GUI Design • Window Action: Action actually performed by user on window via actions against visual objects (e.g., windows controls, menu items) • User Object Action: The action the user wants to perform on the user object. Entity effect: The effect of the action in the system to change entities. • CRUD: Create, Read, Update, and Delete entities. • Update entity attributes. Model User Tasks Define Style Guide Model User Objects Window Design GUI File Edit View Help Prototype GUI Add Evaluate GUI GUI Design Single Order View Delete Update User Object Model • Add anorder • Update order • Change order items • Delete an order Order • Create • Read • Update • Delete Data Model Order • Create • Read • Update • Delete Order Item

27. Search Criteria

28. Picking List

29. Detail Record

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

31. Web Project Team Client Account Manager Producer Information Architect Creative Lead Production Lead Quality Assurance Lead Technical Lead • Script programmer • Component programmer • Database architect • Security expert • Network administrator • Copywriter • Designer • Sounder designer • Video designer • Animators • HTML coder • Art production • Focus group • Tester Source: Adapted from Collaborative Web Development

32. Web Develop Workflow Production/ Hosting Server Development Server Testing/Staging Server Content Provider/ Syndication Web User Web Site Administrator & Manager Production Team Testing Team Testing software Authoring & programming software Web analysis software

33. Google Web Site Design http://marketplace.publicradio.org/display/web/2007/11/19/face_of_google/

34. Know Your Audience • Web surfers • Use strong graphics and bold statements of content to attract the web surfers • Novice and occasional users • Use clear structure and easy access to help occasional users. (e.g. overview pages, hierarchical maps, design graphics and icons) • Expert and frequent users • Use stripped-down, fast-loading text menus for frequent users (e.g. detailed text menus, site structure outlines or comprehensive site indexes) • International users • Provide translations

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

36. Web Interface Design Issues • Ask the following question first: • Who are your target audiences? • What will be your web site's focus? • What information will you like to be on your web site? • How are you going to present and organize them? • Balanced between texts and multimedia objects • Effective vs. Affective pages • Navigation map and support: Use hierarchical structure as the baseline. • Use hypertext links wisely • Use tables, frames, or dynamic HTML for layout control • Consistency • Interactivity

37. Navigation Diagram and Page Banner • FrontPage 2000

38. Web Site Architecture Design Example

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

40. Web Site Design Could be more than one level

41. Sample Form HTML Page Choose Your Favorite Colors: <SELECT NAME="Color" SIZE="1"> <option value="none"> - - Select a color - - <OPTION value="B">Blue <OPTION>Red <OPTION value="G">Green <OPTION value="BR">Brown <OPTION value="Y">Yellow </SELECT> <BR>

42. Gifts.com: Gift Finder

43. Principles of User Interface Design • Aesthetics • Spatial grouping, contrast, 3-D representation. • Feedback • Provide immediate and tangible feedback for actions • Forgiveness • Minimize opportunities for errors such as confirm deletion of a customer record. • Handle errors gracefully • Awareness of Human Strengths and Limitations • Present available choices explicitly • Use radio button, list box, picking list, etc.

44. Top Ten Mistakes in Web Design Very Severe • Outdated information • Slow download times • Bleeding-edge technology • Scrolling text and looping animations Severe • Complex URLs • Lack of navigation support • Non-standard link colors Medium • Frame • Orphan pages Smaller problem • Scrolling navigation pages Source: Jakob Nielsen, http://www.useit.com/alertbox/990502.html

45. GUI Design Guidelines • Know the users • Support various users' work pattern and skill levels • Simplify frequently used tasks • Be consistent and clear • Provide navigational assistance • Use real-world metaphors for icons, forms, and graphic objects • Test early and frequently • Set up system-wide and corporate-wide standards • Start with business event analysis & task analysis • Understand limitations of web-based systems • Apply appropriate GUI design methodology