UX in E-Commerce: Web vs Mobile (Pt.2)

In part one of this post, we reviewed the differences between a desktop web and mobile design throughout an e-commerce website. We reviewed some of the important pages including: home, category, product and cart page.

In this post, we continue the journey through another four key screens.

Search (5/8)

Search functionality is one of the most crucial features that should not be only included in the e-commerce website but also implemented in the most efficient way. The usability of this functionality doesn’t only lie in the interface of the search bar but also in how smart the search is.

Web view:

00-search-web1

01-search-web2

Amazon search got it right. Just from generic keyword like “Laptop”, it offers suggestions related to everything a laptop needs as well as the ability to search in a specific category.

Mobile view:

02-search-mob

Emphasizing on how important the search is, amazon mobile design uses the entire width of the screen to display the search bar as well as being thump friendly. The suggestion list height doesn’t extend more than the space above the keyboard.

Search Result (6/8)

Next step, after having a smart search, is having a usable search result page. That includes a clean display of products, sorting, filtering and different display options if needed.

Web view:

03-searchresult-web3

At first glance, Amazon design may seem noisy but you can easily comprehend how the page is designed in blocks and each block serves a specific functionality.

  • Block 1: Showing number of results found, the keyword I used in the search, sorting and display options
  • Block 2: Filters
  • Block 3: Search result. This is the most important block and that’s why it takes the most space.
  • Block 4 & 5: show ads, promotions or sponsored content.

Mobile view:

04-searchresult-mob1

05-searchresult-mob2

Amazon mobile design is very clean and organized. It starts out with a message that includes the keyword used in the search, followed by the search result count, link to filters and the result products. Sorting and filtering options are included in another screen due to the variety of options.

Checkout (7/8)

Implementing a usable checkout process decreases abandonment rate and guarantees a solid conversion. However, the process is lengthy and requires too many information, especially from first-time users. We will not go into details of the process but rather look at it from a bird’s-eye view and how it looks like on web versus mobile design.

Web view:06-checkout-web107-checkout-web2

A common practice in design a checkout is to include the following:

  • Remove all elements that aren’t related to the checkout process like website header, that includes search bar, categories and any extra links.
  • Include a progress bar indicating the number of steps, current and completed steps.
  • Emphasize on the security of the process.
  • Provide support for the customers, in the form of live chat or help line.
  • Call to action buttons are the most prominent visual element.

In B&H checkout design, the desktop size can afford to include all the following practices in the same screen as well as order summary always present of the right side of the page.

Mobile view:

08-checkout-mob2

09-checkout-mob1

B&H mobile checkout disregards almost all the practices followed in the desktop design due to the limited space. However, it depends on how the process should flow smoothly where users can only focus on one task at a time and that is what they can currently see from the long one-page checkout.

Post-checkout & Account (8/8)

As important as the checkout process it, the follow up process is also crucial. If the follow up is frustrating, so will be the customer and will avoid any future transactions on the website. This includes creating a new account on the website as well as the page displayed after a successful checkout; the thank you page.

Web view:

10-account-web1

11-account-web2

B&H promotes their users to identify themselves before checking out. It provides different options including guest checkout and social media login. Following a successful checkout, user receives an invoice with their order details as well as the ability to track that order. It also promotes guest checkout to create an account by only providing a password.

Mobile view:

12-account-mob1

B&H mobile design is almost identical to the web design but accommodates to the small screen. This is due to the importance of every elements used in the web design.

Lessons Learned

The most obvious obstacle when designing for a mobile screen is the limited space available. This limitation drives designers to either compromise some content and accommodate to it. This can only be achieved by defining a hierarchy of importance to the content and which should be the most accessible in order to have a usable mobile experience. This indicates that each platform has its design needs and capacity which can be limiting but that doesn’t mean usability should be compromised.

UX in E-Commerce: Web vs. Mobile

There is no argument about how e-commerce has integrated itself in our lives in the recent couple of years. Online shoppers now have access to e-commerce websites through different platforms; laptops, tablets and smartphones. Although it’s the same shop, where the user goes through the same journey, the experience quite varies between bigger and smaller devices and how your users interact with them.

In this post, we are going to explore this user journey and the differences in interactions between a 14-inch laptop and a 4-inch smartphone. This inspection will only include comparison between the view of the website from a desktop view and mobile browser view (responsive version).

The journey

The e-commerce website visitors aren’t all the same when it comes to familiarity level with the shop. Some are frequent visitors, beginners or first-timers. Thus, every user will take a different path. For example: a frequent user will probably go through a much faster checkout experience, since their info is already saved in the system, rather than a new user that still needs to provide their payment and shipping info.

However, we will go through some of the main screens that most of the users will probably go through which are

  • Home page
  • Category page
  • Product page
  • Cart
  • Search
  • Search result
  • Checkout
  • Post-checkout & Account

Home page (1/8)

Similar to shop window display, you showcase products, discounts and offers in this page. Users should be able to tell if they can buy what they want just from skimming through this page, otherwise they will abandon the website for another alternative.

Web view:

Web view - Source: walmart.com
Source: walmart.com

 

Walmart focuses on listing ads, offers and campaigns in the home page. This makes the page look more lively and active which is a great attention grabber for the shopper.

Mobile view:

01-home-mob101-home-mob1

Source: walmart.com
Source: walmart.com

Similar to the web, ads and offers can be found but in a much more compact design using the slider to make it more usable for the users holding their phone and using their fingers to interact with the screen. A common practice is to list all the shop categories in the home page of the mobile view for accessibility and exposure to display as much information as possible in a such a limited space.

Category page (2/8)

This page includes listing of all the products related to a specific group. Users would make use of this page if they are hesitant about which product to buy and/or would like to view multiple options or if they just came to browse without a specific destination or purpose in mind.

Web view:

Source: nordstrom.com

Source: nordstrom.com
Source: nordstrom.com

Nordstrom helps their users decide on the product they want much faster by guiding them, using big and flashy imagery indicating subcategories. Once the user clicks on a certain subcategory, they are redirected to a clean display of products side by side, as well as all the relative information they need to view.

Mobile view:

05-category-mob1

Source: nordstrom.com
Source: nordstrom.com

Due to limited visual space, the subcategory filter is replaced with a button that opens a list of all the subcategories, followed by products display identical to the web view.

Product Page (3/8)

Web view:

Source: gilt.com

Source: gilt.com
Source: gilt.com

Product images are the closer the shopper will get to the actual product. Using clean and high-quality images enhances the experiences tremendously. That’s why Gilt web design capitalizes on product images without excluding relative information like price, color options, quantity and product specifications details.

Mobile view:

09-product-mob1

Source: gilt.com
Source: gilt.com

The information included in this view is identical to the web design; however, all elements are resized, aligned and placed accordingly to provide readability and usability on mobile.

Cart (4/8)

Web view:

11-cart-web1

Source: sears.com
Source: sears.com

Source: sears.com

Sears makes use of the big screen by including a lot of details regarding the shipment and offers, as well as the product information.

Mobile view:

Source: sears.com
Source: sears.com

Unlike the web design, the limited space forced the design to include only the product information. The only consistent principle in both web and mobile views is making the “checkout” button the most prominent visual element.

Lessons Learned

There are no differences in the content present in both web version and mobile version of the websites. The only difference is how it is presented. Web users interact with a bigger space using a mouse or a touchpad, while a mobile user has access to small screen and is able to navigate using only hand gestures. That difference in interaction requires different types of design elements to ensure usability on either platforms.

The journey isn’t over yet. We will be exploring the rest of the screens in part 2. Stay tuned!

Improving The UX of E-Commerce Websites Without The Big Bucks

In the past few years, online shopping is becoming much more established with offline businesses realizing the importance of having to be online as well as many users especially millennials turn to online shopping as their primary destination with the help of smart phones. E-Commerce conversion rates have been increasing across different devices; desktops and mobiles (smartinsight). Even though more and more people are shopping online successfully, the user experience of most websites is not up to par.

Baymard.com: The dots are color-coded in accordance with their usability performance, with red dots indicating “poor” usability, yellow representing “acceptable,” and green “good.” The benchmark average is denoted with a back circle.
Baymard.com: The dots are color-coded in accordance with their usability performance, with red dots indicating “poor” usability, yellow representing “acceptable,” and green “good.” The benchmark average is denoted with a back circle.

User experience (UX) is “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service” (ISO 9241-210). Your users should be able to fully understand what you offer and how to get it. On an E-Commerce website, it might seem obvious that it sells laptops but they can’t find the right or enough information they need to actually buy the laptop they wanted.

Better understanding of your audience leads to less frustrating design which in turn leads to higher conversion rate. Therefore, performing a user experience evaluation, every now and then, is essential.

What is UX Evaluation?

User experience evaluation denotes using different types of methods and tools to assess how well the users can learn and interact with the product or website. In case of an E-Commerce website, it is when the user is able to navigate the shop, find the product they desired and successfully checkout.

There are many different methods that can be used to perform a UX evaluation that yields quantitative and qualitative results. A lab user testing is an example of a quantitative method that involves recruiting real users, assigning them to perform tasks on the website and observing their behaviour to document the results in the form of metrics.
Examples of qualitative methods are cognitive walk-through and heuristic evaluation which relies on thorough inspection of the website by an expert and assessing how well the users perceive the design.

Cognitive Walk-through

A cognitive walk-through is an approach used to evaluate the usability of the website from the perspective of first-time user with a specific intention.

The evaluation starts with the assessor defining a user task(s) then inspecting how the user would execute these tasks on the website. For example, a college student wants to buy a new laptop to use for studying. One of the scenarios to perform that task on an E-Commerce website would be as follows.

  1. User visits E-Commerce website through direct URL then scans homepage for “laptop” or “electronics”. He finds a “laptops” link in the header and clicks it.
  2. User visits the category page with many laptops on display and option to filter and sort products.
  3. User visits different product pages then clicks “add to cart” on the laptop he liked.
  4. User is content with his choice and wants to checkout. He visits the cart and clicks on the “checkout” button.
  5. User goes through the checkout process.

Throughout that scenario, the assessor asks the following four questions per each new step:

  • Will the user try and achieve the right outcome? The user was able to find the laptop he wants and successfully select it and proceed to checkout.
  • Will the user notice that the correct action is available to them? The “add to cart” button or the “checkout” button was easy to find.
  • Will the user associate the correct action with the outcome they expect to achieve? Whenever the user clicks on a link or button, they were redirected to the right page.
  • If the correct action is performed; will the user see that progress is being made towards their intended outcome? The user able to keep up with the checkout process.

By answering these questions through every step of the scenario, the assessor can point out the flaws in the experience design. One of the benefits of this method is that it is a considerably cost efficient compared to other methods.

Heuristic Evaluation

Another means of user experience evaluation is conduction of heuristic evaluation. A set of heuristics is chosen and the website is reviewed to assess how the design is violating these heuristics. One of the frequently used sets of heuristics used is Jakob Nielsen and Rolf Molich’s 10 Usability Heuristics for User Interface Design.

Nielsen defined each of the following heuristics in detail so we will be discussing them from an E-Commerce point of view.

  1. Visibility of system status

Users should always be able to tell what is going on at any point in time. They can identify what page they are viewing. If the website is loading, it should say so.

Pages in amazon have clear title indicating what you should be expecting.
Pages in amazon have clear title indicating what you should be expecting.
  1. Match between system and the real world

The most iconic application of this heuristic is using the cart icon on the “Add to Cart” buttons. Users are already familiar with their real-life surroundings so they relate faster to your interface if you use the same elements.

2-1 2-2

Cart icon, cart icon everywhere
Cart icon, cart icon everywhere
  1. User control and freedom

People don’t like to feel stuck or helpless. User should be able to undo or redo any significant action on the website.

Walmart notifies me of deleting an item from the cart and provides me with a clear “undo delete” action.
Walmart notifies me of deleting an item from the cart and provides me with a clear “undo delete” action.
  1. Consistency and standards

Consistency creates a sense of comfort where the user is confident about the identity of every element in the design. An example of that can be represented in the fact that all buttons should look similar and no other element should look like a button. Consistency isn’t only about in-website consistency but also in using design elements that are familiar within your industry.

4-2

Both Walmart and Amazon are using the common terminology “Department” used even in physical stores.
Both Walmart and Amazon are using the common terminology “Department” used even in physical stores.
  1. Error prevention

The design should keeping error-prone actions to a minimum. If you are asking the user to enter their credit card number, the field should be designed to accept only 14 numbers.

Thanks Walmart for the heads up. No time wasted when I try to create an account and then you tell me that password isn’t valid.
Thanks Walmart for the heads up. No time wasted when I try to create an account and then you tell me that password isn’t valid.
  1. Recognition rather than recall

The human brain is limited to process few items at a time but there are too many information that you need to convey. That’s why recognizing something is easier than exerting the mental effort to try and understand it.

Walmart grocery shopping cart includes product images with quantity always displayed right next to the products which makes it easier to review what I added rather than remembering it.
Walmart grocery shopping cart includes product images with quantity always displayed right next to the products which makes it easier to review what I added rather than remembering it.
  1. Flexibility and efficiency of use

The efficiency of an E-Commerce website is mostly about how easily the users can find the products they want. Having a sensible and familiar navigation and categorization makes the experience much smoother. You’d expect to find mobile accessories within the same category as mobile phones. Then, there is also the efficiency of the checkout process which is how the design incorporates the other heuristics.

Souq.com checkout progress bar indicates how easy the checkout can be and how much I have progressed.
Souq.com checkout progress bar indicates how easy the checkout can be and how much I have progressed.
  1. Aesthetic and minimalist design

Less clutter makes your products stand out which helps the user focus better on what is really important. In addition to having your products photographed in a very good and clear way, minimalistic display doesn’t overwhelm the user to the point of leaving the website.

8-1

Ebay came a long way with their redesign even if it’s not the most visually rich design but took into consideration how crucial aesthetic is.
Ebay came a long way with their redesign even if it’s not the most visually rich design but took into consideration how crucial aesthetic is.
  1. Help users recognize, diagnose and recover from errors

Users don’t want to deal with problems so if something goes wrong that they can’t handle, they’d probably give up on your website. Always offer the reason for the problem and how to solve it in a clear and understandable language.

Clear instructions from Amazon to why I can’t add the product to the cart and how to fix this problem.
Clear instructions from Amazon to why I can’t add the product to the cart and how to fix this problem.
  1. Help and documentation

Your users will always need help, not because of the lack of good design but maybe because of unforeseen accidents or they might have a concern that is not addressed. Similar to a real-life store, where you can ask a shop assistant for help, having an online and available customer support boosts the efficiency of your platform experience.

10-1

Souq.com offers customer support phone number. On the other hand Walmart offers a help page with FAQ.
Souq.com offers customer support phone number. On the other hand Walmart offers a help page with FAQ.

Once the assessor evaluates the violations to these heuristics, he assigns a severity rating to it. The higher the severity is, the more the violation affects the experience negatively. This helps to organise usability problems and decide on the priorities of fixing them.

The Takeaway
As your main source of conversion is your users, the evaluation should be based on their behaviour and perception. While some methods are costly more than others, there are methods that are efficient with less effort. Performing a user experience evaluation before, during and after designing your E-Commerce website surely brings out potential usability problems to light so that you can treat them head-on eliminating the risk of losing customers and consequently money and definitely contributes to better conversion and an increase in sales.