10

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?

Improve this question

4 Answers 4

Reset to default
5

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.

Improve this answer
1
  • 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
    Commented Aug 8, 2011 at 16:31
3

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.

Improve this answer
3

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
Improve this answer
2
  • 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
    Commented Aug 7, 2011 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
    Commented Aug 8, 2011 at 16:29
1

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

Improve this answer
2
  • 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
    Commented Oct 2, 2011 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
    Commented Oct 3, 2011 at 4:03

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.