Journal tags: experience

There is much introspection and navel-gazing in the world of user experience design. More than usual, I mean.

Jesse James Garrett recently said:

I don’t think I know anyone that’s been in UX more than a decade who’s happy with how it’s going.

In a recent issue of the dConstruct newsletter—which you really should subscribe to—I pointed to three bowls of porridge left out by three different ursine experience designers.

Mark Hurst wrote Why I’m losing faith in UX. Too hot!

Scott Berkun wrote How To Put Faith in Design. Too cold!

Peter Merholz wrote Waking up from the dream of UX. Just right!

As an aside, does it bother anyone else that the Goldilocks story violates the laws of thermodynamics?

Anyway, this hand-wringing around the role of UX today seemed like a suitably hot topic for one of our regular roundtable chats at Clearleft. We invited Peter along too and he was kind enough to give us his time.

It was a fun discussion. Peter pointed out that whenever he hears an older designer bemoaning the current state of design, he has to wonder what’s happened in their lives to make them feel that way (it’s like when people complain about the music of today and how it’s not as good as the music of whatever time period I was a teenager). And let’s face it, the good ol’ days weren’t so good for everyone. It was overwhelmingly dominated by privileged white dudes. The more that changes, the better …and it needs to change far, far more.

There was a general agreement that the current gnashing of teeth isn’t unique to UX. It’s something that just about any discipline will inevitably go through. Peter’s epiphany was to compare it with the hand-wringing around Agile:

The frustration exhibited with the “dream of UX” is (I think) identical to the frustration the original Agile community sees with how it has been industrialized (koff-SAFe-koff).

Perhaps the industrialisation of what once a cottage industry is the price of success. But that’s not necessarily bad, as long as you industrialise the right things. If UX has become the churning out of wireframes at scale, then something has gone very wrong. If UX has become the implementation of dark patterns at scale, then something has gone very wrong.

In some organisations, perhaps that’s exactly what’s happened. In which case, I can totally understand the disillusionment. But in other places, I see the opposite happening. I see UX designers bringing questions of ethics to the forefront. I see UX designers—dare I say it?—having their proverbial seat at the table.

Chris went so far as to claim that we are in fact in a golden age of user experience design. Controversial! But think about it, he said. Over the next few days, pay attention to interactions you have with technology, and consider the thought and skill that has gone into them.

I had Chris’s provocation in mind when I wrote about booking my vaccination appointment:

I just need to get in, accomplish my task, and get out again. This is where the World Wide Web shines.

Maybe Chris is right. Maybe the golden age of UX is here. It’s just not evenly distributed. Yet.

It’s an interesting time for the discipline of user experience design. I’ve always maintained that the best way to get a temperature check for your chosen field is to go to a really good conference. If you’re a UX designer and you want to understand the state of the UX nation, you should get a ticket for the online UX Fest in June. See you there!

Luke has written up the selection process he went through when Clearleft was designing the Virgin Holidays app. When it comes to deploying on mobile, there were three options:

1. Native apps
2. A progressive web app
3. A hybrid app

The Virgin Holidays team went with that third option.

Now, it will come as no surprise that I’m a big fan of the second option: building a progressive web app (or turning an existing site into a progressive web app). I think a progressive web app is a great solution for travel apps, and the use-case that Luke describes sounds perfect:

Easy access to resort staff and holiday details that could be viewed offline to help as many customers as possible travel without stress and enjoy a fantastic holiday

Luke explains why they choice not to go with a progressive web app.

The current level of support and leap in understanding meant we’d risk alienating many of our customers.

The issue of support is one that is largely fixed at this point. When Clearleft was working on the Virgin Holidays app, service workers hadn’t landed in iOS. Hence, the risk of alienating a lot of customers. But now that Mobile Safari has offline capabilities, that’s no longer a problem.

But it’s the second reason that’s trickier:

Simply put, customers already expected to find us in the App Store and are familiar with what apps can historically offer over websites.

I think this is the biggest challenge facing progressive web apps: battling expectations.

For over a decade, people have formed ideas about what to expect from the web and what to expect from native. From a technical perspective, native and web have become closer and closer in capabilities. But people’s expectations move slower than technological changes.

First of all, there’s the whole issue of discovery: will people understand that they can “install” a website and expect it to behave exactly like a native app? This is where install prompts and ambient badging come in. I think ambient badging is the way to go, but it’s still a tricky concept to explain to people.

But there’s another way of looking at the current situation. Instead of seeing people’s expectations as a negative factor, maybe it’s an opportunity. There’s an opportunity right now for companies to be as groundbreaking and trendsetting as Wired.com when it switched to CSS for layout, or The Boston Globe when it launched its responsive site.

It makes for a great story. Just look at the Pinterest progressive web app for an example (skip to the end to get to the numbers):

Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).

Now admittedly their previous mobile web experience was a dreadful doorslam, but still, those are some amazing statistics!

Maybe we’re underestimating the malleability of people’s expectations when it comes to the web on mobile. Perhaps the inertia we think we’re battling against isn’t such a problem as long as we give people a fast, reliable, engaging experience.

If you build that, they will come.

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

• Constellations,
• Cub’n’Pup, and
• Battleship Solitaire.

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.)

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.

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.

Feedback

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.

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.