How Did You Screen-Read This?: Designing to Keep Attention
Dec 10, 2008 by Patrick Winfield | Blogging, Design, Social Media Marketing
We have heard numerous times how people skim articles and posts online, rarely reading everything, looking only for bits of information and then fine tuning focus on what looks important to them. Did you read all that? Good your still with me.
Lets dig into the way we read online and learn how to potentially format content that keeps the readers attention longer.
Last time you were in a book store, shopping for the next book, how did you go about this search? Assuming you didn’t have a title/author in mind maybe you cruised the non-fiction section looking at covers. Then a book cover with a picture of the president elect caught your eye, THE AUDACITY OF HOPE. What happened next?
You turn the book over and read the back, the synopsis, and get a feel if this is of interest to you. “Maybe this self-portrait of the next prez will be intriguing… or maybe I will wait till he writes the next one.”
This is also how blog posts and articles are read online.You are first attracted to any imagery or titles, then the summary or synopsis (first paragraph) and finally the article itself.
Jakob Nielsen, in a recent article about Online Literacy, calls the way people take in the page as the “F-pattern”. Users read all the way across the top and as they proceed their descent quickens and horizontal sight contracts, with a slowdown around the middle of the page. Towards the bottom of the page the eyes move almost vertically ignoring the lower-right corner of the page. This is all happening very quickly. “F for fast, that’s how users read your precious content.”
Lets break it down. How do you find your articles or blog posts?
Headlines First
The title or headline will be the most likely source of a link to the content. Maybe through a RSS reader or a link through another blog. Or maybe through a social media site like Digg/Reddit/Delicious. Here the headline is king and that must grab someones interest. However you can’t lie or be overly sensational, nor boring. Ask a question, tease them into the content, make it spark some curiosity.
Image and Photos
This will supplement the headline. Also back it up on some of the social media sites with a thumbnail, and this is important. The image should relate to the text. If you have an article about holiday shopping and a photo of a great white shark jumping out of the water towards a helicopter next to it then you will loose some trust in the reader and frustrate them, unless you back that image up somehow.
The Synopsis (or back of the book)
Great, you found a cool book cover (graphic/photo or headline link) now you turn it over (click through) to read a summary of what it is all about. This will be the opening paragraph. This should sum up the content and also lead the reader into the rest of the information.
Like the F-Pattern says, at the top of the page we still give more of our attention. Make it just like the headline, but with more emphasis- it should encourage readers to read on.
The Rest of It
The body of the post should be thought of in the same way as all the other elements. Be precise and make it scannable. How is your paragraph column laid out? Is it wide or more narrow like this post? This should be entered into the equation when deciding how to make the text more bite sized.
With me, I will sometimes read the headline and if it interests me I will skip right into the content and scan that for sub-headings and bold text that may summarize what I want to read. If I think that is interesting I will move back to the top of the page and read down, then skip what I already read or read again. Or if the headline grabbed me but the text was lacking- I am outta there…FAST. Weird, I know, but I find myself doing this.
Some articles may require long-winded text that everyone will consciously read because the content is so rich and has the audience already, but this is not always the case-more like the exception.
If the text is dense the reader may tend to drift into scan mode. Combat this by breaking up your content with shorter paragraphs an more digestible information. Here are some ways this can be accomplished:
-
Lists (yup…this)
-
Sub Headings
-
Graphics and Photos
-
Pull Quotes (shown above)
-
Bold and Highlighted Text
-
Text Links
Finally you need to wrap it all up. This should just be a few sentences on what the content said to the reader, repeat some main points and maybe ask a question for them to think about in the future or ways to keep the idea going. Today it is important to make all your content accessible and approachable for users, following some of these guides will surely help you do that.
What works for you when you read content online?
Bookmark this post:
Design and Appearance: Affecting the Results in Social Media
Dec 5, 2008 by Patrick Winfield | Design, Social Media Marketing
How many times have you picked up a magazine because of what is on the cover? How many other magazines did you see that didn’t catch your eye? Online we have even shorter attention spans these days (9 to 5 seconds is the new number) because our options are so vast we have no patience. Jakob Nielsen, Nielsen Norman Group, told BBC that “People want sites to get to the point. They have very little patience.”
Visitors to a website or a piece of social media content are heavily influenced by first impressions. How something is designed is not more important than content, but it certainly helps to keep the attention and interest.
Graphic design is visual information management with the main goal to display a strong visual hierarchy that can lead a viewers eye through a page. We scan pages when we first come to a site, looking for elements that capture our eye and then fine tune our vision to investigate deeper. Present the most important information first with the greatest emphasis.
Pictures
Pictures and images help with creating first impressions. I am always surprised whenever I am on Digg and a post doesn’t have a thumbnail image by it, even some posts in the IMAGES category. But pictures all over the page chaotically are distracting and do not create and contrast that attracts the eye. The design must strike the right balance to drive attention with visual contrast and the feeling of organization. And there must be some relevance in the picture, have it connect with the other content.
Direction
Direction can be an element that is used to create movement that a users eye will follow through the design. Does your content have a lead in image or a title with a larger font size ? Where is it placed? Is it the largest image/font size in your design or are all the images/fonts the same size? Create contrast with size, color, and shape.
Load Time
Page load times are another way to secure first impressions. Does it take longer than a few seconds for your page to load? I might not have seen it then, same for a lot of other potential viewers. Like Nielsen said, I am impatient with a site when it takes long to load unless I know what the potential content will be or if I need to access it. If a page loads quickly then I may be more likely to navigate further into the site knowing I won’t have to wait long for more content.
Navigation
Designing with navigation in mind can drive traffic further into a site. Including internal links in the content will encourage users to view additional pages. The more content that they may be interested in, like the 5 different forms of social media news momentum, the better for everyone.
Bite Sized
Make it easier on the reader by breaking the content up into bite sizes. Simple paragraphs, highlighted or bold words, lists and white space so that the eye can flow around the content smoothly. Look at the example below of UseIt.com’s simple way to organize the content with a big title font and then small summary highlighted in a yellow box- then the full text underneath it.
How is your page being viewed? Find out how people see your website, photo or ad and which areas are getting most of the attention with a free heat-mapping service at feng-gui.com. It uses an algorithm that predicts what the human eye will be most likely to be looking at. This algorithm reaches a 70% of accuracy compared with Eye and Mouse Tracking.
For further reading elsewhere, check out Jakob Nielsen’s top ten Guidelines for Homepage Usability. Here he talks about how potential customers will get a first impression of your homepage, company, and decide whether or not to do business with you based on that impression.
If you have the content to drive in traffic then don’t drive it away with bad design. Follow some of these simple guidelines and it can help with the first impressions people get.
What do you think helps and hurts first impression on a page? What about widgets and add ons, do you like them or are they overbearing? Social media site links and submit options, should they be on the top of the page or on the bottom of the content (when you finish reading it)?
