July 29, 2019 – Day 1, Session 1

We don’t really like slow do we? I had a phone that fit my hand perfectly, but it was too slow… It was fast when he got it but it was slow so he had to replace it.

Our movies are faster – you watch a classic movie there are maybe 3 edits a minute, you watch a modern movie there are like 300 edits a minute.

Our politics are faster. People who used to write speeches write tweets.

Our sites are faster – if they don’t load fast enough people leave.

Slow is bad right? But maybe sometimes slow is ok.

Prison-wine is made quickly in a toilet bowl and it’s generally not the best wine. Wine that is made in a cask, which takes years to make it, is generally considered better.

Slow courtship tends to create a relationship that lasts.

A long slow bath is nice, a long stretch after a workout is probably better than rushing out of the gym.

Taking it easy, coffee, there’s all kinds of archaic hipsterism to coffee. The longer it takes to make your coffee in the morning the hipper you are.

Slow bakin’ makes good eatin’

One of the things we really like slow is reading – when we read for pleasure or when we read to learn we read slowly. There’s a reason – reading is a fairly new invention an it’s completely unnatural. First of all, speech itself is a hack. Jeremy Keith says that speech is a hack where I have a brain picture and I want to put that picture in your brain so I make throat sounds.

Reading is a hack – somebody has a picture in his head and wants to get it in your head so they put squiggles on paper.

He believes that we are the only species that can do it. He has cats – they are for sure smarter than him, for one thing

Reading is a slow experience because it is unnatural. We start learning it at age 3, 4, 5, and it’s hard to learn to read. Really smart kids can have trouble learning to read – it’s just about if your brain works a certain sort of way .

Fast is best for what we do most of the time – it’s best for customer service designs. Usually we’re making things so somebody can DO stuff. So they can sign up for health insurance, register for a class, sign up for a newsletter, etc. Most of what we do is commerces of one sort or another. Sales of one sort or another. We want you to care about water in a country where water isn’t clean so they want you to support.

When the goal is for someone to make a transaction, we want it to be fast. Conversion is about speed of delivery minus friction. Sales time is the ultimate friction.

If we make our sites super fast and it gets the wrong result from/for the consumer quicker, we’ve used the wrong stuff.

Content Performance Quotient – the speed of relevancy. How quickly can you get the right content to the person who needs it?

It’s only at a certain point of the conversation funnel that you’re just showing guitar picks because they’re going to buy a guitar pick. Most of the time you’re satisfying 50 different people and you have to get everyone to what they want as fast as possible. The site has to figure out what people want quickly. That’s about 80% of what we do.

The fast part is for the 80% where we are removing the friction of the wrong content, the friction of slow speed… This talk is for the other 20%.

Slow is best for comprehension. If we’re concerned about ideas – if we want people to understand, we have to slow things down the user experience. This is for 20% of what we do but it’s an interesting group.

HOW TO SLOW THINGS DOWN

Take yourself back to reading a book, learning something for a test. Book design is about readability. Legibility means it can be read. Readability means it wants to be read. One is seduction (readability), one is table stakes (legibility).

Sadly, we suck at table stakes. A lot of our websites are hard to read just in terms of bare legibility. We don’t always get to control certain things or we over control it and impede a user with special needs from reading at the size they want. We have sites that used to be about content and now we have so much info-junk.

We used to design for absorption. A lot of the sites we fell in love with when we started to get involved with the web were things like personal blogs, national geographic online, news online, etc. We fell in love with content, reading the news on your 600x400px monitor behind their corn flakes.

We like content – we like words and characters in front of us. Then we end up making these pages full of info-junk.

We have to design content for absorption, not conversion. When we’re designing content mainly what we’re doing is trying to make an experience people can learn from, that they can slow down and understand.

READABILITY

Around 2011, the same time Kindles were popular, and Apple had just introduced the iPad (and everybody said ‘what a stupid name, that will never sell!’), an app called Readability came out. It removed the clutter from websites/pages. Apple took it and put it in their devices – if you’re on an iPhone and on Safari, and you click ‘reader’ view, you’re looking at Readability.

Before a powerful blogger basically killed the app, Jeffrey was on the board of Readability and got to share his opinions (which is his favorite thing).

I’m basically Hermoine Granger – not so much in the hard work but in the raising of the hand. Pick me! – Jeffrey ^_^

EXAMPLE:
A screenshot of a page from Looper showing a BAD web page from TODAY. It has probably 6 elements on the page and 1 portion of 1 element is the content.

The Mercury Reader is by Arch90, the same people who made Readability. The experience you get using the Mercury Reader takes cues from THE BOOK.

Craig Mod argues there are 3 basic ways we interact with a book, and compares them to the iPad. It’s 2011, pages are already responsive, we’re starting to think about design systems, and there’s a big revolution going on.

The 3 positions we hold books in:

1. Bed (close to face), laying down. You’re reading but you’re also partly putting yourself to sleep. He’d read a book in bed and get knocked out
2. Knee (medium distance from face): you’re concentrated but relaxed.
3. Breakfast (far from face): propped up at a comfortable angle, behind your breakfast bagel, allows handsfree news reading. It allows for relaxed reading.

It used to be if he had to work on family time, it meant he had to get up and go to a computer to work and would scrunch down and get resentful. Now, we are doing the same amount of round the clock work because we’re able to have our phones down at our knee while we’re having family time and go ‘oh, I’ve got to answer that email’ and then we can do it and it doesn’t feel so frustrating or strenuous.

So maybe if want to make a design that encourages people to relax, we should consider body position.

He started yoga at the same time and his yoga instructor said, “If you put your shoulders back you’re relaxed.” How your body is positioned can influence how you intake information (or not).

Everyone in this room should have their own site – it’s like having a sketchbook. When you need to make something and you want to be unconstrained by typical client or organizational constraints, do it on your site first to experiment.

Web Technologist – I like this title… (my note)

So in 2012 he went to his site and made an experiment and made the type HUGE on it and removed EVERYTHING (sidebar, navigation, etc). He made the type so big that people starting emailing him and saying ‘your type is really big and I have to like lean back when I read it’. He published a blog post (‘manifesto’) which got some press and spread the word.

Explaining design is like explaining jokes…

But they were doing something new and pushing.

Medium came out with a design that was minimal, lots of white space, and unusually large type. These ideas were in the air – people were aware of readability, how cluttered pages were getting, and started figuring out there was this alternate path you could go with design.

Instead of seeing how much you could get ‘above the fold’, you remove things.

And then Times Magazine did it. And then the Washington Post did it. Big type, white-space.

The New Yorker was founded in the 1920s and it’s very stayed and conservative in its presentation. For example, they hyphenate to-day. They still do typographic things in 2019 they used to do in the 1920s. It’s part of their brand appeal and their identity. And yet, they did the same thing – giant type, big hero image, lots of big margins…

And then opposite from them is ProPublica which is an independent publication funded by donations, not ads or sponsors. They also started experimenting with big type, but they added a new direction which was art direction. If they had an article that was special or very important, they’d art direct it differently than the rest of the site. They’d put it on a black background, an illustrator, different fonts.

So what are the elements of READABILITY?

1. Big Type
2. Hierarchy (with the content being at the top)
3. Minimalism – less is more
4. Art Direction
5. White Space

Iteration is inevitable – everything we do digitally is never finished. We move in a direction and go too far and then pull back.

Big Type and Hierarchy are the driving forces of this template Jeffrey made –

Putting ideas together visually is art direction.
Graphic design is what color should we use, what type faces should we use, etc.

We do both, but we rarely get to do art direction on the web but when we do it’s very powerful. It’s only to be done when you have a special resource / content and have time to do it.

There is a book called Art Direction for the Web by Andy Clarke. If you’re interested in art direction on the web nd if you think you’d have the opportunity in your job to try it this is a great resource.

It’s very time consuming, very hard to do. Jason Santa-Maria for a while was art directing his blog, so every post he wrote had a different look and feel.

MACRO WHITESPACE

White space conveys a feeling of luxury. I don’t know whether it conveys luxury because luxury brands use it so much or if luxury brands use it because there’s an inherent feeling we get when we see an uncrowded plane.

I think we associate wide open space with luxury. It’s less and less part of our daily experiences. When you go to Chanel, you know you’re going to spend a lot more but it’s ok because there’s white space. The same thing with Apple Stores.

Sofa is a design company that uses a ton of white space that uses white space to convey that they design for luxury brands.

Jeffrey bought an iPhone for a couple reasons

MICRO WHITESPACE

It’s in things like line-height, in leading, and inside the letterforms. It’s whitespace you don’t think about.

Eric Speakerman is a German type designer and a magazine designer – he’s in the movie Helvetica. He had designed the Economist. They came back to him years later and said ‘we want to modernize it – we want a completely open feel. You have permission to do anything you want. You’re the designer, you’re the genius. No constraints.’ He changed the font.

He took his own font which was thick and recast it to be slightly thinner, which put a lot of white space in the design. He just kept opening up the space in the font. And the Economist bought it.

This story tells you the power of design and the power of whitespace.

Whitespace and Hierarchy are in the Poynter Style Guide.
studiozeldman.github.io/poynter-style-guide-2017

We learned that everything is about getting the customer to LEAN BACK. We do this with big type, hierarchy, minimalism, articles direction, whitespace, and TWO MORE THINGs: Your content should be BRANDED and feel AUTHORITATIVE.

Why?

Branded – when all sites look the same all content appears equal. He calls this ‘the Facebook Problem’ that a rant and a well-researched argument look exactly the same on Facebook. A link to a reputable journal and a link to a disreputable blog looks the same. So when you get OUT of Facebook and go to your site it should look like YOUR SITE. And that brand should be authoritative – it should convert that you really put a lot of

The Trajan mystery –
It is a font based on the imperial arch of Temporary Trajan. The Romans not only conquered their known world, and they looked fabulous doing it. They didn’t just conquer, they conquered wearing these big gold suits and they made monuments to themselves so people would go ‘wow the emperor kicks ass!’

Let me tell you when you’re carving a marble arch, you don’t get to iterate. And you don’t get to AB test. Chisels don’t make dainty letters – they make big impactful letters.

A Type designer in the 70s looked at this and said ‘this would be a great font’ and made it and called it Trajan.

Every movie that even hopes to get an Oscar sets the movie title in Trajan. This is an example of authoritative.

Jeffrey’s article TO SAVE REAL NEWS.

SLOW DESIGN TOOLKIT:

1. Big Type
2. Hierarchy
3. Minimalism
4. Art Direction
5. Macro & Micro Whitespace
6. Branded
7. Authoritative

@zeldman