eBook - ePub
Designing Interface Animation
Improving the User Experience Through Animation
Val Head
This is a test
Share book
- 240 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
Designing Interface Animation
Improving the User Experience Through Animation
Val Head
Book details
Book preview
Table of contents
Citations
About This Book
Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user’s experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlegoâs features. The only differences are the price and subscription period: With the annual plan youâll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, weâve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Designing Interface Animation an online PDF/ePUB?
Yes, you can access Designing Interface Animation by Val Head in PDF and/or ePUB format, as well as other popular books in Computer Science & Computer Graphics. We have over one million books available in our catalogue for you to explore.
Information
PART I
The Case for Animation
The next three chapters in Part I, âThe Case for Animation,â will outline the reasons why you should consider animation in your UX design process, how looking to the past animation greats can make you better at designing animation, and how to plan animations that behave well in interactions. This is the information you can use to convince your boss or teammates (or maybe even yourself?) that animation is something worth using and looking into.
CHAPTER 1
Why You Canât Ignore Animation
Animation Has Brain Benefits
Animation Communicates
Animation Connects Contexts
UI Choreography
Animation Grabs Attention
Staying on Point
The recent advancements in the animation field arenât the only reason thereâs a growing interest in web animation right now. A bigger reason is the fact that much of the audience has changed its attitude toward the screens.
Thanks to the popularity of smartphones and the blurring of lines between phones, tablets, and computers, the expectations of what interacting with an interface should feel like have changed. These small pocket-sized computers have become a part of daily life, and their interfaces feel more alive with their gestures, depth, and animation.
The increased use of interface animations started with smartphones and native apps, but now they can be found almost everywhere. Even major operating systems like Windows and OSX have begun using animation as a core part of their design and interactions.
In comparison, static interfacesâthe kind that the web defaulted to for so long, due to a lack of optionsâcan feel dated and even a bit dull. When compared, at best, they seem to lack the sophistication of interfaces that include animation as part of their design. At worst, static interfaces feel broken and frustrating. Well-designed animation is becoming part of the definition of sophisticated, current, and trustworthy design. Teams like the people behind Stripe Checkout have purposely used animation in their design efforts with the goal of designing a more sophisticated product.1 Itâs a big reason why so many designers have started to look at animation more seriously. If your design goals include an interface that feels modern and sophisticated, well-designed animation is one of the ways to get there.
Recognizing that animation can make your designs feel modern and sophisticated is probably what got you curious about interface animation in the first place, too. The reasons why animation has that effect, and where animation can have the most positive impact, are a bit more nebulous. So letâs look under the hood at the reasons why animation can make an interface feel more intuitive and easier to use.
Animation Has Brain Benefits
Sometimes, you might feel that an animated solution youâve come up with is easier to understand or follow than the non-animated version, but you canât put your finger on exactly why. Actually, your gut feeling is right, and itâs more than just a feelingâthereâs research to back it up as well.
Once you start digging, youâll find a surprising number of academic studies have been done on the effectiveness of animation on different kinds of learning outcomes. One common theme that comes up in a number of research studies is that animating between the different states of your interface can reduce cognitive load for your users. Essentially, animating an elementâs movement makes that change in position visible on-screen, which means that your users donât have to keep track of where things have moved. The effort they would have used to track the object is essentially off-loaded from their brain to the visible animation on-screen. They expend less energy keeping track of where things are, and can then focus their efforts on more important things, such as your content or the task at hand. Thatâs definitely a win-win situation.
TIP COGNITIVE LOAD DEFINED
Cognitive load refers to the total amount of mental effort being used in working memory.
A number of academic studies have researched different ways that animation can potentially reduce cognitive load. Among them, two studies from Erasmus University Rotterdam (2007) found that well-designed animation could reduce extraneous cognitive load for problem-solving tasks.2 It also found that cueing techniques in complex animations could enhance learning performance and free up learnersâ working memory resources to focus on learning more efficiently.3 A similar study from the University of New Mexico4 showed that students learning a specific skill with animated study aids outperformed other groups and reported lower levels of cognitive load.
The results of these studies, and others like them, can back up that gut feeling you get when an animated interface just feels easier to use. It feels easier because you, as the user, have to do less work to keep track of whatâs happening on-screenâa huge advantage of well-designed animation. Of course, the results of those studies donât mean that every interface out there can be improved with animation alone. But they do prove that there is a strong potential for animation to be beneficial in the right context. (See Chapters 4-8.)
Reducing cognitive load is a big plus, but the potential brain benefits of animation donât stop there. Other studies have shown that animation can improve decision-making capabilities5 and even help people learn and remember spatial relationships.6 Helping users keep track of spatial relationships is a big plus. Spatial relationships in an interface become more and more important as you find yourself designing for different-sized screens. The limited screen real estate on smaller screens means that itâs just not possible to have every available interface item on-screen at all times. Animation can help make it clear which items have moved off-screen and where they can be found again.
Establishing spatial relationships with animation can be equally helpful for interfaces that have different content on different layers as well. It doesnât have to be limited to objects that are out of view to the left and right of the screen. It can also be more temporal and related to which layer in a stack of layers youâre currently viewing. Transitioning between the layers can help demonstrate what order the layers of the interface are stacked in and how your users can navigate between them.
Thatâs the highlight reel of academic research on animation as it applies to interface design. If you find these facts interesting, you can follow the nearly endless trail of research papers by looking at each studyâs references list. Not all of the references apply as directly to interface animation as the ones mentioned here, but they all reveal some interesting facts about human behavior and computers.
Animation Communicates
Animation adds yet another dimension to your design workâthe dimension of timeâand it communicates on a different level than your other design tools, such as type or color. Itâs human nature to assign meaning to why something is moving, based on your experience with real-world physics or by anthropomorphizing the animated objects.
When you see something move on-screen, you look for a reason as to why it moved the way it did. Did another object push it? Is it falling? Did it bounce off the edge of the screen or another object? All of those questions (and others like them) are ways you might try to explain motion on-screen based on your experience with real-world physics. After all, youâve spent a lot of time in the real world, and youâre very familiar with how it works. By looking for an explanation of the motion in the realm of what you already know, you can make what youâre seeing on-screen feel more familiar.
Physical things like gravity and friction donât actually apply to animation on a screen, but you still evaluate the movement you see on-screen based on what you know of the real world.7 This is why interface animation that reflects some aspects of the physical world feels more familiar. And conversely, itâs why interface animation that significantly contrasts with what you see in the physical world without good reason can be so disorienting or unsettling.
Sometimes, the objects on-screen can even seem like they have personalities, motivations, or emotionsâessentially anthropomorphizing these objects into characters. A 1944 Smith College study by Fritz Heider and Marianne Simmel8 found that the vast majority of participants who were shown a film of animated geometric shapes interpreted the shapes as characters and created a story to explain the shapesâ movements. The shapes we...