This form makes me want to cry…

Screen Shot 2016-04-29 at 17.02.12.png

To name a few problems…

  • It has a title field which is only useful to Daenerys Targaryen (Daenerys Stormborn, the Unburnt, Queen of Meereen, Queen of the Andals and the Rhoynar and the First Men, Khaleesi of Great Grass Sea, Breaker of Shackles, and Mother of Dragons.)
  • Enormous fields bigger than the data you would enter don’t stop there – every field allows you to be excessively descriptive – whoo!
  • Flat number isn’t required, so if you live in a flat – it’s ok. A postman can just guess your door based on your unique and cool name Khaleesi, Queen of the Andals.
  • District? Are we in the Hunger Games?

Screen Shot 2016-04-29 at 17.33.51.png

  • Country dropdown only has one option – so why are you asking for it?
  • Just to make sure you’re paying attention, the password field and confirm password don’t follow the same pattern of being side by side as the email field above.
  • You may have to loose a finger to register for this website or understand illiterate Yoda speak “Your password must contain at least one each of: lower case letter, upper case letter, digit and be between 8 and 20 characters”
  • Is confirm email and password really needed? If you’re that bothered about this website you’ll take the time to ensure these details are correct.
  • …Don’t get me started on “Tick here” or the smallest “Register” button you’ve ever seen.

Screen Shot 2016-04-29 at 17.35.01.pngBonus: If you do wish to view the T&Cs you get a lovely overlay and a hidden link to find the T&Cs – which then takes you to a missing page!

Bad usability: When an important call to action is ‘hidden’

It’s a busy day, you click on a link to a survey you know you need to complete. Your heart sinks as the first page appears and 10 not so simple to answer questions appear, and you know there are even more to go judging bynthe progress indicator.

You persevere. Your New Year resolution is to stop procrastinating and to just get on with things. Over 20 minutes in, your phone vibrates. It’s Jenny, “are you nearly at the cinema?”. Oh no! You haven’t left the house yet. Do you leave the page open and hope you don’t loose your progress or is there another way? Whilst putting your coat on and texting Jenny back (totally lying saying “on my way”) you half heartily search the page for a way to save your progress.  You run out the door never knowing if that 20 minutes of effort will be wasted as the page could time out, the power may go off or the cat could sit on your keyboard while you’re away.

It was there all along, but why did you miss it?

bad link usability example

The action to save your progress is quite ‘hidden’ on the page. I don’t mean in a white text on a white background kind of way, but hidden in this long sentence. The placement of the action is not necessarily wrong, it’s near the primary action to “Continue” so you’re already looking in that area. However, at a glance the text can be assumed to be some sort of T&Cs text which you’re not searching for so your amazing brain spam filter tells you to ignore it and not read the text. As you scan the page looking for a save action, your brain also looks for visual queues and patterns to help find clickable actions. There is no link style applied to the action so it’s impossible to know where to click or to recognise this as an action when scanning the page.

What should it look like?

Adding a link style such as a clear underline on the action would be a start but really the action never needed to be a convoluted sentence in the first place. A simple “Save your progress” button or styled link would have helped more people. It also didn’t need the action “click here” applied to it as the use of a verb combined with the styling communicates that this is a action.

What might this do for survey completion?

You get back from the cinema quite late, you realise the page timed out while you were away so you go to bed annoyed that you wasted all that time. If you’re still motivated enough to go back and start again the next day, are you going to be in the right frame of mind to give the questions the same consideration as you did previously? Very unlikely unless the reward/motivation is high enough to encourage you.

Or quite likely, you wouldn’t come back and your valuable feedback/information would never be shared 😦

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.


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.


  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.