Gopher Grocery Presentation

22
1 HCD Analysis of a software interface Lauren Horman present:

Transcript of Gopher Grocery Presentation

Page 1: Gopher Grocery Presentation

1

HCD Analysis of a software interface

Lauren Horman present:

Page 2: Gopher Grocery Presentation

Outline Software introduction

Subjective Analysis

Heuristics

Usability Testing Methods Results Feedback

Recommendations

Page 3: Gopher Grocery Presentation

Intro to Website Online grocery delivery service

10,000+ products

Based in St. Paul, metro area delivery

Delivery is $2

(Full disclosure: Scott works @ GopherGrocery)

Page 4: Gopher Grocery Presentation

Website

Main page

Aisle page

Page 5: Gopher Grocery Presentation

Website

Shopping cart

Account page

Page 6: Gopher Grocery Presentation

Subjective Analysis

Content………………………………………………………………..3

Navigation…………………………………………………………….4

Visual Design…………………………………………………………4

Functionality………………………………………………………….4

Interactivity……………………………………………………………3

Ranked on 5 point Likert scale. 1=Low/Poor, 5=High/Good

Page 7: Gopher Grocery Presentation

Heuristics

Thorough product info

Wide variety of items

Content

Navigation

Easy to get home

Effective search feature

Multiple ways to navigate the site

Starting point is emphasized

Page 8: Gopher Grocery Presentation

Heuristics contd.

Effective color scheme

Streamlined design

No more content than necessary

Proper use of photos/visual cues

White space

Visual Design

Photos help emulate actual grocery aisles

Page 9: Gopher Grocery Presentation

Heuristics contd.

No broken links

Search is quick and accurate

Real time cart updating

Functionality Interactivity Order-O-Meter tracks purchases

Suggest a product

Account settings

Page 10: Gopher Grocery Presentation

Heuristics contd.

Readability Top buttons are big and easy to read Most product photos are easy to read Aisle labels are small Each item/product has thorough product information

Color Color scheme matches the brand name and market

Yellow and red are know to simulate hunger Uses proper coloring for warnings and important information Consistent color coding Good balance between white space and content Needs to use contrasting colors for shopping cart

Page 11: Gopher Grocery Presentation

Heuristics contd. Help & Documentation

Contact Us link Phone number, email address, and questions/comments

form Not easy to find

Frequently asked questions link

Understandability Everything is pretty self-explanatory How It Works link

Step by step process Pictures correspond with the aisle Step by step checkout

Page 12: Gopher Grocery Presentation

Heuristics contd. Graphical vs. textual:

Majority is text, limited graphics Text can get cluttered Food photos assist with navigation Graphical buttons help with navigation Shopping cart icon draws attention to tab

Page 13: Gopher Grocery Presentation

Usability Testing 1. You are new to the area. Make sure that Gopher Grocery delivers to your

zip code.

2. Your fridge is empty. Locate 3 common items you buy weekly (milk, eggs, & TP) and add them to your shopping cart.

3. You already have eggs. Remove them from shopping cart

4. You forgot the cheese! Find the cheapest block of sharp cheddar cheese and add it to your cart

5. You need to ask the company a question. Locate the contact information

Page 14: Gopher Grocery Presentation

Usability Testing Subjects

(1) Male, 24, had used CobornsDelivers.com.

(2) Female, 20, never used GG.com

(3) Female, 18, had used Lunds.com

Details

Couldn’t simulate actual checkout without purchasing

Told to find items any way possible

Measured time elapsed to complete tasks

Everyone completed the tasks

Spoken observations recorded as well

Page 15: Gopher Grocery Presentation

Usability Reenactment

Page 16: Gopher Grocery Presentation

Results

Subject (1)

(Task 1) 12.2 seconds

(Task 2) 47 seconds

(Task 3) 22 seconds

(Task 4) 17.5 seconds

(Task 5) 15 seconds

Subject (2)

(Task 1) 7 seconds

(Task 2) 120 seconds

(Task 3) 30 seconds

(Task 4) 55 seconds

(Task 5) 10 seconds

Subject (3)

(Task 1) 21 seconds

(Task 2) 130 seconds

(Task 3) 10 seconds

(Task 4) 25 seconds

(Task 5) 14 seconds

Page 17: Gopher Grocery Presentation

Results

Average times

(Task 1)--26.2 seconds

(Task 2)--99 seconds

(Task 3)--20 seconds

(Task 4)--32.5 seconds

(Task 5)--13 seconds

Page 18: Gopher Grocery Presentation

Observations Subject (1)

(Task 1) “Zip code on list, must be included”

(Task 2) Used search box to locate items

(Task 4) Used aisle photos. “Cheapest items are on top”

(Task 5) “Several ways to get in contact with them”

(General comments) The name/color is good for the area. No help/tutorial needed.Subject (2)

(Task 1) Found, used Zip code locator on home page

(Task 2) Used category list, and search box to locate items

(Task 3) Used view cart tab on top of site

(Task 4) Struggled with price sorting. Already pre-sorted from lowest to highest

(General comments) “GG.com is way better organized than Lunds.com”

Page 19: Gopher Grocery Presentation

Observations

Subject (3)

(Task 1) Found, used Zip code locator on home page

(Task 2) Struggled with organic selection. Separate sections for “dairy” and organic”

(Task 3) Used view cart tab on top, instead of small shopping cart on side of page

(Task 5) Clicked, “Contact Info” in site map on bottom of page

(General comments) Didn’t know pictures expand--thought thumbnails are too small. Cares more about what it looks like than what it is called.

Page 20: Gopher Grocery Presentation

Design Claims

No manufacturer claims. Instead we find a single customer testimonial

“Gopher Grocery's website is fast and clean”

Response and loading times are quick; white space keeps site simple and

uncluttered.

Page 21: Gopher Grocery Presentation

Recommendations

Make it more obvious that photos expand

Larger item photos

Don’t keep organic foods in their own category

Adjust search results page

Overlapping categories (TP in paper products and bathroom/shower)

Larger description text

Page 22: Gopher Grocery Presentation

Questions?