POPULAR Online is the online portal of Malaysia’s largest bookstore chain. Aside from providing customers easy access to books, gadgets, stationery, and CDs, it also allows them to view membership details, product information, and other available materials. In essence, it simulates the POPULAR experience virtually, and allows customers to purchase products—mainly books—from the comforts of their own homes.
In order to test out users' reactions when navigating the platform, I created the below scenario so participants could perform a think-aloud cognitive walkthrough. We did an online usability test through video call with our participants, who shared their screens and opened their webcam in order for us to capture their thoughts and emotions. Consent was provided for us to record all the sessions.
After listening to a talk about self-investment, you got motivated to get into reading. You realized that English classics might be a good starting point to kick off your practice as you enjoy analyzing the meaning behind texts. You asked your friend for a book suggestion, and he suggested Animal Farm by George Orwell, a famous classic reflecting the state of society under capitalism. You then decided to buy the book using the POPULAR Online. Log on to your computer and access https://www.popularonline.com.my/. Begin to search for any version of the Animal Farm novel by George Orwell and place your order. Stop right before clicking “place order now”.
I also created a Hierarchical Task Analysis (HTA) of the navigation of the platform before testing out the usability of POPULA Online. The purpose of the HTA was to allow us to identify the possible steps that a user might take while performing the task. It also allowed us to pinpoint the roadblocks faced by users at every step.
After the usability test, we conducted interviews with all our participants with the following questions that were designed by my groupmates.
Through usability testing and interviews, we noticed that most of the roadblocks that participants faced were caused by:
The category and advanced search functions were placed above the fold, so participants were unable to locate them. This could be due to the concept of banner blindness. As seen on the homepage of POPULAR Online, banners surround the category and advanced search functions, with one banner above them and two below them. This could also be due to the salience of the banners. Bigger objects or brighter colours can more easily draw attention; hence, as the banners on the homepage are relatively big and incorporate colours like yellow, red, gold, and blue, and the advanced search function is small and coloured a medium grey, the latter is less likely to draw attention compared to the rest of the page. Lastly, this could be due to the similarity of colours, as the tint of the category function is way too similar to that of the banners below it.
To prevent a lack of discoverability due to banner blindness, the search and category functions were placed at the top of the page, above all banners. By no longer hiding these functions in between banners, it was hoped that users would no longer perceive the search and category functions as part of the banners, thereby increasing their visibility. Moreover, users tend to scan a screen using an F-shaped layout, where information at the top usually gets more gaze time. Therefore, by placing the search and category functions at the top of the page, it was also hoped to ensure that users actually see them. To further increase discoverability, the colour of the advanced search function was made more apparent, and the colour of the banners was made more dissimilar from that of the category function. Furthermore, only one banner was kept to ensure banner bombardment does not happen, and that POPULAR Online can still advertise other banners by putting them into the banner slider.
Even after participants managed to find the category function, they still struggled with discoverability—this time in terms of the subcategory function. The subcategory function can only be seen and accessed after a main category has been clicked into from the category function. This caused our participants to (1) not even know the subcategory function existed, and (2) become confused about which main category to select, so as to access the subcategory they wanted.
The subcategories were then included into the category function to create a mega menu. Mega menus, which display all information at once, are preferable to hierarchical menus, which only display subcategories once main categories are selected. They also increase searchability and decrease frustration, which allow users to look at every option at once, making it less likely that they will go elsewhere. Hence, by turning POPULAR Online’s category function into a mega menu, it was hoped to increase the subcategory function’s discoverability and, in turn, increase searchability as well as reduce confusion and time wasted.
A participant who had inputted an incorrect password while creating a new account continued to input incorrect passwords without noticing that an error message (which detailed POPULAR Online’s password requirements) had appeared. This could, firstly, be due to change blindness, as the page reloaded before the error message appeared, making it likely that participants had not realized that a change had occurred. In addition, the error message has same colour as POPULAR Online’s theme, which could be another factor that caused the participant to miss the message.
To improve on this, the password requirements were made available to participants from the get-go, so as to minimize information access cost, prevent password errors from occurring, and save users’ time and effort. On the other hand, the error message was placed where the password input space is, displayed as a dialogue box with an arrow pointing to the password input space, so as to guide users' attention to it. In addition, a grey background was used to avoid the issue of colour similarity with POPULAR Online’s red theme.
Lastly, when it came to discoverability, even though Animal Farm had to be backordered, participants were not made aware of this. Essentially, POPULAR Online has books that (1) are not in stock, (2) need to be backordered, and (3) are in stock. However, while books that are not in stock are clearly differentiated, books that are in stock and books that need to be backordered are not differentiated under the search result page. Instead, both types of books are simply marked with an “add to cart” button, and users can only discover that their books need to be backordered if they checkout via shopping cart, as that is the only place where users can check their book status. This can be very problematic for users. All of our participants took the direct checkout route instead, and if they had been “real” users, they might have purchased backordered items without realizing that delivery will take 20 working days.
To solve this issue, book statuses (“in stock” or “need to backorder”) were shown above the “add to cart” button, as this would minimize users’ information access cost. It will also reduce the risk of users checking out items without first knowing how long their delivery will take. In fact, the phrase “in stock” was coded green and the phrase “need to backorder” was coded yellow, as colours are secondary cue and serve as an effective visual indicator when used to group or distinguish items. Yellow and green were chosen also because green is often associated with safety, while yellow is often associated with caution.
The lack of feedback was obvious on two occasions—(1) when participants were made to save their account information, and (2) when participants had added their book to cart. Essentially, while POPULAR Online did indicate that participants had saved their information and added their book to cart, it was done in ways that were not obvious to them—the “saved” indicator appeared out of screen, and the “added to cart” indicator was too subtle a change.
To solve these issues, pop-up messages can be used in both cases to provide feedback, as pop-up messages prove to be extremely eye-catching.
Following this, POPULAR Online’s filter buttons caused confusion. Participants thought that they could select multiple filters at once, but only one filter could be chosen at a time. This assumption could be due to the fact that, generally, individuals expect that only one option can be selected when there are radio buttons, and that multiple options can be selected when there are checkboxes.
To further reduce confusion, the filter buttons in the search result page were changed from checkboxes to radio buttons to align users' mental models with their conceptual models.
Aside from this, a field in the “billing information” section required users to fill in their company name, which can be confusing as they thought that this meant they had to fill in their company address under “billing address”.
To reduce user confusion, the “company” field was removed from the “billing information” section, since it does not contribute to the checking out process anyway, so as to prevent users from mistaking what “billing address” refers to.
Compounded annoyances demand more time. Firstly, this was portrayed by our participants when they had to manoeuvre the checkout process. As the website made no indication that users had to log in to checkout, clicking on the “checkout” button forced all of our participants to repeat their steps from step 2.0 all the way to step 5.0, proving a high, if not annoying, learning curve for first-time users. Additionally, participants were already made to save account information (including things like their name, address, and contact number) when first asked to sign up; however, when they reached the checkout page, they found that they had to retype all this information, despite the fact that the website already had this information when it was first saved.
An additional annoyance was added during this process as the same pop-up advertisement kept reappearing, disrupting participants. The pop-up confused them, as they could not understand why they were still being advertised to at the checkout stage.
To remedy these issues, a pop-up notice will appear upon users’ access to the site, informing them that they must be logged in to check out items in their basket. Subsequently in the account creation stage, users can fill in pertinent checkout information (i.e., name, address, contact number) while first signing up, and have it auto-filled in the checkout page while still remaining editable. This is to ensure that users can save time during their book-buying process, while still being able to make one-time changes without having to make changes at their account page. The pop-up advertisement, in this case, should also be abandoned due to its disruptiveness.
Finally, the checkout page presented every field at once—causing participants to feel overwhelmed. The page, which is condensed with answer fields, may have urged users to look back-and-forth between the fields—thus increasing cognitive load. In addition, by having all the fields presented at once, users might have been unable to process the information at their own pace, causing them to also feel overwhelmed.
To solve this, the checkout page can be modified by having the answer fields displayed sequentially, as a sequential presentation of information is effective in reducing individuals’ cognitive load. Hence, the modification of the one-step checkout page from a simultaneous presentation to a sequential presentation of information may lead to a reduction in the user’s cognitive load, enabling them to navigate the task more smoothly.
.png)
