8

I am designing an app which has lots of data on any given screen, I've search Google and UX stack exchange and can't seem to find anything (perhaps I'm phrasing my search term wrong).

Is there any research into best practise for displaying a list of key value pairs?

Approach A - right align keys, left align value

        Key: Value
 Longer Key: Value
  Short Key: Value that could be long

Approach B - Left align keys, right align value

Key:                              Value
Longer Key:                       Value
Short Key:     Value that could be long

Approach C - Left align both

Key: Value
Longer Key: Value
Short Key: Value that could be long

Approach D - something else?

I'd be interested to know what the anecdotal best practise is here, and bonus points for actual research/testing of the best approach.

Improve this question
2
  • I'm currently dealing with the same issue (also B2B software). I am contemplating wether key / value should be side-by-side or key-above-value. One question to ask is do users know the keys listed? If the use case is 'finding an email address', I would argue a key-above-value layout is less useful as the 'to scan' content is twice as long. The list in my own situation doesn't have fixed keys and has a lot of variety. Hence the key-above-value might be better, but I'm not sure.
    – Martyn
    Commented Jul 7, 2017 at 13:17
  • @Martyn - I am also tackling the scanning and familiarity with the data problems. The data displayed will include a lot of variety, however, each user should ordinarily be focussed on a subset, so will quickly become familiar with it. However, there will be occasions where they have to break out of their 'familiar' set.
    – Jon Kyte
    Commented Jul 7, 2017 at 16:33

2 Answers 2

Reset to default
9

Option A (right aligned keys and left aligned values) makes the most sense in most situations (as always there may be some cases eg RTL languages where you need to adjust)

Depending on the data you likely always know the key part, and it is relatively short... vs the value part that can be quite long or if a data structure, its own tree of values. You can easily wrap long values as needed (eg paragraphs of text). I would however ensure that the key and value are top aligned to their respective rows so that the association is still clear if you end up with really long values.

Example:

enter image description here

Notes:

  1. I've found that right aligned keys/labels work better than left aligned. By having the (key:value) items aligned close to each other it is very clear as to which key goes with which value. If the keys get long, the whitespace between the key and value grows forcing the user to have to scan more to make the association.
  2. Although not required, providing a subtle border between "cells" makes it crystal clear what value content matches with which key, and where rows start/stop.
  3. Although not required, providing a subtle styling difference between keys and values makes is clear which is which
  4. I'm a big fan of Steve Krug and his book(s) "Don't Make Me Think", as such I tend to try and ensure every subtle UI/UX hint I can provide to make things obvious and discover-able is provided
Improve this answer
6
  • Do you have any data to back this approach up? I have a feeling this does make sense, from some Luke Wroblewski research he suggests this for tables (uxmatters.com/mt/archives/2005/11/…) - however, It seems that Google and Apple suggest Left key right value in their guidelines, and I was wondering if that was research based, or purely an aesthetic decision (at the cost of usability).
    – Jon Kyte
    Commented Jun 23, 2017 at 13:49
  • @JonKyte I respect Luke W. highly for most UX things, however there are times when I would challenge his findings (or the methods that achieved them). I don't have data to specifically back this approach up, but what I've come to the above approach after having to design enterprise business apps for ~20 years where the variations of data and use create corner cases that are very hard to resolve any other way. I'll add some key notes below the sample to add color to the discussion.
    – scunliffe
    Commented Jun 23, 2017 at 14:39
  • 1
    I think this probably makes the most sense. My use case is enterprise apps also so your experience may prevail here over research anyway. I think your reasoning is solid. Thanks for you help.
    – Jon Kyte
    Commented Jun 23, 2017 at 15:27
  • 1
    @JonKyte it's funny that you mention enterprise: the first thing I thought when I saw this was "looks like another enterprise app where they let the software engineer design the solution". This is neither pleasant to look at nor easy to scan. If you understand what your key-value pairs are, put more care into designing the solution than the "shove it in a table" approach.
    – plainclothes
    Commented Jun 23, 2017 at 16:40
  • 1
    @plainclothes if you have a better alternative we'd like to see/learn from it. You're right in that this does handle the "generic" solution case, but if you have some specific cases that there might be a better option please share.
    – scunliffe
    Commented Jun 23, 2017 at 16:48
2

I always go with left aligned labels either above or below the value. See screenshot of one of my project below.

It's based on eye tracking research while reading forms by Matteo Penzo. This research is applicable to your situation as well.

The main down side of having a horizontal alignment of your key and value is that it can vary in width. Because of this, users have to read the key and value separately.

Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.

When reading from top to bottom, users can read both elements in one eye moment.

Placing a label right over its input field permitted users to capture both elements with a single eye movement. Also, if a label indicated data that was very familiar to users—for example, their first name or family name—users did not fixate on the label separately to read it. They were able to view both the label and the input field in the same foveal area; thus eliminating the need for additional fixations and saccades.

Source: Label Placement in Forms - UX Matters

enter image description here

Improve this answer
2
  • Just wondering about the label on top practice. It is indisputably the best way of presenting labels for input fields but what about when it isn't for an input field? Wouldn't it be slightly annoying?
    – Shreyas Tripathy
    Commented Jun 23, 2017 at 11:17
  • I echo @ShreyasTripathy in that, I wonder if this is applicable to information (key value) as well as data entry (label input). I can see how the eye tracking research would suggest Key above value is useful, but I supposed that is under the assumption that users will go top to bottom in a linear fashion - whereas with my situation, I think users may scan the keys to find what they want then look up the value. Interesting answer and link, very useful. Thanks.
    – Jon Kyte
    Commented Jun 23, 2017 at 13:47

Your Answer

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

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