If you’re interested in following my newsletter, sign up here!
When we need fast
- Fast is great for service-oriented designs. 80% of the time, we want to create designs that reduces friction and gets out of the way so that people can get things done.
- This is especially important for transactions like donating to a charity or buying a product. The faster you can get a person from start to finish, the better.
- Time = friction
When we need slow
- The rest of the time when comprehension is involved, we have to slow things down.
- We want to focus on absorption not conversion when it comes to comprehension.
- Readability = it wants to be read
- Legibility = it’s readable
- Readability transcends legibility
Some history and observations
- There was a service called Readability that made reading pleasant on the web. It removed “info junk” like banners and navigation so that you can focus on the content. The website has been discontinued since, but the open source code is alive in Safari’s Reader.
- These days, you can use Mercury Reader if you use Chrome.
- There’s an A List Apart article that talked about creating a simpler page on the web. It breaks reading distances into three categories:
- Bed (Close to face): Reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
- Knee (Medium distance from face): Sitting on the couch or perhaps the Eurostar on your way to Paris, the iPad on your knee, catching up on Instapaper.
- Breakfast (Far from face): The iPad, propped up by the Apple case at a comfortable angle, behind your breakfast coffee and bagel, allowing for handsfree news reading as you wipe cream cheese from the corner of your mouth.
- Jeffrey Zeldman wanted to create a more relaxed reading experience on the web. He wanted a web that can be read from afar (Breakfast category) and with a relaxed posture. He experimented on his personal website and wrote about it in 2012.
- Medium.com came out and it focused on content. Big type. Lots of whitespace. (2012)
- The New York Times came out with a redesign that is “clean, quiet reading interface and a typographic style that’s increasingly visually connected to other incarnations of the Times” (2014)
- The New Yorker also came out with a redesign. “While before, reading the New Yorker on mobile was a tortuous experience of pinching screens and zooming in and out, the new mobile site is one long scrollable joyride. Sharp text at a good size and unfussy navigation make the site a vast improvement on what went before.” (2014)
- Aside from big type, art direction can also be used
- Whitespace is important
- There’s macro whitespace: Whitespace between the major elements in a composition
- There’s micro whitespace: The space between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.
- Adds legibility
- Conveys luxury: Look at the whitespace around brands like Apple or Chanel.
- Also see Jeffrey’s style guide for content.
- It has to be branded. When all sites look the same, all content appears equal. Facebook posts are an example: A reputable news site looks the same in a post as a disreputable blog.
- It should also be authoritative. It should convey that you put in a lot of time and effort into it.
Slow design toolkit:
- Big type
- Art direction