Sites like Netflix organise programs into rows by category which can be horizontally scrolled into view.
This gives users an overview of every category without having to scroll through all programs.
This pattern is accessible, responsive, and consistent across screen sizes. And it’s pretty easy to implement.
That’s a lot of pros for a pattern that in reality has some critical downsides.
Here, I’ll explain what those are, and how I’d go about it instead.
A few weeks ago I did a live redesign of the ASOS checkout flow for Smashing TV. And one of the things I glossed over is around the difficulty of building an accessible autocomplete control for things like picking a country from a long list of options.
As I say in the talk, building an accessible autocomplete control is quite easily one of the hardest things I’ve ever made. But they’re well worth the effort to make for users because they can make a long-winded, frustrating interaction relatively painless.
So I’ve written an article explaining how to make an accessible autocomplete control from scratch here:
Hope you like it.
Originally published on my blog.
Many of the components we design for the web are made to save space. It’s interesting that we work so hard to save space on a medium where we have infinite space to work with.
Of course, I’m partly speaking in jest here. A heavy page can take a long time to load and cause assistive technology to respond slowly or even crash — so be careful with that.
But instead of doing the hard work to cut the content to its irreducible core, or simply showing it, we find innovative ways to cram more…
This is an excerpt from Form Design Patterns. We’re in the middle of chapter 2, A Checkout Form, where we’ve been looking at the payment details form consisting of card number, expiry, security code from fields etc.
The number input (
<input type="number">) lets mobile users more quickly type a number via a numeric keypad. On desktop, the input will contain increment and decrement buttons called spinners, which make it easy to make small adjustments without having to select and type.
People seem to think that progressive enhancement means more work and designing for the least capable browser. And at the cost of delivering better experiences for people who use new browsers.
To the contrary, progressive enhancement is often less work and enables us to design the best experience using the most cutting edge browser features (if needed) without harming users who use older browsers.
Before getting to a solution, let’s first work out the what we’re building.
Most websites, digital products or services consist of links, text, images and maybe videos. But they also consist of forms to save, send…
(This is something I first sent out to my private mailing list.)
Toward the end of writing my upcoming book (Form Design Patterns in case you didn’t know), I had to attribute this quote:
“Content is the user experience”
Caroline Jarrett told me it was Ginny Redish, the author of “Letting Go of the Words”.
“Content is the user experience” — Ginny Redish
“Job done,” I thought but then my editor asked me for a reference.
So I asked Ginny and she said “I don’t think I have a reference for that exact phrase. However, it is the essence of…
In Buttons shouldn’t have a hand cursor I explained that the hand (or pointer) cursor doesn’t mean clickable and that it’s meant to signify a link.
However, there were some important things I didn’t address: why did we start using the pointer cursor in the first place? Are conventions on the Web different to the OS? Have things changed? How does all of this affect users?
In response to part one, Mark Griffiths explained the history behind the pointer cursor.
It first appeared in Apple’s HyperCard in…
This is a little excerpt from my upcoming book, Form Design Patterns. Sign up to my newsletter and I’ll let you know when it’s on pre-sale.
Progressive enhancement is about users. It just happens to make our lives as designers and developers easier too. Instead of keeping up with a set of browsers and devices (which is impossible!) we can just focus on features.
First and foremost, progressive enhancement is about always giving users a reasonable experience, no matter their browser, device, or quality of connection. …
Sometimes we make links look like buttons. Sometimes we make buttons look like links. This can be a problem. Maybe there’s something we can do about it. But before we get to it, let’s discuss the four different types of buttons and links.
Submit buttons let users submit a form. Examples of this include logging in, registering or adding a product to basket.
Links let users navigate to pages or locations within a page. They’re usually underlined to stand out amongst prose content. …
This is how it goes. We put a load of shit into a single web page. This makes the page slow. Slow to load, slow to render. Slow.
Instead of getting rid of the shit, we blame the page refresh. There’s only one way to avoid the page refresh and that’s AJAX.
However, AJAX still needs to render new (parts of) screens. More crucially it still has to make a request to the server. That’s not all — there are penalties in using AJAX and it doesn’t necessarily result in faster experiences.
Firstly, making requests; handling different responses; traversing the…