The smartphone era has brought many advancements in user interface design. But the big challenge this change fostered is: how deliver usability in as few elements as possible? While minimalism went a long way to answer that question, lately we’ve seen motion spring forth. Read along to find out why!
What can you do with motion?
Because of the smaller screen size of phones and tablets, designers and developers have think on multiple pages/screens to spread their functionality. Think menus, tabs, hierarchical structures. However, as users drill deeper into these elements, they need cues to indicate where they are and where they went.
A lot of this can be solved with an animated transition between pages. But let’s say the first screen had a large, prominent button for the main action the app was developed for. The other screens also have it, but it had to move around to accommodate other elements that need attention. How will the user know where this button is or if its even there?
Let’s recap the situation above, now with motion applied: The user sees the button on the first screen. As he move on to the next screen, he sees the button flying accross the display to its new placement. Problem solved!
Other use cases
Mobile interfaces aren’t the only use case, though. As technology strives even more to imitate life, like we see in AR and VR headsets, we’ll find out that it needs to be just as lively! If you pull a drawer, it will follow your hand until it’s fully opened. It’s not a binary, opened/closed state. It moves between these two states, providing a sense of control, and this needs to translate into virtual objects and elements!
Motion can also be used to indicate order of events: Let’s say I put five cards on a table. You’ll most likely read them from left to right from one to five. But if I put the middle one first, then the other four, it’s likely that you’ll read the middle one before moving on. Of course, this example doesn’t translate very nicely into UX, because you’ll probably come back to the middle one after reading the two before it.
But is the industry following along as well? Below are some examples on what we’re seeing right now and what can be expected.
Google’s Material Design
Besides bring skeuomorphism back to flat design, Google also was one of the first large companies to use motion to explain interfaces.Their concept of paint on paper was very well implemented as we see sheets sliding over and under each other, layers raising and paint drops flowing much like in real life.
Microsoft’s Metro/Modern UI
OK, this one is based on a rumor. Microsoft had a lot going on with Windows 8, being one of the first companies to actually adopt flat design. It also had, to a lesser extent, its own, very subtle take in motion design. When their “Modern” UI was bashed for being too minimalist for a desktop, they decided to strip some of its core elements for a more streamlined look in Windows 10.
The problem is that now the UI looks mostly static, lacking animations and transitions. But a report earlier this year stated that Microsoft is about to unveil an update to their design language (codenamed NEON) that strives for a more fluid, more animated interface.