Two weeks ago I was tasked with writing a Heuristic assessment of the Texas De Brazil website for a job interview. I had no idea what a Heuristic assessment was. I started doing research and found an excellent resource of the ten usability heuristics . Heuristic assessments are conducted by usability researchers (UX researchers). This article will show how to conduct a heuristic evaluation write up.
This Heuristic assessment is only to show how easy the site is navigable by users and does not reflect the quality of food or service.
-The food is quite good and the atmosphere is wonderful
Writing a Heuristic assessment – A Quick Report Overview
To find existing website issues on the Texas De Brazil website.
This website will be reviewed using Nielson’s Heuristic evaluation list created by Jakob Nielsen.
There were many positive findings on the site that would draw the user to finding out more about the great food offered at Texas De Brazil, however, there were some inconsistencies on the site that could confuse the guests and detract them from accomplishing their goal on the site. Also, there were a few bugs (non-intended functionality) found in the site that need to be addressed.
|Positive Findings Summary||Negative Findings Summary|
|1. Match between system and|
the real world
The terminology used on the site is clear and understandable to the audience. The images clearly show the user why they are on the site and what the user is looking for.
|1. Visibility of system status |
Not all pages were clearly labeled to indicate which page the user is on.
2. Aesthetic and minimalist design
This site is filled with gorgeous hi-res images; however, those images can distract the user from intended actions. For example: The images under the “Explore our Menu” section contain button links that are not apparent to be clickable.
3. Consistency and standards
There were a number of pages that did not offer the same experience. For example: Navigating to the Menu from the Menu Header (Non-scrolled) would take the user to a different page than clicking on the menu header when the page is scrolled
Texas De Brazil
The Texas De Brazil is an authentic Brazilian steakhouse. It has a website that showcases they types of food that is offered at the restaurant as well as the unique experience a guest would have at this establishment. This assessment was conducted on the Texas De Brazil website.
The task for this site was to perform a heuristic assessment and to present my findings to the UX team.
Findings and Recommendation
- Match between system and the real world
The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
The verbiage used on the website clearly describe the actions requested by the user. It is an easy read and the images used match the verbiage creating an experience that draws the user’s curiosity towards the restaurant.
- Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Not all pages clearly indicated which page the user is on. For example: On the header when the user clicks the menu link it does not remain highlighted to remind them where they are within the website. Also, on the pages that do highlight the menu link, upon scrolling down the page the selected link color is lost.
Recommendation: Highlight all links the user has clicked using the brand colors (Golden-rod) so that the user can clearly see which page they navigated to
Not all text was clearly readable. The maroon text on the off-white background was difficult to read. Also, the maroon text on the transparent black background is not easily readable.
Recommendation: Use the other brand color (Golden-rod) to highlight links on a darker background or bold the text so that it is bigger and has more surface area to show the color.
It was not clear what the date pickers and selection inputs referred to.
Recommendation: A label with verbiage of “Make a reservation” would be clearer.
It was not clear which selection was made in the input field dropdowns.
Recommendation: Highlight the selected field background in brand colors (maroon) to clearly indicate the selected value
In the experience video there were no video controls allowing the user to seek forward or backward, or how long the video is (How much time is being requested of the user to remain attentive).
Recommendation: Show the video controls
- Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
There were a few issues regarding concepts familiar to the user as it relates to the design of the website. One finding was with the input fields had a custom design for the dropdown arrows. These arrows are used thought the whole site; however, this does not necessarily indicate these are dropdown arrows.
Recommendation: Use a standard input control style that users are more familiar with. See figure 1.1 below:
In the “Choose Location” dropdown the locations are not sorted in alphabetical order. This makes the process of finding a location to make a reservation difficult for the user.
Recommendation: Sort the items in the dropdown alphabetically from A-Z
The menu has the logo right in the center of the menu. It is more familiar to the user to have the logo to the left of the menu and have a “Home” button so the user can clearly see how to get to the main landing page from within any sub-page.
Recommendation: Move the logo to the left of the menu and add a “Home” button as the left most button in the menu next the “Menu” option.
- Consistency and standards
Call to action buttons appear in the brand color (maroon) while other buttons are hidden within images and don’t appear as clickable buttons.
Recommendations: Stay consistent with button brand colors. Make the buttons on the images match the design of the other call to action buttons.
The gift card section has different experiences depending on they type of gift card. The E-Gift card has options to select the amount, quantity and theme to the left of the image and verbiage text. Also, the Theme is presented as a gallery of thumb nail images to choose the design of the gift card. The Standard gift card has the amount, quantity and theme below the verbiage and the theme selection is presented as a dropdown.
The E-Gift card page has a reset form option while the Standard gift card page does not.
Recommendations: Pick one layout and stick with it across all gift card pages
Navigating to the Menu from the Menu Header (Non-scrolled) would take the user to a different page than clicking on the menu header when the page is scrolled.
Recommendation: have all the menu links go to the same menu page.
- Aesthetic and minimalist design
This website design is not minimalistic. It has options to sign-up for a e-club, look at menu items, dining options, atmosphere, and gift card purchase all on one page. At times the images can distract from the call to action. There are two different menu pages that show the same images for the food which is too much information and doesn’t provide any additional information to the user make a selection.
Recommendation: Reduce images used. Have one image for the menu that contains selections with a button that will take the user to the full menu. Remove the second menu page. The additional menu is not really necessary.
Other minor issues found:
-The Reserve button overlapped menu items while navigating through the site.
-The Receive Details button verbiage is not clear on what details the user will be receiving
-Some buttons on the “Show List” button on the inner menu (menu details) page is not fully clickable. The user should be able to click the whole button, however, only the text is clickable.
-While the user is navigating in on the secondary menu there are left and right arrows that appear clickable when the user is to the far left or right of the content. The left arrow should be grayed out if the user is to the far left of the scrollable content. Likewise, the far-right arrow should be grayed out if the user is to the far right of the scrollable content. Only the actionable arrow should be enabled for the user (colored marron)
In conclusion, writing a Heuristic assessment was a wonderful experience in knowing how to keep the users attention while helping to keep them informed on what the user needs. The Texas De Brazil website was all in all a nice-looking site. The user can find with a little searching what they desire. After evaluating the site using the heuristic testing a large amount of usability testing issues can be solved. In addition to user testing the heuristic analysis is an extremely valuable tool that should be used early on in the UX process.