Design Patterns for the Web. 2 Hall of Fame or Hall of Shame? java.sun.com.

Slides:



Advertisements
Similar presentations
User’s Guide.
Advertisements

Chapter 11 Designing the User Interface
Advertising with Face Book Guadalupe Perez III October 12, 2010 EDTC 3332 Instructional Technology Practicum.
End-User Perceptions of Formal and Informal Representations of Web Sites Jason Hong Francis Li James Lin James Landay Group for User Interface Research.
Interface Design II JMA 462/562 TTH 4:30 – 5:45 College Hall 205.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools 01 November 2005.
DENIM: Finding a Tighter Fit with Web Design Practice James Lin, Mark W. Newman, Jason I. Hong, James A. Landay April 6, 2000 CHI 2000, The Hague
ECT 455 E-Commerce Web Site Engineering Lecture 4B Transaction Processes.
Midterm Exam Review IS 485, Professor Matt Thatcher.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Web Design Patterns (Homepage) IS 485, Professor Matt Thatcher.
Douglas K. van Duyne James A. Landay Jason I. Hong Using Design Patterns to Create Customer-Centered Web Sites.
1 of 6 Parts of Your Notebook Below is a graphic overview of the different parts of a OneNote 2007 notebook. Microsoft ® OneNote ® 2007 notebooks are digital.
1 Intro To Web Design MSIT 588 Dr. Carl Rebman. 2 Good Web Site Design Matters Good Web Site Design can Lead to Healthy Sales
1 Web Design Process & Patterns. 2 Outline Review Web design process Motivation for design patterns Web design patterns Home page pattern.
1 Web Site Design Customer Centered Design Principles Patterns and Processes Dr. Carl Rebman.
Proposal 13 HUMAN CENTRIC COMPUTING (COMP106) ASSIGNMENT 2.
DENIM A Sketching Tool for Prototyping Web and Desktop UIs Mark Newman and Jimmy Lin Group for User Interface Research UC Berkeley July 8, 1999.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
Prof. James A. Landay Computer Science Department Stanford University Autumn 2014 HCI+D: USER INTERFACE DESIGN + PROTOTYPING + EVALUATION Design Patterns.
Chapter 13: Designing the User Interface
Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008.
1 Damask A Tool for Early-Stage Design and Prototyping of Multi-Device User Interfaces G r o u p f o r User Interface Research University of California.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation More Design Patterns: The Exploration.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
5 Planning a Web Site Section 5.1 Determine the purpose of your Web site Define the target audience for your Web site Write a mission statement Section.
Prof. James A. Landay University of Washington Autumn 2006 Design Patterns for the Web October 31, 2006.
Web Design and Patterns CMPT 281. Outline Motivation: customer-centred design Web design introduction Design patterns.
Web Usability 101: Watch (and Discuss) A Live Test John Fritz UMBC.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
Introduction to Usability By : Sumathie Sundaresan.
June 2004User Interface Design, Prototyping, and Evaluation1 Good Web Site Design Matters Good Web Site Design can Lead to Healthy Sales
Microsoft Windows LEARNING HOW USE AN OPERATING SYSTEM 1.
1 iSee Player Tutorial Using the Forest Biomass Accumulation Model as an Example ( Tutorial Developed by: (
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
NAVIL GONZALEZ ANDREA CANTU MAGALY LUNA Heuristic Evaluation.
1. 2 OVERVIEW First Impressions Content Purpose Design Distinction Closing.
SAMPLE HEURISTIC EVALUATION FOR 680NEWS.COM Glenn Teneycke.
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
Click on surfer mouse to catch a wave. The Internet is a worldwide network of _______ that are connected by wires and cables. Click the picture below.
E-commerce usability guide provides guidelines and advice for implementing easy to use e-commerce websites. It focuses on online catalog/selling functionality.
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application.
Heuristic evaluation Functionality: Visual Design: Efficiency:
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Website Development Process. Skills and Functions Needed for a Successful Large-Scale Project Project Manager Marketing Representative Copy Writer & Editor.
Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
1 SY DE 542 Navigation and Organization Prototyping Basics Feb 28, 2005 R. Chow
CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright.
Usability 1 Usability evaluation Without users - analytical techniques With users - survey and observational techniques.
Human Centric Computing (COMP106) Assignment 2 PROPOSAL 23.
Introduction to Usability By : Sumathie Sundaresan.
Chapter 16: User Interface Design Omar Meqdadi SE 273 Lecture 16 Department of Computer Science and Software Engineering University of Wisconsin-Platteville.
Design Phase intro & User Interface Design (Ch 8)
Stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools Ron B. Yeh 26 October 2004.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
Iterative Design & Knowing Your Customers Professor James A. Landay University of Washington CSE 490L – Web Design, Prototyping, & Implementation Spring.
Executive Summary - Human Factors Heuristic Evaluation 04/18/2014.
Prof. James A. Landay University of Washington Autumn 2004 Design Patterns for the Web #1 October 21, 2004.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Ubicomp Design Pre-Patterns May 29, 2008.
Prof. James A. Landay University of Washington Autumn 2007 Design Patterns November 1, 2007.
Section 7.1 Section 7.2 Identify presentation design principles
Design Patterns 48 minutes (skipped how to use patterns)
Unit 14 Website Design HND in Computing and Systems Development
SE365 Human Computer Interaction
Presentation transcript:

Design Patterns for the Web

2 Hall of Fame or Hall of Shame? java.sun.com

3 Hall of Fame Good branding –java logo –value proposition Inverted pyramid writing style Fresh content –changing first read –news in sidebar Obvious Links

Design Patterns for the Web

5 Outline Web Design Process, Specialties & Artifacts Detailed Design Example Web Design Patterns

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation6 Good Web Site Design Matters Good Web Site Design can Lead to Healthy Sales NY Times, Aug , on IBM Web site –“Most popular feature was … search … because people couldn't figure out how to navigate the site“ –“The second most popular feature was the help button, because the search technology was so ineffective.” After redesign –use of the "help" button decreased 84 percent –sales increased 400 percent

7 Web Design Process

8 Design Specialties Information Architecture –encompasses information & navigation design User Interface Design –also includes testing & evaluation Information Architecture User Interface Design Information Design Navigation Design Graphic Design Usability Evaluation

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation9 Artifacts of Design Practice Designers create representations of sites at multiple levels of detail Web sites are iteratively refined at all levels of detail Site Maps StoryboardsSchematicsMock-ups

10 Site Maps High-level, coarse-grained view of entire site

11 Storyboards Interaction sequence, minimal page level detail

12 Schematics Page structure w/ respect to information & navigation

13 Mock-ups High-fidelity, precise representation of page

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation14 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation15 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation16 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation17 4

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation18 5

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation19 Quick-Flow Checkouts 6

20 Basic Web Design Let's take a closer look page by page

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation21 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation22 What site is this? –Logo in top-left corner denotes the site –Another logo at top-right to reinforce –examples of SITE BRANDING (E1) What site is this? –Logo in top-left corner denotes the site –Another logo at top-right to reinforce –examples of SITE BRANDING (E1) 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation23 What kind of site is this? –Shopping cart icon –Tab row content & categories on left –Prices in content area –UP-FRONT VALUE PROPOSITION (C2) –example of PERSONAL E-COMMERCE (A1) What kind of site is this? –Shopping cart icon –Tab row content & categories on left –Prices in content area –UP-FRONT VALUE PROPOSITION (C2) –example of PERSONAL E-COMMERCE (A1) 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation24 What can I do here? –Welcome for new visitors –Tab row / Search on top –“Categories” –Prices –Examples of OBVIOUS LINKS (K10) What can I do here? –Welcome for new visitors –Tab row / Search on top –“Categories” –Prices –Examples of OBVIOUS LINKS (K10) 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation25 Most important info visible without scrolling ABOVE THE FOLD (I2) Most important info visible without scrolling ABOVE THE FOLD (I2) 1

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation26 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation27 What site am I at? –Logo in upper-left reinforces brand, can click to go to home –Same font, layout, color scheme also reinforces –examples of SITE BRANDING (E1) What site am I at? –Logo in upper-left reinforces brand, can click to go to home –Same font, layout, color scheme also reinforces –examples of SITE BRANDING (E1) 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation28 Where am I in the site? –“Home > Music” are LOCATION BREAD CRUMBS (K6) –TAB ROW (K3) says “Music” –Album cover, “Product Highlights”, and CD cover Where am I in the site? –“Home > Music” are LOCATION BREAD CRUMBS (K6) –TAB ROW (K3) says “Music” –Album cover, “Product Highlights”, and CD cover 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation29 Can I trust these sellers? –Who am I buying from? –Are they reputable? –What about shipping? Can I trust these sellers? –Who am I buying from? –Are they reputable? –What about shipping? 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation30 The Fold –Hmm, what’s below here? The Fold –Hmm, what’s below here? 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation31 Impulse buy PESONALIZED RECOMMENDATIONS (G3) About this album Lots of unused space Still more info below… Impulse buy PESONALIZED RECOMMENDATIONS (G3) About this album Lots of unused space Still more info below… 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation32 Is this product any good? –Editorial reviews –Customer reviews –RECOMMENDATION COMMUNITY (G4) Is this product any good? –Editorial reviews –Customer reviews –RECOMMENDATION COMMUNITY (G4) 2

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation33 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation34 What site am I at? –Logo in upper-left –Colors, layout, font –examples of SITE BRANDING (E1) What site am I at? –Logo in upper-left –Colors, layout, font –examples of SITE BRANDING (E1) 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation35 Where am I in the site? –Last link clicked was “Buy!” –“Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page” –SHOPPING CART (F3) Where am I in the site? –Last link clicked was “Buy!” –“Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page” –SHOPPING CART (F3) 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation36 Cross-selling –Possibly a pleasant surprise –Impulse buy –CROSS-SELLING & UP- SELLING (G2 ) Cross-selling –Possibly a pleasant surprise –Impulse buy –CROSS-SELLING & UP- SELLING (G2 ) 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation37 What am I going to buy? –Easy to remove –Easy to move to wishlist How much will it cost? –Shipping costs there, no nasty surprises SHOPPING CART (F3) What am I going to buy? –Easy to remove –Easy to move to wishlist How much will it cost? –Shipping costs there, no nasty surprises SHOPPING CART (F3) 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation38 What can I do? –“Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON (K5) –Visually distinct –3D, looks clickable –Repeated above and below the fold What can I do? –“Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON (K5) –Visually distinct –3D, looks clickable –Repeated above and below the fold 3

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation39 4

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation40 What if I don’t have a User ID? What if I forgot my password? SIGN-IN/NEW ACCOUNT (H2) What if I don’t have a User ID? What if I forgot my password? SIGN-IN/NEW ACCOUNT (H2) 4

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation41 5

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation42 What site? –Logo, layout, color, fonts Where in site? –Checkout, step 1 of 3 –“Choose shipping address” –QUICK-FLOW CHECKOUT (F1) What site? –Logo, layout, color, fonts Where in site? –Checkout, step 1 of 3 –“Choose shipping address” –QUICK-FLOW CHECKOUT (F1) 5

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation43 Note what’s different –No tab rows –No impulse buys –Only navigation on page takes you to next step This is a PROCESS FUNNEL (H1) –Extraneous info and links removed to focus users Note what’s different –No tab rows –No impulse buys –Only navigation on page takes you to next step This is a PROCESS FUNNEL (H1) –Extraneous info and links removed to focus users 5

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation44 Quick-Flow Checkouts 6

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation45 Quick-Flow Checkouts Last step of process –Step 3, “Place Order” –“Place my order” button Two HIGH-VISIBILITY ACTION BUTTONS (K5) for fold Last step of process –Step 3, “Place Order” –“Place my order” button Two HIGH-VISIBILITY ACTION BUTTONS (K5) for fold 6

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation46 Quick-Flow Checkouts No nasty surprises –Can see order –Total price is same as shopping cart –ORDER SUMMARY (F7) No nasty surprises –Can see order –Total price is same as shopping cart –ORDER SUMMARY (F7) 6

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation47 Quick-Flow Checkouts Easy to change shipping and billing Easy to save this info –Easier to setup info in context of specific task –Clearer to users why this info is needed Easy to change shipping and billing Easy to save this info –Easier to setup info in context of specific task –Clearer to users why this info is needed

48 Design = Solutions Design is about finding solutions Unfortunately, designers often reinvent Hard to know how things were done before Why things were done a certain way How to reuse solutions

49 Design Patterns Design patterns communicate common design problems and solutions –First used in architecture [Alexander] Ex. How to create a beer hall where people socialize?

50 Using Design Patterns Not too general and not too specific –Use a solution “a million times over, without ever doing it the same way twice” Design patterns are a shared language –for “building and planning towns, neighborhoods, houses, gardens, & rooms.” –Ex. Beer hall is part of a center for public life… –Ex. Beer hall needs spaces for groups to be alone… ALCOVES

51 A Web of Design Patterns (181) The Fire (8) Mosaic of Subcultures (179) Alcoves (95) Building Complex (33) Night Life (31) Promenade (90) Beer Hall Cities & Towns Interiors Local Gatherings

52 Web Design Patterns Now used in Web design Communicate design problems & solutions –how to create navigation bars for finding relevant content… –how to create a shopping cart that supports check out… –how to make e-commerce sites where people return & buy…

53 NAVIGATION BAR (K2) Problem: Customers need a structured, organized way of finding the most important parts of your Web site

54 NAVIGATION BAR (K2) Solution diagram –Captures essence on how to solve problem First-level navigation Second-level navigation Link to home

55 Advanced ecommerce Completing tasks Page layouts Search Page-level navigation Speed The mobile web Pattern Groups Our patterns organized by group Site genres Navigational framework Home page Content management Trust and credibility Basic ecommerce

56 PROCESS FUNNEL (H1) Problem: Need a way to help people complete highly specific stepwise tasks –Ex. Create a new account –Ex. Fill out survey forms –Ex. Check out

57 PROCESS FUNNEL (H1)

58 PROCESS FUNNEL (H1) What’s different? –No tab rows –No impulse buys –Only navigation on page takes you to next step What’s different? –No tab rows –No impulse buys –Only navigation on page takes you to next step What’s the same? –Logo, layout, color, fonts What’s the same? –Logo, layout, color, fonts

59 PROCESS FUNNEL (H1) Problem: What if users need extra help?

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation60 Process Tunnel

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation61 CONTEXT-SENSITIVE HELP (H8)

62 PROCESS FUNNEL (H1) Solution Diagram

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation63 PROCESS FUNNEL (H1) Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K2) Navigation Bars (K3) Tab Rows (K4) Action Buttons (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages

64 Patterns Support Creativity Patterns come from successful examples –sites that are so successful that lots of users are familiar with their paradigms (e.g., Yahoo) –interaction techniques/metaphors that work well across many sites (e.g., shopping carts) Not too general & not too specific –you need to specialize to your needs Patterns let you focus on the hard, unique problems to your design situation –every real design will have many of these

65 Patterns Offer the Best of Principles, Guidelines, & Templates Patterns help you get the details right, without over-constraining your solution –unlike principles, patterns not too general, so will apply to your situation –unlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patterns –unlike style guides, patterns not too specific, so can still be specialized –unlike templates, patterns illustrate flows among different pages Patterns can serve as documentation for team-oriented environments

66 Format of Web Design Patterns Pattern Name and Number Exemplar Background Problem Forces Solution Solution Diagram Related Patterns

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation67 Pattern Name and Number Exemplar Background Problem Statement Forces & Solution Forces & Solution

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation68 Bus Stops Solution Diagram Solution Diagram Related Patterns Related Patterns Solution Summary Solution Summary

69 Example of How to Use Patterns Sarah is designer on e-commerce site selling custom t-shirts to businesses Her team notices drop-off in checkout process (abandoned shopping carts) She turns to design patterns –looks to Pattern Group F – Basic E-Commerce –QUICK FLOW CHECKOUT (F1) catches her eye –looks to references PERSONAL E-COMMERCE (A1) – skims & sees too high level for current issue SHOPPING CART (F3) – looks promising, but not now PROCESS FUNNEL (H1) – how to keep people on task – exactly what her team needs now!

70 Example of How to Use Patterns Sarah uses PROCESS FUNNEL (H1) to find flaws & redesign checkout process –e.g., notices current checkout is heavy with text instructions & many links that leave the page Using PROCESS FUNNEL (H1), sketches 3 new designs Gets feedback on new designs from team Iterates to produce 2 designs Performs a quick 1 day evaluation w/ 5 users –visits them at work & has them use old design anticipated many of the problems, but notes a few new ones –next she shows new design & has user describe where each link will go & asks whether content makes sense –uses the results to iterate again & present to team

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation71 PROCESS FUNNEL (H1) Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K2) Navigation Bars (K3) Tab Rows (K4) Action Buttons (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages

72 MEANINGFUL ERROR MESSAGES (K13) Problem: When customers make mistakes, they need to be informed of the problem and how to recover Solution –Clear statement of problem –Explain how to recover –Position near the problem

CSE490f- Autumn

CSE490f- Autumn Clear error message? –two messages at top Explains how to recover? –only implies it is missing required information Positioned near the problem? –error messages far –required info differs in green/red -> problem for users w/ color deficiency Clear error message? –two messages at top Explains how to recover? –only implies it is missing required information Positioned near the problem? –error messages far –required info differs in green/red -> problem for users w/ color deficiency

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation75

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation76 Clear error message Explains how to recover Positioned near the problem Clear error message Explains how to recover Positioned near the problem

77 MEANINGFUL ERROR MESSAGES (K13) Solution Diagram

78 Web Design Process

79 Patterns in Exploration Phase Use Exploration-level patterns to design overall structure –different choices will give radically different designs For example, how to organize information –HIERARCHICAL ORGANIZATION (B3) –TASK-BASED ORGANIZATION (B4) –ALHABETICAL ORGANIZATION (B5) –…

80 Patterns in Exploration Phase TASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s)

81 Design Exploration Example John given the task of designing a new subsite for showing maps to businesses –listings found by typing in address –key feature: show nearby businesses John comes up with two design sketches –Design #1 uses ALPHABETICAL ORGANIZATION (B5) for list of all nearby businesses –Design #2 uses TASK-BASED ORGANIZATION (B4) for list of related nearby businesses

User Interface Design, Prototyping, and Evaluation82 Design #1 ALPHABETICAL ORGANIZATION (B5)

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation83 Design #2 TASK-BASED ORGANIZATION (B4)

84 Evaluating Which Design to Choose Low-fidelity Usability Test –sketches the rest of the key screens on paper –brings in 5 participants to his office –asks each to carry out 3 tasks while John’s colleague Sam “plays computer” –John observes how they perform Tasks 1) look up 1645 Solano Ave., Berkeley CA 2) look up 1700 California Ave, San Francisco CA & find Tadich Grill 3) look up 2106 N 55th St, Seattle WA & find a Sushi restaurant nearby

85 Evaluating Which Design to Choose Results with Design #1 (Alphabetical) –Task 1: look up 1645 Solano Ave no difficulties encountered – warm-up task! –Task 2: look up 1700 California & find Tadich Grill several users didn’t notice that the list of nearby businesses was scrollable (due to paper affordances?) those that scrolled took awhile to find in list of over 500 –Task 3: look up th St & find nearby Sushi restaurant 3 users only picked restaurants that had “restaurant” in the name & thus couldn’t find “Kisaku”

86 Evaluating Which Design to Choose Results with Design #2 (Task-based) –Task 1: look up 1645 Solano Ave no difficulties encountered – warm-up task! –Task 2: look up 1700 California & find Tadich Grill 1 user took awhile to figure out that Tadich Grill was a restaurant & to click on the “Restaurants” link all others found it in 2 clicks (Restaurants->Tadich Grill) –Task 3: look up th St & find nearby Sushi restaurant 3 found “Kisaku” in 2 clicks 2 others asked for a listing of Japanese restaurants

87 Evaluating Which Design to Choose General comments –2 users said they often want to maps to friends who they will be meeting (task-based) –3 users wanted driving directions (task- based) → TASK-BASED ORGANIZATION (B4) worked better, but still had some minor problems

User Interface Design, Prototyping, and Evaluation88 Design #2 – Revision 1 Adding More Related Tasks

User Interface Design, Prototyping, and Evaluation89 Design #2 – Revision 2 Adding HIERARCHICAL ORGANIZATION (B3) & LOCATION BREAD CRUMBS (K6)

User Interface Design, Prototyping, and Evaluation90 Design #2 – Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J1)

91 Summary Lots of issues involved in designing web sites Design patterns one way of capturing good design knowledge

92 Further Reading Books on Web Design Web Design in a Nutshell. Jennifer Niederst. O'Reilly, Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison- Wesley Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, Don’t Make Me Think! Steven Krug. Que, 2000.

93 Further Reading Books on Web Design Community Building on the Web. Amy Jo Kim. Peachpit Press, Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press Understanding Comics. Scott McCloud. Kitchen Sink Press, Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.

94 Further Reading Websites on Web Design UsableWeb.com, links to other usability sites Usability.gov, for building accessible websites Web pages that suck, at Net tips for designers, at User Interface Engineering, at ZDNet Ecommerce Best Practices, at

CSE490f- Autumn 2006User Interface Design, Prototyping, and Evaluation95 Further Reading Websites on Web Design New York Times Ecommerce Times, at – technology/cybertimes/commerce/ technology/cybertimes/commerce/ Webword.com usability log CNet Builder.com, info on building sites ACM’s CHI-Web Mailing List – Goodexperience.com web log Jakob Nielsen useit.com