If you’re an Android/hybrid app developer, you’ll probably be using Material UI components in your app. However, for every design pattern, there are a few basic UX concepts. Coupled with the UX concepts, the usability of the app and the user’s experience will bloom and flourish. This article will be showcasing a handful of best UX practices for Material Design components.
What is “Material”?
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Learn more about Material at Material.io.
Derivation of best practices
All of the best practices showcased here are derived by assuming that the user is a beginner with the smartphone. The core ideology is not to make the user think even for a moment.
Components to focus
There are 25+ components under Material Design. We’ll be focusing our best practices with respect to the below components:
- RecyclerView
- Tab Layouts
Best practices for RecyclerView
RecyclerView is a flexible view for providing a limited window into a large data set. RecyclerView supports representing homogenous and heterogenous data in two ways
- Linear style (vertical and horizontal)
- Grid style (fixed and staggered)
Peek-A-Boo problem
A Peek-a-boo problem will mostly occur for listing things horizontally. When we’re representing data in the form of list, a typical question to the user is: how will the user know that the content can be scrolled (right to left)? Or how will you tell the user that there is more content down the line? For example, please consider the following image. All the list items are arranged within the viewport, and for a moment, the user will think about what to do next.
So how do we solve this problem? The solution is very simple. We need to display a half or quarter content of the last item next to the viewport. In short, the next item by the end of the viewport should be half visible.
This visual representation will automatically trigger the brain to notice the half visible content and it will automatically drag the list to reveal it.
In order to maintain responsiveness in all devices and tackle this problem, we need to consider a few calculations. We need to calculate the viewport width and dynamically set the width of each ViewHolder. This is just a one way of solving this problem. The good news is that we have an alternate approach as well.
Alternate approach tothe “Peek-A-Boo” problem
In our alternate approach, we need to switch our RecyclerView from Linear style to Grid style.
The solution is simple. Let’s make the user scroll only in one direction. If the user is scrolling vertically, let him do that alone, and vice versa. This might sound brutal, but trust me; this will benefit the user a lot. Consider the image below. This type of visual representation will allow him to scroll only vertically.
When you switch things to GridView, the visibility of items are clear and the user will not be thinking further. Consider the image below. Apart from switching to grid view, I’ve also tweaked the last grid item to notify the user that they still have more items to see.
Data overload problem
This problem is usually seen in news feeds, image listings, and chat interfaces. When we have so much data to view and process, the user will get confused. Though each item in the list will have a timestamp saying when this post or message is created or delivered, the problem is that the user has to notice the timestampand each item when he is scrolling.
To solve this problem, almost all top-notch apps are using headers for identifying and sorting things out. Headers are indeed a beautiful solution for the data overload problem. Headers will speak to a user like “Hey user! You’re now entering my cave. Till the next guy speaks, all of the things below belong to me” — that’s good.
Let’s take Google’s Inbox app. Inbox has used headers effectively, but using just the header alone has got some problems as well. Imagine the items under a particular header are long and the user has gone away from the app. Now when he comes back, he will not be remembering the section he was in.
To solve this problem, we have sticky headers. These headers will hold the context throughout the section and the user will haveno trouble identifying the section.
TabLayout best practices
Tabs make it easy to explore and switch between different views. Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within because swipe gestures are used for navigating between tabs;they don’t pair tabs with content that also support swiping.
Nested tab problem
Even in a few best selling apps, I was able to spot the nested tabs issue. The images below will show what nesting of tabs is. Initially, by seeing the nested tabs, a majority of users get confused withthe navigation. But they get used to it in a while.
Even an old version of one of the Google apps had this issue. Later they changed their way of classifying things.The best way to solve this nested tab problem is to find an alternative way to categorize things and you can also couple TabLayout with Bottom Navigation.
Hopefully you’ve gained a few best practices for designing better apps. If you’ve liked this article please share.
About the Author
HariVigneshJayapalan is a Google Certified Android App developer, IDF Certified UI &UX Professional, street magician, fitness freak, technology enthusiast, and wanna-be entrepreneur.