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:
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:
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:
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:
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:
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:
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:
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:
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.
