15

Noticed Facebook changed its tooltip names rendering to vertical. That made me wonder if it was actually easier/faster to read a list of name inline in a sentence or in a vertical list?

Is there an easy way to test that?

enter image description here

enter image description here

2
  • 9
    If you choose the vertical list, remove the commas. They distract the user and you don't need them anymore. Jul 11, 2014 at 11:48
  • 1
    Indeed, that was just the example :) Jul 11, 2014 at 11:53

7 Answers 7

13

From the article Ultimate list of online content readability tests this example is blockquoted.

Readability depends on lots of things…

  • how you write
  • how your reader reads (slowly or quickly)
  • where your reader reads (a quiet library or a noisy cafeteria)
  • what your reader is reading (a paperback book or an e-Reader)
  • what experience your reader has (beginning or advanced)

…and so on.

Readability can even depend on how your writing is presented or designed. Before I made the items above a bullet-point list, for example, I had them all in one paragraph separated by semicolons. They’re easier to read now. If I make the type small, bold and italic, that can affect readability. How words look crosses over into legibility and graphic design, however, and you might not be able to control that.

You definitely can’t control all the factors that influence your reader, either.

But you can control how you write.

If you find the time, please read Arienne Holland all way through since there are a lot of things to think about in terms of readability.

So readability in a list should be presented as a vertical list to make it easier for the user to find what they want - fast. You will have a problem if the list is too long, and you may consider using another control than a tooltip for that specific case. Personally I think your list of ten items is the absolute maximum.

4
  • 4
    -1 This post seems off-topic to me. Large parts of it are about the general issue of readability more generally, rather than about the OP's specific question of vertical vs horizontal lists. Jul 11, 2014 at 20:25
  • 4
    @3nafish Point taken. Love the fact that you have the courage to say why you down vote my post. My intention was to build context in general explaining the wider concept of readability. Thanks for giving me the option to reply. Jul 11, 2014 at 20:31
  • 3
    I was almost ready to agree with you @3nafish until I read the last paragraph. The post might actually be better if the last paragraph was the first paragraph, followed by "let me explain:" or something, because it's easy to miss that very important point where he actually answered the question.
    – corsiKa
    Jul 11, 2014 at 20:41
  • a list should be presented as a vertical list to make it easier for the user to find what they want - fast > Sorting the items alphabetically also helps a great deal. A search field to filter items is another option, although not that useful for a list of persons that liked something, or did whatever.
    – CodeManX
    Jul 26, 2014 at 1:24
10

Yes. Users don't read, they scan. If you are looking for a particular name, a list organised alphabetically is much easier to scan than putting them all inline in alphabetical order. User can scan the list based on the first letter, without reading the entire name.

4
  • What's the influence on both of not being alphabetically ordered? Does the vertical version still wins? Jul 11, 2014 at 9:19
  • 5
    Yes, as the user will (usually) be looking to match the first letter(s) of the name, before scanning deeper into the text. (i.e. first 'A' then 'l' for "Aline") It is easier (less cognitive load) to locate the vertically aligned first characters. As I understand it scanning may be for a pattern of more than one letter i.e. "Boo", but will nearly always start at beginning, and not be entire word i.e. "Bookers" and "Booth".
    – Jason A.
    Jul 11, 2014 at 9:40
  • Another point here is that the individual values blend together when ordered horizontally, and the wrapping point is often arbitrarily determined (by the size of the container, say) rather than meaningful. Meanwhile, a vertical list keeps each value discrete. Jul 11, 2014 at 12:43
  • "Is it easier to read an inline or vertical names list?" "Yes." ;)
    – Izkata
    Jul 12, 2014 at 5:35
1

I don't think it matters as much as having a predictable order so you can scan the list rapidly. I'd expect the column to make a difference for younger readers - and speed readers to have trained their brain to tackle both efficiently.

Column looks easier for short lists. Ideally, for very long lists I'd love a table display where you keep the small tooltip surface and squarish aspect ratio, but still allow fast scanning of the first letter/patterns.

2
  • Do you have any evidence to support the assertion that it will make a difference for "younger readers" and "speed readers"? Please cite sources. Jul 11, 2014 at 20:20
  • 1
    No, that's why I said 'I'd expect'. My data points are myself and a 6 year old - he can find stuff well when logically separated, but has a harder time finding words not obviously isolated in sentences.
    – ptyx
    Jul 11, 2014 at 22:17
1

If the number of items will be small enough to be seen at a glance, a horizontal comma-separated list may be best. Otherwise, if the number of items will be small enough to fit in a column and every item is short enough to fit in a line, a single-column list is also good. If there may be too many items to fit in one column, and the lengths will be similar enough that one may use multiple uniform-width columns without having to break items or waste excessive space, and if using a multi-column list would allow all items to fit in a single view, a multi-column list may be the best option.

If the longest item length may be much larger than the average length, or if the number of items may be so large that the items cannot all fit in a single multi-column view, then it may be better to either use a scrolling single-column view or a possibly-scrolling text block where as many items are packed onto each line as will fit.

An application should generally try to be consistent in picking one of the above formats, rather than basing its selection upon the number and character of the items to be displayed. There's quite a bit of leeway in the selection, though. If it's expected that all items will fit in a single a multi-column view, but it's possible they may not, it may make sense to divide items into "pages", each of which consists of a number of columns that are slightly shorter than the view length. The MS File Open dialog box scrolls horizontally, but vertical scrolling of paged screens may be easier to work with.

0

I can add when I was studying The Not So Short Introduction to LATEX 2ε there was a quotation:

A typographical rule of thumb for the line

length is:

On average, no line should be

longer than 66 characters.

This is why LATEX pages have such large

borders by default and also why multicol-

umn print is used in newspapers.

It is on the PDF's page 59 (page 45 of the physical book).

0

I may be late to this, but my first thought is a hybrid of the two. Cubing it could make things easier to scan - the eyes don't have to move as much.

Example

-2

The brain processes horizontal displays of information faster than vertical displays. Vertical scanning is associated in the brain with positional computing, i.e. where you are in relation to your surrounding. However, the brain stores information as lists, so it highly prefers information presented as lists, majority of which are vertical.

Basically: for faster processing horizontal. If you want the user to remember it, vertical.

1
  • 2
    Support for the suggestion that the brain stores information "vertically" is rather hazy...can you cite any sources to support this idea? Jul 11, 2014 at 20:18

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.