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