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?
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 :(
Since my persona template from wireframes.linowski.ca (2011) has been mentioned at the NUX4 conference, I thought I should share the latest and greatest version! This template has been used time and time again at Orange Bus and we’re really happy with this latest version.
Orange Bus Workshop Persona Template v3.0
Thanks for the mention !
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.
- Ensure you have a purpose – reserve it for the most important moments of the interaction
- Experiment – prototype and test out your animations
- Enhance, don’t take over – animation should never get in the way of completing a task.
Lee Duddell, Founder & UX Director of What Users Do was kind enough to take the stage at our second Northern User Experience (NUX) – Newcastle event and provide top tips on getting started with Remote Usability Testing.
Lee walked us through 10 top tips from getting started, planning a test, and analysing the results whilst providing insight from real test videos.
Top 10 tips
Other suggestions for Tip10 were:
- Test competitor websites or different sectors to find out what works and why
- When constructing a regular testing panel,watch out for testers becoming too comfortable & critiquing instead of using it naturally. We want to observe behaviour when completing a task, not listen to opinions.
- You are not geographically restricted when it comes to finding participants so can test around the world to see if their are cultural differences.
Some parting advice (Thanks @R8v3N for the photo)
Lee’s slides and full write up can be found over on the What Users Do Blog:
It’s common to see pre-checked newsletter sign ups (bad) but I must admit, this is a first for me – being made to sign up for the company’s newsletter in order to continue to checkout and purchase my items!
Also ironic that the checkout is named ‘Instant checkout’. Not so “instant” if you don’t sign up for the newsletter.
Creative wording continues when we reach the T&Cs….
Overall this was such as shame as their lovely customer service department called the next day and they couldn’t have been more helpful. So disappointing that their website is letting them down.
On the plus side this has reminded me of the amazing Google video recreating online checkout in real life.
A recent (very well researched) article for Next City explores the design decisions and testing behind the New York Subway system ticket machines and how they still stand today 15 years later.
See the full article ‘A Germaphobe’s Guide to Buying a Metrocard‘
Disney have recently introduced RFID tag bracelets called MagicBands into their parks and hotels to improve the customer experience (and obviously gain a wealth of data about their customers location and behaviour).
There’s an incredible moment of satisfaction in using your magic band for the following reasons:
- It’s a wearable – it’s novel, it’s cool, you feel like have magic powers
- You feel privileged – only those staying in Disney hotels and those willing to pay for a magic band are in your elite group.
- The suspense – when the reader is checking your band, you see the Mickey circle spin and there’s always that moment of doubt that crosses your mind that you’ve made a mistake, it’s not your time to ride Big thunder mountain! Then it turns green and you feel marvelously triumphant!
Watch this video for a very long (but detailed) demo of most the things you can do with a Magicband.
Photo thanks to: http://allthingsd.com