ActionIQ Motion Design
Patterns
2018, Motion Design, UX Design
Disclaimer:
These explorations were made when I worked at ActionIQ. As I am bound by a confidentiality agreement, the motion designs shown here have been decontextualized from the actual platform's screens.
A motion design pattern for ActionIQ, developed to improve usability and delightfulness of the platform.
Here are some things I learned while I was designing and prototyping different motions:
1. Vertical motion implies level of urgency
The top left corner of the screen is where our eyes would conventionally go to first. We subconsciously assign the different portion of the screen different levels of emphasis and utilities.
When I designed a notification element, I had it appear from below the screen towards the center.
A nice gentle reminder to users that a task has started in the background.
But I also made an alternative, in which the notification appears from top right, downwards to the center.
This task demands your eyeballs and cursor!
As you can immediately feel, the levels of urgency in these two notifications are totally different. The one coming from below feels a lot less urgent, and you feel good about not paying full attention to it. On the other hand, a notification coming from above would feel overwhelming and extra urgent. It commands your attention and the error feels fatal.
So, the pattern is:
-
top-down is urgent, intrusive, commanding
-
bottom-up is subtle, non-intrusive, good-to-know but okay-to-ignore.
While it seems obvious, this principle can be used in a subtler way. For example, the way a modal appears:
The two motions add a different sense of urgency to the modal. Do you need something that feels like “Did you know….”, or “Are you sure….”?
2. Emotional reward requires proper size and timing.
To lessen the stress of the user when they are completing a difficult task, it is important to give them small rewards when appropriate.
For example, this is a scenario where user has to complete a complex task (>5 minutes) on screen 1 before they move on to the next state (screen 2).
The current transition: no motion.
The application works really fast, so the screen switches fast too. But this is not necessarily a good thing, because user doesn’t get to feel the sense of completion.
One design solution is to “slow down” the application and introduce a more explicit visual cue of completion.
The indicative but non-intrusive “progress” bar.
We can enlarge the sense of closure by turning the entire header area into a progress bar, too. Here, the closure becomes bigger, but the motion also becomes more commanding. Note that in order to tone down the jerkiness of the motion, the progress bar does not start at 0% but at 50-ish% instead.
More complex task necessitates a larger emotional reward.
Put side by side, I prefer the bigger motion for this scenario because it is appropriate with the level of task complexity in screen 1.
Having said that, not every action requires an emotional reward. This horizontal motion applied in modal, for example, does not make sense because it unnecessarily slows down the application.
Unnecessary distraction.
Here, having no motion is actually proper.
Do remember to consider the frequency and the time needed to complete an action before adding motion to it.
The slower the burn, the bigger the celebration needs to be, and mundane and light actions don't need the extra attention.
3. Motion = Personality ⚙️🚀😗
Motion is a great way to add personality to your platform! I find it useful to pick metaphors or real-life things that you can use as reference for your platform’s personality.
I imagined two metaphors for a reliable & useful piece technology: the snappy magnet & the sleek spaceship. The magnet is quick, no-nonsense, functional. Whereas the spaceship has air paddings, eases smoother, and futuristic.
In drag & drop interaction, for example, Sleek would mean smoother ease-in's & out’s and intentional delays.
Sleek drag & drop
Snappy would translate into shorter animation time and elements instantly falling (snapping) into place. A snappy motion would translate well in platforms that put a heavy focus on speed, performance, and productivity.
Snappy drag & drop
Side-by-side comparison.
For modals, Sleek would have a slight bounce in the motion. The modal suddenly becomes a lot friendlier.
Conclusion
While these patterns might seem obvious at first, strategically implementing the same patterns across a platform will definitely help users understand the hierarchy and functionalities better.
For example, bottom-up motion always means things that are good to know but not necessary, or big movements mean the completion of a big task.
It is useful to have these subtle hints especially in a platform where the tasks are long and complex!