More Design Patterns: The Exploration Phase
-
Upload
scott-montoya -
Category
Documents
-
view
15 -
download
1
description
Transcript of More Design Patterns: The Exploration Phase
![Page 1: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/1.jpg)
Prof. James A. LandayUniversity of Washington
Spring 2008
Web Interface Design, Prototyping, and Implementation
More Design Patterns: The Exploration Phase
April 29, 2008
![Page 2: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/2.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 2
Hall of Fame or Hall of Shame?
• java.sun.com
![Page 3: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/3.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 3
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
![Page 4: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/4.jpg)
Prof. James A. LandayUniversity of Washington
Spring 2008
Web Interface Design, Prototyping, and Implementation
More Design Patterns: The Exploration Phase
April 29, 2008
![Page 5: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/5.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 5
Outline
• Review Lo-fi Prototyping
• Detailed Design Example
• Design Patterns in the Design Exploration Phase
![Page 6: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/6.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 6
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
![Page 7: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/7.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 7
1
![Page 8: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/8.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 8
2
![Page 9: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/9.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 9
3
![Page 10: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/10.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 10
4
![Page 11: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/11.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 11
5
![Page 12: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/12.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 12
Quick-Flow Checkouts6
![Page 13: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/13.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 13
Basic Web Design
• Let’s take a closer look page by page
![Page 14: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/14.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 14
1
![Page 15: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/15.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 15
• 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
![Page 16: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/16.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 16
• 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
![Page 17: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/17.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 17
• 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
![Page 18: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/18.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 18
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
1
![Page 19: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/19.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 19
2
![Page 20: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/20.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 20
• 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
![Page 21: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/21.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 21
• 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
![Page 22: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/22.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 22
• 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
![Page 23: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/23.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 23
• The Fold– Hmm, what’s below here?
• The Fold– Hmm, what’s below here?
2
![Page 24: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/24.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 24
• 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
![Page 25: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/25.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 25
• 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
![Page 26: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/26.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 26
3
![Page 27: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/27.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 27
• 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
![Page 28: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/28.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 28
• 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
![Page 29: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/29.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 29
• 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
![Page 30: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/30.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 30
• 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
![Page 31: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/31.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 31
• 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
![Page 32: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/32.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 32
4
![Page 33: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/33.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 33
• 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
![Page 34: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/34.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 34
5
![Page 35: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/35.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 35
• 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
![Page 36: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/36.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 36
• 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
![Page 37: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/37.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 37
Quick-Flow Checkouts6
![Page 38: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/38.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 38
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
![Page 39: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/39.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 39
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
![Page 40: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/40.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 40
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
![Page 41: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/41.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 41
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
![Page 42: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/42.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 42
PROCESS FUNNEL (H1)
![Page 43: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/43.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 43
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
![Page 44: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/44.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 44
PROCESS FUNNEL (H1)Solution Diagram
![Page 45: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/45.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 45
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
![Page 46: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/46.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 46
Advanced ecommerce
Completing tasks
Page layouts
Search
Page-level navigation
Speed
The mobile web
Pattern Groups
Our patterns organized by groupSite genres
Navigational framework
Home page
Content management
Trust and credibility
Basic ecommerce
![Page 47: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/47.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 47
Web Design Process
![Page 48: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/48.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 48
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)– …
![Page 49: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/49.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 49
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)
![Page 50: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/50.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 50
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
![Page 51: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/51.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 51
Design #1ALPHABETICAL ORGANIZATION (B5)
![Page 52: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/52.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 52
Design #2TASK-BASED ORGANIZATION (B4)
![Page 53: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/53.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 53
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
• Tasks1) look up 1645 Solano Ave., Berkeley CA2) look up 1700 California Ave, San Francisco CA & find
Tadich Grill3) look up 2106 N 55th St, Seattle WA & find a Sushi
restaurant nearby
![Page 54: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/54.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 54
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 2106 55th St & find nearby Sushi restaurant
• 3 users only picked restaurants that had “restaurant” in the name & thus couldn’t find “Kisaku”
![Page 55: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/55.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 55
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 (RestaurantsTadich Grill)
– Task 3: look up 2106 55th St & find nearby Sushi restaurant
• 3 found “Kisaku” in 2 clicks• 2 others asked for a listing of Japanese restaurants
![Page 56: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/56.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 56
Evaluating Which Design to Choose
• 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 (B4) worked better, but still had some minor problems
![Page 57: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/57.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 57
Design #2 – Revision 1Adding More Related Tasks
![Page 58: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/58.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 58
Design #2 – Revision 2Adding HIERARCHICAL ORGANIZATION (B3) &
LOCATION BREAD CRUMBS (K6)
![Page 59: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/59.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 59
Design #2 – Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J1)
![Page 60: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/60.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 60
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
![Page 61: More Design Patterns: The Exploration Phase](https://reader030.fdocuments.in/reader030/viewer/2022012922/568138fa550346895da0aeb7/html5/thumbnails/61.jpg)
CSE490L - Spring 2008 Web Interface Design, Prototyping, and Implementation 61
Next Time
• Heuristic Evaluation– Read
• Nielson Heuristic Evaluation chapter (online)