3

I just came across this article by Paul Lewis. The first thing I noticed was the multi-column layout.

Screen snippet

It's great that people are trying to break the usage of overused templates for articles/blogs, but there's something not quite right about it. Maybe it's just due to how other articles are structured but I find that it looks more like a grid of different things and my eye doesn't quite know where to look.

How could we make this more usable? How could we draw the user to the start of the piece by default? Or is this layout never going to work as well as other possibilities?

Comparing it to printed articles in magazines, etc., does this not feel 100% right because you never just see a flat square group of columns like this? E.g. In a magazine, the first column might be taller than the rest because there might be an image above the rest, etc.

4 Answers 4

5

Very long lines of text are hard to read, and people tend to make mistakes when finishing one line and wanting to move to the next line. Multi-column formats help deal with this problem, but multi-column layouts are not appropriate for every situation.

Multi-column articles work well when you don't have to scroll to see the bottom of each column. Think of a newspaper. On a website it means that the user has to scroll to the bottom of the page to finish reading column 1, then scroll back up to continue reading column 2, then scroll down the page to finish reading column 2, then etc. etc.

The designer may not have this problem if they are designing on a large screen, but that is not the case for the majority of users.

The only time that multiple columns work well for articles on digital devices are when you have to change the page to continue reading. This is what The Economist app for iPad does to maintain their standard column layout, and it works well.

enter image description here

1

Internet users are very much used to one (text) column layouts. Depending on your target group (e.g. web developers) you might want to break with this convention to underline individuality.

For the web, mainly consumed with desktop computers, yes, this layout is never going to work as well as other possibilities. The experience may be better on tablet computers. But then I think one should go one or two steps further, like designing the page so that there's no vertical scrolling.

Options to increase the usability of a multi column layout are

  • numbering the headings (strongest)
  • using drop caps
  • using line indention



Personally I would always prefer bigger font size than multiple (text) columns.

1
  • I really like this answer. "you might want to break with this convention to underline individuality" Yes! Horizontal scrolling would suit I guess. Thanks for the options, I feel like others are just giving the general best practices on line-length, etc. which doesn't really answer the question specifically about multi-column articles and this specific article under debate.
    – Adam Lynch
    May 11, 2013 at 19:00
0

Maybe Paul Lewis wants his blog look like a newspaper to make it more institutional. If so he should have used drop caps and indented lines, and not a (sub)title to start the article.

Those elements serve the reading, that is why they are still used in nowadays newspaper , they are less about aesthetics and logic than readability.

enter image description here

Also he might think that everybody has a super huge screen and he really is into condensed content because I really do not understand why he is making us scrolling up and down when we can just scroll to one direction or why the columns' height are not responsive.

0

Line length readability suggests that each line should have 50-60 characters (or 75 max) per line for optimal reading experience.

The left paragraph has ~100 characters per line, whereas, the right one has ~50-60 characters per line. I find the right one to be easier to read.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I see many sites with 2 column designs who use 1 column for media and 1 for text. Making for easier text reading and better space utilization.

mockup

download bmml source

The point is, you can use multi column layout quite effectively to convey your information. You just need to find out what design fits your bills. Like, in the example you mentioned, the 3 column layout, while it makes the text easier to read, the fact that it is spanning across my entire screen makes it a bit difficult for me to consume the content. Guide the users' eyes with you design/visual cues and make the content easy to consume.

One problem I can point out in the example you mentioned, there is no enclosure for the text and the common background makes me jump the space between columns. Look at the 'SAME HYMN SHEET, DIFFERENT PAUL' paragraph, because it is in a separate color background, my eyes are locked within the region while reading it.


Just noticed this question in the side bar suggestions: Ideal column width for paragraphs online

The answer gives some nice summary of rules of thumb:

General Rules of Thumb Take these with a grain of salt, they are just guidelines; feel free to break them. I repeat, they are not "one-rule for all" you need to adopt; just a push/clue in the right direction.

  • 12 words per line
  • 39 characters regardless of type size (alphabet-and-a-half)
  • multiply the point size by 2 and interpret it as picas (points-times-two)
  • around 50-60 to at most 75 characters (spaces included) — this is usually the guideline borrowed from our friends in typography

"The Elements of Typographic Style" by Robert Bringhurst, mentions the following more specific measurements

  • 45 to 75 characters line length (measure); specifically 66 including spaces; Single Column
  • 40 to 50 characters; multi-column
  • 85 to 90 characters; discontinuous text; generous leading
  • 40 characters (minimum); justified
  • 12 to 15 characters; marginal notes; English

Variables in readability:

  • font-size
    • larger = I've tried it, (some) people find it annoying. Just aim for the happy "medium size"
    • medium/standard = larger width
    • smaller = smaller width
  • line-height
    • large (1.9+) = easier to scan lines, longer lines become more acceptable
    • normal = shorter lines
    • smaller = very short lines
  • content length
    • big blob = long lines + large line-height
    • short message = short lines + reasonable line-height
5
  • "Guide the users' eyes with you design/visual cues and make the content easy to consume." How?
    – Adam Lynch
    May 11, 2013 at 18:47
  • @AdamLynch the 2 column example I mentioned. The structure of navigation for that would be horizontal and then vertical. The user scans the image/text heading and and moves side ways and then moves down to the next item.
    – rk.
    May 11, 2013 at 18:48
  • Hmm. As far as I can tell then you're not even saying media is the key here; you're suggesting rows over column. Am I right? Or you're saying use columns but with no text blocks which can be read in more than one order?
    – Adam Lynch
    May 11, 2013 at 18:51
  • @AdamLynch For the example, it is rows first. I am closer to your latter point, use columns if you need, but just make sure the design supports better reading. Imagine 2 or more columns, BUT, instead of having just the background image, you have a background enclosure for the text to guide the eyes. Something like i.imgur.com/JQBJfhY.png
    – rk.
    May 11, 2013 at 18:57
  • I noticed you added that comment about what's wrong with this specific article (lack of "background enclosure") to your answer too, thanks. So even alternating colours / zebra-striped columns would fulfill that
    – Adam Lynch
    May 11, 2013 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.