Spotted what I thought was an amazing offer the other day on the Guardian :
Turns out it was €1 per child – and children under 4 don’t pay anyway. Thanks for nothing Eurostar!
Eurostar – please don’t use misleading advertising, it damages your brand
Lazy Eurostar confirmation message with 12 conditional clauses
I just chose my seats for a trip to London – but despite the Eurostar site knowing the exact number of seats, passengers, and journeys involved, it was too lazy to show an appropriately worded confirmation.
Instead I got this laborious message with 12, yes 12! conditional clauses (emphasis mine) :
Votre attribution de place(s) est confirmée.
Merci d’avoir choisi une/des nouvelle(s) place(s).
Nous avons émis un/des nouveau(x) billet(s) pour vous : si vous aviez déjà imprimé votre/vos billet(s), merci de le(s) jeter et d’imprimer le(s) nouveau(x).
Not good enough Eurostar!
Sean Bean error message
This cinema app from Allocine injects a bit of humour into an otherwise humdrum error message. Quite appropriate really, since Sean Bean is known for his bad luck…
Forcing function on door stops you forgetting your bags
Placing the bag hook on the door frame means that you have to take your bags before you can open the door, so you’re unlikely to forget them – a neat forcing function I spotted in a shopping centre toilet.
Playing Top Trumps with UX
Do you remember the card game Top Trumps, where you beat your opponent’s hand with a card that outranks it in some capacity?
Well, in UX you can play a version of this where instead of carefully crafting the visual weight and placement of each element in your design to take into account the relative importance of each function, you just slap a big red button on the page, cos that just about trumps everything.
Usually it’s done as a joke, as on Maplin’s page here (they’ve since changed the design):
But Kim Dotcom’s new site Mega has the biggest big red button I’ve ever seen – and there’s not even anything else on the page! Well I suppose it was done to match his personality, big, bold and in your face.
The only time when I think it’s appropriate to have a big red button is for recording applications – there is a long history of red buttons to activate recording on real-world audio or video equipment, so it makes sense to mirror that online. Also, when the moment strikes, you need a large target to hit so you won’t miss a thing.
Severity ratings for usability reviews
A quick reminder of severity ratings – these ones are adapted from ‘Usability severity codes’ in Usability & Technical Documentation, Xerox Corporation, July 1995.
One point to remember – if you are developing applications for internal use in an organisation, you can often downgrade the severity of issues as there is no competition if users get annoyed – they are forced to use the application. Instead you should probably focus on issues that are causing productivity losses that hit the bottom line.
1 – Critical
An emergency condition that causes the customer’s system to fail or causes customer data to be lost or destroyed. A showstopper usability bug can also be one that is likely to cause frequent data integrity errors. There is no workaround to these problems. A key feature needed by many customers is not in the system.
2 – High
A serious condition that impairs the operation, or continued operation, of one or more product functions and cannot be easily circumvented or avoided. The software does not prevent the user from making a serious mistake. The usability problem is frequent, persistent, and affects many users. There is a serious violation of standards.
3 – Medium
A non-critical, limited problem (no data lost or system failure). It does not hinder operation and can be temporarily circumvented or avoided. The problem causes users moderate confusion or irritation.
4- Low
Non-critical problems or general questions about the product. There are minor inconsistencies that cause hesitation or small aesthetic issues like labels and fields that are not aligned properly.
Google Wallet email looks like a phishing attempt
I just received this email apparently from Google asking me to update my some of Google Wallet account details. Turns out that’s it’s genuine, but why did they make it look so much like a phishing attempt?
There are 3 classic signs:
- The subject line doesn’t have my name in it: “Important Information about Your Google Wallet Account”
- It has a generic introduction also without my name “Dear Google Wallet user”
- It then asks you to hand over some personal data by clicking on a link: “Please visit your Google Wallet account settings page and update your information…”
Most online scammers don’t know your name because they don’t have a genuine relationship with you, so this is reason enough for all companies to print their customer’s name in emails. That way people will notice the emails quicker and have more trust in them.
Google knows my name, why didn’t they use it?
Good UX should bridge the divide between online and offline worlds
User experience (UX) is a convergence of many disciplines. It goes beyond making something just easy to use or visually pleasing, but looks after all the aspects of a person’s interaction with a product or service – and most importantly, how they feel about using it.
All these forces need to work together to present the customer with a harmonious and consistent experience, so that if the brand sells simplicity, the software really should be easy to use, and this will reflect back on the brand and re-enforce its message.
A bridge too far for Orange Mobile
When this harmony breaks down it damages the brand, and the emotional aspects of the user experience like trust. I’ve noticed this several times with Orange the mobile phone company – when I subscribed to a mobile plan via the Orange website, everything worked fine, but when I had a question about my handset and went into my local Orange shop to ask advice, they said “bought it from the website? Nothing to do with us”, and turned their backs!
Now, Orange went to a lot of effort to make the visual branding of their website, shops and printed marketing identical, so as a customer I’m thinking Orange is Orange no matter where they are. Unfortunately their internal business structure and customer service procedures don’t reflect their brand message, which means my user experience is very inconsistent and they seem like a less credible company.
I changed provider at the end of my contract…
Widget for impatient readers
This little flag tells you how much time left to read till the end of the article. I don’t know if it’s pandering to people with low attention spans, but I like it anyway. See it in action here: http://informationarchitects.net/blog/responsive-typography-the-basics/.
Icon design with useful redundancy
Back when my old company was still using Windows 2000, we needed a way to let people know if email was down or if the Blackberry service was due for maintenance. Sending an email every time was deemed too spam-like so management ask me to design an icon to be displayed in the Windows taskbar on every employee’s computer so they could see at a glance if there were any problems.
The icon would communicate the following states:
- Everything is OK
- There are problems with one or more minor systems
- There are problems with one or more major systems
Clicking on the icon would lead to an existing page on the intranet which showed the status of each IT system:
Analysis
Step 1 – Eliminate any unnecessary design constraints
The head of the IT department strongly suggested using a traffic light symbol as it was already used on the status indicator page. I argued that although visual consistency was usually a good thing, in this case it would force us to use at best only a third of the 16 pixel icon to show the state and it would be quite hard to notice at a glance.
Step 2 – Uncover any constraints that the client hasn’t thought of yet
If everything is working fine right now, you don’t need to be told about it, so the ‘everything ok’ state should be quite neutral and unobtrusive. There is also a slight issue with the red/amber/green metaphor – true amber wasn’t available in the 16 bit colour palette used for Windows 2000 icons. I tried dithering yellow and orange together to get close to amber but it only made the icon look muddy. However I predicted that yellow would be understood just the same in context. Finally we needed a 4th state to indicate when no information was available.
Step 3 – Understand how the client likes to work
Sometimes there is a difference between what the client wants and what they need, so you have to choose a suitable negotiation strategy to close that gap. Some clients are satisfied with an explanation of the design theory behind the issues, but sometimes they prefer hard evidence, as was the case with amber vs yellow – so I let the user testing results convince them later on.
Initial ideas
I experimented on paper first with indicators based on various metaphors including ‘Container’ and ‘Progress bar’. I also worked with the traffic light idea a bit more in case I could find a compromise for what the client wanted initially. To keep things simple, I applied the colour coding from traffic lights to all the ideas:
- red for strong warning (problems with one or more major systems)
- yellow for mild alert (problems with one or more minor systems)
- green for all systems go
Prototypes
I drew the icons in their target resolution to see how they would fit in the taskbar, but most felt unsatisfactory – it’s not clear what information they were trying to convey. Quick 5-second recognition tests around the office confirmed this.
Finally I settled on the traffic lights metaphor but crucially I showed only the actual relevant light maximised in the 16×16 pixel icon space. It was an extra abstraction but one that kept some visual consistency with the traffic lights on the status page.
User testing phase 1 – Failure
I did another round of 5-second tests – I showed people colour mockups of full screens with the icons in the taskbar and asked them what they meant. Most people understood what each colour represented and that they were something to do with IT services. However, when I tested in black and white, almost no one was able to tell them apart. The colours alone didn’t convey enough information and may have been confusing for colour-blind employees or people with badly calibrated monitors.
Design tweaks – added redundancy
I thought for a while how I could improve the design and then I remembered this 2 Rupee coin I’d seen while on a trip to India. Using redundancy in design is vital when conveying critical information, so I added features that would help the meaning survive the shift to black and white, bad monitors, or bad eyesight. The results were icons that communicated in 3 channels – colour, contrast, and symbol.
User testing phase 2 – Success
I showed black and white printouts to people and record their first comments – most people now correctly worked out the meaning and hierarchy of the status icons within the 5 second time limit.
The green icon didn’t elicit any any particular significance from people but it didn’t matter as I identified in my analysis – when things are working you don’t need to be told about it, you already know. The light exclamation point against the red icon had a bolder contrast than the dark exclamation point in the yellow icon so people understood that it represented a stronger alert, and so their interest was piqued enough to click on it, which would bring up the full information seen in the status page above.
Final working design
Having seen the clear-cut results of user testing, the client was happy and the icons were packaged up in the next intranet update going out to over 5000 users in 16 countries.
