5 Areas in Web Design Where Using Subtle Animations Makes a Big Difference

Small Changes to these 5 areas of website design make a big difference in usability -Oneupweb BlogWhen we hear the word “animation,” we have a tendency to think of big, sweeping imagery, big-budget parallax design or a huge video background. But the term “animation” can mean a variety of things in web design. Sometimes it refers to the small stuff. Visuals so subtle, you don’t even realize you’re looking at something animated.

The current trend in web design involves the use of minimal transitions and effects on elements and experiences such as navigation, scrolling, buttons, page transitions, images, and more. This trend exists for two good reasons: user experience and a more complete sense of atmosphere.

Small transitions and animations make the process of traveling through a website less jarring with the use of smooth sliding, fading, resizing effects. These same effects can be used to create a complete atmosphere throughout the site that can emphasize anything from energetic playfulness to smooth elegance. Minimal transitions make interaction with a website less jarring, less tedious, much friendlier and (dare I say it?) more enjoyable.

Are you ready? Because here are several ways you can add minimal transitions to five areas to make a small website feel big, and a big websites feel intimate:

1. Navigation & Menu

A website’s atmosphere is determined by consistency from one element to another.

Navigation, which is omnipresent, gives users the first impression of your website’s atmosphere and experience. Using smooth transitions from hoverstate to dropdown to internal page means telling users from the start that their convenience is top priority.

Hover States example

Hover States Hover states are the first step to creating atmosphere and a smooth experience. A slow, soft fade from one color to another creates a calm feel. A fast, diagonal slide transition from white to full color is energetic and snappy. A border that transitions to simple top-and-bottom lines implies elegance and cleanliness.

Example | Creative Link Effects: http://tympanus.net/Development/CreativeLinkEffects/

Dropdowns Dropdown menus have a tendency to disrupt the website experience, simply because they cover the important elements of the page. Usually this is intentional, the dropdown needs to be seen and should become the primary experience over the rest of the page. The problem is that this is jarring and disruptive. Dropdown animations solve this problem by drawing attention to the new primary path in a gentle and inoffensive way.

dropdown menu example

Example | Horizontal Slide Out Menu: http://tympanus.net/Blueprints/HorizontalSlideOutMenu/#

Responsive Menu Also referred to as a “hamburger” menu button, this method condenses all navigation into a sidebar under a single button that opens up real estate for content and plays nicely with small mobile screen sizes. These buttons often need effects that will capture user attention.

Example | Google Nexus Website Menu: http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/

“Big Entrance” Another example of the responsive menu button, but with an emphasis on making on entrance. These are just a few ways to help a condensed menu capture the user’s eye.

Example | Sidebar Transitions: http://tympanus.net/Development/SidebarTransitions/

2. Buttons

Buttons are our primary way of calling a user down a preferred actionpath. These small elements are all-important in website travel  so giving them a sense of weight and interactivity goes a long.

example of a button state

 Hover States The atmospheric effect of hover states applies to buttons as much as it does to navigation. Extend the feeling created by your navigation into your button hover states to create a complete environment.

Example | Creative Buttons: http://tympanus.net/Development/CreativeButtons/

3. Forms

Let’s talk about forms. Forms are a tedious awful chore that no human being in their right mind actually enjoys. It’s the ugly, ugly truth we must all admit. The whole experience benefits exponentially from a smattering of animations and transitions because it makes a form feel less severe and overwhelming. Some ways to apply animation to your forms include:

progress bar example

Progress Markers Forms that look big feel tedious. Visually condensing input boxes increases the likelihood that users will interact with the form. The dilemma stems from the fact that condensing a form means you’ve sectioned off content, previously leading to page load times. Progress animations and transitions mean avoiding long, jarring page loads.

Example | Minimal Form Interface: http://tympanus.net/Development/MinimalForm/ 

Non-Loss Transitions Have you ever been halfway through an extensive checkout process, only to realize you need to login and can’t remember your password? This is a widespread problem across many websites. Small links like “Forgot your Password?” are risky clicks. Employing an animation that transitions from one pop-up to another then returns to the old with no lost information goes a long way to instilling trust in your user.

Example | Animated Form Switching: http://tympanus.net/Tutorials/AnimatedFormSwitching/

loading state example

Loading Bar Load time progress bars have become more prominent through the years. Loaders let visitors know that they’re being acknowledged, that the site hasn’t frozen or otherwise crashed, and that content is to come. They prevent reloading the page or simply clicking away due to inactivity. When used for form submit buttons it can reduce cart and RFP abandonment.

dropdown example

PSA: Loading Time for Form Submission = GOOD! Loading Time for Entire Website = BAD.

Example | Progress Button Styles:  http://tympanus.net/Development/ProgressButtonStyles/

Single Input Dropdowns Individual inputs need love, too! Here are a few ways to make form dropdowns and input boxes a little more fun to interact with.

Example |  Custom Select Elements: http://tympanus.net/Development/SelectInspiration/index.html

4. In-Page Scrolling

Sticky Menu This is when a menu locks onto the top of the screen and follows as the user scrolls. This means the menu is available at every point on the page, giving the user a greater range of movement and access. Additional animation styles can be applied to the experience, including shrinking the header as the user scrolls further down the page, rearranging and shrinking the logo, or reducing to a responsive menu.

Example | Header Effect: http://tympanus.net/Development/HeaderEffects/

5. Pop-ups & Notifications

example of a popup item

Notifications By nature, notifications are either obnoxious or impossible to spot. Animation effects can find the middle ground called “Eye catching, but not overbearing.”
Example | Notification Styles:  http://tympanus.net/Development/NotificationStyles/index.html

Pop-up Animation Also called “Modal Windows,” these are disruptive to an experience either because they interrupt the user or because they jarringly “appear” an indeterminate time after interacting with the button. Animation smooths the transition from one experience to another, and reduces a sense of “waiting” after click. If pop-ups are a prominent element of your website, applying a transition can make for a much friendlier experience for your user.

Example | Modal Window Effects: http://tympanus.net/Development/ModalWindowEffects/

In the grand scheme of a website, none of these areas are big. They’re not the full-screen video background, or the sweeping page transition. They’re buttons. And forms. And a loading bar. They’re the small pieces of your website that users interact with non-stop, whether they like it or not. Adding an element of delight to these every-day areas creates a welcoming experience that is easy, enjoyable, and smooth. Repeat visits and fewer reported problems will follow.

So you’ve seen animations working in demos, but what about in the wild? Here are a few websites that get animation right:

  1. http://www.vw.com/
  2. https://squareup.com/
  3. http://carlaine.com/en/
  4. http://www.nike.com
  5. http://www.jambajuice.com/
  6. http://hey.im/
  7. http://outdatedbrowser.com/
  8. http://www.mailboxapp.com/

Get our Free Guide to Planning Your Website Redesign. Download Our Free White Paper Today.
(Demos Credit & Source: Tympanus.net | Codrops Playground)