Trends

An In-depth Guide To Improving Mobile App UX Design

In this guide, we share a few ideas to help you better understand how users interact with mobile apps.

Native mobile applications vary in scope and purpose, but user experience design generally remains the same. User behaviors and expectations follow similar precepts of how users assume an interface behaves.

The best way to learn about user experience is to study and apply different ideas to your own interfaces. I’d like to share a few ideas in this guide to help you better understand how users interact with mobile apps.

These ideas are not completely universal, but they’re wide enough to draw your own conclusions and create interfaces based on typical user behaviors.

Follow Expected Conventions

There’s a time to experiment and a time to stay traditional. When it comes to basic user experience, it’s better to go traditional. Experiments are fun with A/B testing, but when you need an application that just works it’s best to stick with conventional design patterns.

Give users something they’re familiar with so that they stick around long enough to use your application.

The best way to learn expected conventions is through study. Look over some of your favorite applications and write down their common behaviors. Which interface elements seem completely natural? Learnable interfaces are the best interfaces for mobile apps hoping to gain an audience quickly.

01-android-ui-navigation-design

Take a look at the above news app which follows Android’s material design. Android users should be familiar with all of these components including the sliding nav menu, tabbed content, and the floating action button to save news stories.

All of these features could be replicated on iOS using Apple’s human interface guidelines. Native applications follow these design patterns for one reason: because people know how they work.

It’s difficult to even to get people to download your app and try it out. People who actually download your app will want a smooth and consistent experience. Deliver consistency and it’ll be much easier to keep your audience glued to your application.

02-restaurant-app-android

Here’s another example for an Android restaurant application. The main startup page uses dot navigation elements for breadcrumbs to switch between photos in a slideshow.

This design pattern has been around for years even pre-dating mobile applications. Users recognize this pattern and realize the dots mean elements in a slideshow. Nothing about this design pattern needs to be explained because most users already know how it works.

Inherent conventions are your best friend for mobile app UX. It’s okay to break convention sometimes, but have a reason for doing so.

You might also consider adding a mobile onboarding guide, which explains how each piece of the app UI functions.

One more interesting example is this WhatsApp clone made for iOS and Android. Both have a similar chat interface so it’s easy to see why this app would follow the same template for chat screens.

03-whats-app-clone-chat

You get speech bubbles with alternate colors on opposite sides of the screen. Each speech bubble can include a user profile photo for easier identification in group chats.

Most smartphone users are familiar with the typical mobile app design patterns. You don’t need to ever reinvent the wheel if there’s a good reason to follow conventions instead.

Use Icons for Clear Labeling

Links, forms, and input elements should all be labeled in a clear and concise manner. There’s not a lot of space on mobile screens, so you need to make the best of what you’ve got.

But never remove anything that’s detrimental to the user experience. It may be easier to instead shrink the amount of space for an input label, or remove an icon if need be.

I prefer always to keep icons attached to labels. Visual icons with text create a harmonious picture for users to interpret at a glance.

Check out this example of a hotel/booking app. It uses icons tied to links and form inputs to aid users with their interactions.

04-hotel-ios-app-icons-ui-visuals

Each icon is very small and simple to recognize. Nothing feels out of place and every single icon seems to serve a purpose.

It can be tough to find the perfect visual representation for every action. But try your best when labeling each button and remember to follow convention.

The booking app uses a calendar icon for dates, a funnel icon for filters, and a listing icon for sorting. Each individual room page has icons representing each amenity like free breakfast, television, and parking.

Notice how these labels are not always attached to “actionable” elements. Links and buttons can be improved with visual icon labels, but so can static page information.

One other great example is this Android template made for general app UI layouts.


05-android-material-ui-template

It’s possible to get away with simpler labeling and very small icons. You could even opt against using icons at all.

But in most cases, the icons will improve readability and help users recognize actions quicker. There’s very little downside to adding icons that clarify your labels. The toughest part is actually finding the icons to use.

In the end, it’s always worth the effort for a dramatically improved user experience.

Highlight User Actions

Mobile apps are moving towards real-world interactions where interfaces will respond to user behaviors. When a user swipes across the screen, different elements can be given bounce animations to create the impression of a realistic response.

This is also true of highlighting elements after the user interacts with them. Take for example this flat UI template for Android. It uses green highlights on elements with user interactions, or to denote inputs like on/off switches and checkboxes.

06-android-flat-ui-template-design-colors

The swipe-to-view action is also popular on screens with specific message options. You can see this in the above example where controls appear underneath an item in the list view.

By sticking with a green color scheme these elements jump off the page with a natural highlight. Everything looks clean and simple with no major hiccups in the interface.

Use colors to jump off the page only when necessary. Elements that should catch attention can use highlights for contrast against everything else. For example this map guide app uses bright colorful highlights in the top bar and the action button.

07-city-map-planning-app-ui

The app follows many similar material design concepts and they all seem to blend nicely.

I would only use highlights in situations where you want to encourage user interaction. On such a small screen it’s easy for little flashy elements to become annoying. Try your best to keep highlights simple and complementary to other colors in the design.

Breathe Life with Animation

It may seem strange to bring up animation when discussing user experience. But lots of designers are recognizing the connection between motion and UX.

When items bounce, jiggle, and respond to user input, they feel more realistic. We all know that interfaces are just pixels on a flat screen, much like how realistic drawings are just graphite marks on flat paper.

But the illusory effect of animation makes everything feel more lifelike. When you push down on a button it should move. When you swipe a page element it should bounce away. Drag and drop features are also perfect for motion effects.

These tiny reactions are called microinteractions, and designers are slowly realizing how significant these animations are to the overall experience.

When an interface responds to user input the application feels lifelike. Everything in life responds based on laws of physics like gravity and inertia. By replicating this digitally, users can feel a realistic connection to the interface.

08-mini-racing-app-mobile

The simple racing game above has been built for smartphones and makes use of realistic animation and physics.

Games can only go so far to replicate reality. But when done correctly users can have a blast with this kinda stuff. But games are the most obvious example. What about contextual applications?

In this case FoodGram fits the bill nicely. It uses drop-down animations for menus and buttons which fall into place. When selecting an item it’ll float back up the screen in a linear animation style.

09-foodgram-app-ios-animation

This very basic effect gives the application some life. It seems more dynamic rather than static. Users also learn which elements are clickable based on which elements have motion.

Aim for simple ideas first and then branch out to more complicated animations. Start with sliding nav menus that actually slide. Animate buttons that move down when tapped.

These may seem like minor features but as is the case with most UX conventions, the devil’s in the details.

Properly Organize Content

User experience doesn’t just relate to interactions. Content and information consumption is also part of the overall experience.

Because smartphones have such little screen space you really need to make the best of what you have. This means simplifying data into common page styles like list views, tab views, and even slideshows.

10-store-finder-app-ios

This store finder app feels a little crowded with content but still works flawlessly. You can browse stores by category or location using lists and maps. This gives the user a chance to view data across many different page styles.

When looking at restaurant lists, you’ll get a photo of the place along with the name and total star ratings. This is all crucial information and it’s placed right up front so that users can browse at a glance.

I think this store locator app was given too many features, or at least more than it needs. But the content is still easy to sort, browse, and consume without hassle.

11-chronometer-timer-app
I also like this chronometer app (above) for its basic simplicity and ease of use. It can track your time for a task or setup a timer to go off at a certain point.

The controls are incredibly simple because there aren’t too many options to be confused about.

With data organized into easy-to-digest chunks it makes the user experience swift and care-free.

Avoid condensing too much data into one screen because it can be overwhelming. But on the flipside avoid having pages with too much empty space because it’ll require excessive navigation on the user’s end.

Strike a balance right in the middle where enough content is provided on a single page to make it consumable yet not overwhelming.

Imply User Behaviors

Every app designer should aim to build an interface that functions and teaches at the same time. This branches into the topic of learnability which measures how quickly a user can learn an interface to a high degree of competence.

Some features may require explanations through an onboarding process. But other features can be designed to imply behavior based on context.

For example, the hamburger sliding drawer menu icon is now universally known by most users. This implies that tapping the icon will show a hidden nav menu.

Other visual icons can help imply certain behaviors without any text labels. For example, the plus sign(+) can be used in applications to mean “create new.” This could be a new calendar entry, contact, or new note on your phone. This is where context plays a role in the user experience.

Check out the Spatullr app UI which uses icon buttons for searching and saving recipes.

12-spatullr-cooking-recipe-app

These small icons are fixed in the top navbar on most pages of the app. They’re easy to identify and most users can make safe assumptions without any further context.

Recipe pages have the heart icon moved into a floating action button near the top of the page. There’s also a tabbed widget for checking out ingredients and directions. Since one of the tabs is already highlighted it’s easy to assume the content is built on tabs.

Implied behaviors are not always intuitive, so you can’t rely on these all the time. Remember that not everyone is as technically savvy as yourself. But the best thing about implied behavior is that users often explore and discover these features on their own.

The biggest reason to include instruction is for confusing or impossible-to-learn features. For example, let’s use the recipe app above and say if a user double-taps on a recipe it’ll automatically save to their favorites. Almost nobody would be able to learn this on their own.

In this case, I’d include a small tooltip or popup bubble with a small list of obscure behaviors. It’s also smart to add this information into an onboarding tutorial for first-time users.

13-checklist-app-iphone-ui

This checklist app is another basic example that follows conventional iOS design patterns. Since most people know these design patterns it’s much easier to imply behaviors.

The app uses a plus symbol for the “add item” function. On the add item page, you get form labels attached to each input with placeholder text in each form field.

The reminder function uses an on/off slider which should be understood by all iOS users.

By following conventions this app can be used by anyone who understands basic iOS design elements. Try your best to imply behaviors with this technique. But don’t expect all your functionality to be this simple either.

If you have an idea for more detailed functionality it’d likely be fine in most applications. Just be sure to include a brief tutorial, onboarding guide, or a tooltip explaining how it works.

Wrap Up

If you’re designing a mobile app then user experience should be at the forefront of your creative process. Many UX principles seem like common sense but it’s surprising how many apps are incredibly confusing to learn.

If you stick with standard design patterns and follow the tips in this guide you’ll have no problem crafting experiences that are fulfilling, enlivening, and easy to retain for long-term users.

There are certain key eCommerce mobile app UX guidelines that you really need to know and understand before you dive into building your first mobile app.


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.