Website Usability Analysis, Dec 2015

35
Website Usability Analysis, Dec 2015

Transcript of Website Usability Analysis, Dec 2015

Page 1: Website Usability Analysis, Dec 2015

Website Usability Analysis, Dec 2015

Page 2: Website Usability Analysis, Dec 2015

Background

For the purpose of this research, we interviewed Five respondents.

The research focused on the user flow and usability of the Out Of The Box Collective website on a personal computer. The participants went through the core tasks of browsing, looking for Food boxes, produce boxes, recipes, and checkout.

The test was conducted on randomly recruited users with no incentive so that causes some demographic limitations. All the participants had no priorexperience with Out of the Box Collective.

Page 3: Website Usability Analysis, Dec 2015

Sample

Neeku 28 Single No Children Mac

Louis 37 Married No Children PC

Mahm. 30 Married No Children Mac

Mos 31 Single No children Mac

SusAnn 45 Married 4 Children Mac

Page 4: Website Usability Analysis, Dec 2015

Synopsis

All respondents Had trouble understanding the products, services and location within 5 seconds, and once they discovered the products and services they had trouble navigating within the pages of the website.

The majority of the problems were with the Lack of proper application of universal basic Interaction Design principles: Consistency, Learnability, Visibility, Predictability, Feedback.

Page 5: Website Usability Analysis, Dec 2015

HomePage

The Slide Show seemed confusing. Participants tried to click on it and it did not take them to where anticipated. The term “Collective” did

not mean anything to some participants.some thought it is about the founders. some thought it means a collection of products.

Participants prefered About us to be at the end of the menu

Participants were hesitant to scroll down because the slide bar was covering most of the page, hence visibility issues.

All Users found it extremely confusing and frustrating to go back and forth from the blog to the main page.Users often lost their ways back to the website.

Page 6: Website Usability Analysis, Dec 2015

HomePageUsers found there to be Too many non-relevant information, Missing or hidden important information. Inconsistent UI elements in one page made the users not pay any attention.

Fonts are too small for very important information

Page 7: Website Usability Analysis, Dec 2015

HomePage Too many non-relevant information and inconsistent design makes the learnability almost impossible

Participants did not pay any attention to these information. and could not easily figure out all of the products and offerings.

Page 8: Website Usability Analysis, Dec 2015

HomePageParticipants Could not predict this section. There was no association of color black and a house icon with a produce box.

Page 9: Website Usability Analysis, Dec 2015

Shop/Marketplace

Inconsistent naming for shop/marketplace created confusion for users. Users expressed: “Why 2 names?” “Where am I?” “How did I get here?”Users predicted to go to “shop” and the feedback when clicking, was to take them to “Marketplace”.So their immediate reaction was to feel lost.

When the user clicks on this, the secondary menu disappears and they are redirected to:

https://outoftheboxcollective.com/p-101-we-pick-box.html

Users found this to be frustrating.

Page 10: Website Usability Analysis, Dec 2015

Shop/Marketplace Users could not immediately associate the page they are on with the icon above because:

1- The naming was inconsistent: Produce Box/Summerland Produce box

2- there is no connection between below section and the menu.

Users did not immediately predict that the icons are a secondary menu bar. because it does not match their previous learning from other websites.

Page 11: Website Usability Analysis, Dec 2015

Shop/Marketplace

Users Found there to be no organization inside each product category:

“There is no order here. no organization or known categories”

Users preferred to see the product list to be broken down into subcategories. they found this to be very confusing because they were unfamiliar with most of the product images and that made them need to read every name and description to make sure they are not missing something.

Page 12: Website Usability Analysis, Dec 2015

Shop/Marketplace

Users found this to be annoying that these sections are blank but there is too much information in the description.

Users found these links to be confusing

Page 13: Website Usability Analysis, Dec 2015

User was surprised to see html coding in description

Users could not use the duplicate search space

Users preferred to see delivery options next to each add to cart button.

Product Details

Users did not trust the service because could not see a clear summary of items in the box. Users tend to be bored reading the text and get frustrated. Also users thought the text was very small. Users expressed: “What is inside? can I customize it? I don’t have time to read.”

Example:

Page 14: Website Usability Analysis, Dec 2015

Product Details

Users did not understand what 75/25 means

Page 15: Website Usability Analysis, Dec 2015

Participants clicked on these options thinking this gives them box details but...they were redirected to blog page. They found this transition between blog and site very confusing and against their prediction. Users also could not associate recipes with boxes.

Clicking on this option took the user to the empty page below.

https://outoftheboxcollective.com/c-288-summerland-boxes.html

incorrect link

Information is too small to read.Also The users were confused as for why this is in upcoming section

RealFoodBox

Page 16: Website Usability Analysis, Dec 2015

RealFoodBox Users frequently clicked on these images, expecting a feedback.Users learned from “Marketplace Menu” that they can click on this type of colors and icons. so they predicted a feedback but not received it. so their immediate response is: “Why is this not working?”

Users associated number “5” with the 5 icons below. and were surprised to see no connection between “meals” and the options they see below. One participant expressed: “But Juice is not a meal”

Page 17: Website Usability Analysis, Dec 2015

100% of participants confused the word “mouths” with “months”.

Basic Predictability suggests that when ordering, you are looking for words like: one time, month, year, week, $ sign, add buttons, delivery options.

Some participants were not familiar with the term “Omnivore”

RealFoodBox

Page 18: Website Usability Analysis, Dec 2015

Participants found Catch of the Week, and Additional Fruit to be irrelevant to real food boxes.

Also Participants could not understand what Catch of the week exactly mean? caught this week? or this weeks offer?

RealFoodBox

Page 19: Website Usability Analysis, Dec 2015

Forage and Pasture/Recipes

Users were surprised to see 2 search boxes. also the search function did not work properly.Users expressed that they expected to see recipes here based on category but found no organization

Users were immediately surprised by being redirected to a blog and could not find their way back to OTB and kept using the secondary menu below:

Users predicted that by clicking on the “chicken” they can go back to the OTB website… but Clicking on the chicken does not give user any feedback. User had to click on the text to go back.

:User learned from OTB homepage to click on the chicken to go back to homepage and predicted the same feedback here but did not receive that feedback.

Page 20: Website Usability Analysis, Dec 2015

The users did not feel comfortable with this pop up. The drop down menu seem to be pushing the user to opt for a subscription

For some users this pop up menu was not predictable since it contains too many options comparing to other familiar generic options for check out, confused the participants.

The participants did not understand this menu

DeliveryOptions Pop-Up

:Zulily

Page 21: Website Usability Analysis, Dec 2015

Participants couldn’t trust the website to check out as the default option is set to “every week”. First time buyers need a “one time” option as default of drop down menu at checkout.

Shopping Basket

Participants tried clicking on this button thinking this will take them to a list of ingredients in the box. Prediction of the function once again did not match the feedback

users did not understand this function

users did not understand this function

users did not understand this function

Page 22: Website Usability Analysis, Dec 2015

Post test questionnaire

Page 23: Website Usability Analysis, Dec 2015

Visual Survey/ Heatmap

This visual survey is an indicator that there are a lot of distractions on the website and UI elements of very little importance are drawing the attention of the user.

users are clicking everywhere and it is find to find a concentration of where users would commonly look for information or pay attention to.

The slide show is drawing a lot of attention to itself because it is large but is not functioning the way users expect.

The text on the pages are too small so users are looking for icons and images.

Page 24: Website Usability Analysis, Dec 2015

Analytics from the visual behavior flow, it is evident that there is a lot of user confusion.

This is clear indication that users are interested. the bounce rate is not high on any of the pages. this means that users are exploring. A good interaction design will help users find their way to what they want easier and without confusion.

Page 25: Website Usability Analysis, Dec 2015

Analytics There is a large number of login errors. this is a red flag and it looks like some users are having issues logging in.

Page 26: Website Usability Analysis, Dec 2015

Analytics Top source channels are google’s organic search, Social media, Referral links, emails and paid search.

Without filtering your own blog from referrals, Google counts every back and forth between OTB and your blog as a bounce and a referral. So both data are inaccurate.

Page 27: Website Usability Analysis, Dec 2015

Analytics As you can see here, Forage and Pasture is #2 on your list of referrals with a bounce rate of 25%. You do not know if users who landed on your homepage through your blog were originally on OTB or landed on the blog first.

Your major referrals come from Yelp, LAWeekly, The Chalkboardmag and seriouseats.

This is an indicator that you need to utilize channels such as facebook more. and if you are paying the chalkboardmag you will need to revisit your relationship with them because of 50% bounce rate.

Page 28: Website Usability Analysis, Dec 2015

Analytics The majority of keywords that lead to your website are indicated here:

This is an indicator that words such as farm, delivery, organic, farm to table, etc are great to run your campaigns and arm your SEO with.

Page 29: Website Usability Analysis, Dec 2015

Conclusion

Learnability: Users found it confusing that they could not expect the same feedback from similar UI objects. So their User Experience entirely depended on their memory, not learning progress. Consistency: Lack of consistency in UI elements, color, Font, naming, paths, etc makes the experience confusing. Visibility: improper positioning and size of images and text has made it difficult for users to find and look for necessary information.Predictability: unfamiliar icons, buttons, cues, and expressions makes users have to constantly think rather than using their prior learning experiences.Feedback: Users had difficulties navigating the website due to lack of consistency in feedbacks and learning progress.

Page 30: Website Usability Analysis, Dec 2015

RecommendationMake the menu Simple:

MARKETPLACE FARMERS COLLECTIVE ABOUT US CONTACT US

REARRANGE

VISUAL CUE

Page 31: Website Usability Analysis, Dec 2015

Recommendationremove unnecessary information and add clear, easy to access information about OTB offerings.

Move the video and BCorp under “about us”

Remove Recipes from main menu (you can have a “Blog” in main menu )

The Forage and Pasture icon is also under the OTB family so user can find your blog through that

MARKETPLACE FARMERS COLLECTIVE ABOUT US CONTACT US

Organic, Local, DeliveredIntroduction to products and services, location, Real Food box, Recipes, Deliveries,

HOW IT WORKS SERVICES WHY OTB?

DELIVERY MAP

Page 32: Website Usability Analysis, Dec 2015

RecommendationSimplify and organize the Marketplace:

Add subcategories under each sub-menu

Connect Menu with content

Simplify Ordering Process

Help Users understand Contents of each box and provide concise description.

Don’t Push for subscriptions

Offer Free Delivery for orders more than $XX.XX

Make text larger but less.

MARKETPLACE FARMERS COLLECTIVE ABOUT US CONTACT US

VEGETABLE BOXES

FRUIT BOXES

Plentiful Veggie box6lb Local, Organic, Fair Trade

Heavy on the vegetable side, and balanced out by a handful of seasonal fruits. Here you’ll find lemon, garlic, lettuce, carrots and potatoes, as well as seasonal specialties such as baby artichokes, heirloom tomatoes, english peas, and delicate greens.

ONE TIME ORDERSUBSCRIBE

Plentiful Veggie box

Page 33: Website Usability Analysis, Dec 2015

RecommendationChange the infographics/illustration on “Real Food Box” page that describes 5 meals and 2 meals and differentiate them from icons on “Shop” page will enhance consistency and predictability. Describe what “5 meals” mean

Bring the real food box under Marketplace

Provide Subscription option next to order buttons

Organize information:

What is a Real Food Box> Featured Boxes > What is the upcoming box>What’s in it> Buying options.

Page 34: Website Usability Analysis, Dec 2015

RecommendationSimplify the Real Food Box

Remove RFB and Recipes from main menu. Rename RealFoodBox (unless there is a history behind the name and renaming will confuse your current customers.)

Have clear explanation of what makes it different from produce boxes. and how can the user customize it.

Show featured boxes or upcoming boxes and all the included ingredients as well as recipe summaries inside the OTB platform. Include an image of one of the recipes

MARKETPLACE FARMERS COLLECTIVE ABOUT US CONTACT US

REAL FOOD BOXPick your box > Customize it > Subscribe

WHAT IS A REALFOOD BOX:

Page 35: Website Usability Analysis, Dec 2015

RecommendationAdding “one time order” as default option to the drop-down menu in the basket next to an item can improve the trust of the customers when they want to checkout.

Adding delivery options such as every week next to each item’s description can clarify the delivery services that the website offers and improve customer’s trust to the website.

Add a number on the shopping basket to indicate there is something in the basket.

5