Sunday, May 31, 2015

legibility - Do columns of text hurt readability on websites?


I have no problem reading articles that are broken into multiple columns of text in newspapers and magazines but this does not seem to carry over to the web for me.


I recently came across an article on the web that had two columns of text. I found it very hard to focus on the right column. I messed with the CSS a bit and even after I made some color, font-size, column-gap and line-height adjustments I still just couldn't seem to focus on it properly, my eyes kept drifting to the left.


Is my brain just so used to one column of text being the main content of an article on the web?


Also, this article was long enough that I had to scroll back to the top after I finished the left column to read the right. Is this as bad for usability as I think it is? It's definitely wasteful to have to scroll to the top.



Answer




Its kind of hard to figure out what might the exact issue with the layout of the text without having to see it but here is what this article (Practical Tips for Utilizing Columns of Text in Your Layouts) says about using multiple columns in websites



Many print and web designs you see today employ a simple, single column design for the main text element. Most printed books use one column of text per page, although this was not always the trend. Many older hardcover books featured two columns of text per page; multiple column formats are still commonly used for books such as dictionaries and almanacs. Using a single column for type on websites is preferred so that type is easy to read as you scroll down the page.


Multiple column layouts are best reserved for applications that can be viewed all at once, such as in print projects or for e-readers. Multiple column layouts are most commonly used by newspaper and magazine publishers and in newsletters.



This academic paper (Is Multiple-Column Online Text Better? It Depends!) has this to say about how reading speed might be affected by the use of single and multiple columns



The purpose of this study was to examine how multiple columns and text justification impact online reading in terms of reading speed, comprehension, and satisfaction of a narrative passage. Results from this study showed that reading speed was significantly faster for two-column full-justified text than for one-column full-justified text. Post-hoc analyses showed that it was the fastest readers that benefited the most from this format.


Slower readers showed their fastest reading and highest reading efficiency at the one-column left-justification condition. This may be because the very short lines impeded the reader’s ability to take in an optimal amount of information at each fixation. Gutherie & Wigfield (2000) assert that a slow reader may lose all information about the beginning of a sentence from short-term memory before he or she has read to the end. Slow readers may also have had difficulty "keeping their place" with the multiple line length conditions for this same reason.




Given below is a graph of the relative reading speed across multiple columns from this article


enter image description here


With regards to your comment of



Also, this article was long enough that I had to scroll back to the top after I finished the left column to read the right. Is this as bad for usability as I think it is?



I would definitely agree since you are have to do a sudden transition to a center point in the screen while moving your eyes from bottom to top and while reading ensure that your scan starts from the central point and not from the extreme left. With regards to the optimal amount of text per paragraph,check out this excerpt from this article about Readability



Blocks of text should not be too long or too wide.


When paragraphs get long, they’re harder to read because there’s less whitespace. Whitespace gives paragraphs shape, which acts like visual bearings, making it easier to find your place, and to find the start of the next line. Using more, smaller paragraphs suits web content particularly, because it lets you subtly highlight more useful phrases, by putting them in their own paragraph, or starting a new paragraph.



For similar reasons, long lines (wide paragraphs) are slower and harder to read than narrower ones. Lines of around 100 characters present neat bite-size chunks of text that can easily be decoded, and also make it really easy to scan round to the start of the next line.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...