Usability Engineering in Saudi Arabia: E-commerce Website Souq.com

In the first of our Usability Engineering series, we ran some quick usability tests on e-services available through the Saudi Ministry of Interior’s website. The aim was to show how even the simplest usability tests can bring to light significant usability flaws in your design.

Moving away from government e-services, for our second article in this series we’re looking at usability testing on e-commerce websites.

E-commerce websites (and apps) are great candidates for usability evaluation as even the smallest design changes based on insights collected from usability testing can result in a significant increase in sales.

The best example of this is the $300 million button case study by Jared Spool and UIE where a single design change to the checkout journey based on insights from usability testing resulted in an increase in purchases of 45%.

Test Subject: SOUQ.COM

For this set of usability test sessions, we asked users to browse, choose and purchase a laptop on the Saudi Souq (saudi.souq.com) website.

Souq.com is an English and Arabic language e-commerce platform which sells a range of products like consumer electronics, beauty products and household goods. It is the largest e-commerce retailer in the Middle East. Often described as the Amazon of the Arab world, it was actually recently acquired by Amazon.

A total of 3 users took part in the tests, each of whom were asked to use the site to purchase a laptop of their choice from the website.

Ideal User Journey For Task Success

The following is a list of the steps the user would ideally take to navigate to task success in the quickest, most efficient way.

Task: Purchasing a laptop

• Step 1: Hover over the “Electronics” label on the main navigational menu on the Homepage
• Step 2: Hover over “Computers & Laptops” in the “Electronics” dropdown
• Step 3: Click “Laptops”
• Step 4: Navigate to the filter widget and filter by brand, type, screen size etc.
• Step 5: Click on the laptop of your choice
• Step 6: Click on “ADD TO CART”
• Step 7: Click on “PROCEED TO CHECKOUT”
• Step 8: Select the available shipping address or add a new one
• Step 9: Select a shipping service
• Step 10: Select a payment method
• Step 11: Enter your payment details
• Step 12: Click on “PLACE ORDER”

Issues and Recommendations

The issues identified below are been listed in the order they took place as users went along their journey

1. Users Were Frustrated By The Default Viewing Mode on Product Listing Page

The product listing page had two viewing modes: a default ‘List View’ with detailed product descriptions and small images, and a ‘Grid View’ with larger product images without a detailed description

Although the user wanted to compare products using their pictures, he did not notice the option for changing the viewing mode to the grid view.

Another user discovered the grid view after browsing products for a long time and said he preferred this view because he could go through all the products faster.

Proposal:

Customers hardly read everything on the page, especially when there is a lot of content. Studies report that about eighty percent of users scan any new page and only sixteen percent read each word.  We found the same pattern in our testing sessions too. Customers in the list view did not initially pay attention to the lengthy product description. Their gaze alternated from the product price to the product image. Only if they were interested in the product did their gaze shift to the product description.

However, since the users we tested with weren’t actually planning on buying the laptop, their behaviour isn’t 100% representative. A user who’s actually in a ‘buying state’ may be more interested in product details (the text) than someone who’s just ‘browsing’.

So although the users in this research preferred grid view, further research would be required for a conclusive solution. Many case studies tout one layout over the other, but they aren’t necessarily a definitive source of evidence that there is no one right answer.

List view provides users a format that follows their natural reading patterns like the F-shaped pattern, while grid view is a little more interruptive, making it best suited for visual content. It all depends on the type of content on your website and the audience you’re catering to.

In the end, the decision to use list view versus grid view should be aligned with how your users behave. In this study, since participants preferred the easily scannable grid view, making it the default view would be a potential solution. However, more rigorous usability engineering research is required to ensure the fidelity of this solution.

2. No Filter by Year

Users wanted to filter products based on the year they were released but the Filter widget did not offer any such option. The only way they could determine the year was through the product description.

Proposal:

Add an option for product release year in the Filter widget. People will do the least amount of work possible to get a task done. To minimize workload, users must always be provided with good ways to reduce available options as efficiently as possible. The system should do as many things as possible, so that users can concentrate on performing tasks that actually require human processing and input.

3. Items In Saudi Website Cannot Be Shipped To Riyadh

The homepage of the website enables users to select their shipping location. Although the users selected “Ship to Saudi”, many items on the product listing page couldn’t be shipped to Riyadh. This frustrated the user and he considered leaving the website.

Shipping detail issues are common nuisances in Saudi ecommerce websites. In our more formal usability research, we found that e-commerce websites often do not provide sufficient shipping information until the last stages of the checkout process. When users realize that the item doesn’t ship to their location after completing the whole checkout process, they get frustrated and consider leaving the website completely. In fact, 88% of online consumers are less likely to ever return to a site after having a single bad experience.

Proposal:

One possible solution to this issue is to have a single, consistent website instead of separate ones for each shipping locations. Users should be allowed to filter the products based on the country it ships to on the product listing page. If the user does end up clicking on a product that does not ship to their location, a clear message should be provided in the product description well in advance.

4. ‘Check Where It Ships’ Dropdown Menu Listed ‘Riyadh’ For Items That Don’t Ship to Riyadh.

When the user encounters an item which does not ship to Riyadh, the website provides a link for them to ‘Check Where It Ships’. On clicking it, a dropdown with the label “Show estimated delivery time to” appears. The dropdown has an option for Riyadh despite the fact that the description states that the product doesn’t deliver to Riyadh. The user selected ‘Riyadh’ assuming it would show him estimated delivery date for Riyadh, but the dropdown disappeared without any feedback.

Proposal:

To avoid confusing the users and increasing their cognitive load, you should simplify dropdown menus by removing all unnecessary inputs. Do not include the user’s current location in the ‘Check Where It Ships” dropdown menu and remove the estimated time label from the dropdown menu. Show the estimated time only if the user makes a selection.

5. Checkout Process Issues

One of the users encountered several issues during the checkout process. The issues are listed below as they took place in order of the user journey.

• Cluttered Notification Message on The Shopping Cart Page

After he selected a laptop, the user logged into his account and was directed to his cart which contained items he had previously added. A cluttered notification message appeared on the top of the page with a list of changes in prices and availability for each item. The message also stated that unavailable items had been moved to the “Save for Later” list. The user only glanced  at the message before closing it, assuming that it was something unimportant.

Proposal

Users who scan generally read headings, but do not read full text prose– this results in users missing critical information when a page contains dense text. The list in the notification message should be organized in a way that makes it easier for users to scan and understand. Clutter leads to a degradation of performance when trying to find certain information.

The use of meaningful labels, effective background colors, borders, and white space can reduce visual clutter.

• Untitled List in Shipping Page

In the shipping page, there was a list of items on the bottom of the page without a title and no indication about what the list was for.

Proposal

Clearly indicate what the list is for with a descriptive heading. Providing a descriptive heading allows users to readily understand the reason for having a list of items, and how the items relate to each other. The heading helps to inform users how items are categorized, or any prevailing principle or theme. Users are able to use lists better when they include headings.

• Dead End in Shipping Page

In the shipping page, there was no “Next” or “Continue” button for the user to proceed. The user assumed it was because there was a problem with the address so he tried to change his address but it didn’t work. Then he assumed that the dead end was because there were some unavailable items in his cart. So he began deleting items one by one. 

Proposal:

Make sure all your pages within the checkout process have “Continue” and “Back” buttons. Don’t lead your users to dead ends. It is essential to provide the user with good navigational options. Dead ends create confusion and lead to additional and unnecessary clicks.

• Browser Refreshes Each Time User Deletes An Item

Every time he tried to delete an item from the shipping page, the page refreshed and took a long time to load. He wondered why there was no “Delete All’ button. To quicken the process, he opened his cart in a separate tab and started deleting items from there as well.

Proposal:

Don’t refresh the page every time the user deletes something. Instead let the user make all the selections and then click a ‘Filter’ or ‘Done’ button so the page will only be refreshed after the user has finished making all selections.

As a rule of thumb, if the result of the action will bring the user back to the same page, then eliminating refresh is a good idea. For example, instead of re-displaying the same account page after the user entered an incorrect password, giving feedback on the password immediately after entry can make for a nicer experience.

• User Was Not Sure Which Page He Was On

When he went back to the Cart page after deleting items, he was confused about which page he was on. There were lists for ‘Save For Later’ and ‘Cart’ and he said he wasn’t sure which page it was. The laptop he deleted from the cart earlier was in the ‘Save for Later’ list and that confused him even further.

Proposal:

Provide feedback to let users know where they are in the Web site. Feedback provides users with the information they need to understand where they are within the Web site, and for proceeding to the next activity.

Examples of feedback include providing path and hierarchy information (i.e., ’breadcrumbs’), matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site.

Additionally, each web page should have a descriptive heading. Spending time during the design process to ensure that the site contains many carefully written headings and subheadings will allow users to rapidly understand which page they are on.

 

Points of Note

• Users preferred grid view rather than list view. Most users do not read a lot of text and prefer choosing products based on images.

• Most users faced difficulties due to the shipping details – items that could not be shipped to Saudi were included in the product listing which frustrated users.

• The checkout process on the Arabic UI had several issues with structure, organization, labeling and feedback.

• More rigorous usability engineering is required to ensure the fidelity of the solutions offered in this article.

 

At UXBERT Labs we specialise in using scientific UCD processes to design world-class innovative and beautiful experiences. Hosting Saudi Arabia’s first commercial and state-of-the-art Usability Lab, and a team of UX Researchers, Designers and Developers on-site in our Riyadh office, we deliver custom designed and built software that will help your businesses succeed, whatever the industry. If you have a project you’d like to work with us on, get in touch at hello@uxbert.com