Stuff Everybody Knows A guide to the rest of your web development career

Chapter 6 of 15

User Experience

UX is what it feels like, not what it looks like

User experience is not what your site looks like — that’s UI. User experience is what it feels like, how it works. And it is far more important. If you ever have a situation where you’re trading off between how it looks and how it feels, always go for how it feels, because that’s the thing people remember.

UX starts with the URL

UX starts before you even visit the webpage. It starts with your URL.

HTTP, the protocol underlying the web, is stateless — and that’s a critically important feature. Its greatest strength is this: if you send someone a URL, the thing you’re looking at is going to be the same thing they see. That seems really obvious, but nothing else works like that. You can’t do that with a desktop application. You can’t do that with a native app on your phone. Web software can teleport from one user to another.

This is the reason all social mechanisms are built on the web. The reason the web is this tremendous social platform is because of the stateless nature of HTTP and the fact that we can share links. Our monkey brains really enjoy sharing things.

So the most important thing about UX is: don’t break your URLs. As soon as you’ve created a URL, the monkeys will have started sharing it. They’ll put it on billboards, in books, embedded into QR codes, on stickers. Your URLs need to work forever.

This is especially important if you’re building a rich web app with state. If someone starts at your homepage, clicks three levels deep, opens a panel, and hits a button — your URL should reflect all of that. People are going to try to share the exact thing they’re looking at.

If grandma is looking at a specific photo in your photo album and shares a link to the family group chat, her expectation is: everybody will see my photo. If your web app is dumb and photos inside the album have the same URL as the album itself, then that’s not what will happen, and as a result everybody, especially grandma, will be pissed at you. And that’s your fault, because you broke a fundamental promise of how the web is supposed to work.

Solve the user’s problems, not yours

A core principle of UX is that you should be solving the user’s problems, not your own. Aim for usability over impressiveness.

There’s a mountain of UX research out there, and one of the sad tragedies of the web is that we consistently ignore it. We’ve been doing the same stupid stuff for thirty years despite research telling us it’s wrong.

Carousels: a case study

My favorite example: carousels. Thirty years of UX research has proven, over and over, that users don’t know what carousels are, don’t know how to use them, and hate them. It’s not just that they don’t like using carousels (although they don’t) it’s that they often don’t even notice them. They don’t spot the arrows. They don’t know what the little dots at the bottom of the picture on your home page mean. If you give somebody a carousel, you have given them the first item and only that item.

If you try to solve this by adding auto-rotation, you just enrage the user — they were reading the first thing and it slid away. They can’t get it back because they don’t understand the controls.

So what do carousels actually do? They resolve arguments in the marketing department. “We should have this image on the homepage.” “No, this other image.” “Fine, carousel — we’ll have both.” That’s solving your problem, not the user’s. The user didn’t care. You have to pick one.

Be predictable

You should not break implicit promises that have been made to the user. The most obvious one is the URL, which we already covered. Another big one is how links and buttons work.

  • A link takes you somewhere else. If you go back, nothing has changed. It’s a way of exploring a space, and it’s completely reversible.
  • A button does something. You click it and something has changed — you’ve created something, deleted something, sent a message.

If you create a link that does something irreversible, your users will be angry. If you create a button that merely navigates, they’ll be confused. These violations don’t usually generate angry emails. Users aren’t usability experts; they don’t know why you made them angry and confused. You’ll just get users who feel slightly uncomfortable using your site and quietly prefer to use some other site that doesn’t break their expectations.

Bad UX is this creeping accumulation of bad feelings until people decide to go elsewhere.

Don’t mess with scrolling

Do not mess with scrolling under any circumstances. Parallax effects, CSS transitions where content flies in from the side, elements that fade or flip as you scroll — people hate this.

Here’s why: we are monkeys, and monkeys have a limited set of senses. Almost none of our physical-world senses work online. We can’t lick things, eat them, or have sex with them. But there is one sense that still works: spatial awareness. We can remember where things are when we’re not looking at them.

When you’re looking at a web page and you scroll down, you know the logo is still up there even though you can’t see it. That reassuring sense that you’re on a physical object is what makes web pages navigable. If you’ve added weird CSS transitions, the monkey brain gets confused — it doesn’t know where things are anymore, it doesn’t know how to get back, and it feels uncomfortable.

Don’t break the one sense that works.

Now let’s talk about a piece of user experience so important it gets its own chapter: performance.