Top Design Moments for Mobile App

When you examine the most successful interaction designs of recent years, the clear winners are those who execute fundamentals flawlessly. They feed off natural human behavior, then quietly remove barriers without us ever noticing. Let’s overview the most important design techinques and how they can work for you.

Layered Interfaces and Animation

Modern interfaces become more layered and taking full advantage of the z-axis. This approach gives a sense of depth to the interface making the experience more tangible.
Mobile app environment is a 3D space with x, y, and z axes

Mobile app environment is a 3D space with x, y, and z axes.

Long shadows usage give the impression of depth. Shadows give a bit of visual spice to the design without becoming a distraction. Images and elements with long shadows seems to pop off of the page. Google Material Design layer structure
Google Material Design layer structure.

Movement and animation are vital element when embracing this new approach. They give fluidity and more meaning to the user experience. And technical capabilities of the new mobile devices allow designers and developers to create really good animation. Animated demo tutorials are the great way to capture users attention while educating them how to use the app for the fist time. Onboarding for Muzo App by Ramotion
Onboarding for Muzo App by Remotion

Another very important principle of animation — response to user actions. Where possible, the epicenter of the interface changes must be the touching point of the device screen.
User notices the point of origin.
User notices the point of origin.

But don’t use animation just for the sake of it. You should have a clear motivation behind the animation effects.

Takeaway: Done right, this approach gives a real sense of 3D depth and will establish a clear relationship between UI elements and interactions. The combination of depth, layers, and motion help establish a sense of hierarchy and intent.

Swiping Actions

The screen is not only a touch target but also a gesture target. Swipe gestures are used to go back, reach the menu, change a current item or trigger actions such as like or delete item.
Swipe action example

Swipe action example.

One of the most easily recognizable interactions is Tinder’s swiping right action. This interface choice is about as good as it gets — simple and easy to understand. Moreover, their looping capabilities are phenomenal — using Tinder becomes addictively fun. This keeps users on the app “for just five more minutes.”
Tinder app for iOS
Tinder app for iOS.

Another good example is Apple iOS mail navigation. Mail app make it easier to flag and delete messages with a swipe.
Apple iOS Mail app
Apple iOS Mail app.

Takeaway: Although it may not be entirely self-evident initially, a gesture, once discovered and learned, can become a delight to use and can improve user experience by reducing steps in the user flow.

Design with Thumbs in Mind

Users don’t want complex gestures, like three finger tapping or needing both hands to use the phone. A recent study of 1,333 people using smartphones on the street found that about 75% of smartphone use is one thumb.
Though we often refer to “finger-friendly” designs, the thumb does most of the work.

Though we often refer to “finger-friendly” designs, the thumb does most of the work.

When designing, take into account that your app will be used in a several contexts, people will not always be in a situation where they can use more than one finger or both hands to interact with your UI.

Evernote simplified the controls and used floating action button for the most important user actions.
Evernote app for Android

Evernote app for Android.

Takeaway: Design for the lazy, this can increase the usage of your app.

Striving for Minimalism

The ultimate goal is to simplify our interfaces and make them more functional and usable. You need to focus on following moments:

  • Simple color scheme. The use of simpler colors schemes always associated with flat design and “less is more” approach. But simplifying the interface improves the user experience while having too many colors can have a negative impact upon it.
  • One app, one typeface. When designing an app think about how can you make the typography powerful by playing with weight and dimensions, not different typefaces.
  • Divide by elements, not lines. There are other ways to separate content with a methods such as using blocks, spacing or colors.
  • Use consistent set of icons. A set tells users how an app works and how to interact with it. Think of the shopping cart icon that is uses as an identifier to check out or view items. Users don’t have to think about how to navigate to make a purchase; this element directs them to the appropriate action.

Good example of minimalism design is the Calendar App. An action in the calendar after you come off from the surface becomes a separate layer and begins to transform showing detailed information about the event.
Google Calendar App for Android

Google Calendar App for Android.

Takeaway: UI design is moving towards removing any unnecessary elements to focus much more on functionality. Less lines and dividers, simple color schemes and single typeface will give your interface a cleaner, modern and more functional feel.

Conclusion

Minimalist interfaces and other design techniques are certainly a way to achieve good design, but they are not the goal. The goal behind this moments is to create an interaction system that naturally aligns with the user’s mental models.

Simple user flows, clear visuals, and forgiving design help create the illusion that the user’s abilities allowed for a seamless experience. And your interaction system should aim to address problems for your users through clear visual communication.