User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have some tabular data I'm displaying to users. It's not a lot of data, but I'm wondering if there is a more legible way to display it? Right now the data looks like this:
Is there a better way to present this data or does this seem pretty clear / legible?
Update:
Is something more along these lines better?
The trick is to not look at it as data or key-value pairs, but how the user would review it.
For each data point evaluate what it means for the user.. e.g.
So my suggestions are:
Then depending on what problem you are solving, there might be value in augmenting this will additional info.. for example, when looking at the $ value, if the user cares about the trends and not just exact value, then show an up or down arrow based on last 30 day value (or whatever time-period is relevant)
So core is to undertand what user wants out of it and help her get there.
Why not group this stuff a little? A user will read this form, and fill it out, I suppose? Where does the information come from? What information will the user get from the same source, what will come from different sources? What order are they in in those sources? Group them so a user that has e.g. the papers from the land registry office will be able to just take one of those sheets and copy that stuff in order, without having to jump around and potentially miss something.
lso, for a date, you'd probably want to add a date picker so a user who remembers "we finished building this apartment last friday" gets a calendar where the most recent friday can just be clicked without having to do basic maths and maybe enter the wrong date by accident.
Also, if there are fields that are 2 lines (I'm guessing Owner 1 and Owner 2 are that, unless they're actually for the case where something has several owners), use only one label and show the two fields grouped together. If they are lists, just show one field (or 2 if that is the most common situation) and add "+" and "-" buttons next to the fields to allow adding whatever number of owners makes sense.
If your fields contain numbers that have a particular meaning (Jurisdiction and District look like they match to city names and things like that), be sure to show human-readable values. E.g. "East Village" or whatever. That way a user can easily recognize a typo. If the numbers aren't a common value used in government papers or whatever, you should probably even leave them out completely and just internally translate the names a human would expect into the proper number.
Finally, visually structure everything so a repeat user can more easily recognize which field is where. Make sure the fields are sized properly for their content. E.g. if a field is a 10-digit number, make it just wide enough to hold 10 digits, so users get a hint they got the wrong number if it's shorter or longer.
While varying the lengths makes it a little harder to create a pretty, visually appealing design, it also helps make the various groups more obvious, and more unique, and thus more recognizable.
In addition to the good suggestions already stated, I'd like to say that the design in your example is more about the labels than the actual data.
After having seen a few instances of your data, the users will have a mental map of what is each item and will not need to rely that much on the labels.
Do a test with smaller, light-gray labels, and more visible actual data, to see what happens.
One problem with the data in the example is that it's displayed in uppercase. This makes it even more "difficult" to read: caps are all the same height, all the same shape, and require the user to look at the letters instead of reading full words. If you can, avioid the all-caps thing.
"legibility" is the ability to make out letters or small parts of the page clearly when focusing on them. You want to improve "readability" which includes skim reading and usability which includes grouping the information as other posters mentioned.
Lots of good advice here already like avoid capital letters (they are very legible but not very readable. They slow down reading and cause the eye to focus on individual letters instead of the whole word. Capital letter shapes were designed to slow down a reader by typographers who use them and they're intended to impress people with their detail not to help people read them quickly and comfortably).
Also a good test of a layout is if you can remove the grid lines. Grid lines slow down viewing by the eye too just like if you had static or textured background, it would be more processing for the optic centers of the brain. A poorly organized and laid out design needs grid lines to compensate for a confusing location of elements, but a good design with the information spaced and located smart will not need grid lines in most cases.
I have to second the point someone made about this being mostly about the labels. The labels are highlighted and bold like they are more important than the information. Lots of form designer beginners look at the labels more than the data when designing, but for the reader, the information is what should be visible from farther away and grab visual attention. Think small gray text for labels. You might try looking at printed forms since those are usually designed by people trained in graphic design and typography.
As for organization, why not change the order to make more sense. Put all the dollar values together in the order of interest that the reader wants to see them in. look at real estate magazine property listings and notice they bold the parts that are important and how they group the land acreage and the building sq ft and map number/link together for easier reading.
On the bright side, I've seen much worse and at least you line things up which is good. it's clear what order things go in and the reader isn't confused with random locations of data that might lead them to miss something.
