Monday, March 25, 2019

Usability Evaluation of Greyhound.ca

By: Satender Singh

  

Figure 1. Homepage of Greyhound.ca

Introduction

Greyhound.ca (Figure 1) is the most used long-distance bus service in Canada and it connects a large number of communities across Canada. The main features of the website include searching for bus schedules between two cities based on time and date, reservation of tickets, locating nearest Greyhound bus stations, searching for offers and discounts, looking for route updates /modifications, live bus tracking and, shipping and locating packages. The website is available in both major languages of Canada, that is, English and French. I used Nielsen Norman’s (1994) 10 heuristics [1] and think-aloud usability testing to evaluate the above website.

Usability Issues and Recommendations

1. Several irrelevant buses displayed in search results

When we try to search for a bus from Ottawa to Montreal of the current day without specifying a time, a search screen with many irrelevant buses is presented. This screen shows the bus schedule for the entire day but doesn’t exclude the buses which have already departed for the day. For example, in Figure 2 and Figure 3 there are only 3 available buses out of the 20 buses displayed. This creates confusion about the available buses and frustrates the user as they must scroll down to find the currently available buses.

 Figure 2. Search results of current day buses without specifying a time.


Figure 3. Search results of current day buses without specifying a time.

Recommendation

There can be several solutions to the above problem:
  • Don’t display the buses which have already departed. This means improving the search results by filtering them based on the current time.
  • Alternatively, do not display the time slots which have already departed for the current day on the homepage.
  • If we want the user to know about the complete schedule of the day then we should hide the buses departed under an accordion named “Departed buses” and display available buses in an open accordion named “Available buses”.

2.      Information about input not clear

Currently, if a user wants to plan a trip, then he/she is required to provide some input in the fields "Leaving From" and "Going to" as seen in Figure 4. But information about what type of input is expected is not given on the website. It creates confusion as some users may think a city name is required whereas some users may think that region or province name is required in this field. 


Figure 4. Expected input not clear

Recommendation

As soon as a user clicks on the input field such as "Leaving from", a list of all the available location should become visible to the user in a drop down. Similarly, after the user selects the origin location, the "Going to" should only display the available routes from this location. 
Alternatively, instead of updating "Going to" field locations, show all the locations and when the user selects one of the locations where a direct route is not available, show them a route with connections in between them. 

3.      Boarding and Drop station addresses not present during booking

While planning a trip, it is very important to know the exact address of our drop/ boarding point. While booking a ticket, the only name of the city or some keywords are present under the “Schedule details” heading and the exact address of the boarding and drop location is not clear as seen in Figure 5. Problem is especially severe for a new user who is traveling from greyhound for the first time and has no information about its stops, therefore, making it very hard for them to plan the trip accordingly.


Figure 5. Exact Address not given during bus selection.

Recommendation

A pop-up or information box with the exact address of the station should be displayed when a user hovers over a specific stop. This is a standard convention and must be followed to make the user experience better.

4.      Baggage allowed information is not given during booking

The baggage allowed information is also not displayed to the user during the entire booking process, that means, from selecting a bus to payment confirmation of the tickets as seen in Figure 6. Importance of this information can be understood by the fact that a user may have to pay around 15 CAD extra per bag above the allowed limit.
  
Figure 6. No details of baggage allowed before payment.

Recommendation

The baggage allowed information should be displayed at multiple places to increase the trust of the customer on the website. First place can be within the “Schedule details” (refer Figure 6) and the second position can be a separate tab displaying baggage allowed and an option for the user to buy extra baggage space. In addition to that, baggage information should always be displayed at the time of payment confirmation or summary of purchase.

5.      Bad colour scheme used for links in the footer

The footer contains some important links such as “Courier Express” which navigates the user to sub website which helps in package shipment and tracking and “Station Locator” which helps users find nearest bus stations as seen in Figure 7. It is difficult to find the Station locater link due to its poor color scheme. This is important since a new user will always look for the nearest bus station before planning any trip.

 Figure 7. Bad color scheme used to show links in the footer.

Recommendation

Colour schemes play an important role in highlighting the importance of information and maintain the coherence with the design of the rest of the application. Therefore, colour scheme of this footer should be updated. A dark background as used on the rest of the website should be used. Alternatively, a dark colour for the font can be used too.

6.      Link to Greyhound Mexico website is partially clickable

It was found that link to Greyhound Mexico is only partially clickable as seen in Figure 9 and 10. Initially, it looks like a dead link as nothing happens when you click on the left half of the logo. This is an example of the bad design of clickable links and it makes a website less reliable.

 Figure 8. Clickable part of Greyhound Mexico icon.


Figure 9. Non-clickable part of Greyhound Mexico icon.

Recommendation

Correct the behavior by making entire flag/icon clickable. Also, there should be a clear separation between the two countries icons. Moreover, a small text “Greyhound across Globe” can be displayed in front of them.

Conclusions

Greyhound.com is the most used long-distance bus service of Canada and most of its users rely on the official website to book tickets for their next trip and yet, the official website has a lot of usability issues in the major functionalities such as searching for bus schedules, finding bus passes and checking stations have usability errors. Using the current website can be frustrating and may irritate the user because of the above-explained errors. The website requires a thorough change to correct the issues and gain customers trust. 

References

1. https://www.nngroup.com/articles/ten-usability-heuristics/

Usability Evaluation of Cineplex Website

By: Mudit Aggarwal



Introduction

Cineplex is a website that allows users to book tickets for the movies through internet using different kinds of payment options which include redeeming SCENE points, credit card, debit card, PayPal etc. It gives the user freedom to select their preferred seat for their desired movie and theatre. Along with seats, user is also able to select the experience in which they would like to enjoy the movie like 3D, IMAX, D-Box etc. Not only that, this web application allows users to avoid carrying hardcopy of movie tickets, by sending the E-ticket of the show to the specified email address. If user has made account in the Cineplex using their Google account then, it allows them to add the movie time details to their calendar as well by just a single click. Despite its many features, there are number of usability issues in this site that hinders the experience of the users. In this blog, I will discuss some of the major usability problems that were discovered by heuristic evaluation using Jakob Neilson’s 1994 heuristics and think aloud user testing of Cineplex’s website.


Usability Issues and Recommendations

1.     Search Theatre by City does not show all theatres

To search for a show, there exist two options on the homepage, either find the shows by selecting the theatre first or by selecting a movie first. While searching a show by theatre, it was observed that, the field which was supposed to filter out all the theatres present in city based on city name, did not show all the theatres as shown in Figure 1. It presented only 4 options and did not list the “Cineplex Odeon Barrhaven Cinemas” which lies in Nepean which is a part of Ottawa. This bug violates heuristics #6 - Recognition rather than recall and heuristic #7 - Flexibility and efficiency of use.

Figure 1: Select Theatre by City

Recommendations

There can be two solutions for this problem:
  • Resolving the bug by having the system considering all the geographical locations in the city, which is causing it to leave some theatres out of the list.
  • Making the showtimes page as the homepage as it shows all the theatres available in the city.


2.     Modify Show timing/date issue

One of the frequent operations before finalizing a movie show is to change the time or date of the show. After selecting a show, there is no option present on the page to select any other show time or date. To change the time/date users need to go all the way back to the home page and reselect everything, which includes Theatre, Movie, Date and time. This issue violated heuristics heuristic #3 User Control and freedom and heuristic #6 Recognition rather than recall.

Figure 2: Selected Show page

Recommendation

It is recommended to provide a button or a link that directs the user to the page where previously chosen options are already selected and that allows to change their selection. For example, the homepage with already selected theatre, movie, date and time. This will allow user to change the time or any other value for the show.


3.     Search a show by seating experience issue

Filters like searching by theatre and searching by movies, there also exists a filter to search shows by seat experience, but that feature is unintuitive and difficult for the users to find. Homepage has two paths to filter shows according to experience. First one is a dropdown with title “FORMAT” which has all the experience listed in it. But the title “FORMAT” does not provide the same idea as that of seat experience. Also, this dropdown is not placed along with other searching fields like search by theatre and movies. Second is experience options available in the navigation bar. Issue is that these options are available in “THEATRES” tab in the navigation bar, which is very unintuitive to find. These issues violate heuristics #2 Match between system and the real world, #4 Consistency and standards and #6 Recognition rather than recall.

Figure 3: Search by Experience

Recommendations

These issues can be corrected by following 4 changes:
  • Move the “FORMAT” dropdown together with “BY MOVIE” and “BY THEATRE” tabs where it can be used as filter in similar way.
  • Change the name of the tab to “BY EXPERIENCE”.
  • Make UI design of this tab same as that of “BY MOVIE” and “BY THEATRE” tab where first it will ask to select the experience, then movie, theatre and date by using dropdowns.
  • Make a separate tab in navigation bar for the experience’s links.


4.     User log out option missing issue

When the show is selected, user cannot log out from the system. Both the selected show page shown in Figure 4 and payment confirmation shown in Figure 5 has the account information of the user logged in displayed, but it is not clickable and user cannot log out from the system. To log out, user must navigate back to the homepage, where this option is available again. This issue violates heuristic #3 User Control and freedom, heuristic #4 Consistency and Standards, heuristic #7 Flexibility and efficiency of use.
Figure 4: Selected Show Page (No Logout)

 
Figure 5: Payment Confirmation page (No Logout)

Recommendation

This issue can be fixed by setting the consistency throughout the system by creating the drop down from the top right corner where the name of the user logged in is shown. This drop down will provide an option for the user to logout from the system.


5.     Movies not displayed in dropdown

On the showtimes page, movies dropdown only shows one movie as depicted in the Figure 6 below. To select any other movie, user is required to enter the whole name of the movie. This issue violates heuristic #6 Recognition rather than recall, heuristic #5 Error Prevention, Heuristic #1 Visibility of system status.


Figure 6: "Showtimes" page movie dropdown issue

Recommendation

This issue can be corrected by providing the list of all available movies available in the selected location.


6.     Change selected seat issue

There is no option available for the user to go back directly to seat selection phase to change the seat, after the user has already selected a seat for a show. Also, there is only one breadcrumb allocated to both the steps of selecting the number of tickets and selecting seats in the theatre, even though they are separate steps that are involved in booking for a show as depicted in Figure 7 and Figure 8. So, in order to change the seat, user must go back to the step of selecting number of tickets to purchase by clicking on the breadcrumb for the tickets and only then they can move forward to select the seat again. This issue violates heuristic #1 Visibility of system status and heuristic #3 User Control and freedom.

Figure 7: Select number of tickets page

Figure 8: Select Seat page

Recommendation

This issue can be corrected by creating a separate breadcrumb for the step of selecting the seat. This will not only provide users with the state information while booking the ticket but will also provide a direct link to the users to change the seat.


7.     Incorrect selected seat text issue

When the user selects the seat of their choice in the theatre, then system shows an incorrect feedback text “Following are the best available seats:” as shown in Figure 9. This issue violates the heuristic #1 Visibility of system status.

Figure 9: Select seat page text error

Recommendation

This issue can be corrected by changing the text from “Following are the best available seats:” to “Following are the selected seats:”, when user selects the seats in the theatre.


Conclusions

“Cineplex.com” is used by hundreds of thousands of people throughout the country. Whenever anyone wishes to watch the movie, they connect to this system to book a ticket for the show of their choice. But heuristic evaluation and user testing reported in this blog shows that, a lot of issues exists in the system which hinders the user experience. Usability issues are present in all the steps from selecting a theatre to confirming the payment for the bookings. Recommendations provided in this blog can help developers make the website user friendly and improve the user experience.  


References

[1]
J. Nielson, "How to Conduct a Heuristic Evaluation," Nielsen Norman Group, 1 11 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/. [Accessed 12 03 2019].
[2]
J. Nielson, "10 Usability Heuristics for User Interface Design," Nielsen Norman Group, 24 04 1994. [Online]. Available: https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 12 03 2019].
[3]
Cineplex, "Cineplex," [Online]. Available: https://www.cineplex.com/. [Accessed 19 03 2019].


Sunday, March 24, 2019

Usability Evaluation of Flipkart E-commerce website

By Akhil Nandyala 


Introduction 

   E-Commerce has become a trending topic for the past few years. It basically means buying and selling of products online using the internet. In this blog post we will be discussing the usability issues with an e-commerce application of an organization which is by far the most popular, most used and most profitable organization in India, that is, Flipkart. A Heuristic evaluation of the software was performed using the Jacob Nielsens 1990 Heuristics and the 1994 heuristics as the guidelines and the results were recorded. Suggestions and recommendations are provided wherever they seemed applicable.

Description of the Software Evaluated

   Flipkart is an Indian e-commerce company founded by Sachin Bansal and Binny Bansal in 2007. The company product catalogue ranges from books to consumer electronics. Consumers can browse along various categories of products, add products to cart and then order the product after successful billing. Users can also add their favorite products to wish list to keep track of all their favorite products.

Flipkart  Homepage
Figure 1. Flipkart Homepage

User experience issues encountered

    1. No guest checkout available, every user is required to have an account to buy products.
   Every user needs to have his/her account registered, to order products from the site. A guest check out option is not available for an instant, hassle free ordering of items. This violates the heuristic ‘User control and freedom’ which states that user should be given control of his actions. This might cause potential users to try out other available e-commerce companies that do have this option available and require users to sign in each time they want to buy something.
   Suppose a user wants to buy a mobile as depicted in the picture below. He has two options, ‘ADD TO CART’ and ‘BUY NOW’. If he wants to continue shopping he can add to cart and continue and if he needs immediate checkout he can opt for ‘BUY NOW’.

Product page
Figure 2. Product page
   Suppose he opts for ‘BUY NOW’, he will be taken to the next screen as can be seen in picture below, which requires him to create an account or sign in.
Check Out page
Figure 3. Check Out page
   As you can see in the picture there is no Guest checkout option available which enables instant checkout of required items. A guest checkout feature is even provided by other e-commerce companies which is found to be very useful.

Suggested improvements to resolve issue

A guest user option can be made available to users for faster checkout of items, for people who do not like to spend much of their time creating an account or logging in each time they want to buy stuff.

2. No option to sign up using email ID, only Mobile numbers are allowed.

An option to allow users to create an account using their email ID was previously available, but was removed recently due to some undisclosed reasons. At this moment there is only option available , that is, creating an account only through Mobile number. This is a very inflexible move by the company as many customers would prefer using their email ID instead of their mobile number, as this is the common procedure with many other e-commerce companies and users are very well used to this.
      It can be seen in the screenshot below that during Sign in, I was able to sign in through either Email ID or Mobile number. I guess this is for customers who have previously created account using their Email ID. This violates the heuristic ‘Consistency and standards’, since for 'Signing in', Email is allowed, but for signup it is not.
Login page
Figure 4. Login page
     As we can see in the below screenshot on how I was forced to use my mobile number and there is no option available to sign up using Email ID.
Sign up page
Figure 5. Sign up page

     Another constraint is that users need to have their mobile with them when signing up, as they are required to enter the OTP (One Time Password) which they will receive during the process, to complete the registration process.

Suggested improvements to resolve issue

   An option to sign up through Email ID can be made available to users, in addition to Mobile numbers. In this way users are not forced with any particular option and users who are comfortable with either one can choose their respective choices.

3. Return to homepage option is not available

   An option to return to the home page of the website is not explicitly available, the only way to return is by clicking the Flipkart logo located at the top left of the page. This is something a new user is not quite acquainted with.
    Suppose a user is at the homepage of the website as depicted in the below pic and in the section of Deals of the Day, if he wants to view all the items, he will be clicking on the ‘VIEW ALL’ button as can be seen in below screenshot.
Home page
Figure 6. Home page

   The ‘VIEW ALL’ button once clicked, lands him at the page as presented in the screenshot below.

 Page after clicking VIEW ALL option
Figure 7. Page after clicking VIEW ALL option

   Now if the users wants to get back to homepage, there is no option available on-screen that explicitly mentions homepage. The operation of getting back to homepage can only be achieved if the user clicks on the Flipkart logo presented at the top of the page. Not just from this particular page, if the user is at any page in the website except for the home page, there is no option made available indicating how to get back to home. This violates the heuristics ‘Prevent Errors’ and ‘Provide clearly marked exits’.
Suggested improvements to resolve issue.  
An option indicating ‘HOME’ or ‘Return to Home’ can be made explicitly available in every page of the website, so that whenever the user wants to return to the home page from which ever page he is on, he can be able to do that without any confusion.
    In addition to that, a trail of breadcrumbs (home -> page X -> page Y -> …) of pages, indicating the path the users has gone through, starting from homepage can be made available so that the user can go back to any page he has traversed through, not just the homepage. This option is made available in some pages of the website, but not throughout the website.

4. Logo has another link right just below it, misleading users to different page other than Homepage.
   As we have discussed in the previous issue that the logo has the function of leading users to the home page, it has another very critical issue related to it. The Flipkart logo which is located at the top left of the page has another link which is closely located right below it named Explore Plus.
     It can be seen in the screenshot presented below
Congested logo design
Figure 8. Congested logo design

  The Explore plus option leads users to a page with details regarding the advantages of having a flipkart plus account, instructions on how to register and more.
   The page is as presented below
The Explore Plus page
Figure 9. The Explore Plus page

   The arrangement of this option right below the logo is causing users to accidentally land on this page, when all they want is to return to home page. There is not any space between the two links, so it is difficult for users to even differentiate them. This violates the heuristics ‘Prevent errors’, ‘Use aesthetic and Minimalist design’ and ‘Provide clearly marked exits’.
Suggested improvements to resolve issue
   The location of the Explore Plus option can be moved away from the logo, so that users will not be accidentally landed at an unwanted page. It can also be completely removed as the Plus feature is already available in the drop down menu available in our account settings.
   If needed to be placed in the same position, then the font size of the option must be increased and the font color must be changed to be different from the Flipkart logos font color, so that they contrast each other and users will easily be able to differentiate both the options.

5. No option to get back to product page or the cart, once we are at the ‘check out’ page.

If a user decides to buy an item, he will be directed to the checkout page once he clicks the ‘BUY NOW’ button from the product page. At this point, if the user chooses to continue with shopping instead of ordering the product, he cannot go back to shopping as there is no option explicitly available asking if the user wants to continue shopping or wants to continue checkout. This violates two heuristics ‘Give the user control and freedom’ and ‘Prevent Errors’.
Suppose a user decides to buy an item and clicks on the ‘BUY NOW’ option, as seen in the below screenshot.
Product page highlighting the buy now option
Figure 10. Product page highlighting the buy now option
            He will be directed to the following page as seen in screenshot,
Check out page with no option to continue shopping
Figure 11. Check out page with no option to continue shopping
           We can see that there is option only to ‘CONTINUE CHECKOUT’, but there is no option to continue shopping or return to shopping cart made available to user. The customer is forced to continue with ordering the item at this point.
Suggested improvements to resolve issue
An option can be made available to users at this point indicating ‘CONTINUE SHOPPING’, ‘RETURN TO CART’ or ‘RETURN TO MAIN’, so that users will have an option to either continue with checkout or continue to shop or else, in case they want to order some more products from cart along with the current one, they can return to cart.

   6. Inconsistent icons and text for the Remove and Delete options

Various divergent icon and text designs, for remove and delete operations are used throughout the interface which users may find difficult to interpret. Few users were even confused between the handling of the operations during user testing. They were not sure, whether the operation they performed was remove or delete. In the below series of screenshots we can see the difference in the display of the Icons and text.
      In the screen to ‘Manage Addresses’, we can see that the option to delete saved addresses along with an option to edit the addresses is presented only when the user clicks the options icon (icon with three vertical dots). This can be seen in the screenshot below.
 Visual element for Delete option in Manage Addresses page
Figure 12. Visual element for Delete option in Manage Addresses page
       In the screen where we ‘Manage Saved Cards’, the option to delete saved cards is presented as an Icon (Trash Can shaped). Users need to click on this icon to delete the saved cards. There is no longer an option icon containing Edit and Delete options. 
Visual element for delete in Manage Saved Cards page
Figure 13. Visual element for delete in Manage Saved Cards page
      In the screen of ‘ORDER SUMMARY’, we can increase or decrease the item count of a particular item, the option to remove an item from the cart is presented using a ‘REMOVE’ option in text.
This can be seen in the screenshot below
Remove option in Order Summary page
Figure 14. Remove option in Order Summary page
Where as in the ‘My Wishlist’ page, where all the items we tagged as favorite are saved, the option to remove an item from the list is provided as an Icon (Trash can Icon). Users need to click on it to remove it from the wishlist. This can be seen in the below screenshot.
Different Visual element for Remove/Delete in My Wishlist page
Figure 15. Different Visual element for Remove/Delete in My Wishlist page
     There is clearly a misconception on the usage of the Delete and Remove options and this is causing a lot of confusion among the users. The usage Trash Can icon interchangeably for Remove and Delete operations is creating a situation where users are puzzled. This violates the heuristics ‘Prevent errors’, ‘Be consistent’ and ‘Speak the user language’.
Suggested improvements to resolve issue
     A common method of visualizing the remove and delete operations must be implemented throughout the website, as in, the ‘My Wishlist’ page, the Cart page, the Checkout page, the Manage Addresses and Manage Saved cards page, all must have the same method of accessing the options.
       Since in our case the number of options are only 2, namely ‘Edit’ and ‘Delete’, we can make those options readily available on screen rather than a separate Options option containing set of options that can be performed.
       Also it is better to use an Icon (‘X’ or ‘Trash Can Icon’) for Delete operations throughout the website. This may be either to remove items from cart, remove items from wishlist, remove saved addresses or remove saved cards.  
      The combination of both the recommendations is to make the Edit and Delete options readily available on screen and for Delete option, instead of displaying text, an icon will cause less confusion and more clarity for users.

     7. Different mechanisms to check if delivery is possible to required location 
       Different options for delivery were made available to user when viewing different items from the website. For instance for few products, the delivery option was a text box, where we could type the pin code and check if the delivery is available for that area but for few products, the delivery option contains a dropdown, where we can select an address from the list of saved addresses and also check for the pin code. This difference in options can be seen in the below screenshots.
       In the first screenshot we can see that a Text box is provided to check if delivery available for pin code.

Option to check delivery availability from Product page
Figure 16. Option to check delivery availability from Product page
       In the second screenshot we can see that a drop down is provided to select from the list of saved addresses, with the last option in list containing the text box to enter pin code and check availability.
A Different option to check delivery availability from Product page
Figure 17. A Different option to check delivery availability from Product page
   This violates the heuristics ‘Be consistent’, ‘Minimize memory load’.
Suggested improvements to resolve issue
   This appears to be as an issue in the design of the interface, where the delivery option is presenting different ways of checking the availability of product. The option with the drop down seems more preferable and advantageous to users, as they can easily select their preferred location from the list of saved addresses. This also saves time to user as they do not need to again select the complete address later during the checkout process, since the location that we select here, is automatically set as our location during checkout also.

Conclusion
   Flipkart is one of the major e-commerce companies which has become successful in India. But even though most of its online purchases happen through its web application, it still has some major shortcomings when it comes to usability of its interface. I have tried to analyse some major issues concerning its usability and presented a brief description of them in this blog post. Many of the issues are concerning inconsistency in the design and usage of elements on the screen and furthermore few of the reasons for those errors are bugs in design and many are mainly due to confusing screen design and lack of knowledge to do the task.