Makes it difficult to sell to customers. But, when used in a meaningful way, animation and motion are powerful tools that can improve both user interaction and engagement with a customer’s website. When used meaningfully, animation and motion are powerful tools that can improve both user interaction and engagement with a customer’s website. The well-executed animation isn’t as noticeable as the streamlined and improved user experience. You just need to know how to speak to it in a design-focused way. We recently sat down with Val Head, designer, frontend animation consultant, and author of Frontend Animation Design, for a Shopify Partner Session webinar, where we discussed how to use animation in meaningful ways. Val outlined four ways you can speak persuasively about animation.
Below, we discuss these strategies and how you can apply them to a new project or client presentation. You may also be interested in: Using animation to improve the user experience of the mobile application. 1. Discuss animation’s ability to provide orientation and context. If there’s one thing animation is really good at. It’s showing where things are and how they relate to the rest of Lebanon Email List a website. If your client is looking to create a responsive experience. From mobile to desktop, across many different viewports. Animation addresses the common design problem of communicating navigations or page. Elements that are not yet visible to the user. Take a look at transition animations. Which use movement to show how one object relates to another.
Create Perceived Performance
In the example below, Val’s CodePen uses a transition animation in the navigation bar to let users know that when they want to access more information about a particular item in the navigation, it’s hidden under the hover state of the icon. . See the Shopify Partners Partners pencil show/hide example on CodePen. Google offers a similar example, using animation for both orientation and context. If a user wants to change the color of his Google Fonts page, all he has to do is click on the paint bucket icon. Launch Animation in Design – Google Fonts But why is this action intuitive for users? It’s because they have the pre-existing artistic context that a paint pot represents color. Additionally, paint bucket icons are used consistently across many platforms to represent a color picker or the ability to fill an area with a pre-selected color.
With this context, users know that the color picker is inside the paint bucket icon. And they know to click on the paint bucket icon because the orientation animation has shown them that the menu exists within it. So, if your proposed project has a lot of modal layers or hidden page elements, explain to your client that using animation for orientation and context can benefit the user experience and make their website much easier to understand and navigate. . 2. Discuss animation’s ability to guide tasks, show cause and effect of user actions. Often, you will design pages that offer more features than clicking on a simple web page or brochure page. Your client’s users will actually want to do something with your client’s product.
Creating Icon Systems With Svg
Like move things, save documents, access editable information. This is where using animation to address the design problem. Of guiding users through more complicated tasks. Or to show cause and effect is crucial to creating a great user interface. Here’s another example from Google. Have you ever noticed how Google Docs uses simple animations to guide. Users through the task of moving or rearranging documents? If multiple documents are selected, they will slide together in a single stack indicating exactly how many files there are. Also, if a user drags this stack over a folder, the background of that particular folder will change, indicating to the user that they have found an appropriate place to move their documents. Launch animation in design: Google docs This helps users understand the cause and effect, or potential effect, of their actions.
