Scannability Equals Profit
No one reads on the internet anymore. Right? Time and time again it is proven that we just skim and scan, eyes darting around like a chicken with its head cut off. When are we as web workers going to fully recognize that?
I use Facebook pretty rarely, but today I received a message from a friend so I fired up Safari and logged in. I immediately was distracted by how perfect the messages area of Facebook is designed. See below.
You might be thinking, ok, this guy is crazy because that text is too blurry to read. If so, you missed the point. In order to really dive into why I think it is designed so well, I’m going to add some overlays so it is easier to reference things.
The screenshot above is around 660 pixels of real estate when live in Facebook. I shrunk it down a bit to fit here. Let’s start with columns 1 and 2. Facebook could have merged those columns together. I mean look at all the vertical space left unused for each message. The reason Facebook separated the image and details is when you merge them into one column you lower scannability. It’s definition time. I define scannability as the ability to quickly scan vertically and comprehend. Scanning is a very vertical thing. As your eyes shoot down the messages page, it is very easy to scan the images, then the names and then the message body. It would be much hard to for your brain to comprehend things if it had to process, text then image, text then image, text then…you get the point.
Speed Reading
Try something real quick for me. Reread the paragraph above, but as you go through the lines, don’t trace all the way from the beginning of the line to the end. Start on the second or third word and as you get two or three words from the end continue to the next line until you have read the paragraph. The amazing thing is, your brain sees and comprehends the words on each end of the line, even though you don’t look at them. I picked up this speed reading technique in the Four Hour Workweek by Tim Ferriss.
This is why Facebook, whether consciously or not, is only using a three hundred pixel column for the message body, instead of the four or five hundred pixels that are available. As columns of text get more thin, there are fewer words to deal with on each line, which makes it faster to scan vertically and comprehend.
Poor Scannability Example
Take Twitter for example. I love Twitter like a son, but I find their web interface almost unusable. Aesthetically, it is pleasing, but the line length of the tweets (around 400 pixels as of article posting date) is so long that I lose the ability to scan vertically through them. The length mixed with the fact that the username is inline in the tweet forces me to read my tweets. Yeah, that is right, I don’t like reading my tweets. I scan them for keywords and such and only read those that catch my eye or are by someone I hold near and dear. I do the same thing on your blog, that is, if I read your blog.
I believe scannability is one reason Twitterrific, Snitter and all the mobile Twitter clients are so popular. Remember? People don’t read anymore.
The Point
Yes, I do have a point. This is not just a rant. I think as screens started getting wider, web workers decided they should use the extra space. I mean, we can’t leave it blank, it’s above the fold (don’t get me started on that). Wrong. Just because the space is there, doesn’t mean it should be used. Next time you begin work on a website or web app, remember these three simple steps.
3 Simple Steps
- Scannability
- ???
- Profit
Post and Author Info.
Published October 16, 2008 by:
Commenting is currently off for this post.
So far there are 15 comments.
I love you John Nunemaker. You shall henceforth be called “Scannernunes”.
This is such an important issue, not only for designers, but to somehow communicate more clearly to non-designers (e.g. “clients” and “stakeholders”). Line lengths (the measure in typographical terms) and white space go hand in hand with blocks of text, yet this seemingly simple concept is lost on many.
One of the downsides of good design is that these things become invisible, making them rather difficult to show a client…
October 17th, 2008
Whew! Glad someone commented. Was beginning to think I was offending or no one cared. :)
I like that you threw in the “official” terms as I, not being a designer, don’t know them.
October 17th, 2008
There is this applied science of a visual learning curve, where it is defined that our attention span across a design as humans has changed. From what I have seen it is basically about half of the screen from the bottom to the top right (like a diagonal). I think in all honesty the applied science of grid layout does apply to this attention span difficulty. You can’t change long text and people unwilling to read it, but you can change what is focused, and what isn’t focused, and this all plays into User Experience and human-centered design. Would love to talk more, email me!
October 17th, 2008
An absolutely great post – much thanks, John!
You’ve made it clear to me why narrower columns of text actually work better, besides simply looking better. It’s pretty surprising how well that speed reading tip works too.
October 17th, 2008
Much thanks, John.
October 18th, 2008
I didn’t understand any of that because it wasn’t squished enough
or maybe it was just the fact that you are using words to try to communicate to me.
but seriously—good stuff. totally agree.
October 18th, 2008
This looks like an interesting post, but I didn’t read any of it. Can you use more pictures next time?
October 18th, 2008
Thanks for sharing!
October 19th, 2008
Now I’ve got this great post I can send to customers when they ask me to make the lines longer “because there’s a blank space”.
Yay :) Thanks John!
October 20th, 2008
@Brandon – Will do. :)
@Mark – You’re welcome, glad you liked it.
@Ziv – Haha. Hope it helps. Viva la whitespace!
October 20th, 2008
First: I love this comment form auto-updating. Very nice presentation and interaction design!
I’m intrigued by how you pointed out we scan vertically.
I’m going to guess that if the web was a primarily horizontally scrolling platform (or we read lengthy text from right to left like Chinese, rather than top to bottom in English), we’d design for horizontal scanning.
Context is key. Everyone is in a hurry on the web, designing (and writing) for scannability is crucial. Great post, thanks! =)
October 20th, 2008
This is actually kind of a brilliant idea, I’d never thought about line length. I always just preferred ‘skinnier’ blocks of text. I’ve also noticed that your comments section is almost exactly like the facebook messages area. Nice work.
October 20th, 2008
Interesting point of view. Thanks for sharing, we are just about to relaunch our website and you got me thinking.
October 28th, 2008
I’ve noticed this myself that I can be a lazy reader and get bored if there’s too much text..I just want the information quickly and get then get my next ‘buzz’ from the reward of a new page of information. There is a science to visual communication, even football coaches employ experts… Arsene Wenger/ Alex Ferguson have all used visual experts to improve their game…fascinating!!
October 29th, 2008
Awesome read! Most people wouldn’t realize how such a small principle can make such a big difference :) Keep ‘em comin’!
November 1st, 2008