Design Patterns CSE 440 User Interface Design Prototyping
- Slides: 93
Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008
Hall of Fame or Hall of Shame? o java. sun. com CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 2
Hall of Fame o Good branding * java logo * value prop o Inverted pyramid writing style o Fresh content * changing first read * news in sidebar o Obvious Links CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 3
Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008
Outline o Review of Heuristic Evaluation o Web Design Process, Specialties & o o Artifacts Detailed Design Example Web Design Patterns Ubicomp Design Patterns Mid-term Course Evaluation CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 5
Grade Stats o #1 Project Proposal * High: 100, Low: 78, Mean: 87 o #2 Contextual Inquiry (Group) * High: 94, Low: 74, Mean: 84 o #3 ESM and Task Analysis * High: 92, Low: 71, Mean: 85 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 6
Review of Heuristic Evaluation o Have evaluators go through the UI twice * phase 1 simply to get to know the overall UI * phase 2 to carefully look for problems ? o Ask them to see if it complies with heuristics * note where it doesn’t & say why o Combine the findings from 3 to 5 evaluators ? * different evaluators will discover different problems o Have evaluators independently rate severity o Combine results in a group meeting o Alternate HE with usability testing ? * different techniques will find different problems o Tradeoffs ? * HE inexpensive compared to usability testing * HE may find issues hard to find otherwise (e. g. , a font that may slow down performance) * HE susceptible to finding false positives CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 7
Web Design Process CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 8
Design Specialties Usability Evaluation User Interface Design Information Architecture Information Design Architecture * encompasses information & navigation design Navigation Design Graphic Design CSE 440 - Autumn 2008 o Information o User Interface Design * also includes some testing & evaluation User Interface Design, Prototyping, and Evaluation 9
Artifacts of Design Practice o Designers create representations of sites at multiple levels of detail o Web sites are iteratively refined at all levels of detail Site Maps CSE 440 - Autumn 2008 Storyboards Schematics User Interface Design, Prototyping, and Evaluation Mock-ups 10
Site Maps o High-level, coarse-grained view of entire site CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 11
Storyboards o Interaction sequence, minimal page level detail CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 12
Schematics o Page structure w/ respect to information & navigation CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 13
Mock-ups o High-fidelity, precise representation of page CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 14
1 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 15
2 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 16
3 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 17
4 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 18
5 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 19
6 CSE 440 - Autumn 2008 Quick-Flow Checkouts User Interface Design, Prototyping, and Evaluation 20
Basic Web Design o Let’s take a closer look page by page CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 21
1 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 22
1 • What site is this? – Logo in top-left corner denotes the site – Another logo at top-right to reinforce – examples of SITE BRANDING (E 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 23
1 • What kind of site is this? – Shopping cart icon – Tab row content & categories on left – Prices in content area – UP-FRONT VALUE PROPOSITION (C 2) – example of PERSONAL E-COMMERCE (A 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 24
1 • What can I do here? – – – CSE 440 - Autumn 2008 Welcome for new visitors Tab row / Search on top “Categories” Prices Examples of OBVIOUS LINKS (K 10) User Interface Design, Prototyping, and Evaluation 25
1 • Most important info visible without scrolling • ABOVE THE FOLD (I 2) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 26
2 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 27
2 • 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 (E 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 28
2 • Where am I in the site? – “Home > Music” are LOCATION BREAD CRUMBS (K 6) – TAB ROW (K 3) says “Music” – Album cover, “Product Highlights”, and CD cover CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 29
2 • Can I trust these sellers? – Who am I buying from? – Are they reputable? – What about shipping? CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 30
2 • The Fold – Hmm, what’s below here? CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 31
2 • Impulse buy • PESONALIZED RECOMMENDATIONS (G 3) • About this album • Lots of unused space • Still more info below… CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 32
2 • Is this product any good? – Editorial reviews – Customer reviews – RECOMMENDATION COMMUNITY (G 4) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 33
3 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 34
3 • What site am I at? – Logo in upper-left – Colors, layout, font – examples of SITE BRANDING (E 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 35
3 • 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 (F 3) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 36
3 • Cross-selling – Possibly a pleasant surprise – Impulse buy – CROSS-SELLING & UPSELLING (G 2) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 37
3 • 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 CSE 440 - Autumn 2008 • SHOPPING (F 3) and Evaluation User Interface. CART Design, Prototyping, 38
3 • What can I do? – “Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON (K 5) – Visually distinct – 3 D, looks clickable – Repeated above and below the fold CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 39
4 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 40
4 • What if I don’t have a User ID? • What if I forgot my password? • SIGN-IN/NEW ACCOUNT (H 2) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 41
5 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 42
5 • What site? – Logo, layout, color, fonts • Where in site? – Checkout, step 1 of 3 – “Choose shipping address” – QUICK-FLOW CHECKOUT (F 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 43
5 • Note what’s different (? ) – No tab rows – No impulse buys – Only navigation on page takes you to next step • This is a PROCESS FUNNEL (H 1) – Extraneous info and links removed to focus customers CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 44
6 CSE 440 - Autumn 2008 Quick-Flow Checkouts User Interface Design, Prototyping, and Evaluation 45
6 Quick-Flow Checkouts • Last step of process – Step 3, “Place Order” – “Place my order” button • Two HIGH-VISIBILITY ACTION BUTTONS (K 5) for fold CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 46
6 Quick-Flow Checkouts • No nasty surprises – Can see order – Total price is same as shopping cart – ORDER SUMMARY (F 7) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 47
Quick-Flow Checkouts • Easy to change shipping and billing • Easy to save this info – Easier to setup info in context of specific task – Clear to customers why this info is needed CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 48
Design = Solutions o Design is about finding solutions o Unfortunately, designers often reinvent + Hard to know how things were done before + Why things were done a certain way + How to reuse solutions CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 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? CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 50
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? CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 51
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 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 52
A Web of Design Patterns (31) Promenade (33) Night Life (95) Building Complex (179) Alcoves CSE 440 - Autumn 2008 (181) The Fire User Interface Design, Prototyping, and Evaluation Local Gatherings Interiors (90) Beer Hall Cities & Towns (8) Mosaic of Subcultures 53
Web Design Patterns o Now used in UI design o 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… CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 54
NAVIGATION BAR (K 2) o Problem: Customers need a structured, organized way of finding the most important parts of your Web site CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 55
NAVIGATION BAR (K 2) o Solution diagram * Captures essence on how to solve problem Link to home First-level navigation Second-level navigation CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 56
Pattern Groups Our patterns organized by group Site genres Advanced ecommerce Navigational framework Completing tasks Home page Page layouts Content management Search Trust and credibility Page-level navigation Basic ecommerce Speed The mobile web CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 57
PROCESS FUNNEL (H 1) • 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 CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 58
PROCESS FUNNEL (H 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 59
• What’s different? PROCESS – No tab rows FUNNEL (H 1) – No impulse buys – Only navigation on page takes you to next step • What’s the same? – Logo, layout, color, fonts CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 60
PROCESS FUNNEL (H 1) o Problem: What if users need extra help? CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 61
Process Tunnel CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 62
CONTEXT-SENSITIVE HELP (H 8) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 63
FLOATING WINDOWS (H 6) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 64
FLOATING WINDOWS (H 6) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 65
PROCESS FUNNEL (H 1) Solution Diagram CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 66
PROCESS FUNNEL (H 1) Related Patterns (A 1) E-Commerce (A 10) Web Apps (A 11) Intranets (H 1) Process Funnel (K 2) Navigation Bars (H 8) Context-Sensitive Help (K 3) Tab Rows (I 2) Above the Fold (K 4) Action Buttons (K 5) High-Viz Action Buttons (K 12) Preventing Errors CSE 440 - Autumn 2008 (K 13) Meaningful Error Messages User Interface Design, Prototyping, and Evaluation 67
Patterns Support Creativity o 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) o Not too general & not too specific * you need to specialize to your needs o Patterns let you focus on the hard, unique problems to your design situation * every real design will have many of these CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 68
Patterns Offer the Best of Principles, Guidelines, & Templates o 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 o Patterns can serve as documentation for team-oriented environments CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 69
Format of Web Design Patterns • • Pattern Name and Number Exemplar Background Problem Forces Solution Diagram Related Patterns CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 70
Pattern Name and Number Exemplar Forces & Solution Background Problem Statement CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 71
Bus Stops Solution Diagram Related Patterns Solution Summary CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 72
Web Design Process CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 73
Patterns in Exploration Phase o Use Exploration-level patterns to design overall structure * different choices will give radically different designs o For example, how to organize information * * HIERARCHICAL ORGANIZATION (B 3) TASK-BASED ORGANIZATION (B 4) ALHABETICAL ORGANIZATION (B 5) … CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 74
Patterns in Exploration Phase TASK-BASED ORGANIZATION (B 4): Link the completion of one group of tasks to the beginning of the next related task(s) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 75
Design Exploration Example o 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 o John comes up with two design sketches * Design #1 uses ALPHABETICAL ORGANIZATION (B 5) for list of all nearby businesses * Design #2 uses TASK-BASED ORGANIZATION (B 4) for list of related nearby businesses CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 76
Design #1 ALPHABETICAL ORGANIZATION (B 5) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 77
Design #2 TASK-BASED ORGANIZATION (B 4) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 78
Evaluating Which Design to Choose o 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 o 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 55 th St, Seattle WA & find a Sushi restaurant nearby CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 79
Evaluating Which Design to Choose o 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 2106 55 th St & find nearby Sushi restaurant + 3 users only picked restaurants that had “restaurant” in the name & thus couldn’t find “Kisaku” CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 80
Evaluating Which Design to Choose o 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 2106 55 th St & find nearby Sushi restaurant + 3 found “Kisaku” in 2 clicks + 2 others asked for a listing of Japanese restaurants CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 81
Evaluating Which Design to Choose o General comments * 2 users said they often want to email maps to friends who they will be meeting (task-based) * 3 users wanted driving directions (task-based) → TASK-BASED ORGANIZATION (B 4) worked better, but still had some minor problems CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 82
Design #2 – Revision 1 Adding More Related Tasks CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 83
Design #2 – Revision 2 Adding HIERARCHICAL ORGANIZATION (B 3) & LOCATION BREAD CRUMBS (K 6) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 84
Design #2 – Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J 1) CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 85
Design Patterns Moving Beyond Web CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 86
Design Patterns Moving Beyond Web CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 87
Summary o Lots of issues involved in designing web sites o Design patterns one way of capturing good design knowledge CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 88
Further Reading Books on Web Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2 nd edition. 2007. o Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998. o Don’t Make Me Think! Steven Krug. Que, 2000. CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 89
Further Reading Books on Web Design o Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000. o Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999. CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 90
Further Reading Websites on Web Design o Usable. Web. com, links to other usability sites o Usability. gov, for building accessible websites o Web pages that suck, at http: //www. webpagesthatsuck. com/ o Net tips for designers, at http: //www. dsiegel. com/tips/ o User Interface Engineering, at http: //www. uie. com o ZDNet Ecommerce Best Practices, at http: //www. zdnet. com/ecommerce. CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 91
Further Reading Websites on Web Design o New York Times Ecommerce Times, at * http: //www. nytimes. com/pagestechnology/cybertimes/commerce/ o Webword. com usability log o CNet Builder. com, info on building sites o ACM’s CHI-Web Mailing List * http: //www. acm. org/sigchi/web/chi-web. html o Goodexperience. com web log o Jakob Nielsen useit. com CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 92
Next Time o Lo-fi Prototyping * Read + Snyder, Paper Prototyping, Ch. 4 + Discussion of guidelines for user observation By Kathleen Gomoll and Anne Nichol CSE 440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 93
- User interface prototyping in software engineering
- Section 17-4 patterns of evolution pages 435-440 answers
- User interface design in system analysis and design
- Forms and reports in system analysis and design
- Principle of input design
- User interface design cycle
- User interface design steps in software engineering
- User interface analysis and design
- Graphical user interface design principles
- Uiecu
- Atm user interface design
- User interface design and evaluation
- User interface in software engineering
- User interface design principles in software engineering
- Python user interface design
- Visualization in user interface design
- Recoverability in user interface design
- User interface design steps in software engineering
- Task centered user interface design
- Interface design in software engineering
- Labview user interface design examples
- User interface design process in software engineering
- Fitts law user interface design
- Interface in java
- Fluidity in hci
- Office interface vs industrial interface
- Interface------------ an interface *
- Yahoo user interface library (yui)
- What is xul
- Graphical user interface testing
- User interface subsystem
- Interface architecture diagram
- User interface importance
- Touchless touchscreen
- [web user interface]
- Tangible user interface examples
- User interface theory
- Mdi multiple document interface
- Uas imk
- What is gui
- Java graphical user interface
- Task conformance in hci
- History of the gui
- User interface feedback
- Lima
- Characteristics of graphical user interface ppt
- Idioms
- User interface and its types
- User interface instagram
- User interface revit
- Proses desain antarmuka
- Interface between user and hardware
- User interface toolkit
- Apa pengertian antarmuka pemakai (user interface)
- User interface solutions
- Gui meaning
- Dialog dalam konteks perancangan user interface adalah
- Characteristics of graphical user interface
- Back office user interface
- How many groups of golden rules are coined by theo mandel
- Model yang digunakan untuk mendesain layout adalah kecuali
- Advantages and disadvantages of menu driven interface
- Graphical user interface in data structures
- Operating system user interface
- Components of graphical user interface
- Windows 7 user interface
- User interface structure
- Interface structure design
- User interface process application block
- Syarat embedded system
- Nui natural user interface
- User interface hall of shame
- Ben shneiderman designing the user interface
- Interface between application software
- User familiarity
- Sus petronas portal
- Character user interface
- 5 tipe utama interaksi user interface
- In the context of user interface designs, a heuristic is
- Voice user interface
- Gui characteristics
- Coherent ui a modern user interface
- Komponen user interface
- Lab ajax
- Area code 440 location
- Polylite 440-m850
- 15-440
- Gerry dube
- Textilexpo
- Bola dengan massa 0 440 kg yang bergerak ke timur
- Basis risk arises due to
- Xavier mail delivery robot
- Bola dengan massa 0 440 kg yang bergerak ke timur
- 15-440 cmu