By Alice G Herbison, User Experience Designer
Examples of poor user experience design are everywhere - but what makes websites or services excel or even delight during use?
When we think of UX, it’s often wireframes that spring to mind. Yet, they are just the skeleton of a much wider aspect of strategic thought. At Blonde, we see user experience as part of strategy - we create experiences that satisfy user needs while also serving business purpose. UX must be woven into every aspect of a digital entity and integrated throughout a customer’s journey across different channels and devices.
Peter Morville has previously discussed seven facets of user experience design (useful, desirable, valuable, usable, findable, credible and accessible) that products or services should be ‘viewed’ through and qualities that they should have.
In this post I explore a few digital and physical products that are good examples of some of those areas:
accessibility - rnib.org.uk
findable and useful - the BBC’s travel incidents map
findable and desirable - compass.com
usable - Happy or Not rating service
valuable and credible - The Guardian’s immersive storytelling
With each one, user experience has been enhanced through good, well-thought-out design.
Let’s take a detailed look.
1. Accessibility: Royal National Institute of Blind People
We can hold the RNIB website to a gold standard of accessibility, especially in terms of the way it is designed for users with sight loss. There are three things the website does well in terms of general accessibility best practice that are worth implementing, or at least exploring further, if you haven’t done so already in website development.
Helped by its responsive design, all menus, images and text can be enlarged while retaining their layout and spacing. This helps improve readability and understandability of content if browsers are set to enlarge the page, or if the user uses a zoom tool to read parts of it.
B. Links are indicated by both colour and underline
Colour should not be used as the sole indicator of an action, information or feature. In this case, RNIB ensures text links are a different colour to initially distinguish them from surrounding text, but are also underlined to add emphasis and prevent users with colour vision difficulties missing where links are.
C. Images that are for illustrative purposes do not provide any content in their alt attribute
As detailed in their accessibility statement, decorative images are not described through alternate text to render them ‘invisible’ to a screen reader. Images that convey information benefit from an alternate description to explain their content, but it’s not necessary for classic ‘stock’ or illustrative images.
2. Findable and useful - Map information visualisation: BBC Travel
The BBC Travel page design provides a map-based view of traffic incidents such as roadworks and accidents within designated regions.
As well as being an incredibly useful resource, its display of information and the sidebar functionality make understanding the location and other aspects of incidents straightforward and immediate.
Why is it good UX design?
Consistency, and using ‘roadsign’ similarities to connote road numbers and type of incident.
It separates ‘Incidents’ from ‘Roadworks’ so the sidebar isn’t crowded with items of mixed gravitas, and ensures that whatever the hold-up is, even if you’re viewing on the sidebar and not the map, you can understand where it is from the text description, a feature likely useful for locals who know the roads and are then able to build a mental picture of the situation.
The whole dashboard fits a lot of vital information into a small space and does so elegantly. Tabbing between other modes of transport also reveals train and tram congestion, albeit in list form.
3. Findable and desirable - Emotional design and map layout: Compass
Compass.com is a US estate agency and property listing website. A recent re-branding seems to have led the website design in a sparse but very functional direction. Being naive and impressionable, and fairly unversed in the ins-and-outs of buying and selling property, I’m in a good position to objectively explore their listings and try to understand what to do if I’d like to put an offer on one of these properties.
The website lists some of the most beautifully expensive and stunning houses I’ve ever seen. At first I thought I had landed on a fake website (during my fake property search), or a demo site full of stock imagery of show homes, they’re that nice.
A site where a large background image truly is a magnetic selling point.
The copy is also consistently well-written too - I feel very looked after already.
Upon further exploration, it’s evident I’m in the wrong country blindly not achieving my property dreams. I’ve never seen a house like this in Scotland. We have tiny bungalows and a lot of tenements, and the occasional freezing cottage perched in a field. I’m sold, I want to buy this 6-bed, 8.5 bath townhouse in New York right now. I can see myself in that living room. Look at that fireplace. Look at that exploding bauble chandelier. I’ll figure out the immigration details and where I’m going to find a $16,850,000 mortgage later.
Compass.com is littered with subtle design techniques that create a very powerful user experience. The highly professional imagery (used for every property - nothing low-resolution appears on the site) plays on human nature: design that evokes emotion through a strong, beautiful aesthetic is going to leave you with an overall extremely high positive impression.
In this case, high-quality imagery plus perfectly web-written copy grabs your materialistic impulse and doesn’t let it go. Joe Leech’s amazing talk on why emotional design works is a great place to start if you’re looking for an introduction to understanding how psychological principles can help you create a compelling interface.
Let’s also take a look at their map ‘dashboard’ - a classic design pattern for exploring locations that’s used on a pretty much all property websites, aided by Google maps integration. So what does Compass do that sets it apart?
I’m pretty certain now that I want to find a property in New York, and am vaguely aware of the neighbourhoods, having been stuck browsing this site for sixteen consecutive hours now.It’s easy to see the choice - the pinpoints group the number of properties on a street - and selecting a pinpoint brings up a modal box listing out the properties on that street and their vital information.
On top of this, selecting a property lets you explore more photos of it before clicking to view the full listing, meaning you don’t lose your place when browsing the map.
Further out, the pinpoints become density circles.
They turn an otherwise overwhelming view into something more manageable.
Whether you are interested in buying US property or just have time to kill your dreams with a cup of tea, it is worth exploring Compass.com for the beautiful UX design.
4. Usable - Ease of use in the physical world: Happy or Not
Happy or Not provide physical button-based customer satisfaction capture. These are small stands placed in or around public/private services and high-footfall areas to encourage users to give feedback of their experiences.
Airports, for example, use Happy or Not to capture feedback after travellers go through security - a process which can be stress-inducing and has the potential to aggravate even the most ‘zen’ of people.
Aside from providing useful analysis of the data, it’s the information-capturing process that makes Happy or Not very strong in terms of UX design. It’s kept as simple as possible - a one-hit button that’s coded through four eye-catching smiley faces ranging from happy to, well, not - encouraging participation in environments where time and mental capacity are at a minimum. And helping to take your stress out on an inanimate object, if you wish.
5. Valuable and credible - Immersive visual storytelling: The Guardian
The majority of Guardian articles are fast-access, quickly consumed pieces of journalism, often read on mobile or through their app.However, some features are presented full-screen, with videos and interactive statistics that encourage the reader to pause and consume the information at a much slower pace.
The designers and editors also use other modern elements of web technologies to bring more interactivity to the page as the user scrolls, encouraging involvement and discovery of the data. Videos play automatically, photographs are large and affronting and tables and maps can be explored - all within a consistent visual design within the boundaries of the Guardian’s brand.
Interactive storytelling as a technique for features is becoming more and and more common, with the New York Times frequently exploring current issues in more visual and gripping formats. It heralds a new way of using the web to enhance user experience of what in the past was static, paper-based information.
Finally, if wider service UX design is of interest, I would recommend reading a recent Fast Company article about the roll-out of Disney’s Magic Bands - the wristbands used in Disney theme parks for payment and ‘check-ins’. It is a superb description of how much time and effort is required for designing and implementing wide-scale UX.
The best design is always invisible
Overall, the websites and products discussed above are only a handful of examples where the thoughtfulness of different design elements has ensured a strong, cohesive user experience.
The best design is always invisible; as we continue towards the integration of technology and digital environments with the physical world, it is good user experience at the very heart of a product that serves to create this seamlessness.
It should not be overlooked.
If you enjoyed this post, make sure you come back for Episode 2 - I’ll be exploring more design examples that excel in other combinations of Peter Morville’s facets of user experience design.