Home > UX and Prototyping > 4 animation patterns to try in your web prototypes
Add interactivity and improve user experience with UI animation in your web prototypes

Add interactivity and improve user experience with UI animation in your web prototypes

UI animation is no longer the novelty that it used to be. After years of being a superfluous delight in web design, animation has had a meritocratic rise through the ranks to become an integral part of web UI design. And it makes sense – humans are visual after all.

Animation helps your web design be more visually pleasing (if you use it correctly, that is) and more user friendly. So with Justinmind, let’s look at how you can use UI animation in your next website prototype and impress your users with slick animations that make UX sense.

Loading animation

This may perhaps be one of the most used animation types. Loading animations provide feedback to the user so that they know what’s going on. It’s good interaction design.

Jakob Nielsen includes visibility of system status in his 10 usability heuristics which basically means keep your users informed about what’s going on through feedback within a reasonable time – so don’t delay your loading animation, make sure it displays instantly for improved user experience.

Prototyping a loading animation in your website wireframe with Justinmind

You can prototype website loading animations quickly with Justinmind. Make sure you’re working in a web prototype, then grab a dynamic panel and drop it into the screen where you want the animation to appear. You’ll have to add additional panels and add a relevant image to each panel – as many as you like. Go nuts! We can handle it. Add interactive events and variables to give your loading animation the feel and flexibility of a real coded page.

You can also give users a textual heads up that your site is loading, by adding a text widget below the animation.

Want to give the loading animation a try? Download Justinmind and try this tutorial for size.


Download Justinmind & use UI animation in your web prototype

Download free


Hover animation

Another great way to add interactivity to your web wireframe is through a hover animation.

A hover animation happens when a user places their mouse over an element like an image and when they hover, additional information appears.

Imagine you want to create an e-commerce site with beautiful photography showing your products. A hover animation could come in useful when users place their cursor over the image to reveal the name or price of the product, for example.

Prototyping a hover animation in your website wireframe with Justinmind

To recreate this in Justinmind, add your image or text from the widgets panel.

Click the ‘hide component’ option in the properties tab of your desired element.

Create your hotspot and add the event Mouse > On Mouse Over and click Show / Hide.

Select the image you added which you want to appear during the mouse over and click the ‘Show’ radio button.

Click OK! Done! Easy hover animation complete.

Menu open/close

expand-collapse-content-UI-prototype

The opening and closing of a menu is a great place to use animation. These UI animations help to hide content until it needs to be revealed making them an elegant and practical choice for your menu open and close.

Prototyping a menu open/close animation in your website wireframe with Justinmind

In Justinmind, you can create expanding and collapsing content using  dynamic panels.

In your web wireframe, all you need to do is drag a dynamic panel onto the canvas and open the properties tab. Expanding the ‘Layout’ group of properties and select the ‘vertical’ layout type. What this little trick does is ensure the elements inside the dynamic panel are always placed one below the other.

Next add another dynamic panel into the first, select ‘Edit content’ and drag a text widget and an arrow icon into the first panel.

You should have a main dynamic panel with a vertical layout and inside of that another dynamic panel with two sub panels, the second taller than the first. From this you’ll be able to see how the elements are pushed up or down when a panel with a different height is shown.

For a more detailed description on how to do this, follow our tutorial!

Accordions

Accordions are not too dissimilar from the open and close of menus. Accordions make a great addition to your interactive wireframe so let’s show you how it’s done.

To illustrate how accordions work, think for a moment that you have a side bar consisting of 4 areas within your website design. Home, Messages, Settings and Log Out. An accordion can be placed in this side bar. Click messages and the menu expands revealing further clickable options: inbox, sent and drafts.

What the accordion effect does is allow you to put multiple panes and display them one at a time through expanding and collapsing behavior – as outlined above.

Prototyping an accordion menu in your website wireframe with Justinmind

Add a dynamic panel widget onto your canvas. Then add 3 further panels – these will be the four states of your accordion. Position them as you need but in the first panel, add an event ‘On click’ + ‘set active panel event’.  Here you can also choose different effects to the panel to make things more interesting. Repeat for all the panels in your accordion and you’re set.

There’s a video here to make things even easier.

UI animations can crop up in the most unlikely of places but they are a great way to capture attention and add user-friendly and interactive elements to your website prototype. Make sure that your animations serve a purpose and aren’t a needless decoration – animation at its heart must, as with all design, be functional and solve a problem.

download_free

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *