5 Steps to an Incredible Mobile UX/UI Design

by | Jul 24, 2018

mobile UI design, mobile UX design, UX/UI

Is your user interface simple enough that a 5-year-old could understand it? The best apps are not only composed of great ideas but also are executed flawlessly. With so many different resources on how to build excellent mobile design, it can be difficult to know where to begin. Luckily, we’ve searched far and wide to find the top 5 best practices to create an incredible mobile UX (user experience) and UI (user interface) that will be both functional and delightful.

When you’re finished reviewing these tools, be sure to check out our post on the ins and outs of mobile design for more tips, including some of the best prototyping tools. Let’s dive in:

Make navigation obvious for the best UX

The best apps have navigation elements that are consistent and clearly visible. If users can’t figure out how to reach the next stage of your app, they’ll quickly become frustrated. UX Planet writes that users should be able to get from Point A to Point B at first glance.

Let’s take a look at an app that uses intuitive navigation to make moving between pages a breeze.

Lumosity app, mobile UI design, mobile UX design, UX/UI
App: Lumosity
Description: Lumosity is a brain training app made by scientists and designers that offers quick and challenging games aimed to improve memory, attention, and flexibility.
Design Standouts: I love Lumosity’s navigation bar along the bottom of the screen. The page that you’re currently on is highlighted in green, which makes it easy to know where you are at all times. As a result your next step is always clear.  and your next action step is always clear and obvious.

Reduce clutter for an optimal user interface

Clutter is never a good thing. UXPin writes that clutter is even worse on a mobile device, where you have limited space. Instead of overwhelming your user with too many items on the screen, opt for a simpler interface without confusing buttons or distracting designs. Think about the one action that you want a user to take. Optimize each page for that action, rather than giving too many options for what’s next.

Here’s an example of an app that uses just a few elements to create an elegant, simple user interface.

Lumosity app, mobile UI design, mobile UX design, UX/UI
App: Marline
Description: Marline is a an app that tracks the weather, tide, and moon cycle.
Design Standouts: Marline is proof that less truly is more: the design is the core experience of the app.

Simplify typography for readability

When choosing typography for your app, we recommend using no more than one or two font styles and keeping two key typography terms in mind, courtesy of Muzli:

Readability: Readability refers to multiple aspects of your text, including the font, font size, font type, font color, and font weight. For best readability, make the most important information stand out by building a contrast between key info and supporting text.

Personality: A font’s personality is its visual look and the style it conveys. It’s especially important when deciding how you want your brand to be presented. For example, an app focused on meditation or self-care may pick a font that is comforting and soothing, while a bank may pick one that is more serious and professional.

That being said, mobile devices can quickly feel cluttered if they are too text-heavy. Supplement simple text with eye-popping visual images and graphics that are easier for users to comprehend.

Example:

Lumosity app, mobile UI design, mobile UX design, UX/UI
App: Starbucks
Description: The Starbucks app allows users to pay for orders, view their previous orders, and earn and track rewards.
Design Standouts: I love Starbucks’ clean yet clear text that never feels cluttered. The enlarged font at the top of the screen clearly shows where you are in the ordering process, and the app balances out their text with plenty of food and drink images.

Choose an effective color scheme for an engaging UI

Choosing an effective color scheme is incredibly important when designing your mobile app. We love this article on how to pick an effective color scheme where you can channel your middle school art class and get a quick lesson on the color wheel. A University of Toronto study found that people prefer simple color combinations with only two to three colors. Keeping that in mind, here are a few of the traditional types of color schemes:

From the same article as above, here are the basic color schemes:

  • Monochromatic color schemes consist of shades that are from the same hue. There is often one color that is selected as the base color, with other similar colors used in conjunction with it.
  • Complementary color schemes are composed of colors that are across from each other on the color wheel. As they contrast, they can be used to capture a user’s attention:
  • Analogous color schemes come from colors adjacent to each other on the color wheel. With this type of scheme, make sure to think carefully about what set of colors will best capture your brand because the colors will be exaggerated. For example, this scheme is very bright and vibrant and exudes energy, while the second scheme is much more calming and peaceful.

The color scheme you choose is a critical part of your app. Adobe Color CC is a great tool to test out different color schemes and color combinations before you settle on one.

Create Mobile UX Design with Thumbs in Mind

Yes, you read that right — thumbs! In a 2017 study, Steven Hoober observed how people hold their phones and where they tap their screens so that people can design better products. In this study, he found that people prefer to view and touch the center of their screen as opposed to the bottom as was previously assumed. Hoober also found that people are scientifically more accurate at hitting targets in the center of the screen compared to those on the periphery.

So what does this mean for design? In short, the best apps will place their most important information at the center of the screen and any secondary actions around the edges.

Also keep in mind that your buttons need to be big enough to be tapped and can’t be too close or far apart from each other, lest someone accidentally hits “delete” on something they want to “send” or vice versa. To avoid this problem the smartest apps will place contradictory actions far apart from each other on the screen. UXPin states that the standard button size is 7-10mm so that they can be tapped easily and on target.

Iterate, iterate, iterate!

Your app design is crucial to your product, and that means that you should always take customer feedback into account. If a certain element or type of navigation isn’t immediately evident to your users, trust them. If you make an app with Hatch Apps, you can monitor app analytics and receive user feedback for easy iteration. Then you can make immediate changes in the editor, all of which are immediately published to your live app.

if you’re curious to learn more about building your app with us, schedule a 15 minute conversation with us. We’d love to chat. Happy designing!

Start Designing Your Custom App

Start Designing Your Custom App