Chapter 6. Using Motion for UX

In digital design, it is becoming more and more common to include animation or moti0on design as part of the UX. It’s a stylish detail, but in UX, you care about more than style. Motion is a tool.

If Motion Makes People Wait, It’s Bad

Before you start designing amazing transitions between screens, and smooth animated buttons, and parallax gravity in your scrolling, think about the user. If the user is trying to navigate, or if they know what is coming, or if they have to see this animation a hundred times every time they use your site or app, you might be doing more harm than good.

Animations take time to show, and making users wait quickly gets frustrating. Even worse than waiting, sometimes animations make things hard to read, or they distract users from the content and buttons you want them to read and click.

Motion Is Noticed First

If you have ever been disturbed by a vibrating banner or a jumping button, then you understand how motion can draw your attention. If you made a list of the things your brain notices, in order of priority, motion would be first. But, a little goes a long way. If you make a vibrating banner or a jumping button (which are really annoying to click, by the way) I will hunt you down and... well... let’s just say it won’t be pretty.

Straight lines point in a direction

Different types of motion will do different things to the user’s eyes. If you make something move in a straight line, the user’s brain will anticipate where it’s going and the user will look at the “end of the line.” If you are using motion to highlight key features or tell users where to go, straight lines are a good choice.

Curved lines make people follow the curve

However, if you want to lead users around the screen—like when you’re explaining your app for the first time—curved motion will make their eyes stick to the path and stop where the animation stops.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.120.206