What most don’t know about mobile apps design

About the topic:

Contenido

There are many things to keep in mind of mobile apps design. I’m sure these tips will help you get rid of some of that headache when creating apps.

More than ever, people are interacting with their phones at crucial times. The average US user spends 5 hours a day on mobile devices. The vast majority of that time is spent on apps and websites.

The difference between a good application and a bad application is usually the quality of your user experience (UX). Good user experience is what separates successful applications from those that have not been successful.

Today, mobile users expect a lot from an app: fast loading time, ease of use, and good interaction experience. If you want your application to succeed, you should consider the user experience not only as a minor aspect of the design but an essential component of the product strategy.

There are many things to keep in mind when designing for mobile devices. In this article, I’ve summarized a lot of practical recommendations that you can apply to your designs.

Consistency of your mobile apps design

User interfaces that are not consistent often produce confusing and frustrated users, and this can lead to even the most promising products to fail.

But what exactly is consistency in UI design? Consistency in mobile app design refers to ensuring that the elements of a user interface are uniform. They will look and behave the same way throughout the app. This helps to constantly test a user’s assumptions about user interface management, creating a sense of control, familiarity, and reliability.

To develop consistency in UI design, you must aim to be consistent with device UI guidelines and behaviors, other applications, or similar sites, and with your own design.

Mobile apps design as a PRO

Make the design consistent

Consistency is a fundamental principle of design. Consistency eliminates confusion. Maintaining a general consistent appearance across an application is essential. For the mobile app, consistency means the following:

  • Visual Consistency. Fonts, buttons, and labels must be consistent throughout the application.
  • Functional consistency. Interactive elements must work similarly in all parts of the application.
  • External Consistency. The design must be consistent across multiple products. In this way, the user can apply prior knowledge when using another product.

Here are some practical recommendations on how to make a design consistent:

From a quick glance at this app, the screens on both devices look the same. But if you look closely, you’ll notice some subtle changes, such as placing navigation elements within the header which derive from the guidelines of both platforms.
  • Follow the platform guidelines.

    Different platforms have different user interface guidelines and usability that you should observe when designing. If you’re designing the user interface of an iOS app, for example, you should familiarize yourself with and strive to adhere to the iOS human interface guidelines. If you are designing for Android, you should take a look at Material Design.

    When designing for native platforms, follow the operating system design guidelines for maximum quality. The reason to follow design guidelines is important is simple: users become familiar with the interaction patterns of each operating system, and anything that contradicts the guidelines will create friction.
  • Do not imitate UI elements from other platforms.

    As you build the app for Android or iOS, try not to transfer UI elements from other platforms. Icons, functional elements (input fields, checkboxes, switches), and fonts must have a native feel. Use native components as much as possible to make people confident in your app.
  • Keep the mobile app consistent with the website.

    This is an example of external consistency. If you have a web service and mobile app, make sure that both share similar features. This will allow users to transition frictionlessly between the mobile app and the mobile web. Inconsistency in the design (for example, a different navigation or color scheme) can cause confusion.

Use familiar screens

Known screens are screens that users see in many applications. Screens such as «Onboarding», «What’s new» and « SearchResults» have become standards for mobile applications. They do not require an additional explanation because users are already familiar with them. This allows users to use the previous experience to interact with the application, with no learning curve.

Your own design

Location, style, type options, and layout are just a few elements that must remain consistent throughout the user interface. Moving, changing, or disappearing items will not only confuse your users but will even motivate them to uninstall your app.

If you want to spice things up to avoid a boring design, do it strategically. Use inconsistencies moderately to improve your UI or increase UX.

Putting the User in Control

Keep elements interactive, familiar and predictable

Being predictable is a fundamental principle of user experience design. When things work the way users predict, they feel a stronger sense of control. Unlike the desktop, where users can use scrolling effects to understand whether something is interactive or not, on mobile devices, users can only check interactivity by tapping an item.

That’s why, with buttons and other interactive elements, it’s essential to think about how design communicates accessibility. 🚀

Make animations optional

Users suffering from motion sickness often disable animated effects in their operating system settings. When the option to reduce motion is enabled in accessibility preferences, the application should minimize or delete its own animations.

Beware of using gestures in the UI

Using gestures in interaction design can be tempting. But in most cases, it is better to avoid this temptation. When gestures are used as a primary navigation option, they can cause a terrible user experience. Why? Because gestures are hidden controls.

The biggest disadvantage of using gestures in a user interface is the learning curve. Each time you replace a visible control with a gesture, the learning curve of the app increases. This happens because gestures have less detection: they are always hidden and people need to be able to identify these options in order to use them. That’s why it’s essential to use only widely accepted gestures (the ones that users expect in the app).

Thomas Joos points out in his article“Beyond the Button: Embracing the Gesture-Based Interface«

When it comes to using gestures in a user interface, follow a few simple rules:

  • Use standard gestures.

    By “standard”, I mean the gestures that are most natural for the application in its category. People are familiar with standard gestures, so no additional effort is required to discover or remember them.
  • Offer gestures like a supplement to, not a replacement, visible navigation options.

    Gestures can function as shortcuts for navigation, but not as a complete replacement for visible menus. Therefore, they always offer a simple and visible way to navigate, even if it means some additional actions.

Local esthetics

Minimalist mobile apps design, which is popular in the Western world today, might be considered too nude for other cultures. If you want your product to succeed in emerging markets, pay attention to cultural aesthetics. Designing according to local aesthetics will make your product feel more familiar.

Region-specific

When Google adopted Google Maps for India, it considered India to be the largest two-wheel market in the world, and the millions of motorcyclists have different needs than car drivers. The two-wheeled mode was released on Maps. This mode shows travel routes that use shortcuts, not accessible for cars and trucks.

Other similar and practical applications in general

It’s no secret that your users will spend time in other apps, some that are quite similar to theirs. As a result, they will be familiar with popular patterns, rules, and interactions used in such applications. Taking this into account and modeling your design with them in mind is a great way to increase usability. When a user searches for an app, they’ve most likely accumulated past experiences, and if you take advantage of this, they won’t have to worry about them being confused by a new or unknown user interface.

This does not mean stealing someone else’s design. You don’t want to copy another app. The idea is to familiarize your users with UI patterns that are being used to improve your own design.

Working with well-known patterns on multiple platforms

At this point, everyone should know the guidelines of Google Material Design and Apples Human Interface. If you haven’t worked with guides yet, I recommend you do it.

Working with any of these guides mentioned has many benefits for the target platform, such as the following:

  • More intuitive designs and experiences for users.
  • A well-defined guide that is constantly updated.
  • They use the best practices for design, usability, and user experience.
  • Etc…
Here you can see several examples of adaptations to the target platform, for example: the navigation bar, the title position, the icons, and the go back button.

Whether you or your team, use patterns like Material Design, for example, it’s best to adapt your designs to each platform, as the design conventions differ between them. These differences in conventions can affect the user’s ability to understand the user interface or complete certain tasks.

In such cases, it is recommended to adapt to platform-specific conventions. In areas where design differences are minimally disruptive, platform adaptation is optional.

Be loyal to the brand

Using a pattern does not mean using a specific style. There are many good examples of products that have adopted a pattern while maintaining their brand identity.

Design patterns were developed for a starting point for designers and developers to improve their identity. Each case and brand is different, so user interface patterns offer a range of components that can be adopted or not.

Benefits of consistency in mobile apps design

So, if you pretend to be consistent with the UI guidelines and behaviors of devices, other apps, your own design for your app, and users?

As we all know, Material Design (left) has some different options when it comes to navigation. Chances are you’ve come across the burger menu that reveals the navigation drawer. In Apples Human Interface Guidelines the famous bottom navigation settings called The tab bar are very popular.

Key benefits include:

Minimizes cognitive load

One of the advantages of consistency in designs is decreased cognitive load, which here refers to the amount of brain energy needed to use the application. The human brain has a limited amount of processing power, and when an application provides too much information at once, it could overwhelm the user and cause them to abandon the task.

Increased usability

Consistency makes it easy for users to navigate and use the app because they don’t have to learn new ways to move. They know what to expect because they’ve learned it before within the app or elsewhere. Naturally, this will help users feel comfortable, happy, and motivate them to remain committed to their app.

Eliminate confusion

Consistent user interfaces make communication easier. Use visual consistency to prioritize content, make it navigable, or highlight important parts of the content. By using consistency you can create a logical structure and clearly define where users can find what they are looking for, saving you confused and frustrated users.

Evoking an emotional response

We’ve mentioned that consistency in mobile apps design can make it easier for users to navigate and use your app. This will help your users feel confident in their ability to handle what’s under their thumbs and evoke a positive emotional response resulting from a pleasant experience.


I hope that with these tips you can create better mobile apps designs if you have any advice or comments that you can leave them in comments 😉

For small tips like these, follow me on Instagram and LinkedIn! Thank you for reading!

What do you think of this content?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Search in the site