Planning and Designing Home Screen of Android Applications. UX Designer

What is the first thing anyone does grabbing their smartphone or tablet? Unlock screen, tap on some application and Voila! You find the application home screen. But do you really see it? Or is it fully cluttered with options that you mostly never use? The normal time to carry out a task on phone gets increased by few seconds or minutes as you are lost, not sure where to start and what to do. What you do next, keep an app for few more days until you find alternative (not in hurry), uninstall it right away and start looking for other alternative (urgency) or give it one more chance in hope that your goal will be achieved.  According to report published by Techcrunch 79% people report that they would try once or twice if failed to work first time on mobile app. Well it’s good news and bad as well, good because there are users who can give second or third chance to your app but no more.  Users have very low tolerance for cluttered, buggy applications, those which do not deliver any required relevant information. If your app’s home screen is not user centric and properly planned then it doesn’t matter how much quality content your applicationconsists and how clean and attractive design it would resemble. This screen is most visited by users so it deserves extra attention and you must have user data in hand to design this. Designing home screen without user data is like searching online for something without Google (or any particular search engine) which is never going to happen and would result in disappointment, wastage of resources. The target here should be to help user to attain his goals as fast as possible, making application intuitive and delivering great UX (User Experience).

I’ve listed few widely used patterns for home screen. These patterns are currently being implemented in Android apps.

Patterns:

1. Hub and Spoke

Typically it shows top level view of application comprises of bunch of links, following them leads to the inner detailing of the application (category level or detail view). This is the pattern used by lot of banking and traveling apps (Eg: Trip advisor, ICICI Bank). Using icons, grid or list view we can achieve top level view of information architecture. Positive point about this pattern is that it user friendly, instinctive and makes navigation faster as it doesn’t retrieve information from application server every time user launches the application.

Hub and Spoke: Home screen of Goibibo and ICICI Bank Android app with a screen showing logical grouping.

Keep in mind: This pattern shows users the way to the cinema hall but doesn’t show the actual movie. What I mean here is it won’t let you perform actual action but tell you what app has for you to perform in it, which is not always good from a UX perspective. If you as a bank know more than 80 percent of your users only check their bank balance using the mobile application and doesn’t utilize any other basic facilities then it is better to show that information on home screen instead of making the user wait to tap twice or thrice on navigation components to see that. Research plays a vital role in this.

Tip: Keep most frequently used options at the top and try to group list in logical way if possible to have less confusion and reduce cognitive pressure from user.

2. Dashboard

There are times when you want to show real time statistics to user and have ample amount of data about user and what they want. In that case it is preferable to give detailed information on home page instead of providing navigation links which leads to actual information (The part where the movie is shown and not the way to the cinema hall).Google analytics is one of the best app which lie in this category. When user opens the app, he sees current status of his website or application in form of graphs, pie charts and tables (Pageviews, sessions, visits etc.).  Trading apps are most suitable for this pattern. People who do transactions in the stock market would never waste time on clicking on multiple links to see real time rate of their stocks instead they want all concerned real time data on dashboard.

Dashboard: Home screen of Google analytics and CNN Money Android App.

Keep in mind: Sometimes less is more approach is good, overstuffing display with too much information may irritate the user. Keep in mind that there will not be many users who will optimize their home screens, keep limited and most relevant information on home screen. You can test your application with users to know what most important thing is for them in context of your application.

Tip: Let users manage view of dashboard. Stocks of steel industry will not make any sense for person interested in stocks of IT firms. Point is let people decide, on what they want to keep an eye.

3. News Feeds

News Feeds: Home screen of Gmail and Business Insider app with screen showing grid view.

This pattern is widely famous in social media, mailing, news and live score applications. Most of the time user is concerned about current affairs. Gmail, twitter, facebook, Google now, Business Insider are examples of this pattern. List view or grid view is used to accomplish this in most of the app. News applications usually use image and publishing date.

Tip: It is important to observe the behavior, likes-dislikes of user using some tools (Analytics). It helps developers to optimize updates for every user based on their search history (likes and dislikes). Example: User interested in sports may not love to see politics or other news on home screen every time; we have to deliver his desired content.

4. Form

Forms: Experimental pattern for Goibibo app and home screen of Paytm Android App.

This pattern is good alternative for hub and spoke mostly suitable for mobile recharge and traveling applications. It helps user to perform action quickly instead navigating him to detail view page. Instead of showing top level view as hubs using lists or icons it uses tabs. One option is active by default (it is a big deal to decide which option is selected by default, one which makes more sales is the best option most of the time). “Paytm” is perfect example of this pattern.

Tip: Use this pattern only when there are 3 or 4 top level views in your app. If views are more it’s better to go for hub and spoke as adding more than 3 or 4 option may result in clutter.

5. E-commerce (Search+Browse+History+Marketing+others)

E-Commerce: Home screen of Amazon, Flipkart and Ebay Android App.

Before proceeding further I want to clarify that just because name of this pattern is E-commerce doesn’t mean that it can be implemented in E-Comm apps only. I’ve decomposed it in further sub-patterns which can be used in any other applications based on product objectives and user needs. Reason I combined all of them is because they make more sense together as these patterns have something in common.

Going further, from home screen of any applications there are four ways to reach the detailed view (Actual content: product page in context of E-Commerce app):

• Search: Search helps user to reduce cognitive load of browsing through categories and helps them to accomplish their goal sooner than browsing categories as user directly jump on main product page. Refresh your experience, when last time you visited any E-Commerce site and ordered something, how did you reach at the final product? By searching or browsing. Now think if search option wasn’t available there how would you reach at the final stage. Search is typically used keeping in mind that there are some users those have clear goal in their minds and will directly search for required content.
• Browse (Using categories >> Subcategories >> so on): Unlike search browse, this is made for users those don’t have any goal and if they have it is ambiguous (I want nexus 5, I want a smart phone). User knows that he needs a smart phone but doesn’t know which one, so high chances are that user will go through browsing options and will choose smart phone category under electronics and traverse all relevant phones one by one before checking their specification unlike the user who want nexus 5 and will directly search for query. It can be implemented using Tabs, spinner or navigation drawer. “EBay” has implemented browse in its own way by providing a card on home screen which leads to the list view of categories.
• History (What user searched last time, on which page he spent more time etc): It is a good practice to remind user what they searched last time they visited our site to set a new environment for browsing and inspire them for new session on our application. By showing the content which user visited last time or visits very frequently helps user to make his choices clear and narrow down the scope of search for product. Recently I’ve observed on few sites products shown below ‘frequently seen’ label were out of stock. If it is happening then there is some bug in your algorithm. It can directly impact your matrix and more worse it can help you competitor to gain one valuable customer as there are high chances that user will check the availability of same product on competitor’s site. You inspired user, waste your efforts and real estate (space on screen) to advertise product but fruit is taken by someone else. Music applications also work based on user search history. It is good practice to recommend music based on singer, album or genre searched by user.

• Marketing: As name suggests it contains the content which is suggested by marketing teams. It can be represented in any form: flat picture or carousal under some catchy label to accomplish objectives of organization (Sale, offer zone, Flat 50% off, New Year shopping). Motive can be anything: selling product which has high margin, frequently searched by users, clearing stock before new launch or anything else.

Moral of the story:

Innovation is in heart of Designers. I listed above patterns because they are widely used in android apps but don’t resist yourself from making something new and innovative and keep in mind that you are not creating applications for yourself. Everybody has its own mental model and way to solve problems. Your users may have different mental model than you and may not be an expert as you are in problem solving so before doing something new multiple check it with your users data. Ask yourself whether your user’s Persona will be able to interact with your innovative pattern.

Sources : http://www.amanrathi.com/planning-and-designing-home-screen-of-android-applications/