Forum Moderators: open
1. Writing shorter paragraphs
2. Including frequent headings and subheads
3. Wrapping content around the occasional image/call-out box
4. Using extra line height
I've been working to increase my "layout vocabulary" and increase the number of ways I can make a page inviting to the reader. These include:
5. Inserting a small graphic as a section break
6. Styling bold (strong) text in an accent color
7. Adding a subtle background color behind certain "logical units" in the content
Slick Ain't Sticky
These techniques measurably increase site stickiness measures -- such as page-views per unique. A few months back I coined the phrase Slick ain't sticky. Part of what I'm commenting on with that sound byte is the "gorgeous" graphic design. The kind of page with color coordinated everything and text blocks that work as smoothly integrated visual elements.
Yes, there is an aesthetic pleasure in first glimpsing such a page, no doubt about that. But in my view, the eye just glides around the page in a right brained feeding frenzy - and the visitor has trouble shifting into a left brain mode that says "I want this bit of information".
Visual Flypaper
And so I would NEVER eliminate underlines for inline links, or slick up the page layout beyond a basic aesthetic level. Just a few rough edges on the page can create what I think of as Visual Flypaper.
I try to distribute these elements in the most interesting sections of the content - drawing the visitor who is just skimming to read a tantalizing bit of information and hopefully back up and start reading in earnest.
Designers I work with dislike the contrasting accent colors that I style for bold text. They say it makes the page look like a crazy quilt. But I find that "crazy quilt" elements act like welcome landmarks - and even as magnets. They make the page much easier for the left brain to work with.
Other Ideas?
What other methods do people use for increasing the readability of a page?
Yes, I started out designing my pages with the purely "aesthetic" approach and have since moved back to the "informative" by restoring those undelined text links. My stats immediately reflected an 20% increase in page loads.
Another method is implementing data tables or graphs to break-up the content and present authoritive comparisons/trends. This also serves to support the content and augment the validity of the page as a whole.
On some pages I increase the space between paragraphs and/or use <h3> headings or image headings to distinguish sub-topic changes. I am also fond of linking the remainder of the content on additional pages with the "continuing..." or "read more..." This enables me to put more themed topic material on a single page, thus acting as a portal for other sections of the website. This has worked well.
I also try to make headers easy for the eye to "grab" in one glimpse, rather than requiring a scan. How much any reader will take in with one look varies much from person to person, with some people reading word by word, and others grabbing 10-word phrases and making great use of peripheral vision.
So, I often force a line break within a header, rather than letting it stretch across the div.
For readability, I think this:
How To Enjoy Driving
In Rush Hour Traffic
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
lacinia purus vitae magna. Integer tellus mauris, placerat et,
vehicula in, ultricies sed, enim. Suspendisse at dolor vitae
neque ultricies dapibus.
...beats this:
How To Enjoy Driving In Rush Hour Traffic
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
lacinia purus vitae magna. Integer tellus mauris, placerat et,
vehicula in, ultricies sed, enim. Suspendisse at dolor vitae
neque ultricies dapibus.
A related point - I almost never allow a significant gap between a header and the following text. When I do, I make sure that the gap that precedes the header is larger than the one that follows it. The eye needs to associate a header with its related copy in an instant.
And yes tedster, the break inside the header in that last post was helpful.
After all, think about reading a book. Your eyes move much slower and less distance than a webpage.. and you can feel the difference in just a quick test. Adding that break makes it more like reading a book.
In fact, i was just thinking.. Hold your forefinger and thumb open to the width of 1 book page.... and hold that between you and the monitor. This width is actually as large as that div u showed, but the difference is in this case, there are only 8 words in your header, as opposed to maybe 16 in a line in a book. Faster eye speed. So, if that is so, your break/header div lets the user read at the same speed as reading a book.
...maybe the "thumb-forefinger" test is a good one? For how for I sit from teh screen, and my screen size, that makes a good div size half of that, or only 20% of the screen. So simply put, newspaper style columns are best for reading perhaps?
This is all question more than statement , btw
Your width observation fits with how newspapers split information over several narrow columns. I have always wondered why books never took over the newspaper "narrowness".
For speed reading and quick scans of articles you need narrow columns.
What I am trying to improve is the amount of viewers of my site who will actually fill in my feedback/contact us form:
What phrases will invite people to really fill in the minimum fields and press send?
Should I add a nice image of a friendly and good looking woman answering a phone (my clients are 90% male technicians)?
What link texts to use from the informational page to the contact form?
It seems to be fashionable right now for many websites to have pretty coloured text which is too similar to the background colour. Dark beige on beige or grey on white are two common culprits. This is very hard on the eyes and can make reading become physically painful. I've even seen this on a number of commercial websites recently.
While I admit I don't have my monitor in the most optimally lighted location (there's a window to my front left), I do have the contrast etc carefully adjusted, a good quality, large monitor and an up-to-date prescription for my glasses. And what are the chances of everyone having their comptuer set up perfectly anyway? So if I can't easily read something then there's a good chance many others won't be able to either.
This is pretty much my pet hate right now but I do think it ties in with Tedsters adage "Slick ain't sticky" (which I like :)). If the contrast is low, then the text doesn't jump out and get my attention even if it is perfectly readable. I don't want to have to work for the information in a page, I want it to be right there.
One possible problem with coloring bold text: an emerging standard (or maybe it's just a trend now) is to make links bold in another color. While I agree with the concept to make important words or phrases stand out, I think many visitors will think they're links, just as you would think any underlined text is a link. I automatically moused over the ones in your post to see if the pointer changed.
Refreshingly, they do more than just cite Nielson studies from 5 years ago. You can find their list of References [psychology.wichita.edu] here.
