Heuristic Evaluation of The Boiling Crab Website
Conducted by: MTV Usability Specialists Meghann Herron-Browne Tiana Higham Vyha Ho
1
Executive Summary This report provides a detailed analysis of the heuristic evaluation of the results used to evaluate The Boiling Crab website. The document highlights violations that were discovered across different domains (i.e. smart phones, tablets, pc). Currently, there are inconsistencies among these domains. The following document provides examples of some of the inconsistencies and errors found. This is not a comprehensive evaluation of The Boiling Crab website. However, the violations noted are ones that should be taken care of and addressed immediately. The website errors have the potential to muddle the user experience by causing disorientation and confusion.
2
Introduction The focus of this report was to examine The Boiling Crab website from the perspective of potential users of this site. We determined that perspective users are visiting the site on a variety of devices. However, this initial evaluation only examines the site using Mac OS. A few errors were noted when navigating on a mobile phone and on a PC, which are noted within the document. We examined the site using a heuristic evaluation and a cognitive walkthrough.
Why we conduct a heuristic evaluation: “A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the "heuristics"). These evaluation methods are now widely taught and practiced in the New Media sector, where UIs are often designed in a short space of time on a budget that may restrict the amount of money available to provide for other types of interface testing.”
Why we conducted a cognitive walkthrough: “The cognitive walkthrough method is a usability inspection method used to identify usability issues in interactive systems, focusing on how easy it is for new users to accomplish tasks with the system. Cognitive walkthrough is task-specific, whereas heuristic evaluation takes a holistic view to catch problems not caught by this and other usability inspection methods. The method is rooted in the notion that users typically prefer to learn a system by using it to accomplish tasks, rather than, for example, studying a manual. The method is prized for its ability to generate results quickly with low cost, especially when compared to usability testing, as well as the ability to apply the method early in the design phases, before coding has even begun.”
The Boiling Crab website has a lot of content to offer. However, flaws and inaccuracies inhibit the users from accomplishing their goals while using the website, such as mapping and locating the Boiling Crab San Diego restaurant. Navigation within the site should be straightforward when the user clicks a link or performs a search. We have a goal and a solution to try to enhance The Boiling Crab experience.
Goal ♦ The goal of the evaluation was to identify usability flaws
Solution 3
♌ The website should accommodate all user devices (Mac OS, Windows, tablets, smart phones).
The Boiling Crab Company is technologically advanced and has not lost their pizzazz for creating a family oriented experience. The progressiveness of the company is demonstrated by having a website where users are able to access information, such as location, services, hours, menu, and directions. The users are able to surf the website free of distractions that can be brought upon with advertisements or dense content.
Problem Loading Website 4
On 3/27/ 2013 at 2:52 p.m. we tried to access your web page at www.theboilingcrab.com and received an error message. Additionally, a webpage loading error was displayed.
♦ Figure 1. Error Message received from Google when trying to access Boiling Crab’s website.
Error was discovered utilizing a PC device
Major Problem: Prevents the users from accessing the Boiling Crab website.
5
Difficulty Loading Graphics
♌ Figure 2. Image above demonstrates graphics not being displayed on the webpage.
Major Problem: The lack of graphics does not allow the users to benefit from visual cues.
6
Accessed on Mobile Device
♌ Figure 3. Page was accessed appropriately on an Android mobile device Conclusion The Boiling Crab website was accessible on an Android phone while previously the PC and Mac were not able to access the site. 7
Problem with Page Title Problem A.
♌ Figure 4. Incorrect page title
Medium Problem: The tab indicates that the user is on Join our Crew when they are in fact located on the Press & Media page. Users may become disorientated in their selection of the page title.
8
Problem with Page Title Problem B.
♌ Figure 5. Incorrect Page Title
9
Medium Problem: The page title indicates that the user is located on the Press/Media page when in fact they are located on Join our Crew page. Users may become disorientated in their selection of the page title.
Problem with Content
♌ Figure 6. Content provides false representation of available positions
Medium Problem: “Servers needed� is misleading since the users are given the wrong impression about being hired on directly as a server. In fact they would have to go through a long process of training and development before they are promoted to server status.
10
Problem with Legibility Why is there so much white space?
♌ Figure 7. Image is not taking advantage of the entire computer screen causing the text to be smaller than necessary. o Red font colored used to display information is difficult to read because it bleeds and causes the information to be unreadable.
11
Major Problem: Red text for condiments and soda are difficult to read as well as the fine print on the bottom (even when enlarged for better legibility)
Additional Problem with INFORMATION: Potatoes … $1.50/ea Major Problem: Indicates that it’s the price per individual potato instead of a bunch of three.
Problem with Size
♦ Figure 8. This error was only found on the Houston menu. Image was overly enlarged to display the entire menu.
12
Major Problem: When the menu is magnified, it no longer fits the screen and the majority of the menu is cut off. However, when the menu is regular size, it is very difficult to read since the text is too small.
Problem with Link
♌ Figure 9. Facebook icon does not work. However, the majority of the Twitter icons link to the correct location account.
13
Medium Problem: Users cannot visit the Facebook page provided from the icon and this causes mistrust in the fidelity of the website.
Problem with Link
♌ Figure 10. Icons located on the bottom of page do not link to the accounts. 14
o
(Doesn’t connect on the LOCATIONS page)
Medium Problem: the links work on other pages. However, it does not link from the Locations page. Subsequently when it does link, it links to the following: Facebook only leads to the Boiling Crab on Brookhurst’s Facebook page. Twitter icon leads to the one in San Jose. Yelp icon leads back to Theboilingcrab.com homepage Linked-In goes to the linkedin homepage and not the business page Pinterest works perfect Instagram works fine
Problem with Link
♦ Figure 11. Map It function for BC San Diego leads the user to BC South Coast 15
Major Problem: Users are routed to incorrect location, which is a huge problem because users cannot find your location (Limits business).
Problem with Link
16
♌ Figure 12. Twitter icon for first San Jose location leads to the RH location’s twitter account.
Medium Problem: Users may not be commenting on the correct location and it is inconsistent with their mental model.
Problem with Structure of Location 17
♌ Figure 13. The list of locations leads the user to believe that there might only be 4 locations in Orange County.
Medium Problem: People usually look for a list of locations; therefore, the users would over look the labeled locations on top and look directly at the list of locations.
18
Problem with Error Prevention
♌ Figure 14. Clear Application option is not in line with standards o Users usually don’t want to clear an entire application
Medium Problem: The Clear Application option should be smaller and have a backup option to make sure the user confirms that they want to clear the application.
19
Problem with Drop Down Box
♦ Figure 15. The drop down boxes are not functional when the user selects it. o
The arrows don’t provide any source of action.
Low Problem: The drop down arrow should have a function. The only way to view the application form is to click on “Click Here to View”.
20
Problem with Error Prevention
♌ Figure 16. Error message is designed for the programmers/designers and not for the end users.
Major Problem: Difficult to understand Error Message and what the user can do to recover/correct the error.
21
Problem with Providing False Information
♌ Figure 17. Users cannot receive directions from the comment box.
Low Problem: Clicking on the crab from the map allows users to see the address but it also indicates that there are driving directions. However, they cannot receive driving directions on the map provided.
22
Website Re-Design Recommendations: •
Label the Location Tab as “Location & Menu” instead to provide users with the foreknowledge of where to find the menu information.
•
More pictures of the food (the pictures from the Food Picture Contest from customers)
•
Provide a drink menu Types of beers For smart phone users to use while dining in and want to physically see the beer list instead of hearing it from the server. (VISUAL)
•
Include a contact us option at the bottom of page as a hyperlink (Email)
•
Make Boiling Crab searchable when users Google Louisiana food in Orange County Mainly Popeyes pop up… Boiling crab is not found for the first 3 pages. (Sadly Cruising Crawfish and Kicking Crab was found on the first page of the Google search, and Claws was found on the second page for Louisiana style food in OC)
•
FourSquare is another popular food review site that should be linked on the webpage.
•
Provide a SHOP option on the top navigation tab: Sweatbands Seafood Boil Future T-shirts when ready Gift Cards
23
Conclusion While the Boiling Crab website is organized and arranged in a manner that one can easily begin consuming and relying on the site for trusted information keeping the flow based off of the design falls short when users rely on the site for accurate information, especially directions. While the majority of the links to the restaurants worked, all but one of the links provided accurate directions to the correct location. It only takes one error to cause mistrust and a negative experience while utilizing the website. Informing users where they are and clearly identifying what they are accessing needs to be made a strong focus area. While not all users would readily notice the inconsistencies in the page titles and tab titles, the error can still cause problems for the users who have multiple tabs open and can cause mistrust in the quality of The Boiling Crab site. This ultimately affects the image portrayed to the consumers. In navigating the site, links such as Facebook, Twitter, Instagram, Yelp, Linked-In, and Pinterest were not working rendering them inaccessible, which diminishes the professionalism of the social networking for users to share and facilitate publicity. Throughout various points of the site, legibility is an issue. Red text should rarely be used especially when the text is small. Items presented in red usually indicate urgency or importance and the case of the website misused. Users should always be able to recover from an error and be able to restore information. There should be a clear understanding of what is needed to correct an error providing users with high level
24
programming and designer jargon is detrimental to a user/customer leaving The Boiling Crab site.
RECOMMENDATION Possible APP for smart phone users: •
•
Allow the user to organize their food order
Select a food item and be able to indicate how many pounds they want
Be able to add extras: corn, sausages, potatoes
Pick a seasoning
Pick a spice
Add fried items
Allow users to know how much $$ their order comes out to
25
Great for large parties •
Add gratuity option available
•
Exclude prices when ordering crab**
•
Fun app while they wait for their turn to get a table
•
Also great way to advertise to people when they look at their apps and are reminded to come in to satisfy their craving
•
Users can share with their friends of what their favorite order is
•
Great way for newcomers to see how to order
•
Possibly upgrade someday to send in togo orders directly to our server o Much like how chipotle works o Order first online through their app then just come and pick up at the location they ordered at o Less phone calls and miscommunication o More orders = more $$$
26