Secrets of St Pancras and UX revealed

Last week, while exploring the theme of proximity at MEX, my group went on a little field trip to St Pancras. While related to the theme of location, the concept of proximity is a subtly different beast and deals with the user's relationship to an object, space, location or event with regards to 'nearness'.

As we observed people in the station, one of the notions that came to mind was that the station was merely a stage in the approach to, or retreat from, some other destination. And yet, within the context of proximity, the passenger arrives at, passes through and departs from it, in its own right. So, while there is ample space to pass quickly through it, some careful thought has been given to the architecture and furnishing of the station, which correspond with the activities of its visitors, however transitory.

A broad passage leads through the station to allow quick entry and departure. Along the sides are a number of retail outlets, including several cafés that are always packed, and some clothing, luggage and souvenir shops that are slightly less busy. These wide, glass shop fronts sit about a metre behind a colonnade, that separates the idle window shopper from the rapid pedestrian thoroughfare. Escalators and electronic information panels are placed centrally and offer the opportunity to alter the flow around the concourse.

By now, Londoners will be familiar with the pianos in the station, and elsewhere around London. That the pianos at St Pancras, after so much time, remain largely in tune, suggests a careful maintenance and, therefore, value to their continued residence. For many passengers moving through the station on their way to or from continental Europe, the pianos offer surprise and delight: they also create the opportunity for social interaction.

Our conclusions from our research, exploring interactions with a range of objects and places in differing contexts, led to the development of six design principles to draw people emotionally closer to their physical environment through the use of technology. In the refinement process, a lot of material and thought is forcibly discarded. However, it is fascinating to review this material after the event and notice how much insight is evolved in such a short space of time.

Amongst the ideas that found their way to my phone's camera roll via scribblings on a flipchart, one derives from the pianos in St Pancras and I suggest here an additional principle: mitigate linger time in transition by offering unobtrusive elements for distraction and delight.

Tapping, swiping and consistency in the language of user experience

I bang on about the language of UX. Most people refer to it as 'conventions' but for me, it's a language. The motions and interactions that a user has with a device to execute commands is a language, in the same way that we talk of programming languages.

Languages, of course, evolve. The same is true of UX languages. New commands come into play as the operating systems gain new functionality. For example, on a phone, tapping a picture magnifies it to fill the screen. This is true whether you're looking at socks on eBay, fish on Facebook or houses on Rightmove. Likewise, Twitter. It's the equivalent of a green light on your traffic lights. It's a universally applied command. If your spouse says, "Take out the rubbish!", you don't load the washing machine.

But closing a picture hasn't had a universally applied language. Historically, coming from the world of non-touch PC screens, a little cross in the corner of a picture was a prompt to close it. Actually, some people didn't know that and Facebook, for example, changed the little cross to a 'Done' button. But this is the world of touch screens, where physical interactions - taps, swipes, shakes etc - are prevalent and intuitive. Intuitive, that is, until one service breaches the rules of the language. And Twitter was the culprit.

A little like saying "I went for a run tomorrow", meaning "I will go...", Twitter was - as far as I know - the only service that used tap both to open and to close a picture. Facebook and the rest followed a different rule: tap to open, swipe down (or up) to close. Once open, tapping enabled the user to show or hide text overlay or written commands.

Yesterday, it seems, Twitter came into line. Tap open, swipe closed.

Why does this matter? Because if we go back to the question of "eliminating distraction and restoring focus to digital media consumption", which was explored at the last MEX, minor inconsistencies in UX language disturb the user from enjoying an immersive experience.

There's a term I learned from reading Daniel Kahneman's Thinking, Fast and Slow, a psychological principle known as "stimulus response compatibility". Essentially, it means that a cue suggests a certain behaviour. Like the green traffic light. Kahneman talks about the expectation that a door handle triggers the response "pull" but this is violated by architects time and again. How often do you find yourself pulling then pushing a door because there's a handle. I did it two days ago at a conference in the Shard. To confuse things further, one set of doors required a pull; the second, a push.

Whether opening a door or looking at pictures, we should not be required to switch to slow thinking. Maintaining consistency across stimuli should be a goal of the developer, so that the user can more fully engage with the content: the device and the app should become, to all intents and purposes, invisible.

So, thank you, Twitter, for making the change. I can no longer use your iPhone app as an example of stimulus response compatibility violation.

Five user modes in digital consumption

The fourteenth MEX took place this week, investigating ingredients of user experience across the themes of Create, Consume, Control, Communicate, Locate and Trust. I was fortunate to be invited by Marek Pawlowski to facilitate the creative sessions on the theme of Consume, where, over the course of four one-hour sessions, we sought to answer the following challenge:

"Illustrate 5 design techniques to eliminate distraction and restore focus to digital media."

In the investigation phase, during which the team explored elements of distraction and ways of inducing immersion, we considered some need states and user modes in the consumption of digital media. Since our final presentation largely dealt with the outputs of our work, I felt it would be worthwhile to indulge briefly here in relaying just five user modes in digital consumption, as identified by the team. These modes should in no way be considered to be complete and are not even necessarily the most common modes of consumption but they serve to illustrate a range of times, places, devices, channels and objectives in consuming digital media.

For a long time, I was dissatisfied by the near ubiquitous definition of TV consumption modes of lean forward and lean back. When these modes were first described, they sought to differentiate between the viewing of long-form, professionally-created, linear broadcast and that of short-form, user-generated, on-demand streaming. Last year, a study carried out for Thinkbox, produced a more textured landscape, in which TV-viewing need states can be classified across the six categories of Unwind, Comfort, Connect, Experience, Escape and Indulge. Whether you agree or not that these adequately encapsulate all need states, the study prompts us to consider the variety of user modes in digital media consumption, which clearly is extremely broad and probably impossible to index entirely.

Without further ado, here are five user modes of consuming digital media.

1. Commute

Occuring during the twice daily journeys to and from the workplace, this London-centric finding considered the need for distraction from the confines of the Underground and the other passengers pressing upon the commuter. Using a smartphone - or tablet - to skim over, for example, the Evening Standard's iPhone Newsstand app, the reader dives into the content as a distraction from the unpleasant reality but will have forgotten almost the entirety of the content by the time he reaches his destination.

Time: morning and evening commutes
Place: Underground
Devices: smartphone, tablet
Channels: news apps
Objective: distraction

2. Business

With emphasis on the need for timely information in the financial markets but applicable to a range of roles and industries, this consumption mode is about receiving information, data and analysis at the start of the day and at times throughout to ensure that the individual has the knowledge and understanding required to perform their business tasks. While print media still plays a role here, tablets and PCs are pre-eminent with specific articles accessed via dedicated apps, such as the FT, or from email news alerts.

Time: start of work day; throughout the day
Place: workplace
Devices: tablet, PC (alongside print media)
Channels: news apps; email alerts
Objective: to be expert in chosen field of business

3. Inspiration

Of importance to those involved in creative industries, the Inspiration consumption mode is a lengthy, highly-engaged period of time viewing the work of other creators. It entails full immersion into videos on, for example, Vimeo, without distractions in order to ready oneself for one's own creative indulgence.

Time: daytime
Place: workplace, usually
Devices: PC/laptop ie larger screen
Channels: video, especially Vimeo
Objective: full immersion and preparation for creativity

4. Evening Escapism

Much like the Unwind TV need state, Evening Escapism is a release mode, shaking off the shackles of the day's labour. In this mode, the individual might indulge in multi-screen consumption of different forms of media, from broadcast TV to social media, without there being any relation between the media consumed.

Time: evening, after work
Place: home - living room/bedroom
Devices: multi-screen - TV, laptop, tablet, phone
Channels: any
Objective: de-stress/unwind

5. Learning

Younger members of the team talked about a growing trend in casual learning. It's an individual activity but is likely to be discussed with other members' of one's social circle. In a slightly disengaged state of mind, the individual might watch - or merely listen to - typically short YouTube videos on how to do or make something. One example given was how to make an origami swan, for which several videos exist, including the one embedded below that has been seen close to 3 million times.

Time: evening
Place: home - bedroom/living room
Devices: laptop, tablet
Channels: video, especially YouTube
Objective: casual learning as a form of entertainment

New Twitter UI is a car-crash waiting to happen

There are all sorts of reasons why the new Twitter UI is just as bad as the last new UI. Why are direct messages buried in a drop-down menu? Why is there an option to 'Open' tweets that provides almost no additional detail.

One, slightly arcane UI tomfoolery is the rearranging of the columns.

Left-hand navigation columns have been common since the very earliest days of the WWW. Later, it became standard to have a main section in the middle column and on the right-hand side, further links and details. The placement of the content in this third section is so typical of online media that it has become convention.

Guardian

 

Telegraph

It isn't just online newspapers with their millions of pageviews that adhere to this unwritten dogma. Facebook adopts this principle too, with navigation top and left, the main content in the middle and extra gubbins to the right.

So, should we blindly follow what everyone else has done before? Well, actually, in this case, yes. Conventions are good for User Experience. A word on a page, which is underlined and in a different colour, we know by convention links to another URL. By the same token, we know that stuff on the left is navigation and stuff on the right is your side salad.

Twitter is asking us to drive on the wrong side of the road.

The one big reason why your online ads fail to convert

I see it time and time again. I can't take it any more.

This morning, I see a cute picture of a baby in a snow globe. Cootchy-coo! (and all that). The picture is an ad. So I click on it. Lo! and behold! I find myself on the Kodak Gallery website. Here's what I found:

I'm wondering to myself, how on earth do I get a snowglobe? That's what I want. That's why I've clicked. Yet there isn't a single mention of snow globe anywhere on the page. Not a word, nor a picture. I don't want calendars, cards or mugs. I don't want to share on Facebook.

Meanwhile, the publisher has made a little money either because they were paid by 1000 impressions or per click (unless it was an affiliate deal or on a cost per action basis). There was probably an intermediary ad sales house. It made money too. Kodak Gallery, however, lost money. It paid for advertising but didn't make a sale.

Thanks for (not) shopping!

While the page is quite nicely designed, as a landing-page it is a total user experience disaster.

There is no relationship between the page and the paid-for source from which the visitor came. There is no quicker way to baffle visitors to your site if you don't follow through with the offer. I arrived at the site looking for a snow globe but there was no snow globe on the page. As soon as the visitor has to think about how to get what they've come for, they will most likely hit the back button on the browser.

The URL is also a bag of unfriendly rubbish: http://www.kodakgallery.co.uk/Welcome.jsp?utm_source=30243&utm_campaign=30243&utm_medium=BAC&utm_content=300-250_swf_FL003_eindsl_KG101110_RES_UK_v003

Could they not do http://www.kodakgallery.co.uk/snowglobe ?

Take two
 
I then went and typed snow globe into my Google toolbar:

Top of the sponsored links, there's Kodak Gallery! Spending hard marketing cash on PPC Google AdWords. This time of year, I imagine "snow globe" is quite a competitive keyword. I wondered what would happen if I clicked on the link. Would I come to the same page as before or would there be a dedicated landing page?

It was a dedicated landing page that looked like this:

3 for 2, the page cries out. Hang on, I don't need three snow globes: I don't even need two. I just want one snow globe made from a cute picture that I've taken. OK, they're going to make me work for it.

Let's scroll down... Calendars, Photo Books, Gifts. Well, I suppose it might be gifts. I'll take a closer look.

 

Here's what it says in the hard-to-read small print:

These personalised Photo Gifts are the perfect gifts every occasion. We have a range of photo gift ideas from Mugs to Crystals, and Teddybears.

No snow globe. I'm going to click anyway but by now you've probably lost your customer to the next sponsored listing on Google.

I scroll down the page past the 'Mugs' category, 'Wall Décor', 'Home Décor', 'Stationery', 'Games, toys and more'... it must be there. Oh, no. The stuff further down doesn't seem right. Let's go back up. Maybe Home Décor is what I want.

And indeed it is!

But the picture's different to the one I saw earlier and I don't like this one so much. Meh, it was a dumb idea anyway.

How Kodak Gallery might improve its results

1. Fashion a landing page which deals only with snow globes.
2. Make an offer in the ad (for example 3 for 2, or 25% off until Christmas) and convey the same offer on the landing page.
3. Have one stand-out call to action on the page: 'Upload a picture and get started'.
4. Get a friendly URL. http://www.kodakgallery.co.uk/snowglobe is currently unused.

Rinse and repeat for each product on sale.

Any other thoughts?

In the meantime, search Amazon.com for books on 'user experience'.