Mobile App Design Fundementals


Mobile Apps are playing lead roles in our day to day life.Apps become a popular way of delivering content and services.

My friends always say there is an app for that!!

But according to a study conducted by fortune 75% of users open an app and never come back.Lets us examine your own case how often you use apps in your own mobile, some apps are only used at the time of installing and we never came back .Today mobile users are expecting more from a mobile application- Ease of use, Fast Loading time and delight during the interactions.Adapting to the context of use, while keeping the interaction level as low as possible is quickly becoming the standard for many apps.Users trust the apps to do a particular key function , to perform the key function the number of actions should be limited.

For better User Experience lets explore Ten fundamentals of better mobile app design.

Minimize Cognitive Load

The less friction and confusion users have when interacting with an app, the better chance the app stay around.Cognitive load refers to the total amount of mental effort being used in the working memory.

Optimized User Flow

Understanding how users interact with an app is essential for better optimization. As designers and developers, we should understand the user’s goals in the context of the entire user flow. This knowledge will help us identify the most common friction points during task completion.

Here are few popular ways of optimizing user flows:

  • Chunking for Big Tasks:

If a task contains a lot of steps and actions required from the user’s side, it’s better to divide such task into the number of subtasks. One good example is progressive checkout flow in e-commerce apps. You can separate a checkout process in the number of steps each of them requires a user action.It is a good practice to show the status of your steps(how many steps are finished/current step/upcoming steps).It will give the users a psychological strength to do their functionalities.

 

Limiting the number of actions/steps required from users side you can improve comprehension.

  • Use the Information you already have about your Users

You probably have a lot of information about your users.If you are using a register form for login you probably have essential details of you user.You just need to use it properly. Consider the example below ,we have a billing info in checkout ,it is easier to use the user info provided during registration and adding a edit option if the users want to change the address.

 

  • Provide Natural Steps

If the users have to do a lot of steps or actions, maintain momentum by clearing whats next.It is a good practice to show the status of steps(finished steps/ongoing steps/upcoming steps).

  • Prioritize one primary action per one screen.

By following this simple rule you make the  interface both easier to use and quicker to learn.Use  visual weight to prioritize important elements.(most of the designers use the the app theme color for this purpose.Try to use same color  scheme across the app for similar purposes.Using random colors for call to action make the users ambiguity).

 

Cut Out The Clutter

Good UI design is all about delivering relevant information (signal) and avoiding irrelevant information (noise).

By cluttering your interface, you overload users with too much information: every added button, image, icon makes the screen more complicated. Clutter is terrible on a desktop, but it’s even worse on mobile devices where we don’t have too much free screen space to play with.

The clear tab bar (right) is much better than cluttered one (left). 

Tip: If you want to reduce clutter on a screen which represents a part of the user flow — show only what is necessary on the current step of the flow. For example, when a user is making a choice, reveal enough information to allow them the choice, then dive into details on the next screen(s).

Make Navigation Self-Evident

All the cool features and compelling content in the world won’t matter if people can’t find it.

Here are a few rules for navigation:

  • Don’t hide it. Avoid hidden navigation such as gesture-driven because most users will have a hard time finding it.
  • Consistent navigation. Mobile app developers often hide menus on individual pages. Don’t do that because it might confuse or disorient your users.
  • Communicate the current location. Failing to indicate the current location is the common problem for many mobile apps.“Where am I?” is one of the most fundamental questions users need to answer to navigate successfully.

Tip: It’s better to use standard navigation patterns — such as Tab bar (for iOS) and Navigation drawer (for Android). The majority of users are familiar with both navigation patterns. No need to get clever if a simple solution works.

Optimize Interactions For the Medium

Mobile phones aren’t smaller version of desktops — they come with their own nuances and constraints.

Designed Elements Should Look Like How They Behave

A mobile UI needs to clearly communicate what elements are  interactive and what elements are static.

Unlike desktop where users can use hover effects to understand whether something is interactive or not, on mobile users can check interactivity only by tapping on an element. Users should be able to correctly predict how an interface element will behave just by looking at it.

Design Finger-friendly Tap-targets

When you’re designing actionable elements in mobile interfaces, it’s vital to make targets big enough so that they’re easy for users to tap. As a rule of thumb, design controls that have touch area of 7–10 mm so they can be accurately tapped with a finger. Such tap target makes the edges of the target visible for the users when they touch it. Users will be able to understand whether or not they’re hitting the target accurately.

Also, ensure that elements aren’t located too close to each other – there should be a proper amount of spacing between tap targets to prevent false input.

Consider the Thumb Zone

Designing for thumbs isn’t only about making targets big enough, it’s also about considering the way we hold our devices.

While a thumb can sweep most of the screen on most mobile screens, only a third of the screen is a genuinely effortless territory. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Based on hand placement (left, right, or combined), we can see how the safe zone looks like on the modern mobile device (see a green area on the following image).

The bigger the display is, the more of the screen is less easily accessible.

Consider all the different zones when designing for mobile:

  • Green zone is the best place for navigation options or frequent interactive actions (such as call-to-action button).

“Share” button is located in green thumb zone area.

  • Red zone is the best place for potential danger options (such as Delete or Erase). Users are less likely to trigger this option accidentally.

Place destructive actions (such as delete and erase) in the hard-to-reach red zone, because you don’t want users to accidentally tap them.

Design For Interruption

We live in a world of interruption. Something is constantly trying to distract us and direct our attention elsewhere.

For example, users might use your app while waiting for the train. It’s critical to design for mobile mindset. Make it easier for users to re-engage with an app when they return to it after the interruption.

Twitter is one good example of design for interruption. The app’s notification screen shows all recent notifications. As long as the user stays on this screen, the app doesn’t update the list automatically – it simply shows a status “X new notification” at the top of the list. This allows users not to lose their current position when they re-engage with the app after some period of time.

Strive To Create Multichannel Experience

Mobile apps don’t live in a vacuum.

For example, mobile users usually browse an ecommerce website on mobile, then switch to desktop to purchase.  That transition needs to feel invisible.

Spotify allows for a seamless multichannel experience. You can set up a playlist on your Mac and it’ll be instantly available on your iPhone. When you switch between devices, the app remembers where you stop.