As mentioned above, including motion on your website is a great way to guide your user to what you want them to do, engage your user to hold them on your site for longer, encourage them to share the site with their friends, and also create a memorable, lasting experience in your users’ minds.
Here are some key ways that a website design agency can add motion:
HOVER
Add motion to elements when a user hovers over them.
PAGE MOTION
Add slight movements in the entire website to add a feeling of excitement. Animations like this should be unobtrusive – don’t let motion distract from what you want your user to actually do on your site.
SCROLLING
Animate the page as the user scrolls with techniques like parallax which uses multiple backgrounds that move at different speeds to create a feeling of depth.
BACKGROUNDS
Create dynamic backgrounds that subtly animate behind your core website elements. Again, be sure to keep the balance between compelling content and distracting content. A dynamic background shouldn’t make the overall UI and UX design look heavier.
LOADING
Incorporate animations to counteract loading times and avoid irritating users (check out our article on site speed to learn why this is so important). By entertaining the user while information is being loaded, you can create an illusion that loading time is shorter, as well as reassure the user that the system is still handling their request.
ATTENTION
Add motion to key parts of your site that you want users to see. For example, sign up forms, CTAs, links to pages you want to guide them to, chat bots, promotional pop-ups.
TRANSITIONS
Hard cut transitions can be too fast, clunky and frustrating for users. Animation allows you to bring in new information more subtly and softly, creating a better viewing experience.
PRESENTING INFORMATION
Motion can help you present lots of images or sections of copy without interfering with the UX. Animations can also help demonstrate products and services or processes without having to add reams and reams of copy.