Heuristic Evaluations – Usability Analysis

October 18, 2022

INDIVIDUAL ASSIGNMENT 2: HEURISTIC EVALUATION

Introduction

The website I would like to analyze for my heuristic evaluation is SarahMaker.com( https://sarahmaker.com/). SarahMaker.com is an educational website that features classes, articles, patterns, and premium video to help you learn a craft of your choice. Their scope of subject is large and includes, fabric crafts, needle arts, sewing, sculpting, and more. The website includes both free and premium paid content. I say that this is a great website for a beginner crafter in any medium. Crafting, or creating in general, can seem daunting and easily susceptible to information overload, but I Sarah has done her best to create a clean and professional appearance for her website.

Scenario

My scenario features a young woman enamored with the Pinterest articles, Tik Toks, Facebook Reels and Instagram-worthy photos she sees of her friends and family showcasing their latest needlework creations. She’s been saying she would eventually teach herself to crochet for years, but other priorities have hindered her from starting. She now has the free time to dedicate learning to crochet. With the low financial commitment and abundance of accessibility to resources on how to crochet, the barrier of entry was very low. A friend recommended YouTube to learn basic stitches and SarahMaker.com for pattern ideas. YouTube is great, but she prefers the mental freedom of written instructions.

Heuristic Analysis

With my scenario and persona in mind, I took to Sarahmaker.com to see what they offer in the realm of crochet. I personally, keep the Ad Blocker plugin enabled on Google Chrome, and one think I did notice was the unusual amount of empty space the site had. This is usually a tell-tale sign that this site might have many ads going on. I took the chance, and temporarily turned off Ad Blocker for the website and I was right. There were ads all along the bottom portion of the screen. I know many are divided on the necessity of ads on websites, but strictly speaking from a user’s point of view, ads are the worst. I would place this in violation of rule number 8: Aesthetic and minimalist design. Sarah has, mostly, static content on her website. The only things I see moving are the carousel stuck to the bottom of the screen and the video of ads playing right above it. It’s extremely distracting from an otherwise attractive website.

I’ve been to Sarah’s website once or twice before at the recommendation of a Google search for some Cricut help. She always gave me very good advice in her articles. I have never gone to the homepage in search of a specific subject. Following my scenario though, I noticed locating the crochet section was very easy to find right at the top navigation of the page. However, the main crochet page opens to a wall of text, that I immediately skip, to go to what I believe are the lessons or beginner content separated into sections (or cards) below. These are all sponsored ads for crochet pattern packs. That’s not going to be very beneficial to someone who is a complete beginner. The stitch tutorials for beginners are found in a link in the middle of the wall of text I’ve already skipped over. The links are also a muted shade of green that is very similar to the color of the basic text. I think this is a violation of rule number 7: Flexibility and efficiency of use.

Proposed Solutions

A few adjustments I propose to combat these issues are, trying to find a different way to monetize the website without distracting ads. Offering other paid content or place some premium content behind a subscription wall. I see Sara has hundreds of patterns. Having the patterns available to purchase at a very low price is something to consider. Considering the placement of the ads, they are even breaking the flow of the page with the video ads toward the bottom stretching into the footer content. As for making beginner content easier to locate, I would recommend placing links to the beginner’s content much closer to the top. I would even go as far as adding sub-menus to the top navigation menus. I’d also like to see a greater contrast in the color of general text and text that are links. I see, Sarah is trying to stay within a certain color scheme, but links are vital to the navigation of the site. They need to be more noticeable than they are now. If the user is utilizing breadcrumbs, they need to display more than two locations for every page a user visits. As the site stands now, the main page “Home”, leads to “Blog” on every page. This is confusing for a user and does not give a concrete path back to where they’ve already been. Overall, I feel someone that is well-versed in using the internet would be able to use this website with few problems, but frustrations can appear with some of the questionable navigation choices and advertisement placement.

October 13, 2022

Individual Assignment #2 – Heuristic Evaluation

The Website

The website I selected for this assignment was atlasobscura.com. The website’s tagline is “The definitive guide to the world’s hidden wonders.” and users can search for destinations, experiences, food to try, and read stories about different places. The website features destinations that are popular as well as some out-of-the-box destinations/experiences.

The Scenario

The scenario I chose to evaluate for this website is that I am visiting New Orleans and I want to plan out what attractions to go to. For the scenario, I do not have any food restrictions/allergies and everyone is over 21 years old. Nielsen’s 10 heuristics will be used in the evaluation of this website.

To begin the scenario I decided to search New Orleans in the search bar located on the home page. As I was typing, the search was continuously updated as I typed. For instance, when I had typed out “new” before “Orleans” it recommended destination guides for New York State, New York City, etc., it recommended places such as The New Orleans Treehouse and the New Yorker Hotel, and even a story about New Zealand.

As I finished typing out “new orleans” the search results pulled together the results for information related to New Orleans. The results were broken down into different categories including “Destination Guides”, “Trips”, “Places”, “Food & Drink”, and “Stories”.

Instead of clicking any result listed in the search I just hit the enter button which led to “The Atlas Obscura Guide to New Orleans” which I believe is the same page as the “New Orleans, Louisiana” result that showed up under “Destination Guides”. This page had been recently updated in July of 2022 and featured quick links (“Attractions”, “Food & Drink”, “Map”, “Leaderboards”, “Stories”, and “Lists”) that would take you to that part of the page when clicked.

The Atlas Obscura Guide to New Orleans front page

The first task was to pick out 2-3 attractions to visit while in the city. I was able to click a button under the “Unusual Attractions in New Orleans” section that led to another webpage which listed all the places in New Orleans that were added to the website. From that webpage I browsed the different options and settled on three different places to visit (Marie Laveau’s House of Voodoo, Lafitte’s Blacksmith Shop, and New Orleans Pharmacy Museum).

I clicked on one of the attractions I wanted to visit and it took me to a webpage dedicated to that attraction. On this webpage it gave a quick description of what the attraction was, a map of the location and the address, as well as a link to the website and nearby attractions.

Usability Flaws

While working through this scenario the overall process was relatively easy but some issues were present. When searching for “New Orleans” in the search bar it was constantly updating to try to find the best match based off each individual key stroke. This led to an overload of information that was constantly changing which is a violation of Nielsen’s 8th heuristic. Another violation occured when I clicked on “Lafitte’s Blacksmith Shop”. This led me to a new webpage dedicated to this attraction but did not provide a back button (which can be seen in the “All places in New Orleans” screenshot). This violates Nielsen’s 3rd heuristic.

Recommendations

Overall, this website was easy to use and was formatted and designed in a way that made sense as a user. I also acknowledge that I am not a novice when it comes to using computers, the internet, and searching webpages. One of the first recommendations I have is to not have the search automatically update results with every keystroke. I know that this is what is used in most search engines but I think for this specific site it makes sense to wait until the user is done typing their search term so they do not get overwhelmed with unrelated results. Another recommendation I have is to create a back link that would take you from an attractions webpage back to the webpage with all of the attractions. This could be a link just like the one seen on the “All places in New Orelans” webpage that is in the left hand corner of the screen (“BACK TO NEW ORLEANS”) but with the wording “BACK TO ALL PLACES IN NEW ORLEANS”. This would provide the user with an easier way to get back to the previous page.

September 29, 2022

Individual Assignment 2: Heuristic Evaluation

The Website

I chose to do a heuristic evaluation on one of our travel sites, Hotels.com. As an avid traveler, finding a place to stay in is a hard part of a vacation with many different new sites coming up such as Airbnb, Trivago, Expedia, etc. The website specializes in booking hotels, rental cars, and vacation rentals.

Method

In evaluating this website, I took the approach of navigating through the site first and looking at how it works as I have used it before but it is not a regular site I use to book trips. I used the 10 principles of Jakob Nielson’s approach for usability analysis and checked off each one to see which ones had flaws. I went step by step as if I were booking a trip to view the different outcomes of the prices and how the page gets set up when you input a new travel date. I decided to choose the travel destination as New York City and the dates will be during Thanksgiving week, November 22-27.

Usability Flaws

So on the homepage of Hotels.com, it seems very easy to navigate and has a lot of information on the main page. At the top of the screen, you can effortlessly search different locations and dates. Once you scroll down it has some information on different ways to travel and stays. So on the homepage, I input the travel stays I will be looking into which is New York City from November 22 – 27.

So once I searched up the travel plan, it showed me a list of different hotels with the price showing next to the hotel and a small description of the hotel. You can choose different filters and assortment to your liking. In the image below, I scrolled down a bit and you see some good deals labeled as “Secret Price available”.

I clicked on the Westin New York Grand Central hotel to see how it worked since it was such a big price jump. When clicked on, it sent me to a different tab which violates the 6th heuristic of recognition rather than recall. This means that a user should not have to remember dates and there should also be a back button to correct any mistake if made. If the user was one that does not understand different tabs then this would be a big problem for them. I can see how if you end up on a new tab, you are going to start a whole new search and it is just repeating all the steps. I went on my phone as well to see if it opened a new tab or not and it did. This means that the user will have to keep switching between tabs to view each and every hotel.

Another violation was number 7, Flexibility and efficiency of use. An expert at tabs and the internet know they can switch between tabs and if need be they can close the tab. However, a newer user may not know that information and since each time you click on a hotel it opens up a new tab. A user may not know that they can either close the tab or navigate to the original tab. They might start the same search again which lose the efficiency of the website. Rather than it being a quick and easy task, it might take a while to view each hotel and its amenities.

Design Recommendations

I recommend that this website has more flexibility for more novice users but also for anybody that travels which is a majority of the population. Hotels.com does have great options and outcomes, but the design of opening a new tab every time you press on a new hotel can get exhaustive and causes a slower performance. There should be a way that a person can review the hotel they want and see it with the option of going back but also having that hotel in a recently viewed box if you want to keep browsing different hotels. This recommendation will solve both heuristic flaws, 6 and 7, which have to do with remembering what was searched and which hotels were viewed, as well as, navigating through the different tabs that allow you to know what information you viewed beforehand.

September 29, 2022September 29, 2022

Individual Assignment 2: HappyCow.net

(917 words)

The Website

The website I chose for this assignment is HappyCow.com, which is a search tool to help find vegan restaurants based on location. This can be used by tourists in a city they are unfamiliar with.

Evaluation

The scenario I am in when navigating this website is that I have a vegan diet and am visiting Queens, New York. I am trying to find a restaurant that offers vegan food but still has other options because I am traveling with my boyfriend who is a carnivore. He respects my dietary needs but since we both have not been to New York it is worth trying to find food we can both enjoy.

On the homepage of HappyCow there is a large search bar where you can find a location by city, address, or zip code. There is little text or ‘noise’ around the search bar which keeps the layout simple and points me to the direction I wanted to go in. By meeting my expectations as to how I would start my search in looking for places to eat, this fulfills the Consistency and Standards heuristic.

Once I type in the address that we are staying at and hit enter I am brought to the search results. On the right pane is a map with pins on all the food locations and on the left is the list of them. Above the list are the filters so you can sort through the restaurants in a specific way.

One thing I appreciate about the filters is that you can click through them and mess around without updating the results. The only way the results will be updated is if you select the ‘apply’ button at the top of this section. You also have the option to select ‘cancel’ which would not apply any changes to the current results or select ‘rest’ which out clear the filters already applied.

This feature allows the user to back out of the changes they were going to make. Utilizing the User Control and Freedom Heuristic, this provides an emergency exit and does not commit to any changes they were attempting to make.

Usability Flaws

The first usability flaw that I came across was going down the filter options. At the top selection to filter by was vegan or vegetarian food establishments, or places with vegan options. In the next section below, you can then filter by the type of food establishment, such as coffee shops, bakeries, and food trucks. As you go down the list the options became more nuanced including health stores, market vendors, organizations, and professionals. Then In the next category below were types of food which included breakfast, buffet, fast food, and bakery (again). I was confused why these sections were separated and why these chose to filter by these categories.

This failed the Consistency and Standards of Use heuristic by confusing the user with too many irrelevant options. There is no way to distinguish the use of filtering bakery from the first set of categories from the second use of bakery in the subsequent category. This leaves users wondering what these filters could mean by selecting them.

The second usability failure I was tied up on was assessing the food establishments in my results. After adding filters and sorting through the results you can select a restaurant and see more information about it. HappyCow provides reviews, ratings, and photos all provided by other users. On the right pane of the page is contact information, operating hours, and hyperlinks to the restaurant’s website and social media. This is useful information, but the major factor in how I was going to choose a restaurant would be what was on the menu. So now when I click on a restaurant for more information I must click on another link, be brought to a new website and sort through the menu then return to the HappyCow’s page on that restaurant and then return to the search results to move on to the next option.

This multi-step process violates the recognition rather than recall heuristic by forcing the user to stretch out to the restaurant’s actual website to recall the food menu. If the user was then deciding between two restaurants, they would have to jump back and forth between websites to weigh their options.

Design Recommendations

My recommendation for remediating the Consistency and standards of user heuristic is for the creators to do extensive user testing on what people want to filter through and know about a restaurant. These current category options aren’t clear and don’t feel relevant for the everyday person. By knowing what is most important for users to find, the design can then list those categories by most popular. For more experienced vegans, they should have a shortcut to the more nuanced categories so the site can meet both needs for novice and knowledgeable users.

For the violation of recognition rather than recall, I recommend adding a pane on the side of the reviews that shows the menu. Users can scroll through this on the HappyCow page of the restaurants as they also browse through reviews. This way the user won’t have to jump to different sites and recall the menu information.

HappyCow should also have a feature where users can save different restaurants and review them side by side so they can compare their options. This would also free the user so they can evaluate the different food establishments without having to remember the menu of each one.

September 27, 2022September 27, 2022

Heuristic Evaluation | Art Museums

“America’s First Modern Art Collection” https://www.phillipscollection.org/

The gallery was originally the home of Duncan Phillips, art collector and philanthropist. Several additions to the original house were required in order to accommodate the ever growing art collection, now consisting of nearly 6,000 modern and contemporary works.

Evaluation Scenario

I will be using the website to plan art history lessons and a field trip for homeschooled high school students. Generally these lessons consist of studying several works of art by one specific artist, or works created during a specific time period and in a specific place (e.g. several works by Picasso, or works from the Hudson River School). Since it is hoped that through the field trip students will be able to see in person works of arts they have studied in class, I will broaden the parameters for choosing works for this course.

Analysis

The landing page for The Phillips website has two menu bars, a search bar, a ticket link, membership information, and a promotion of a current exhibition. A red banner at the top of the page gives museum hours, ticket information, and an additional link to “Plan Your Visit.”

If you hover your cursor over the main menu bar at the top, a dropdown menu appears which obscures most of the window. (See images above)

The original screen is busy and gives the user pause while trying to digest all of the options available. When the dropdown menu appears with even more options, and at the same time significantly changes the view of the screen, it only adds to the potential for “information overload” or cognitive strain and the potential for confusion. By trying to provide too many choices in the initial view, The Phillips website violates Usability Heuristic #8, Aesthetic and minimalist design.

The Recent Acquisitions section found towards the bottom of the homepage is another example of where too much is done in one space, again violating heuristic #8. The work being highlighted is obscured by the text – this is true as you scroll through the entire section.

However, it is possible to take minimalism too far. The image to the right shows the landing page when “Current Exhibitions” is selected from the “Exhibitions and Events” dropdown menu on the main page. This landing view feels like the page did not fully load, or is perhaps not formatted correctly for the screen.

Scrolling down does give a view of all current exhibitions, but for a moment the user can feel lost. Also, the breadcrumb trail is barely recognizable since it consists of only the menu category and a small, lightly colored arrow. These difficulties in navigation inhibit the visibility of system status by not making it clear where the user is within the website, violating heuristic #1.

An even more egregious error in keeping users informed about what is going on occurs when trying to search the collection.

The view above shows the search page prior to any filter applications.

Once a search is selected, the checkbox turns blue with a white checkmark. However, using the “Apply” button only adds a “Reset Filters” button. It does not start a list of applied filters or change the color of the “Apply” button or the selected filter’s checkbox.

The image above, right, shows selection of the Nineteenth-Century time period and the one on the left shows the view after that filter is added to the “On View” filter. Again, once the “Apply” button is clicked, the user does not have any confirmation of which filters have been applied. (Heuristic #1) This same issue occurs when selecting grades for lesson plans, but there, the dropdown menu for grades obscures the “Apply” button making it even more confusing whether or not the grade filter is applied. (See image below)

“Reset Filters” button is present here before and filters are selected, unlike the “Search the Collection” view. “Grade Levels” obscure the “Apply” button and there no confirmation that the filter has been applied.

As hoped, the museum did provide robust lesson plans for their collection and special exhibition. Unfortunately, my selection of six works from Nineteenth-Century French artists is not included in the lesson plans, but I will explore the lessons for Jacob Lawrence’s works on Toussaint L’Ouverture since that exhibit’s subject is familiar to the students.

While this is an excellent lesson plan, it is not especially friendly to the user. The text which is blue-green, and may only appear bold to color blind users, are links to other resources. Besides the problem of a color blind user being able to recognize the links, many of the links take the user to outside of the Phillips website. This move is made within the same browser window and without any warning asking the user if they want to proceed to a link outside of the current webpage. At least one of the links, “these paintings” – #3 in the lesson plan, takes the user to a press release issued by another gallery. This press release does not contain any images, which is what I expected to find when I used the link. Jumping to other websites without warning, violates consistency and standards, heuristic #4. Also, since there is no warning that the user will be moved out of the museum website, and therefore away from museum navigation tools, heuristic #1 is again violated. There is not communication or transparency from the website to the user about the consequence of using the links.

Recommendations

As a whole, The Phillips Collection website is attractive, informative, and fairly easy to use. With some minor changes addressing navigation and visibility exploration of the website would be streamlined, making the site more user friendly.

Aesthetic and minimalist design, heuristic #8 improvements
- Remove the red banner at the top of the homepage. All the information here is found in the “visit” dropdown menu directly below.
- Change the dropdown menus to vertical view only; eliminate the large white box that takes over the entire homepage.
- Remove the box insert on the lower right corner of the homepage. Again, tickets are available under the “visit” dropdown.
- Move heading for “Recent Acquisitions” to the top of the field
Visibility of system status, heuristic #1 improvements
- Reformat all views for filter options: the “Exhibitions” filters should be reduced so they do not take up the entire window. Display filters that have been selected and applied.
- Improve the visibility of the breadcrumb trail by putting dark colored arrows, using right to left directions
Consistency and standards, heuristic #4
- Changing the breadcrumb trail would also create consistency for users based on experience with other websites’ navigation tools
- In the lesson plans, links should open in a separate browser window, and warn the user if the link leads to another website