Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite
2

Problem: I've got a table with 10 columns and ~100 rows. What is the best way to present these on small screens? My idea: effective search + data displayed row-by-row. Is there any better solution?

share|improve this question

4 Answers

up vote 4 down vote accepted

I have had this problem several times before and aside from the recommendations above, another option is to limit the number of columns you have to only the attributes essential for users to make an informed comparison between rows. Then link each row to a card or somesuch containing all the information.

If users need to see all attributes then ignore this.

share|improve this answer
This is the solution for my problem, I think. Thinking on how and why users will use this table they'll need to do mostly maintenance and find users on field. (check above comment to Incas' post) :) Thanks. – Csongor Fabian Aug 8 '11 at 16:31
up vote 3 down vote

Two solutions I've used are card view, and transposing the rows and columns, and displaying 10 columns with 2 rows - if the default orientation is vertical, like on the iPhone. In both cases each screen only shows one "row" of the original table.

And then you can enhance this with effective search, or with a smart scrollbar like on the iPhone contacts list, which can show you the groupings before you take your finger off the screen. Of course, that's only possible when the grouping is clear and the data supports it.

share|improve this answer
up vote 3 down vote

I think it is important to know what the users need to do with the data: is comparison between rows most important? Or is it more a per-record view?

Things that seem important are when viewing on a small screen:

  • sorting the data well and making that easy to customize (so they will see most relevant rows first)
  • good navigation from record to record. Allow 'next' navigation based on the chosen ordering
  • for comparison views you need to be able to bring the columns that are important close to each other, so make it possible to lock columns in view, or order or hide them to minimise horizontal scrolling
share|improve this answer
Good point: tables are most useful for row-to-row comparisons. Other types of interaction might be served better by other interfaces. – Jimmy Breck-McKye Aug 7 '11 at 19:26
It's a list of active/inactive/pending cable modems. You are able to restart modems, get information about users, modem speed, MAC address and many other measured data. Comparison is not that important in this case. I think that limiting the columns to some rational amount (client doesn't want this) and adding card/row to show additional info will be a good solution. Using the system on smart phone is useful, when a technician is on the field and he will use it eg.: to find a client, check malfunctioning modems etc. – Csongor Fabian Aug 8 '11 at 16:29
up vote 0 down vote

This solution is very good http://jsbin.com/apane6/14/ see this on desktop then phone

share|improve this answer
I tried viewing it in an emulator, and that didn't seem to work well, part of the data was inaccessible (it wouldn't scroll horizontally, but perhaps that's an emulator issue.) What aspects do you feel make it a good solution? – Inca Oct 2 '11 at 16:52
on this example page table into a mini graphic of a table on narrow screens, rather than show the whole thing. This shows the user there is a data table here to be seen, but doesn't interfere with the content much. Click the table, get taken to a special screen for viewing the table only, and click to get back. – Jitendra Vyas Oct 3 '11 at 4:03

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.