Transformicons – more than meets the eye

A design UI element you may have noticed are what one website have cleverly dubbed ‘Transformicons‘. These are animated icons, symbols and buttons using SVG and CSS which have the potential to enhance the customer experience. When animation is used with a clear purpose, not just for aesthetic purposed it can be used to draw attention to areas, provide cues, and enhance interactions.

When cues are given then there is the risk of the user experiencing ‘change blindness’ – it’s not clear what has changed on the page and worse it may not be clear that the users action has had any effect leading to a negative experience.

Bit of fun – Test your change blindness

There are two areas where animation such as ‘Transformicons’ can enhance the customer experience:

1. Do I have your attention?
Designing for realistic experiences means accepting that we may not have the user’s undivided attention as they interact with our product. They can be using a multitude of devices in a multitude of environments; on the bus, watching TV with a 2nd screen experience or simply distracted.

Animations such as Transformicons aren’t going to save the day in every instance but considering micro interactions more carefully within a design can help direct the users attention. A popular example of Transformicons are the mobile hamburger menu transitioning into a cross to close the menu, bringing this new Call To Action to the users attention.

Making-a-SVG-HTML-Burger-Button

2. A premium experience
When designing screens/views in isolation it is easy to neglect the transitions between screens, UI elements which appear/disappear on the screen, down to subtler elements such as the hamburger menu. By carefully considering the transitions between onscreen changes we discover opportunities where small, subtle animations can provide an overall more professional product which is a pleasure to interact with.

Taking it too far

If we were to animate every single onscreen change or navigational page change in a given experience, we’d end up creating a frustratingly slow and overwhelming experience.

Tips:

  1. Ensure you have a purpose – reserve it for the most important moments of the interaction
  2. Experiment – prototype and test out your animations
  3. Enhance, don’t take over – animation should never get in the way of completing a task.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s