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.
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.
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.
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.
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.
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 animation
over the last few years. As designers, we respond to the tools at our disposal
— as those tools evolve, so too must our designs.
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.
designing transitions between screens, we need to consider a number of factors,
the user triggers the transition to move from page to page by clicking on a
button or by swiping on the screen.
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.
long the transition lasts — is it fast or is it slow?
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
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.
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.
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.
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.
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.
If you’re looking for inspiration, UI Movement is an excellent site that gathers together examples of animation applied to user interface elements.
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:
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).
a user interacts with a button, it helps to provide feedback, letting the user
know that their actions have been acknowledged.
interacting with date pickers and calendars, there’s considerable scope to
provide helpful feedback.
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.
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.
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.
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.
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.
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.