Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Screenshot

Is there a better way to present this data or does this seem pretty clear / legible?

Update:

Is something more along these lines better? Updated Screenshot

share|improve this question
7  
Is this actually tabular data? To my mind, "tabular" implies rows and columns. This is simply a list of values and their names, arranged in columns. –  Jon of All Trades Aug 2 '13 at 19:47
    
@JonofAllTrades I guess it's not really tabular data. It's just using an HTML table :). –  mint Aug 2 '13 at 19:56
    
@JonofAllTrades: Agree fully. This way of presenting data is a developer's way of showing the values in a "whatever" and being able to use it for many other types of "whatever"s. It's not how you should present information to a user. –  Marjan Venema Aug 3 '13 at 9:31
    
@MarjanVenema I'm not quite following the 'whatever' thing you're talking about... any suggestions of how I can improve the readability of this information? –  mint Aug 5 '13 at 13:38
    
Your screenshot seems to show information about some "Map". That map would be one "whatever thing". Another "whatever thing" could be the owner of such a map: either "owner" or "Company" or ... who/whatever owns a map in your scenario. My point was that just listing all fields and their values for a record is the way a developer would approach showing information as it can easily be generalized for any table. While it may cut development cost/time, it makes for unfriendly interfaces for "real" users. I don't really have anything to add to the answers you already received. –  Marjan Venema Aug 5 '13 at 13:49

4 Answers 4

up vote 34 down vote accepted

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.

  • Acreage .046 - does that mean anything to the user ? How much is .046 acres.. they care about the size of the lot. For smaller lots you might want to user different units.
  • Then you have square footage on the right side, should this be next to acreage
  • # of bath etc.. can you say 2 Bedroom, 1 bath instead of key value treatment ?

So my suggestions are:

  • Humanize the information, and not like label and value
  • Group Information into meaninful chunks - size, features, value etc
  • Evaluate data itself and see what the user is trying to get out of it and represent accordingly - the language, granularity etc. Also ask, does user care about it (e.g Map #)

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.

share|improve this answer
3  
+1 for grouping information. This alone can do wonders for usability in this type of situation. –  Don Nickel Aug 2 '13 at 16:33
    
Great answer. I'd only add something about looking at how admin dashboards do it. Perhaps look at some templates on themeforest, because there are a lot of numbers/dates etc in that table. Icons, graphics, anything can make that data more scannable. –  Dirk v B Aug 6 '13 at 22:55
    
This could make your product a lot more user-friendly. Watch out though: If i'm looking for apartments for example, I don't want to read through a story just to find the number of bedrooms. –  Lg102 Aug 16 '13 at 6:29

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.

share|improve this answer

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.

share|improve this answer

"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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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