5 Tips for Awesome Mobile Commerce Home Screen

By August 18, 2014 Ecommerce One Comment
blog_4

Home screen is the most important real estate in your mobile commerce app. You have to use it to help people find what they are looking for and also show anything special that they might be interested in.

Let’s look at some of the tips that can help you maximize the potential of your mobile commerce apps home screen.

Tip #1 Always visible search bar or search icon

Search is used by “Search dominant” buyers as a first choice or by users who cannot find the thing they are looking for.

Show the search bar on the top below the navigation bar (ios)/action bar(android) or in the tab navigation which is always visible or in the navigation/action bar itself.

If you are using search bar, it is a good idea to show the search bar on all the product related screens.

Top of the home screen below action bar

 

Zara SearchZara display search bar on all of its product related screens
Zara displays the search at the top of the home screenThe inner screens like product listing and product details also show the search at the top

 

In the navigation or action bar at the top right.

 

Target App displays the searc
Target displays the search in their slider navigation at the top. The search brings up a modal dialog just for search with a keyboard.
 Asos displays the search button in the  navigation

Asos displays the search button in the  navigation bar (ios)/action bar(android)  so that it is always one click away from the user.

Tip#2 Show the Cart button at the Right Top.

The top right of the screen in the navigation bar (ios)/action bar(android) is the most important area of application. Use this for the cart button as you would want this to be always one click away for the user.

Mango and H&M app

Tip # 3 Don’t limit the screen to the fold

Mobile users are used to scrolling screen vertically and they normally scroll till the hit the screen end. Most of the apps show their main categories on the home screen with great looking images and use 2 to 3 times the vertical screen size to show their content.

Mobile Commerce App by MobileNext shows all the categories on the home screen

Mobile Commerce App by MobileNext shows all the categories on the home screen

Tip # 4 Show Special Offers Above the fold on the home screen

Anything like “Free Shipping Today” or “30% off on all products” is the message many shoppers are looking for. Use this important above the fold part of the screen  to show such messages to the buyer.

H&M shows a slider with multiple offerings.

H&M shows a slider with multiple offerings. 

Tip # 5 Show all your main categories on the Home Screen

Use great looking images to show all your main categories on the home screen. Save space by showing text on the images rather than below them. Zara does a great job of even showing the sub categories on the home screen.

Although I would love to take this to A/B testing to see their results but it does look like a good approach.

Zara appZara Search
Zara App displays the main categories on the home screenThe app goes a bit further by displaying even the sub categories on the home screen

 

Subscribe and never miss a post!
Subscribe to the free newsletter now. (No spam, we promise)
Related Articles

Mobile Commerce – Numbers you shouldn’t miss [Infographic]
blog_9
Is your ecommerce store ready for the next holiday season?