I have a GridView that needs more adaptive formatting. Something that works well in a responsive context without losing all the valuable points.
What patterns exist in 2015 for presenting tabular data well, regardless of the device?
-
Are you able to supply more specifics on your situation and provide examples of how your users are interacting with the data? What the users do with the site and data at different points is important info. For example: users may not be editing "on the go", so DataGrid on mobile isn't necessary; or a simplified entry technique may be more suitable.– Nicholas PappasFeb 5, 2015 at 23:20
-
@BillDaugherty Your question is "too broad" because it essentially will become a discussion rather than a Q&A. There is value in a discussion, but unfortunately it falls outside the scope of this site. What is and is not off topic is often debated even among the mods. If you'd like to weigh in on the topic, please do here: meta.ux.stackexchange.com/questions/1826/… If you would like to discuss this, please do in the UX Chat room.– JohnGB ♦Feb 17, 2015 at 19:10
-
@JohnGB, I feel that we as users (Stack Exchange Users) are missing a lot of opportunity to see other possible answers on this topic. I feel that the more responses that come in on a broad question like this would be a good thing.– billsecondFeb 17, 2015 at 19:16
-
@BillDaugherty The question has been reopened, but I would appreciate it if you could make it less about "what patterns exist" - which is too broad, and is a search really, and more about "how do I solve X problem?".– JohnGB ♦Feb 17, 2015 at 19:19
-
Thanks for re-opening, because I think this is a question that has value to the community (in its narrower incarnation)– tohsterFeb 17, 2015 at 19:28
Add a comment
|
2 Answers
Create focus
The trouble with tables is that there's no focus. No hierarchy. Just a whole bunch of data to be crunched. They have their place, but the use cases are nowhere near as numerous as their usage.
Cards
The dominant pattern to solve this today has it's very own buzz word: "cards". There's nothing new about the pattern, but it works well in a responsive application. And this solution allows (requires?) you to establish hierarchies in your presentation.
You'll have to do a little extra work to cover tables' strong points, though. If someone wants to sort the list, they no longer have a bunch of little header cells to click on. You have to provide a separate control covering the required sorting. Remember filtering as well.
It's a very broad label for any series of discrete sets of related data you bother to bestow with visual structure beyond rows and columns. In fact, StackExchange's list of question is a card UI without the bothersome surrounding box.
Just the bath water
We can keep the baby. Tables will always be welcome when it comes time to dig into the nitty gritty details. Let users drill down to the tabular data that lies behind your card presentation.
answered Feb 5, 2015 at 23:30
-
-
1
To stay in scope I'm going to assume that you must use a tabular form (i.e. decomposing the data into cards, lists, or subviews is not an option).
Tables will never really be fully responsive friendly, but that doesn't mean they shouldn't be used at all. Sometimes it's a design constraint you have to work with and so it's not helpful to say "don't use tables".
Here are two approaches for more responsive-friendly tables:
1. Use design to narrow columns and summarize your data
For example:
This has two purposes.
First, summarizing your data avoids the "wall of text" and the sloppiness of false precision. For example, if you're displaying user counts and the relative count is more important than the precise number, then simply displaying '10K' is better than displaying '10328'. Sometimes visual summaries (e.g. traffic lights) can be even more effective.
Second, summaries occupy less space and allow for narrower columns and more breathing space between columns.
2. If precision is really necessary, allow table to be scrolled to reduce density
Sometimes data really has to be tabular and really has to be precise. For example, displaying a time series income statement where the numbers need to be spelled out in full and the time series is necessary for the application.
This is a tough design constraint so there are no good solutions, but one approach is to fix the column and row headers (blue) and then allow the body to be scrolled so that you don't overdensify the interface. The primary risk here is that the user gets lots in the moving content, so adding a mini-map to visualize where he is can be very helpful. It's also a good idea to add a 'reset' or 'back to top' button to reposition the table back to the top left.
