Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation More Design Patterns: The Exploration.

Slides:



Advertisements
Similar presentations
MARKETPLACE TRANSITION FROM CLASSIC INTERFACE TO PHOENIX INTERFACE.
Advertisements

User’s Guide.
Introduction to Online Ordering. Log in to OK Choice The web address for OK Choice is Enter your User.
How to Use HSPInStore.com A Honeywell Branded Signage Site for Distributor Partners & Buying Group Members
End-User Perceptions of Formal and Informal Representations of Web Sites Jason Hong Francis Li James Lin James Landay Group for User Interface Research.
Homepage Design Audience Satisfaction Survey. Survey Goal: The new website design should invoke an aesthetic emotional response with our audience. The.
Interface Design II JMA 462/562 TTH 4:30 – 5:45 College Hall 205.
Web Design Patterns (E-Commerce) IS 485, Professor Matt Thatcher.
ECT 455 E-Commerce Web Site Engineering Lecture 4B Transaction Processes.
Amazon.com Collaborative Project Group Members: Brian Alt Eranda Samarasinghe Jasbir Singh Due: December 3 rd, 2003 Eng 393.
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.
Training Guide. The Punch Out Catalog System The Punch Out shopping catalog for Tech Depot takes the user directly into the vendor’s website and online.
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 Site Design Customer Centered Design Principles Patterns and Processes Dr. Carl Rebman.
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
Prof. James A. Landay University of Washington CSE 441 Spring 2012 Mobile UI Design * Based in part on content in Chapter 9-10 of Designing the iPhone.
Design Patterns CSE 440 User Interface Design, Prototyping, & Evaluation Autumn 2008 October 30, 2008.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
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.
Yahoo! Proprietary. Not for re-distribution. 0  Trip Planner is a tool to help consumers envision, research, plan, and share their travel experience 
Antalis-HQ USER GUIDE. Antalis, Europe’s leading distributor of paper, packaging solutions and visual communication products presents you its user web.
Design Patterns for the Web. 2 Hall of Fame or Hall of Shame? java.sun.com.
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.
WNS1.com Online Training How to use the Western Nevada Supply online store and tools.
Instructional Guide Original presentation created by EasyBib, adapted by S. Hall for educational purposes following Fair Use Guidelines and permission.
3/25/2011. HOME PAGE [A] Global Navigation Bar -transparent to allow image to show through [B] Featured Platform Region -full image -rotates through.
NAVIL GONZALEZ ANDREA CANTU MAGALY LUNA Heuristic Evaluation.
1 Shopping on the Internet INFO 654 – Spring 2007.
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
E-commerce usability guide provides guidelines and advice for implementing easy to use e-commerce websites. It focuses on online catalog/selling functionality.
MARKETING PORTAL PRESENTED TO YOU BY CABLES TO GO.
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.
A web based software tool for submitting orders to the Copy Center.
Replacement Parts Pros How to…Order Products Home Page: Displays the different categories of product Drop down menu lists the.
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.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Confidential Web Ordering Overview. Confidential LOG ON:   Enter your login name &
Classifications Schemes and Class Scheme Items in the Curation Tool: Interface Design Audrey Lipps, User-Centered Design
Websites with good heuristics Irene Wachirawutthichai.
Chapter 16: User Interface Design Omar Meqdadi SE 273 Lecture 16 Department of Computer Science and Software Engineering University of Wisconsin-Platteville.
Online Catalog Tutorial. Introduction Welcome to the Online Catalog Tutorial. This is the place to find answers to all of your online shopping questions.
Computer Science 160 Group 5 Scott Carter, Chuck Moidel, Leila Takayama, Kevin Wang Tuesday, December 4, 2001.
The Basics of Microsoft Word Getting Started and Formatting your paper.
 Start Microsoft Word from the icon or shortcut for the application. This is usually accessible from the Start Button. Then go to Programs, then Microsoft.
We've made it easy for you to buy online. We’ve also added a dedicated customer care team to answer any questions or to walk you through the order process.
Facebook for Beginners One Session Class. What will you learn today? What can you do on Facebook? Creating a profile Privacy Connecting with friends Sending.
Design Phase intro & User Interface Design (Ch 8)
Do This file can be found at
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.
Chapter 7: Landing Page Optimization. Chapter Objectives Identify the various types of landing pages. Design a landing page that makes effective use of.
Pattern Evaluation Exercise James A. Landay, University of Washington CSE 490L – Web Design, Prototyping, & Implementation April 10, 2008.
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.
Design Patterns 48 minutes (skipped how to use patterns)
Introduction to the New SSA OnePoint Online Website
Session I Chapter 18 - How to Design a Web Site
Customizing Your Home Page
CMP Creating Your Personal and Small Business Web Sites
SE365 Human Computer Interaction
Presentation transcript:

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation More Design Patterns: The Exploration Phase April 29, 2008

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation2 Hall of Fame or Hall of Shame? java.sun.com

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation3 Hall of Fame! SITE BRANDING (E1) –java logo – UP - FRONT VALUE PROPOSITION (C2) Written for reading – HEADLINES AND BLURBS (D3) – INVERTED PYRAMID WRITING STYLE (D7) – OBVIOUS LINKS (K10) Fresh content –changing, CLEAR FIRST READ (I3) –news in sidebar

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation More Design Patterns: The Exploration Phase April 29, 2008

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation5 Outline Review Lo-fi Prototyping Detailed Design Example Design Patterns in the Design Exploration Phase

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation6 Low-fi Prototyping Review Low-fi testing allows us to quickly iterate to … –get feedback from users & change right away Informal prototyping tools bridge the gap between … –paper & high-fi tools Low-fi & informal prototypes keep focus on …. and not on …. –high level structure & interaction and not on visual detail

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation7 1

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation8 2

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation9 3

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation10 4

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation11 5

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation12 Quick-Flow Checkouts 6

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation13 Basic Web Design Let’s take a closer look page by page

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation14 1

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation15 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation16 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation17 What can I do here? –Welcome for new visitors –TAB ROW (K3) / SEARCH ACTION MODULE (J1) on top –“Categories” –Prices –Examples of OBVIOUS LINKS (K10) What can I do here? –Welcome for new visitors –TAB ROW (K3) / SEARCH ACTION MODULE (J1) on top –“Categories” –Prices –Examples of OBVIOUS LINKS (K10) 1

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation18 Most important info visible without scrolling ABOVE THE FOLD (I2) Most important info visible without scrolling ABOVE THE FOLD (I2) 1

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation19 2

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation20 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation21 Where am I in the site? –“Home > Music” are LOCATION BREAD CRUMBS (K6) –TAB ROW (K3) and SEARCH ACTION MODULE (J1) say “Music” –Album cover, “Product Highlights”, and CD cover Where am I in the site? –“Home > Music” are LOCATION BREAD CRUMBS (K6) –TAB ROW (K3) and SEARCH ACTION MODULE (J1) say “Music” –Album cover, “Product Highlights”, and CD cover 2

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation22 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation23 The Fold –Hmm, what’s below here? The Fold –Hmm, what’s below here? 2

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation24 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation25 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation26 3

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation27 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation28 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation29 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation30 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation31 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation32 4

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation33 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation34 5

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation35 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation36 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 customers 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 customers 5

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation37 Quick-Flow Checkouts 6

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation38 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation39 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation40 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 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation41 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation42 PROCESS FUNNEL (H1)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation43 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation44 PROCESS FUNNEL (H1) Solution Diagram

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation45 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation46 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation47 Web Design Process

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation48 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) –…

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation49 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)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation50 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation51 Design #1 ALPHABETICAL ORGANIZATION (B5)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation52 Design #2 TASK-BASED ORGANIZATION (B4)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation53 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation54 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”

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation55 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation56 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

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation57 Design #2 – Revision 1 Adding More Related Tasks

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation58 Design #2 – Revision 2 Adding HIERARCHICAL ORGANIZATION (B3) & LOCATION BREAD CRUMBS (K6)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation59 Design #2 – Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J1)

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation60 Summary Lots of issues involved in designing high quality web sites Design patterns one way of capturing good design knowledge so that designers can focus on unique problems Glance through the book and apply these to your designs where appropriate

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation61 Next Time Heuristic Evaluation –Read Nielson Heuristic Evaluation chapter (online)