Creating Usability with Motion: The UX in Motion Manifest

I’ve recently read this interesting article – Creating Usability with Motion: The UX in Motion Manifesto on Medium. This article is written by Issara Willenskomer, the founder of UX in Motion. He creates the theory of  12 principle of UX in motion and talks about how a good motion improve the usability.

I used some GIFs to show the function. Now, we also can see a lot of UI motion on either business project or personal works. The original idea I used motion in my works is only showing the user flow and the functions. I’ve never thought if I use these motion in  a smart way, it can help users have a better user experience.

UI animation is not only what users think.  Most designers think of as “UI animation” is a higher modality of design. UI animation can be used in realtime and non real time. “Real Times” means users directly interact with the interface and they can get the feedback immediately. “Non-realtime” means that users are out of the user experience and they only can see the interaction after transition completes. Therefore, if designers implement some animation principles into the UI animation, it can level up the usability and also provide the higher leverage opportunities for designers.

Issara Willenskomer mentioned the four ways of motion supporting usability and organized the 12 Principles of UX in Motion.

Motion supports usability in four ways:

  1. Expectation - how users perceive what an object is, and how it behaves
  2. Continuity –  the user flow and the ‘consistency’ of the user experience.
  3. Narrative – the linear progression of events in the user experience that results in a temporal/spatial framework
  4. Relationship –   the spatial, temporal, and hierarchical representations between interface objects that guide user understanding and decision making.

The 12 Principles of UX in Motion

  • Principle 1: Easing – Object behavior aligns with user expectations when temporal events occur.
  • Principle 2: Offset & Delay – Defines object relationships and hierarchies when introducing new elements and scenes.
  • Principle 3: Parenting – Creates spatial and temporal hierarchical relationships when interacting with multiple objects.
  • Principle 4: Transformation – Creates a continuous state of narrative flow when object utility changes.
  • Principle 5: Value change – Creates a dynamic and continuous narrative relationship when value subject changes
  • Principle 6: Masking – Creates continuity in an interface object or object group when utility is determined by which part of the object or group is revealed or concealed.
  • Principle 7: Overlay – Creates narrative and object spatial relationship in visual flatland when layered objects are location dependent.
  • Principle 8: Cloning – Creates continuity, relationship and narrative, when new objects originate and depart.
  • Principle 9: Obscuration – Allows users to spatially orient themselves in relationship to objects or scenes not in the primary visual hierarchy.
  • Principle 10: Parallax – Creates spatial hierarchy in visual flatland when users scroll.
  • Principle 11: Dimensionality – Provides a spatial narrative framework when new objects originate and depart.
  • Principle 12: Dolly & Zoom – Preserves continuity and spatial narrative when navigating interface objects and spaces.


The principle 1 Easing and the principle 2 Offset and Delay are related to timing. From implementing different delay on different objects, users can know the relationships and the hierarchies between objects. Users can know that the bottom object is separated from the top 2 objects.

The principle 3- Parenting help users understand the relationship between. Designers can link objects together to create their relationships and hierarchies by using scale, opacity, position, rotation, shape, color, value.

The Principle 4- Transformation, the principle 5- Value Change, the principle 6- Masking, the principle7- Overlay, and the principle 8- Cloning all relate to object continuity. They can help designers to tell a story and also garb user’s attention. The increasing number can make user feel it happen in reality and also grab users attention.

The principle 10 – Parallax makes users get the idea of temporal hierarchy. Users can focus on the main actions and know which objects are higher priority.

The Principle 9- Obscuration, the principle 11- Dimensionality and the principle 12- Dolly & Zoom both relate to spatial continuity. It is like in a real world. User can change their perspective by folding, swiping, zooming to feel like a real special. It commutes to the viewers  and help user understand the scenes of objects are “inside” or “outside. “ It help users creates the spatial mental models.

In conclusion, these 12 principle of animation in UX looks like a small stuff. As a UX designer, I think if we can notice these detail stuff and implement into our products. I believe that we can improve the usability and make users have a better user experience.

 

More References:

Functional Animation In UX Design: What Makes a Good Transition?

https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e

How to Use Animation to Improve UX

https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb

The Principles of UX Choreography

https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a

Motion Design: An Intro to UX Choreography

http://uxpamagazine.org/motion-design/

 

Design Critique: Mint (iOS app)

Mint is a personal financial program in which users can easily manage money and make their budgets. Users can link all of their accounts like different banks’ accounts and credit cards into this one program. It is a free money manager and financial tracker system. Mint has desktop, tablet and mobile versions The mobile iOS app has some positive and negative features..

 

Overview Page : Good discoverability and understandability

   

Mint gives users a very good discoverability and experience. When they turn on the app, they can see main functions on the overview pages. They can check their status of bank accounts immediately. Moreover, the overview page is also understandable. By intuitively scrolling down, users can see clear sections such as their credit scores, cash flow and a chart of spending. It is extremely simple and quick to check about users’ financial status. However, there is one small concern. Mint does not show the decimal point on the summary of accounts. From Norman’s suggestion, the signifiers for a financial system are significant and the summary of accounts should be very clear and exact even though the cents are a small amount.

Budget Setting : Good feedback & Poor discoverability

 

To set the budget, users can get immediate feedback when they move a pointer up and down to increase or decrease the budget. They can see the number of the budget is changing while they are moving the blue label. They also can click the pointer and the green chart ,and then a pop up screen will show up to set up the budget. However, the function of moving the blue pointer to change budget is not discoverable. If users do not try to move it, they will not find the function to change budget.

Spending Categories

Users do not need to record their spending or input their financial transaction by themselves. Furthermore, it has a very good feedback. People can check every transaction immediately. It also automatically distributes your expenses into different categories. Users can check their different spending in a simple way. Mint successfully offloading the users’ tasks.

Spending Chart : Good understandability and bed signifiers

The spending chart is understandability. By clicking different color parts of pie chart, users know how much they spend on different categories. They can see the details of each transaction. Nevertheless, here it also has the same signifiers issue, the amount of spending do not show the cents and it might make people misunderstand. This spending chart contains a semantic constraint, it only show the current month of spending pie chart. Users cannot see others month.

Budget : Recognition

The color of each categories budget char is recognition. Mint uses red, yellow and green to remind users their different level of spending. Also, users can have idea about how much they left on each categories. However, the signifiers of setting budget is not really good since users can not set budget in different month. Users may have different income and have different finance status each month. Therefore, if they can make users to set up budget every month, it will be more user centered design.

 

Recommendation:

Mint do not have an export records function. The summary of chart spending is good. If it is possible to generate a CSV file or backup to cloud system, it may help user have a better manage money experience.

 

Overall, Mint program is a user friendly design app. Its design is cleanliness and elegance. The conceptual model is consistent and easy to navigate. It is an ideal personal financial management system for users who do not like to record their expense or have a table to manage their money.