Smaller screens = fewer interface features to squeeze in. So, how do you balance your product value with the limited amount of pixels?
Mobile UI design was created to cater this dilemma.
And in this post, we’d like to share some proven tips for mobile app user interface design.
Get To Know Your End Users – UI and UX Research Stage
Before you start sketching the initial app design and mapping out the functions, get to know who your user is.
There are three fundamental approaches to researching and understanding your target audience better. Our UX designers suggest using the following mix for business projects:
User Personas: Imaginary users described – their character, goals, fears and expected behavior broken down in a detailed analysis. User personas will help you to determine what exactly will drive users’ decisions within your product.
User Stories: A lengthy list of actions each type of user may want/need to perform e.g. new user, returning user etc. These are one-line descriptions of the exact tasks and processes people will want to accomplish within your app and how many interactions are required to do so. By having these in place, you’ll be able to create the most relevant mobile UI design to suit their goals.
Experience Maps: Next, you’ll need to outline all the possible conditions for a single interaction. Think of them as the ultimate blueprint of the user’s journey e.g. a user clicks login, completes account registration, syncs contacts and so on. Experience maps will help you understand all the circumstances surrounding those steps.
Additionally, don’t forget that your mobile app may need to cater to two different groups of users – expert and novice users.
- Novice users will need more time to navigate the application, discover all features and feel less certain about the purpose of each button.
- Expert users, on the contrary, tend to move faster through the app, feel familiar with the common patterns and are quick to learn new actions.
When creating your mobile application UI design, make sure it’s simple enough for novice users and efficient enough for the expert ones.
Account For Location and Motion For Creating User Flows and Content Positioning
You know your users. Now let’s get to know how they will and should navigate your product to meet their goals.
User flows can be compared to looking at directions from point A to point B. You can review all the possible routes, can estimate how much time you’ll need to get there and which turn to take. These cues help you reach your destination with efficiency.
Creating a user flow will help you to examine each aspect of the task and propose an efficient custom solution for it.
Additionally, you’ll develop a common understanding of how many screens you will need within your app and what is the purpose of each.
A user flow is a visual (sketched on paper as a simple prototype) or verbal representation of how users move between content and actions.
Here’s a quick example for a taxi booking app like Uber. For instance, you want to check the fare price for your ride:
How Much Will My Ride Cost
[check fare price]
Input Location Details
[departure address] [arrival address]
[Now] [In 10 min] [In 30 min] [Custom Value]
Calculate The Fare
[Custom Amount Output]
A short written outline will help you analyze the most important part of your mobile app user interface design – the content. This way you can get a better estimate of the required app pages/screens.
As your next step, create a simple visual prototype for each page of your flow. Mind the following two factors here – UI location and Motion.
Most users (49%) hold their phones in such way that the majority of operations are done by the fat finger.
Hence, right-handed users can easily reach the bottom right region of the screen and left-handed users the bottom left. This is the area where you should place the key interactive and navigational elements.
Additionally, don’t forget that our thumbs also have a specific flow direction. For instance, for a right-handed person, it’s much easier to perform circular flows with a pivot point at the bottom right of the screen, compared to top slides for instance.
If your UI controls require certain motions (e.g. slider, drop down menu etc.) keep in mind how users are holding their phones and structure the content and flows accordingly.
Don’t Ignore The Power of Familiar Mobile Design Patterns
Apart from accounting for thumb placements and phone orientations and posture, take advantage of the existing mobile design patterns to foster higher app adoption rates.
UX and UI mobile design patterns instill familiarity and intuitiveness in your product. Customers can instantly understand how the app works, what are the features and how they can navigate it.
We’ve previously shared some of our favorite mobile pattern libraries. Go and have a look how some of the most beautiful products look like and what are the latest trends in your niche:
You can use the existing UI patterns as the layering ground for your product, and spice them up with a unique flair to stand out from the crowd.
Cut The Clutter
No popular app looks cluttered. And no cluttered app can become really popular.
- The more elements you have on one screen – the more puzzled the user feels and the less likely he will try to use your app again (37% of people abandon apps that don’t work as they have expected).
- The more elements you have – the slower your app will work (and 62% of users will abandon a frozen/crashed app for good.
Here’s how to kill the clutter during with efficient user interface design for your mobile app:
Keep The Interface Entropy Low
According to Parham Aarabi, most user-friendly apps feature an interface entropy under 3.5 bits (for iPhone 5 the max entropy for an interface is 5.5 bits), meaning that a number of touchable elements should be kept to less than 10 per view.
Use The Two-Tap Rule
As advised by Marissa Mayer, it should take no more than two taps for a user to do any action within your app or web service. The less thinking is required, the more delightful their product experience will be.
The 98% Rule
This one comes from Mayer as well. Design your product in the way that it would be used 98% of the time. Your main feature should be always prominent and accessible whenever the user is. For instance, think about the central photo sharing button on Instagram or “upload photo” button on Flickr.
Always think how you can reduce the amount of efforts required by users – that’s the key towards better user interface design for any mobile app.
Want to hire a great UI and UX design team to create your product design from scratch? We’d love to exchange some ideas! Get in touch using the contact form below!