Group 3 Assignment: Iterative design on TripAdvisor

First Issue

The first issue that our users encountered when doing the task of searching for a cruise within the $400 price range was that the search result included a lot of “pricing for this itinerary is not available at this time” entries. It showed up in the search results after the “price range filter” was applied. We found that the issue was caused by how the sorting was set; it was defaulted to “best value”. This is a violation of Neilsen’s principle of consistency and standards because the term “best value” is subjective, unlike “best price,” which is universally understood. The results with the “best value” included unavailable cruises that weren’t aligned with what users wanted to see. As such, this violates Neilsen’s aesthetic and minimalistic design principles, which provided irrelevant information on cruises that were not available. This feature also violates Neilsen’s visibility of system status principle because even when the user adds a new filter, the search results are still sorted by the “best value” deals, which continue to show the unavailable cruises. This negatively impacted the user’s experience because it added no value to their search results. The default sorting made the results unclear to the user.

Search result with unavailable cruises
First Issue – Unavailable Cruise Search Result

Recommendations

The first proposed solution is to provide the ability for end users to remove cruises that are unavailable. This can be accomplished by including a filter option to remove any cruises that are not available. The filter will be added on the left side of the page with a box that can be checked or unchecked. The filter gives the user control over the search results, allowing them to remove or keep cruises with “pricing for this itinerary is unavailable”.

Secondly, the default sorting by “best value” is hard to understand and should be removed. The default sorting should be logical and clearly related to the filter applied to the user’s search. If they are searching by price range, it should be sorted logically by price from the lowest to the highest value, or vice versa. It makes it easy for the user to understand what is going on if the sorting reflects the filter being applied. The criteria used for sorting should be transparent and allow the user to have more control over their results. To easily find the “sort by” option, it should be moved to the left side of the result page. For added benefit, this option should remain in place as the user scrolls through the results.

First Issue – Recommendation

Second Issue

Secondly, transparency of pricing was an issue noted by many of the users that we evaluated. The price originally presented was significantly less than the final price of the resort, activity, etc. This was frustrating for many of the users, who thought they had found a steal of a deal and wasted their time going through the booking process only to find the final price significantly higher than the initial quote. This violates Neilsen’s principle of visibility of system status because the actual price of the hotel is not what it is visible to the user. This also violates Neilsen’s principle of consistency and standards because the price shown in one page is different when transferred to the provider’s webpage.

Second Issue – Deal Pricing
Second Issue – Actual Pricing

Recommendations

There should be transparency regarding pricing. During browsing, it needs to show the actual price including taxes before getting to the end of the page. Our recommendation is to have a “True Price” feature that includes all fees, taxes, etc. up front. The proposed transparency enhances trust, ease of use, and a less stressful experience for the user. By reducing the stress of the booking process, we’re confident we’ll have more return customers. By adding the “True Price” to every single feature advertised on TripAdvisor, we further enhance the consistency and standards of the website design.

Second Issue – Recommendation

Individual Assignment 3: Representative User Test

The Site

The website that my group selected is TripAdvisor. It is a travel website that helps people plan and book their vacations. It guides you to find the best places to eat, stay, fly, what to do, rent vehicles, and find a cruise based on the reviews of those who have been there before.

My User

My user is a 42-year-old mom with 3 kids. She has been on a lot of cruises but never used TripAdvisor to search for a cruise. I could say she is an expert at navigating websites that involve shopping and vacations.

Test Method

I used the “think aloud” method. I gave her one task at a time, had her verbalize her thoughts, and had her start from the TripAdvisor home page for each task, which is a total of three tasks. I recorded the whole screen, including mouse clicks and her verbalization. I chose this method because it is easy to follow what she is trying to do.

Description of Tasks

The first task that I gave her was to find a cruise for her family of five that was priced at around $400 per person. The cruise needs to originate in the Miami or Port Canaveral area. It must be when the kids have no school and not hurricane season. I used some of the questions that the group chose for the second task because I think those options can make the first task easier to attain. On my experience, those options are usually in the filter on the search result page.

The second task was to find a cruise that has multiple stops. Multiple stops mean it will be a longer cruise, so, she had to make sure that the price was within her budget (the more stops, the more expensive the cruise gets). After finding a cruise with several port stops, the third task was to figure out what activities are offered at the different places where the ships will port. For this task, I asked her to use a different approach rather than using the search bar.

First Task: Find a Cruise

The user was asked to go to TripAdvisor and complete the first task that she was given. The first thing she did when she landed on the site was go to the search bar and search for “cruises”. The search bar is very visible, and it looks like it is the highlight of the page. This took her to the “Cruise” tab of the website. From there, she directly goes to the search tab and clicks on the “Where to” drop-down. Using her experience, she picked the cruise location that looked appropriate for the price limit. She was debating between “Caribbean” and “Bahamas” and picked the latter. Then she went to the drop-down menu of the “Departure Month” and picked December since she knows that the hurricane season is between June and November and the kids have no school in that month. Then she was presented with the results. She narrowed down the results by clicking on the filter on the left-side of the screen. She first limited her search to cruises departing from Miami, and then she selected the cruise that fit her budget. Then she was taken to a new page (still on TripAdvisor) where she could change the date, see pictures of the ship, and see the cruise deals. She clicked on the pictures first, then went back to the previous page and clicked on one of the deals. She was sent to the partner page (the site was showing a very good indication of where she was taken) where she had the option to book the cruise.

She did not encounter any problems with this task. She went through it flawlessly. She knew what she was doing and where to go. She even predicted that she would be taken to a partner website because TripAdvisor doesn’t book cruises.

Second Task: Multiple Port Stops

From where she was at, I had her go back to the TripAdvisor home page and do the second task. She was lost for a little bit because the current tab was the partner site and not TripAdvisor. She had to close Firefox and reopen it to get her way back to the TripAdvisor home page. When she opened the webpage, she did the same search. When she arrived at the result page, she filtered it with the price range of $79-$450. Then she started browsing each cruise that has two port stops. By clicking on “Ports,” she was able to view the cruise schedule, which includes the port stops. This is tricky because there weren’t a lot of cruise results for the price filter that she added. Most of the cruises were unavailable. At the top of the right-side of the first hit result was a “sort by” drop-down menu. She changed it from “Best Value” to “Price”. That is when she was able to browse the results seamlessly.

The problem she encountered on this task was that there were a lot of unavailable cruises that were showing after the price filter was applied. She had that problem because the sorting was automatically set to the best deal, which, unfortunately, the deals were not available. This is a violation of Neilsen’s aesthetic and minimalistic design principle because, after the filter was applied, the site showed very few available cruises and a lot of unavailable and irrelevant ones. It also violates Neilsen’s visibility of system status principle because the “sort by” was not very visible, and who would have thought that the reason why there were not many good results after filtering was because of the sorting?

Third Task: Port Activities

After finding a cruise with multiple ports, I had her go back to the TripAdvisor home page and do the third task without using the search bar. She started to look at the buttons at the top of the search. She scrolled all the way to the bottom of the page, then scrolled back up and clicked on the button with “….”, which reveals more buttons. She found the “Cruise” button and it took her to the cruise page. She scrolled down the page and looked for a link for an excursion. When she couldn’t find an excursion page, she scrolled back to the top of the page and filled in the drop-down menus with the same information used in tasks one and two. When she arrived on the result page, she picked the appropriate cruise and clicked on the “View Deal,” which took her to the partner website. On that webpage, there was an “Itinerary” page for that specific cruise. That is where she was able to find the excursions for each port that the ship stopped at.

She was having a problem looking for an excursion page because she did not see the “To Do” section of the home page of the site. Instead, she looked for it on the partner’s site. This is a violation of Neilsen’s consistency and standards because if the button link for the “To Do” on the “cruise” page was the same as the home page, it would have been easy to spot. They also changed it to “things to do” and it is hardly visible when you are in the “cruise” page. It also took her awhile to find the “Cruise” link button because it was not visible but under the “….” button. This is a violation of Neilsen’s visibility of system status principle because the link to get to the cruise page is hidden.

Recommendations

For the usability problems when performing the second task, my first recommendation is to remove the unavailable cruises from the search results (especially for the filtered results). By doing so, this would have made her search simple, easy, and more effective by spending more time on relevant information.

After filtering a search result, users directly scan the results without thinking about sorting them first. My second recommendation is that the “sort by” should be more visible and easier to spot so that users will know that there are more relevant cruises at the bottom of the page or somewhere on the other tabs if you change the sorting. Also, since the filter applied was on prices, the sorting should have been on prices too, not best value all the time. This would have saved the user time and made her more efficient in her search by looking at the relevant results.

For the usability problems of the third task, my first recommendation is to have a button for “cruise” on the home page instead of hiding it in “….”. This could have saved the user time from looking for the cruise link and more time to do a cruise search.

My second recommendation is to have the “To Do” button on all pages and don’t change the way it is presented. The user would have used this button when she was on the “Cruise” page because she would see it as related to her search. This would have saved her time from going to the partners’ webpage and searching for it there.

Individual Assignment 2: Heuristic Evaluation

The Website

The website that I want to perform a heuristic evaluation on is Zomato. The platform of this website is for searching and discovering restaurants; reading and writing reviews; ordering food delivery; booking a table; and making payments while dining-out at restaurants (I think the last three services are for an app feature – the site was not specific about it).

Method

The evaluation method was browsing the website while keeping tabs on the usability flaws. After getting familiar with Jakob Nielsen’s 10 general principles for interaction design, I went back to where I found the usability flaws and connected each one that I found.

Usability Flaws

Visibility of the System Status

The flaw that I found with this heuristic is the search bar. The first thing that welcomes you when you get to the site is the search bar. But the problem is, it is already showing the last place that I did a search. It can’t be deleted or cleared, and can’t be removed by clearing the browser’s history. Another problem with it is that when you type your location and hit enter, it just looks like nothing happened. A few tabs at the bottom show up, but not what I am looking for (the list of restaurants). The third is the right-side of the search bar. When I first browsed the site, I thought I could search for any keyword on the search bar. But after careful inspection, you must enter a location and then do a search that pertains to a restaurant, cuisine, or a dish. I call this a flaw because people go to a site and do a search on a search bar, not enter a location, and follow the next direction, which, by the way, there is no direction.

This is a violation of the “visibility of the system status” because the site is supposed to always keep users informed about what is going on, through appropriate feedback within a reasonable time, and clearly this site doesn’t.

Match Between System and Real World

After entering the site, once you scroll down from the search button, you will see “Popular localities in and around Venice, Florida” (remember the previous searched location is automatically inputted). The word “localities” caught my attention because I am not looking for a particular place, but a place to dine.

This violated the usability heuristic “match between system and the real world” because it did not ensure that the user’s understanding of the word match the understanding of the programmers.

User Control and Freedom

So, I was finally able to search for restaurants. When I click on a specific one, it takes me to the restaurant’s profile. But there is no way of going back to the previous page, which is the results. To go back, I must press the back arrow button, or at the top of the image of the loaded curly fries, there is a directory type of addressing. You can click on any part of the directory and hope that you will land back where you want to go back. The problem with that is that not a lot of users can understand that.

The “no return button” is a violation of the usability heuristic “user control and freedom” because there is no clear way of exiting the current interaction.

Flexibility and Efficiency of Use

I noticed that in the search results there is no way to pick different restaurants and compare them, nor is there any way to personalize the view. The design is stuck on three columns and endless scrolling (if there are a lot of results – like searching a rural area). So, if you want to get to the bottom of the page, you scroll to what you think is the bottom of the page, but when you hit the bottom, it will load more results. When I searched for restaurants in Cebu City, Philippines, it kept doing that for at least five times. The design is not very convenient and it is annoying to get to the bottom of the page.

These violated the heuristic “flexibility and efficiency of use” because they don’t provide a way to personalize the functionality and they don’t allow customization on how the user wants the product to work.

Help and Documentation

There isn’t a help button, or I can’t find it.

This violated the last usability heuristic because a site needs to have documentation in context right at the moment the user requires it.

Recommendations

Visibility of the System Status

Since the site is already known for restaurant reviews, I recommend that the search bar be set to search full sentences, like “the best place to eat in Sarasota”. People already visit the site because they are looking for a good place to eat, so by doing so, they should get a list of restaurants. Or they can at least have a talking bubble to direct you to the process of getting search results (instructions).

Match Between System and Real World

I recommend changing the label to “restaurants and bars in the neighboring area”. This way, people will know that the section is still relevant to their search.

User Control and Freedom

For this usability flaw, I recommend a clear exit path. It must be correctly labelled and easy to find.

Flexibility and Efficiency of Use

For these flaws, I recommend adding an option/button for the users to change the view of the results, and adding a list view will solve the never-ending scrolling.

Help and Documentation

Add a “help button” to help users when they require it.

Individual Assignment 1: Designing for Users

Kansas Department of Transportation (KDOT) Home Page

The Website and the User

The Kansas Department of Transportation (KDOT) website (https://www.ksdot.org/index.asp ) is the one I chose. My tester is an expert user of the internet. She is in her early 40’s. She is pretty good at online shopping, she uses social media a lot, she is good at navigating the internet, and she can do research on the net. She has been to this website a couple of times but has never checked out the RWIS page.

A User’s Actions

The task was to check the status of the weather station in Chanute, KS. In order to get this information, she has to get to the road weather information system (RWIS) webpage from the KDOT home page and locate Chanute, KS. The first thing she did was search for “RWIS” (road weather information system) (she is familiar with the term) on the search bar of the home page of the KDOT site. It returned 10,022 results, and for me, the only relevant page was the top one: KDOT: RWIS. She clicked on it, and it took her to the old RWIS webpage, where everything looked legit. But it was not interactive, some of the RWIS sites on that page were not existent, and the information on that page was not up-to-date. Basically, she was on the wrong webpage. Then she went back to the home page and started exploring the site. She clicked on some links, but none of them took her to the RWIS site. Eventually, she was able to put two and two together. She found the link she was looking for in the “Travel Information” tab and chose “Road Weather Stations.” She is familiar with the map of the state of Kansas, so, when she got to the RWIS site, she was able to find Chanute quickly.

Search Results for “KDOT RWIS”

Problems Encountered

The thing that she did that I found unexpected was when she started with a search, instead of exploring the site first. The problem that she encountered was not becoming familiar with the site. I would have explored the site before jumping to do a search. To make it worse, the search capability of the KDOT website is not the best either. Another issue is the “KDOT: RWIS” link (https://www.ksdot.org/burcompser/generatedreports/weather.asp ), which took her to an old webpage of the RWIS stations. KDOT should have removed that site because the site has irrelevant information and it would be dangerous for people travelling and referring to that site for updated weather conditions. Take, for example, the Oakley site. How do you get a 159 mi/h wind gust?

As a novice to the site, she did know the location of the RWIS page link. The site is confusing, and there are links everywhere. Links to news, links to reporting, links to the other areas of KDOT, links to their social media, and links to getting around the state. All the links are a distraction, because the real information was on the tabs at the top of the page. She mentioned that she did not focus on any of those because they were confusing, and she was expecting a link to the RWIS sites on the page. The last issue that I found was that the RWIS site (https://rwis.ksdot.gov/ ) is not user-friendly at all. The stations on the map are not labelled properly, and the lists of the stations and their status are not arranged alphabetically but rather based on the state’s districts, and there is no way of manipulating the arrangements. For somebody who is not familiar with the map of Kansas, they will have a hard time figuring out which is Chanute, and it will be hard for users to figure out where to find Chanute on the list.

RWIS Map View
RWIS List View

Suggestions

Since weather conditions are very important to the people of Kansas and the people traveling through it, the main page needs to have a direct link to the RWIS site’s page, not under some tabs, which are hard to find. As for the RWIS webpage, it needs to have a clear label for the stations on the map and a better arrangement of the lists of stations that can be manipulated by the user on how he/she wants to view them. It would also be nice if the items on the list would link to the location of the map or vice versa, and lastly, people have no need for the site ID. How about removing that tab and replacing it with the names of the sites?