The Ultimate Guide to Mobile App Design Chapter 2: Product Search & Form Entry

Continued from Chapter 1: Introduction to Mobile App Design for Ecommerce >>

Product Search

One of the most common issues mobile users have with ecommerce apps is the ability to find the product they need. Providing a quick and efficient product search helps save people’s time and efforts in looking for the right item in your app, which is crucial to engage them further in their buying journey. 

1. Show recent searches

By making recent search terms readily available, you can offer your customers a quick option to perform a repeated search with one tap. Presenting previous searches saves the users’ time and effort in typing out the same keywords again, while adding a layer of personalization to their shopping experience. The enhanced search function makes it easy for users to conduct repeated purchases and encourages them to return to your app more often. If you have this function enabled in your app, make sure your users are also able to clear their saved searches.

2. Allow users to sort and filter search results

Most users would abandon your app if they can not find what they need quickly. A long list of search results require extensive scrolling on a small screen can get users overwhelmed. You can avoid this by giving them the ability to refine search results with useful product sorting and filtering options. Customers will be able to look at your wide range of product offerings and specify it to the few ones that match their needs and preferences.

3. Prominently display search option

While most users adopt search function as the primary way to find products, the ability to spot search option is critical to craft the entire search experience in the app. For ecommerce apps, it’s beneficial to align the prominence in placement of search option with user expectation. Making search option easy for users to locate is the key to guide them through the purchasing path.

4. Show relevant search results 

Users typically prefer using product search to browsing, especially on smaller screens. Effective and useful search is essential for users to find the product they need. Providing a high quality search indexing saves users’ time in completing the search process and drive them towards conversion.

Form Entry

As mobile shoppers have particularly short attention span, complex and time-consuming form entry can cause them to abandon the checkout flow. To avoid this, make sure the form entry process is as easy and painless as possible. 

5. Communicate form errors in real time

Form errors are inevitable as they are a natural part of user data input. The key question then is how to make it easy for users to resolve those form errors. Users can get frustrated when going through the entire form entry process only to find out upon submission that they have made an error. This can be eliminated with a real-time data validation, as users filling out the form. Once information is entered, automatically validate and inform users if there is any error. With properly implemented inline validation, the form allows users to locate errors and fix them quickly.

6. Allow users to scan card and auto-fill card information

Entering credit card number for online payments is not the most enjoyable experience, particularly on a small phone keyboard. To minimize errors from keying the digits manually and save users’ time and effort, make use of device capabilities such as the camera to collect credit card details. With an option to scan the credit card with their mobile devices, users can have card information automatically filled in the form and make online payments more easily. 

7. Allow users to auto-fill address using location

Filling out long checkout form on mobile devices can be slow and frustrating, which potentially leads to user drop-off and cart abandonment. To make things easier for users, device location can be utilized to speed up the process by automatically filling in the address fields. With device location enabled in app, users allow the app to detect their current location and complete the checkout form much faster. Optimizing the checkout form with address autofill help reduce abandonment rate and improve.

8. Match the keyboard with required text inputs

Make sure that form entry is user-friendly by matching the keyboard with required text inputs. For form fields that require numeric entry like phone, postal code,.. users should automatically be provided with a number keyboard, instead of a conventional keyboard. Forms that are able to interpret multiple input formats and adapt to how users enter the information help them proceed through checkout faster with less effort.

9. Mark both required and optional form fields

For a long checkout form, failing to explicitly mark both required and optional fields can lead to unnecessary validation errors, user confusion over which fields they must complete, a slower checkout process, and even cart abandonment. When a field is unmarked some users will have to guess to figure out whether an unmarked field is required or optional. This is especially problematic on mobile, where users have little page overview.

Continue to Chapter 3: Product Catalog & Customer Account >>