Displaying 2 lines row/result in a List view and UX

Question

I am seeing that when showing results based in 2 lines, the perception from end-users is not good or as intuitive that in a single line result (even having a slightly different background color)

Is there best practices to present a list of multi-line result? Any suggestion to apply to the 2nd mockup?

Answer 1

Best practices for multi-line list items aside, the underlying concern here is visual grouping - users should be able to tell that a collection of elements are grouped.

And for visual grouping you have Gestalt Principles:

Single Line List Items

With single line list items, visual grouping is largely based on continuity - the vertical alignment creates a perceptual horizontal group.

Multiline List Items

Once items occupy more than one line, the continuity principle breaks, so you need to employ something else. You options are:

• Proximity - Have larger gaps between items than between lines.
• Common boundary - Introduce border around (or between) each item, or a background (either toggle background or same one with gaps between blocks).

Which one you choose is more of a question of both graphic design (aesthetics) and context (how the rest of the interface looks like).

To give one example, in the next design a border between items creates clear visual distinction (source):

Answer 2

There are several examples of results with more than two lines, such as Youtube Studio, where a referent graphic element creates the separation without practically any visual perception problem and without using any added visual artifacts.

In the case of the question, I would try to find this referent element. I have no information about the content, but for example the date block may be an idea, all depends on the visual priority of each item.

On the other hand, not all the elements must be graphically the same, establishing visual contrasts such as the use of bold letters, fields with different graphic weight or managing well the blank spaces, helps to create well-defined compact visual areas.

Answer 3

You could use different implementations of Gestalt principle to solve this:

• Law of Common Region by visually grouping items in one result (pretty much what you did on your second mockup);
• Law of Proximity by arranging grouped items to be closer to each other than to another group (essentially, by leaving more space between results);

User testing is the best way to know which solution is better in your implementation.

Also, please see this question and answers for whether to use alternating coloring of the results or not.

Answer 4

I'd be happy with the second mock-up, and unhappy with the first.

It could be made even clearer by implementing a mouse-into action which emphasized the panel a bit more when the mouse was within it. (Discoverability: if unsure, just point without clicking, and it becomes more obvious).

Comment: is it a list view, or a list of forms? The mock-up suggests the latter. For a pure read-only view, simple tables have a lot going for them. Familiarity with the layout, for one. (DataTables, for another :-) When I've had difficulty with textual tables becoming too long, I've always preferred to make the entities split onto multiple lines within a table cell, with the start of each entity remaining on a single horizontal. With input elements and less textual elements in general, this isn't really applicable.