Hi, Im a MX Designer!
Homescreens, back buttons, UI patterns, Android & IOS, iconography, research studies, user testing... Those have been my best friends for the past 6 years. I started out as a visual designer at an interaction design studio and worked my way through a few operating systems. I found fulfilment in balancing user value with artistic qualities, but I was always missing a part of the UX work where I could let my creativity be more bold. There are countless rules, patterns and best-practice for various platforms, so as a visual designer I felt painted into a corner.
I discovered my love for motion through animated icons and innovative transitions between screens. I felt free for the first time within the field of UX! There where no set guide to follow, therefore I could create new things without breaking too many rules. Instead I obeyed to the laws of physics, Disney's 12 principles of animation, what makes sense to the user and just what felt fucking magical.To my great delight, user experience and motion design have blended into one of our current greatest trends within the tech field. I've slipped into a new role that I would like to call Motion Experience Designer.
Motion in UX = Looks pretty Usability
UI Animation is typically thought of by designers as decoration, not something that contributes a true value. It’s a guilty pleasure that you spend time on if you happen to have nothing else to do.
Our eyes draws to things that move: bonfires, oceans and cat GIFs. But motion has become more than just something that catches out eye, it's a tool for usability to create great UX. Good motion has become a must for great digital experiences released today.
A brief history
of UI trends
To kick things off, I want to take you through a brief history of design trends. It will help us understand where we are today, and where the famous pendulum might be swinging next so that we can aim to be ahead on the trends to come.
Skeuomorphic
When computer and mobile interfaces were first introduced, skeuomorphism allowed people to easily transition into using digital devices. The UI would mimic the real world in look and physics. Familiar materials would invoke a sense of familiarity.
Visual design goal:
To make the user feel safe and familiar, and ease the learning curve.
Digital patterns
Skeuomorphic has helped aid many technological transitions, but it is always a matter of time before it starts to feel inauthentic. As a new vegetarian, one might only enjoy tofu hotdogs and quorn meatballs for so long before wanting to move on to pro-vegetarian stuff, instead of continuing to label things meat when they are not. People got used to the format of back buttons, tab menus, drawers, homescreens, swipe to unlock, etc. The UI doesn't need to imitate the real world anymore, it's its own universe, with moodboard keywords like clean, bold & minimal dominating. The hamburger menu did not exist in the real world prior to digital interfaces. It was introduced to save space in a confined UI on mobile devices. Today it is an established pattern that most people recognize.
Visual design goal:
To be as consistent as possible, to help the user become fluent in this new digital universe.
Minimalism
As the pendulum swung away from skeuomorphism and cluttered UIs, the minimal and flat trend exploded. Users have evolved, our attention span is now shorter and our expectations on a website or app to deliver its value upfront is greater. There is no room for ornamental design. Minimalism aims to achieve an ideal balance between simplicity, convenience, and functionality. Every component and style should have a function. Color and shape is used to draw attention to where is needs to be. You might know this trend as flat design, and it is all about simplifying dimension, minimizing design elements and maximizing white space.
Visual design goal:
Speed: Solve the user's problem instantly. We don't want to hypnotize the user with fluff, rather cater for their true needs.
Expressionism
This is one of the latest emerging trends, lead by both Dropbox and Mailchimp but visible on all corners of the internet: Expressionism. As a brand you are expected to not just look pretty, but have a strong message and visuals that conveys it across your platform. People expect the UI to make them feel something. We use the same services everyday, see the same flat UI’s and press the same buttons. By now we want something unique that feels risky and wild. Take your users for a ride and surprise them. This trend has been coming for a while, with borderless OLED screen being able to show off vibrant color and crazy animations in the best way.
Let me read a piece of Mailchimp's motivation behind their rebrand:
'Be yourself. We champion authenticity, originality, and expressiveness because it's what helps us stand out. We hope to inspire customers to be more bold and creative.'
And a piece from Dropbox's rebrand:
'Extraordinary things happen when diverse minds come together.'
As you can tell, expressionism is here to stay, merging very well with the individualism of the new target group Generation Z. This is where we move over into motion graphics. Being one of the most expressive mediums out there, obviously about to explode even more.
Why is motion a trend now?
Okay, so all this doesn't really explain where motion comes into play. So why is motion a trend now?
Browser performance
Browsers are getting faster and more powerful. We can thank the ongoing browser wars between Chrome, Firefox, Safari, etc, for pushing the speed of their rendering engines. Today the web basically runs on one single engine, Chromium - Chrome makes up for 70% of users and 15% safari mobile users (everyone with an iPhone). Web technology is more capable than ever, and will continue to evolve rapidly.
Designers now have the power to create beautiful animations and elegant content without sacrificing system performance. New browser capabilities opened the door for animation.
We are goldfishes and motion gets our attention
In the year 2000 the average human attention span was 12 seconds. By 2015, it had dropped to 8 seconds- shorter than a goldfish. Today, 40% of users will leave a website if it takes longer than 3 seconds to load. The user evolved, their attention span dropped to below goldfish and they crave the value to be delivered instantly.
Motion enhances usability as simple animations and transitions convey a lot of information. Motion generates engagement and makes common small interactions exciting, keeping the restless user entertained.
Generation Z expects more
These youngsters will make up 40% of the consumers by next year, so pay close attention to these teen rebels. Generation Z are 14-21 year olds and they grew up with social media and quick internet access. They expect more out of their digital experiences. The Gen Z are picky, they want the apps and services that they use to have a strong and clear enough brand to match their own. The new generation of users want an experience whose expressions makes them feel emotions and tell a strong story. They want an alive experience. A static experience is a boring one, the users of today wants a responsive experience that moves with them. By creating graphics that move and change every time we log in, we can keep this target group entertained.
UX with personality
What defines a good app design nowadays? Looking at Googles apps like Photos & Maps, and then Dropbox, Slack, Tink and Airbnb, they have all gone from just completing tasks and displaying info to actually having personality. They even talk to the users like a friendly character. The design reflects this character, adding large texts with a certain tone of voice, but also lots of illustrations and animations to build these personalities. Video, copy, and infographics all serve to tell a story. The content you include, enhanced by motion, draws users into your experience. Motion acts as a storytelling vehicle, bringing an otherwise static experience to life.