Posts Tagged ‘UX’
5th November 13
One more in a series of tech columns we’ve written for Marketing magazine this year. This article by Adam on flat design appeared in the September issue.
Author: Adam Powers, Head of UX, BBH London & BBH Labs
Sir Jony Ive revealed his vision for Apple’s iOS7 operating system on September 10th, and the SVP of Design’s vision of the world is flat.
This redesign is about more than just eradicating embossed buttons and drop shadows. In typically thoughtful mode, Ive declared, “True simplicity is derived from so much more than just the absence of clutter.” For the first time in perhaps a decade though, Apple is joining a movement rather than creating one.
The flat design movement has been gaining momentum amongst technology companies for some time now. Looking back, it may well have been Microsoft Windows 8 design team that pushed things past the tipping point. They created a crisp, clean and minimalist approach where geometric shapes, bold colours and sharp corners dominate the rather nice operating system. The next flat design fans were Google, with their new aesthetic applied across a dramatically improved suite of applications (Google Maps, I adore you). Then came Yahoo’s elegant weather app, but many others have followed.
Like many art and design movements, flat design was a reaction to the dominant aesthetic that preceded it. Skeumorphism – the approach that borrows affordances from a user’s day-to-day life and translates that to screen-based design with the aim of aiding comprehension. All that stitched leather, aqua shine and drop shadow of the past few years was borne from that belief. It goes back further, to the days of WYSIWYG computer desktops where the workplace norms, such as files, folders and trash cans, were employed in the language of the operating systems to help us comprehend and participate in the desktop computing revolution.
Fans of this flat aesthetic, ahem, cite this change as a sign of the maturity of human and computer interaction. Our interaction with technology no longer needs to be disguised to make it more palatable. Flat design embraces the constraints and challenges of screen-based design and runs with it. Minimalist and utilitarian design that foregoes excessive ornamentation and is sensitive to bandwidth and functionality.
Before I get caught up in adulation of this latest expression of modernism, we should pause.
It would seem that flat design might come with risks. That (once?) esteemed voice of digital usability, Jakob Nielsen, has undertaken extensive user testing focussed on everyone’s must have tech – the tablet. After testing on a whole range of fondle slabs, Jakob concludes that flat design is not optimal for tablet devices. It would appear that the absence of hover-states on tablets, combined with departure of drop shadows and the ‘less is more’ conviction of flat design, means there is “…a dearth of distinguishing signifiers for UI elements.” i.e. It is harder to intuit what is and is not clickable and therefore things are harder and less satisfying to use.
This presents a very specific challenge, but I would suggest that there are a couple of wider reaching challenges that face the flat design movement.
The first is the ever present spectre of commodification of the web. Look at the search returns page on Google, the tightening embrace of iOS and Android design guidelines or the increasingly far-reaching rules for brands on Facebook or Youtube – it’s just getting harder for brands to cut through on tech platforms and services. Though the folks at YouTube etc. might argue that brands should focus on the quality of their content rather than the ease with which they can spray their colour palette across their respective brand channels. Either way, the flat design movement does appear to be at risk of further contributing to the commodification situation.
The second challenge that I see is that much of the impetus behind flat design is from Europe and North America – where there is long history with Modernism.
What does a critical market like Asia make of flat design, for instance? A Hong Kong based expert, working at the juncture of global marketing and technology, advised me, “Whether you’re considering ux design, user testing or anything else for that matter, you mustn’t think of Asia as a single market. China is as different to Japan as it is to Australia…and each has quite a different relationship with technology…”
Actually, one doesn’t have to look too far for some quite specific insights. This Tech in Asia blog observes that in China, Vietnam and Thailand, flat design may frequently be interpreted as overly austere or ‘…a lot of hot air…” It also proposes that for many of these commercially important markets, it is in fact ‘crowded design’ that performs best.
Somebody better tell Jony.
9th August 13
We live for our holidays, and yet sorting them out has become a self-service chore. So it didn’t feel right to just tell people that British Airways *do* holidays, we wanted to deliver on their brand promise to serve, by creating an experience that actually helps people to plan their perfect break.
We talked about how holiday planning begins with a picture in your head, and it’s these images that resonate emotionally – when people pick up a guide book they go straight for the photos pages. This made us think – wouldn’t it be good to make a tool that stimulates the senses and imagination, helping you plan your holidays with just your eyes?
Coming up with the idea of choosing your holiday through pictures was relatively quick, but the biggest challenge was executing it in a simple, functional and pleasing way. We explored a few options with different levels of interactivity. One involved asking people a series of visual questions, another was a sort of ‘paint by numbers’ – but both these seemed to add an unnecessary layer onto a very simple idea. This exploration made us realise that we should use as few words as possible and make the most intuitive experience we possibly could.
The tool simply needed to read image choices, then suggest bespoke holiday options to match. This felt like a new way to inspire and buy a holiday in itself. And that’s where the name came from: ‘Picture Your Holiday”.
The soul of the experience was always going to be in the animation and interaction – no amount of beautifully designed stills could bring it to life – so in order to ‘see’ this we had to prototype the build. Moving quickly to prototype gave us a number of advantages – it helped focus the team, which unearthed the key interaction challenges very early on. This proved to be cost effective and allowed us more time to really think hard about solutions.
We were able to explore the tool across mobile and tablet simultaneously, adapting the development branch so that each was optimal but largely from the same code base. Which in turn meant the interactive six sheets at Westfield are essentially running the same version of the tool that works in your browser. Added effort early on made for a much more effective roll-out towards the end of the project.
There was also a great sense of excitement at the point where we shared it with the client, they could see for themselves the simplicity and delight in the idea. We were then able to do real world guerrilla user testing with the prototype to get feedback and roll it into the iterative dev cycle. Several recurring key findings changed our approach, one of those being the labelling of buttons.
As the prototype evolved into what would become the final tool, parallel activity to develop ‘campaign ideas’ were set aside. We realised that the product WAS the campaign and the concertina of beautiful images would become the key visual for all communications platforms.
Behind the elegant interface is a data driven system for all device types. We created a spreadsheet of attributes for each destination and then assigned a value to each. It was then exported as a JSON file, means that the whole thing can still be updated easily, should BA wish to add new holiday destinations, by simply deploying a new file to the cloud.
The end result is something which feels elegant, inspiring and fun to use.
26th June 12
Great brands have long understood that providing customers with enjoyable, differentiated user experiences is critical to winning their loyalty. Walk in to a Waitrose supermarket or Kohl’s store and there’s no comparison to a Tesco or a kmart from the layout of aisles, to the attitude of the staff to the products they do and don’t stock.
‘Screen’ UX offers brands a whole range of new opportunities to really deliver on their promises and strengthen their customer relationships. But too often this is a missed opportunity, we end up with experiences that are good but not great. They work, they conform to best practice rules & standards but if you take away the logo they are indistinguishable from each other.
Wind tunnel web design?
The screen shots above are from a recent Zag audit of the Personal Finance Manager (PFM) market but the point applies to plenty of other categories. Jim Carroll has spoken passionately here about the Wind Tunnel Marketing but are we also in danger of entering the age of Wind Tunnel Web/UI design?
We believe that the most effective way to avoid this situation is to put brand at the heart of UX, to use it as the north star to guide the myriad of interactions and touchpoints that brands create for their customers.
Of course this is easy to say, much harder to do. Here are 6 ingredients that we find help foster a successful fusion of brand and UX, based on projects we’ve worked on and projects we wish we’d worked on. It’s certainly not comprehensive, more intended as a conversation starter – we’d really like to hear about other ingredients that people find useful here.
#1 A proper understanding of your audience
This is obvious but too often people pay lip service to this area. You really need to know the needs, interactions and emotions that colour their experience of your brand and your category. And even more importantly is to have genuine empathy for them as PEOPLE not consumer/users. He’s not a 25-44 year old ABC1, he’s a proud dad who works to hard and reads to his kids too quickly on Thursday nights so he can go out with the boys and so on...
#2 A proper understanding of your brand’s purpose
Again obvious. But again too often this is more about platitudes than purpose. For this to work you need to have really asked the tough questions of the brand in question. Why is it really there? What is its role really?
Nike’s purpose is one of the best I’ve seen for this sort of thing. It’s inspirational, it’s directional and it’s very very stretching. Nike will never complete this mission but they are creating a lot of amazing products while they’re trying. The CEO Mark Parker was instrumental in pushing this mission through eleven years ago. It’s hard to see the previous one (‘to be the number sports & fitness company in the world’) being much use as a guiding principle for UX…
#3 Appreciate that the rules of branding have changed
When we say ‘brand’ we don’t mean a didactic set of messages, rules and templates to roll out over every touch-point. We mean a coherent set of guiding principles to help designers make the right decisions about what to say and what to do. Adaptable rather than monolithic. Otherwise the whole exercise will do more harm than good.
#4 Run a collaborative multi-discipline process
Every project has a different set of skillsets but one thing we’ve found always leads to better results is to keep it open and collaborative from the outset. So we make sure our graphic/digital designers are challenging (or even writing!) the business/brand strategy on any project from a very early stage. This helps avoiding the platitude/purpose issue touched upon early. If the brand strategy isn’t speaking to the people charged with bringing it to life then it’s probably pointless.
If you’ve got the above ingredients in place then you should be in a really good place to try and achieve something special, to make the brand thinking tangible and improve it:
#5 Create signature interactions
Flipboard is there to be beaten as an example of brand and UX. A clear vision to be a ‘Social Magazine’ that fuses the beauty and ease of the print magazine experience with the power of social media. The signature interaction of the gentle ‘flip’ movement. And it’s in the name!
Wonga’s ‘money sliders’ are another powerful example. They exemplify ‘straight talking money’ and a more down to earth approach to finance every time you to interact with them.
#6 Surprise people (in a useful way)
Everyone knows the situation. You’ve finally reached the end of a critical project phase. You are sending the authoritative, definitive email to all the stakeholders to wrap everything up, accompanied by the pdf of the amazing work…and then you send the email without the attachment and have to send another going “ahem’ here’s the attachment”. Except when I [Steve] was in the process of executing this understandable error Gmail stopped me.
You can be sure that anyone who’s experienced that bit of help will tell a lot of people and be more loyal to the brand in the future.
To us this is the benchmark in terms of moments of surprise and delight. Here is a brand using ‘screen’ UX to build relationships with their customers in as powerful a way as Waitrose are using their store experiences.
What are the equivalent moments for the brands you work on?
If you enjoyed this post then we should acknowledge the influence of inestimable @adamtvpowers, BBH London’s Head of UX.