Tags: experience




I noticed something interesting recently about how I browse the web.

It used to be that I would notice if a site were responsive. Or, before responsive web design was a thing, I would notice if a site was built with a fluid layout. It was worthy of remark, because it was exceptional—the default was fixed-width layouts.

But now, that has flipped completely around. Now I notice if a site isn’t responsive. It feels …broken. It’s like coming across an embedded map that isn’t a slippy map. My expectations have reversed.

That’s kind of amazing. If you had told me ten years ago that liquid layouts and media queries would become standard practice on the web, I would’ve found it very hard to believe. I spent the first decade of this century ranting in the wilderness about how the web was a flexible medium, but I felt like the laughable guy on the street corner with an apocalyptic sandwich board. Well, who’s laughing now

Anyway, I think it’s worth stepping back every now and then and taking stock of how far we’ve come. Mind you, in terms of web performance, the trend has unfortunately been in the wrong direction—big, bloated websites have become the norm. We need to change that.

Now, maybe it’s because I’ve been somewhat obsessed with service workers lately, but I’ve started to notice my expectations around offline behaviour changing recently too. It’s not that I’m surprised when I can’t revisit an article without an internet connection, but I do feel disappointed—like an opportunity has been missed.

I really notice it when I come across little self-contained browser-based games like

Those games are great! I particularly love Battleship Solitaire—it has a zen-like addictive quality to it. If I load it up in a browser tab, I can then safely go offline because the whole game is delivered in the initial download. But if I try to navigate to the game while I’m offline, I’m out of luck. That’s a shame. This snack-sized casual games feel like the perfect use-case for working offline (or, even if there is an internet connection, they could still be speedily served up from a cache).

I know that my expectations about offline behaviour aren’t shared by most people. The idea of visiting a site even when there’s no internet connection doesn’t feel normal …yet.

But perhaps that expectation will change. It’s happened before.

(And if you want to be ready when those expectations change, I’ve written a Going Offline for you.)

Offline itineraries with service workers

The Trivago website is a progressive web app. That means it

  1. is served over HTTPS,
  2. has a web app manifest JSON file, and it
  3. has a service worker script.

The service worker provides an opportunity for a nice bit of fun branding—if you lose your internet connection, the site provides a neat little maze game you can play. Cute!

That’s a fairly simple example of how service workers can enhance the user experience when the dreaded offline situation arises. But it strikes me that the travel industry is the perfect place to imagine other opportunities for offline enhancements.

Travel sites often provide itineraries—think airlines, trains, or hotels. The itineraries consist of places, times, and contact information. This is exactly the kind of information that you might find yourself trying to retrieve in an emergency situation, like maybe in a cab on the way to the airport or train station. Perhaps you’re stuck in traffic, in a tunnel. Or maybe you don’t have a data plan for the country you’re currently in. Either way, wouldn’t it be great if you could hit the website for your airline or hotel and get your itinerary, even if you’re offline.

Alright, let’s think this through…

Let’s assume that an individual itinerary has its own URL. That URL is a web page of information, mostly text, with perhaps an image or two (like a map). Now when you make your booking, let’s have the service worker cache that URL (and its assets) for offline access.

Hmm …but there’s a good chance that the device you make the booking on is not the same device that you’d have with you out and and about. Because caches are local to the browser, that’s a problem.

Okay, but of these kinds of sites have some kind of log-in mechanism. So we could update the log-in flow a bit: when a user logs in, check to see if they have any itineraries assigned to them, and if they do, fire off an event to the service worker (using postMessage) to cache the URLs of the itineraries.

Now that the itineraries are cached, the final step is to create a custom offline page. As well as the usual “Sorry, the internet’s down” message, we can say “Sorry, the internet’s down …but here are your itineraries”. (This is kind of like the pattern you see on blogs like mine, Ethan’s, or Mike’s—a custom offline page that lists cached URLs of articles you’ve previously visited).

That’s just one pattern off the top of my head. It’s fun to imagine the different ways that service workers could be used to enhance the experience of just about any site, but they seem particularly relevant to travel sites—dodgy internet connections and travelling go hand-in-hand. At Clearleft, we’ve been working with quite a few travel-related clients lately so that’s why these scenarios are on my mind: booking holidays, flights, and so on. But, as I’ve said before and I’ll say again, every website can benefit from becoming a progressive web app.

The User Experience Curve

My cohort from Clearleft, Andy Budd is up now. Let’s see how he does.

Without any faffing about, he kicks off with a story about checking into a hotel. This is better than bullet points any day. He maps this experience onto a graph. This is his user experience curve.

The start and the end of the experience are the most important so you should focus on those parts but the whole experience is important. Andy shows a different graph which maps the user experience curve of checking into a different hotel. This curve looks different because the experience was sub-par.

We need to look at examples from beyond the Web. Andy will go through seven touchpoints of user experience.

First Experience Counts

This sets the tone for the whole day. He quotes some dodgy statistics about how quick women make up their minds about blokes on that first meeting. Then there’s the doorman at a hotel. He’s your first experience of that hotel. Ostensibly he’s there to carry your bags but really he’s there to make sure you’re experience begins will. This doesn’t work in retail when those creepy people greet you as you enter a store.

People do judge books by their cover. Take those lovely Dorset Cereal boxes for example. The design helps sell the product. Apple have mastered the art of the first impression. Unboxing an iPod is like undressing your girlfriend for the first time —Andy’s words, not mine.

The games industry also craft the initial experience well. The first level of Call of Duty is a basic training level. This is a better experience than reading a manual. He shows some game footage, demonstrating how the game dripfeeds you instructions as you go along. Crucially, this happens in-game, not in some separate place.

Then of course, there’s the Web. People really do make snap decisions. 37 Signals do a really good job of introducing new features. Yahoo have also tried “in-game” walkthroughs with on-screen overlays.

Time for an example from Clearleft: Edenbee. On the “newbee” page, there are a bunch of overlays. Sidenote: they were a bitch to mark up and style, just so you know.

Attentive Service

An attentive waiter or waitress refill your glass without you noticing. That’s a nice experience. Then there’s the experience of queueing, not normally a nice experience. Whole Foods have been spending a lot of time studying this.

Again, Apple are a good example. Their retail stores are well-researched. They built an initial prototype based on the company’s business needs and when that clearly didn’t work, they redesigned it around the customer’s needs. Then they launched. Per square foot, Apple Stores are four times more profitable than Best Buy.

Personalisation and Customisation

Andy thinks that the key ingredient to the Wii’s success is not the wiimote but the wiimiis. In Starbucks, they ask for your name when they make your drink. The interaction is customised for you. And of course there’s the drinks customisation: mod your drinks.

The gaming world is also big into customisation. Take Josh’s WOW character that he’s invested a lot of time into. This customised avatar is also a status symbol.

On the Web we can do small things, like calling people by their name, that people really like. Then there’s customisation like on MySpace and to a lesser extent Twitter, that allows people to invest more into their pages (and they are therefore less likely to abandon that service).

Attention to Detail

Engineering problems are solvable. It’s the little design things that are hard.

In a hotel, putting a little chocalate on your pillow used to be a delighter. Now it’s passé. They have to do more now. One hotel puts a hand-written card in your room with the weather forecast for the next day. That has an emotional effect.

Car manufacturers spend a lot of time getting the sound of the car door slamming just right. A satisfying thunk is indicitive of the whole user experience.

Disney are the masters of this. Nothing in Disneyland or Disneyworld should break the Disney spell. So they have their own crafted bins. That’s consistency.

Here’s a fantastic little delighter from an Innocent Smoothie carton: the underside reads Stop looking at my bottom. That made Andy smile all day long. Bless.

Threadess are good at that. Moo, of course, are experts at this with the personalities of Little Moo and Big Moo. Denise is in the audience somewhere—she must be happy.

The parallax effect on the Silverback holding page is a also a delighter. Only a small percentage of people will see it but those people will be very pleased with that Easter egg.


The gaming industry is all about feedback. Andy channels Dan Saffer as he talks about the feedback you get from a slot machine in Las Vegas.

Feedback prevents you wasting time. That little flag on American mailboxes is a handy feedback mechanism.

Feedback helps manage expectations. When you’re on hold with BT, they don’t tell you how long you’ll have to wait. The systems that tell you you are fifth in the queue are more useful and help you manage expectations.

Ultimately, feedback helps people solve their problems. Apple asked people where they had their best experiences. People said it was concierges in hotels. That’s where the idea of the Genius Bar came from: a concierge for your Mac.

On the Web, Linked In provide feedback on how much of your profile you have filled out so far. If you know you’ve only got 10% to go, you’re more likely to see it through.

Ajax is handy in adding meaningful feedback to forms. Kayak is a good example of constantly updated feedback.

Google Maps is all about feedback. You can drag, drop buttons, play around. Whatever you do, you get a reaction. Google Maps is fun.

When things go wrong, that’s an opportunity to interact with your customers. Error points are the areas where you can excell. Andy sent a snotty email to Tripit—within half an hour he got an apologetic email that turned him around from angry to happy. Error pages, of course, are the perfect place for good feedback.

Make It Fun

People like games. People like collecting. Collecting social objects brings a payoff with it. But whenever there’s a payoff in a system, that system is open to gaming. Points are useful for letting you know where you stand in a system but they also lend themselves to leaderboards. That can discourage the newbies at the bottom of the leaderboard.

Flickr is like a game based around collecting social objects—in this case, photos (thankfully Andy is using the term social object correctly here).

Digg used to display the top 100 diggers but that led to the rich getting richer and the poor getting poorer as the system was gamed. Digg removed the feature.

Moo is a game that sucks you in. Andy initially went along to check out the site and ended up getting drawn in. Before he knew it, he had bought a pack of business cards.

Create a Perfect Environment

Andy syas we need to look beyound the Web to places like a Starbucks, the Virigin Atlantic lounge and Las Vegas to see what constitutes a great user experience. Dear God! I hope we don’t recreate Vegas on the Web. It’s bad enough in real life.

Aaaaand… he’s spent. The boy done good.

User Experience vs. Brand Experience

I’m at the Future of Web Design in London and figured I’d pass the time with some live blogging.

Right now there’s a session somewhat in the same vein as last year’s Flash vs. CSS face-off. This time it’s brand experience vs. user experience. And just as with last year’s supposed battle, the truth comes out pretty early on that actually they should work in perfect harmony.

Steve Pearce is on first, fumbling with his Mac setup and mumbling about the importance of user experience but hammering home that brand and user should be in agreement. He’s illustrating this point with some cute cartoons.

The interactive experience is like an iceberg apparently. An experience iceberg. The visual part sits above the surface (what most people see) but the main part (that people interact with) is below the surface. We spend too long focusing on the bit above the surface. It doesn’t matter how much you polish the visible bit if it’s a wreck underneath. Basically, you can’t polish a turd …or a turdy iceberg. Instead we should work on the experience, which is the stuff under the surface. The reason we should work on this is that users will spread the word about good and bad experiences.

At this point, Steve mentions social objects, misattributing the term to Hugh instead of Jyri. I don’t quite see the connection with social objects unless he’s trying to say that any good user experience is automatically a social object because people will talk about it with their friends. That’s not quite my understanding of social objects. Can I include the term social object in every sentence I write? Possibly (social objects).

Don’t work too much on the surface: work on the experience underneath. That’s Steve’s takeaway point.

Now Andy is up to talk about the importance of brand. To demonstrate his point, he will refer to classic British comedy acts like Morecambe and Wise.

Andy makes the point that branding isn’t about what’s up on the billboards. It’s more about the experience and emotional attachment. Think Starbucks. Think Twitter.

Quoting Seth Godin, Andy says that a brand is really about getting people talking to each other. You know, the viral thing.

Now for an Eric Morecambe interlude. There is a connection though. In the past, everyone used to watch the same television shows and share the experience. There were far more people watching the Morecambe and Wise Christmas special than the most-watched TV programme today. Back then we consumed media in a very different way. These days it’s harder to reach those numbers and create something that spreads so widely. Back to the Eric Morecambe jokes now.

Andy plugs Dan’s book. Instead of thinking of systems-centred design, we can practice user-centred design. What if we make people something they love emotionally instead of asking them what they want? This is reminding me of Henry Ford’s quote that If I had asked people what they wanted, they would have said faster horses.

Then there’s activity-centred design. Look at what people do instead of asking them.

Finally, there’s genius design. This is the Apple approach. You create something that you think is going to be fantastic and the user will then tell you if you were right. But you mustn’t fear failure otherwise you will never release anything risky. Yes, it’s the old “learn from your mistakes” lesson.

Andy likes the idea of inspired design. A usable design need not be a safe design.

Design should be more like one-liners from Eric Morecambe. That’s his takeaway point.

An awkward silence follows. Our compére, Paul Boag kicks off the Q and A by asking C’mon, it’s all good and well to say it’s okay to fail and learn from our mistakes, but I don’t think our clients would like that very much!

Steve says that a beta testing period is a good time to fail. You can then learn from your mistakes and still improve the product. It’s humbling to learn that we don’t know what users want.

Andy says this what we hired for—to create and experiment and sometimes fail. Otherwise we’re just painting by numbers.

Steve says creating great work requires a great client.

Next question: is there any way of measuring the value of user experience?

Steve says you can measure it by how much people talk about it. But there’s no magic bullet for measuring it.

The next question may or not be about inspiration. The advice from the panel is not to create Frankenstein designs by mashing up the best bits of other sites. Those bits don’t work so well out of context. That may or may not answer the question.

Now a question about roles and who should be doing what. Silos are bad, mmkay? Engineers, designers, developers …who calls the shots? Andy insists on doing his own wireframes. He also designs using HTML and CSS. He doesn’t want to get bogged down in process. Who wants to spend their answering Basecamp messages. Steve reminds us that design is about solving problems and that isn’t the exclusive domain of designers—engineers are good at that too.

And with that, Paul kicks them off the stage.