In part one of Fundamentals of UI Design, I explored the importance of designing consistent, scalable interfaces and creating a systematic approach towards user interface design.

One of the key differentiators between designing for screen and print is that when we design for screen, we are designing for a fluid medium. This is a critical difference between interaction design and graphic design. In this article, we move from looking at the overall design system to focusing in on the design of interactions and animations.

As interaction designers we are not designing static collections of pages, we are considering how these pages, and elements within these pages, interact. This is a critical distinction, and one that is often overlooked by a subset of graphic designers who believe that their role is simply to design sets of pages which will then be passed on and “stitched together” by “someone technical.”

At the risk of unleashing the “designers must code” can of worms that perennially rears its head, it’s critical for designers working in this medium to understand how the medium works. To truly design memorable experiences, it’s important to spend some time learning about animation principles.

When designing for screens — inherently fluid media — it’s critical to consider how the user will interact with what you’re designing, considering how transitions are handled from screen to screen, and providing valuable feedback within user interface components. We need to consider both macro-interactions (at the page level) and micro-interactions (at the object level).

Getting from A to B

In Comprehensive Guide to UX Design, I explored how we could use user stories to begin to map pathways through your design at a high level. At this point in the process, we need to focus on how users move between these screens, traversing from A to B to C.

In the past, we might have simply moved between screens with little or no animation at all, limited by the devices we used at the time. As processing power in our desktop and mobile devices has increased, however, so too have the number of opportunities afforded to us to design more immersive experiences.

Of course, we need to use these newfound powers with restraint, but the hardware at our users’ disposal now provides us with the opportunity to design delightful interactions. This is why we’ve seen a rise in interest in UX animation software over the last few years. As designers, we respond to the tools at our disposal — as those tools evolve, so too must our designs.

An illustration showing the different ways of swiping and fading
Illustration showing swiping and fading.

We can transition from screen to screen in a number of different ways, including fading or swiping in from bottom to top, fading or wiping in from left to right, and scaling in.

When designing transitions between screens, we need to consider a number of factors, including:

  • How the user triggers the transition to move from page to page by clicking on a button or by swiping on the screen.
  • What kind of transition we use — dissolves, wipes, scales or other effects. The transition we choose will communicate to the user, so it’s important to choose it with care.
  • How long the transition lasts — is it fast or is it slow?

As we design the journey from A to B to C, the choices we make (i.e. triggers, transitions, and timing) will affect the narrative, so it’s important to put some thought into them. As with any journey, it passes more smoothly if it’s enjoyable.

The type of content we are designing will also impact these decisions. In some cases, we’d like a user to move a little more slowly through a narrative by using transitions and timing to pace things. In other cases, we’d like to get out of the way by speeding up the transitions.

When Apple first launched iBooks, its page transition when reading a book (a ‘page curl’ effect) slowed readers down. The ‘page curl’ was delightful at first glance, but once you had seen it hundreds of times — when all you wanted to do was to read a book — it became incredibly frustrating. The microseconds used on every page turn all added up to a frustrating experience.

When designing transitions between screens, it’s important not to lose sight of the underlying functionality. At the end of the day, our goal is to delight our users, not to frustrate them.

Animation can be delightful, of course, but not if it’s at the expense of functionality. Sophie Paxton writes about this very topic in an excellent article titled “Your UI isn’t a Disney Movie,” which highlights how gratuitous animation and overly animated user interfaces can, if we’re not careful, frustrate users. It’s well worth reading.

Interacting with objects

With our macro-interactions at the page level defined, it’s time to turn our attention to micro-interactions at the object level.

Just as we need to consider all of the factors that add-up to ease users from page to page, it’s also important to pay attention to easing users’ interactions with specific objects within our pages. These might include buttons, form fields, and other elements where a little judicious animation can help provide feedback to our users.

Providing visual feedback is extremely important in user interface design — it puts users’ minds at rest by providing a signal that their actions have been acknowledged. When I click a light switch in the real world, I receive feedback by hearing a satisfying click as well as the result of the light switching either on or off. This feedback lets me know what’s happening.

We can improve our user interface designs by applying these lessons from the real world to the world of screens. A well-designed user interface should respond to a user’s actions, letting them know that their actions have the desired effect, putting their mind at ease. This is where animation can play an important role.

A screenshot from the UI Movement website
Image by UI Movement

If you’re looking for inspiration, UI Movement is an excellent site that gathers together examples of animation applied to user interface elements.

Sites like UI Movement provide a wealth of inspiration, showcasing effective examples of animation applied to user interfaces. It’s important to consider how you provide feedback and in what context, for example:

  • When you’re asking for a password, it’s helpful to indicate the password’s strength or weakness as the user is entering the information (finding out only later that a password is too weak is frustrating).
  • When a user interacts with a button, it helps to provide feedback, letting the user know that their actions have been acknowledged.
  • When interacting with date pickers and calendars, there’s considerable scope to provide helpful feedback.

The above scenarios are just the tip of the iceberg. Anywhere your user is being asked to interact with elements on a page is an opportunity to consider using animation to provide helpful feedback. Of course, as I noted above, your user interface isn’t a Disney movie, so don’t go overboard.

Finally, it’s worth noting that animation isn’t for everyone and can, for some people, cause problems. For users with vestibular disorders, motion can cause dizziness or nausea, so it’s important to consider accessibility when using animation.

In closing

When designing your user interface, it helps to have a system in place. This ensures that whatever you build is considered and consistent. Starting with an interface inventory — especially when you’re revisiting an existing product as part of a redesign — will help you to identify the points where your interface needs work. Over time, it’s only natural that inconsistencies can creep in — this tool offers an ideal way to pinpoint these.

When it’s time to build your interface, spend some time to establish a considered design system. Not only does this ensure that your design is consistent, but it helps keep your team on the same page and provides any freelancers working on the project with all the guidance they need in one central location.

Lastly, it’s important to consider the design of your interactions and animations. As designers working for screens, it’s important that we consider how what we design responds to users’ interactions. We are, after all, designing for a malleable medium. Let’s use that malleability in our favor. Tying all of the above together, you’ll have the foundations of a solid user interface approach that will stand the test of time.

Suggested reading

There are many great publications, offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.

Alla Kholmatova has written an excellent book titled “Design Systems,” which I strongly recommend. It explores how building effective design systems can empower teams to create great digital products.

Brad Frost has written a very good book, “Atomic Design,” which focuses on creating effective interface design systems. Frost is a smart cookie, and I’d strongly recommend bookmarking his blog.

If you’re interested in learning more about designing interactions and animations, I’d strongly recommend Val Head’s Animation and UX Resources.

If the web is your medium and you’re new to animation, drop everything and sign up for Donovan Hutchinson’s CSS Animation course. It’s an excellent course, and Hutchinson’s teaching style is second-to-none.