A UI designer toolkit includes things like colors, fonts, space, and icons, but motion design can be more powerful than all of those put together when used correctly. A swipe transition between screens tells the user that they are leaving the beautiful user interface (UI) they have been looking at and progressing to a new interface. Color schemes or menu titles certainly help them navigate, but the motion of moving forward and backward is understood intrinsically by many users.

If you haven’t yet dived into motion design, it is an essential part of designing for the mobile experience. A subtle animation that has a clear and logical purpose brings the user interface to life. It is something that is very current in the industry right now, and we’re seeing a lot of cool button animations and transitions between screens. Put simply, movement is eye-catching. However, motion design is much more than that. Everything in an app follows a sequence, and motion can be used to tell the story and guide the user through the experience. Done well, motion offers a mobile app designer the opportunity to provide greater context and a deeper level of clarity for the user. Lastly, the push for empathetic design motion brings delight and meaning to the user’s actions when interacting with an app.

Let’s look at how it is all done.

How to Create a Welcoming Gesture for New Users

When motion is used in parallel with gestures, it can enhance the experience for the user. We recommend only applying motion to the user interface when there is a clear purpose for doing so. It’s important to create a visual connection with the motion — to provide context for the user. Making the user journey obvious, whilst clearly outlining exactly where the user came from and where they are now. For instance, there’s a major difference between elements that vanish and those that slide off screen out of view. Getting this wrong will confuse the user.

A perfect opportunity to use motion is in user onboarding. After three days, a reported 77% of users don’t use an app they have downloaded. An intuitive onboarding process that brings delight will increase user retention. First impressions go a long way, so you should make sure that the user onboarding UX is flawless. At this stage, the user has no familiarity with the interface, which means every design element will be put to the test. Creating smooth swipe-enabled transitions in either a forward or backwards direction will present new content to the user without them feeling like they are disappearing offscreen. In addition, the inclusion of well-considered subtle animations to any illustrations upon swipes can help guide, provide context and give users a novel experience.

Creating a Visual Feedback Loop

Similarly, logging into an app can also be greatly enhanced with the use of motion. You want the barrier to entry to be low if users are to adopt the app as a part of their daily habit. A simple horizontal shake can be used to communicate an incorrect password. This gesture is instantly recognizable and gives the user an immediate understanding of the problem, without needing to spend time trying to locate an error message. In most cases, the motion cue reduces the need for supporting text to explain the issue. In the process, it creates an additional language that, when kept familiar and consistent, helps the user feel in control. So not only does this complement the design, but it also creates a better user experience (UX).

This experience is what’s important. The best practice is to use motion to tell the story, and make sure the user’s journey is always apparent. The user should know where they are within the app’s flow and how exactly they got there. It should be clear why they are seeing each piece of motion. Failure to do so will result in a poor UX which causes irritation for the user, as they are looking for a seamless experience. This irritation causes the user to become frustrated and confused, and when this happens it is likely to result in the user quitting, and likely deleting the app.

Confirm Actions: You’re Doing Great!

If a user creates a new item, the motion upon tap should reinforce that. The new item should be animated from its original point of origin to help give the user a better understanding of the architecture, without the need for an explanation. Consider how you might use elements like bounce and velocity. But be careful not to go over the top. The best uses of motion are those that complement the UX, and not hinder the user’s progress. Subtlety is the key. Motion should be used to sustain focus, not take it away.

Deleting an item should be just as intuitive and engaging. It seems hokey now, but the wobbling iOS Trash Can does an excellent job of confirming the deletion of a file (along with the swoosh sound of paper hitting a can). Don’t just make something disappear from view with a hard cut at the tap of a button; create a story that follows respond accordingly. Deleting an item is a destructive and sometimes an irreversible action. You should use motion to reassure the user that the item has been deleted. This can be represented by making the item blur and shrink off screen to signal it being lost in the digital history of the device.

This type of motion shouldn’t be an afterthought — you should be designing with it in mind. During the wireframing phase of a product, think about how to bring clarity to the user. You should be creating quick and simple prototypes of each piece of motion. There’s no need for them to be overly complex. Even from the early stages of the project, it’s important to test each element — the transition you imagined may not be the best solution once you have seen it come to life.

Having Fun With Motion

Whilst aspects like transitions between screens are nice, you should not over-elaborate them. Too much movement can gradually become repetitive and annoying. Motion isn’t all about the bounces and blurs, it’s much more than that. It’s about telling a story that the user can relate to. Judicious use of motion can feel like a reward of sorts for the user. For example, when interacting with run-of-the-mill elements like tapping on send, you should consider a slide transition off the screen for the finished message. Motion can make a massive difference to the user experience in cases such as these. The animation reinforces the sending action, thus reassuring the user that their message has been sent.

We often find ourselves navigating through an app for no particular reason other than to play with the animation. A perfect example of this is Snapchat. The animating ghost on pull-to-refresh is addictive. The act of swiping down to initiate a refresh is something that is simple yet intriguing, making it the perfect place to add some fun to the UI. This sort of fluid motion within the UI helps it come alive and delight users. As a designer, you should experiment to find the best solution in which a fluid motion can satisfy multiple options to improve the usability of the interface, but only when the opportunity arises.

Motion Design UI/UX In a Nutshell

Throughout the design process, it’s important to design with transitions in mind. Build this determination into your initial wireframing — motion shouldn’t be an afterthought. Creating initial prototypes early in the design process is beneficial to everyone involved. It makes it easier to interpret and visualize. And not only that — a solid prototype allows for a better estimation on development time. Plus clients love to see them!

A good use of motion can tell the story much faster than any piece of text can. It can also be used to define a concept. Take Flipboard for example: without the the flip motion between screens, there is no correlation between the brand and the app. In this case the motion is the UI.

And unique animations like this can help create a recognizable brand. As humans, we’re not only logical, but we’re emotional. We want to enjoy interacting with our apps, finding pleasure in the most simple of things. We want to be able to relate to them, and by using motion we, as designers, can make a UX more memorable and delightful. As we move from paper to digital, it’s our job to design something that, even for someone who has never used a smartphone before, is easy to understand. Using motion in a deliberate and thoughtful way can go a long way to achieving this.