UI Motion: A Beautiful Problem Solver to Improve UX

Why do users love motion so much?

Stefano Malachi
3 min readMay 15, 2017

--

The answer is simple, because motion supports the essence of real-time interaction. It creates the same emotional benefits like when people interact with a physical object in real life. For sure, the interaction makes users satisfied. There are 5 pillars of interaction design that I found very useful for creating UI Motion.

UI Motion is a very powerful way to make the mobile app simple, clear, bright and user-centered thus providing positive user experience.

Types of UI Motion

1. Enabling Micro Interactions

A micro interaction is a little momentary event that completes a single task. It becomes the small indication that make user clear that the physical interaction has been done. For example, this can be animated buttons, switchers, toggles, and many more. Micro interactions are some of the most vital, in fact, it is the future of design.

Animated button by Stefano Malachi

2. Showing the Progress State

This UI Motion is showing refresh or loading stage of an app. Pull down to refresh animation is among the most popular now in UI Design for mobile applications. It is not only informing but also stylish, good-looking and entertaining for the users while they are waiting to load more content feeds.

Progress State by Stefano Malachi

3. Showing the key Navigation

Clear navigation is always a great concern for designers creating interactive digital products. Users always want to see the key things first. By indicating the active state of selected navigation, will attract user’s attention immediately to the content.

Navigation by Stefano Malachi

4. Bringing magic to Data Visualization

Obviously, talking about data, people often feel bored. Data for users indicates numbers and tables. And that’s right and logical, still data is always be driven with those elements and logic. Adding UI Motions will give emotional benefits for the user such aesthetic satisfaction along with usability. Data can be represented with shape, colors and gradients, breathing life into layout and dynamic movements.

Data Visualization by Stefano Malachi

Some tips for designing good UI Motion for Mobile App:

1. It should not distract the user from the most important features on the screen.

2. It should be considered across different devices (iOS and Android) and sizes (1x or 2x, etc).

3. It should align with the GUI Kit to deliver consistent branding.

4. It should not take big traffic resource for loading.

5. It should not be overloading the screen.

In conclusion, designing the right UI Motion will open the door to a higher usability. UI Motions used wisely (not too overpowering) in the interfaces will have the following benefits:

1. Increasing usability

2. User friendly, convenient and easy interaction.

3. Providing clear feedback to the user and manage their expectations.

4. Creating pleasant and stylish visual design.

Hope you found this article helpful! If you do so, please like and share this post to help others understanding more about UI Design!

#SharingIsCaring

More UI Motions on my Dribbble

Holla at me on Twitter

Connect with me on LinkedIn

Disclaimer: These are my personal views and opinions and not associated with my employer or any other reference on this post. I am also not endorsing any company or service mentioned on this post.

--

--

📱UI Manager @HSBC 👨🏻‍💻 Follow me for #UI #UX #Design Tips 🙋🏻‍♂️