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 want to display a table with 4/5 columns and possibly 100 rows (as in desktop app right now) in smartphones. The table cells are also editable. Now we want to port this desktop app to smartphones (Android / IOS), what will be the most optimized way of showing this on Smartphones.

** I'm sure many people must've come across this problem by now, Is there some patterns or solution for displaying such kind of large data (editable) on smartphones.

share|improve this question

3 Answers 3

up vote 14 down vote accepted

When designing for mobiles, the first question you should ask yourself is, "Do users need to be able to perform the same actions while on-the-go as they perform at their workstations?" The second question you should ask is, "Can all of these actions be performed comfortably on all mobile devices?"

When you're dealing with 100-row tables, that translates to at least 7-8 screens on a mobile. That's not comfortable, especially when you want them to be editable. Editing needs to be invoked somehow, which is usually accomplished by tapping. The recommended target area is 9mm, so your entire table height can be as much as 900mm (90cm/0.9m/35.4in/2.95ft).

Thus, drop the editing capabilities and introduce some sort of pagination and filtering to improve usability.

There's also a similar question: How should large table columns be handled on a responsive design? and you can search for other mobile table questions for more ideas & solutions.

share|improve this answer
2  
+1 for the first sentence alone! –  Marjan Venema Jan 30 '12 at 16:32
    
@MarjanVenema: I wonder if I ever get tired of repeating it. =) –  dnbrv Jan 30 '12 at 16:33

I had the same problem, and we chose a solution that we saw at CSStricks.

http://css-tricks.com/responsive-data-table-roundup/

They have different approaches there:

  1. Show the complete table and offer a link to view it in a readable size.
  2. Convert it to a pie chart
  3. Make it vertical (this is the one we choose)
  4. The filament group approach (choosing the fields that you want to see)
  5. Pretty similar to 3
share|improve this answer

Filament Group offers the best approach for managing tables in responsive design that I've come across.

They have many other patterns and techniques to support varying screen sizes.

Additional detail:

The pattern / scripts available on the link above allow tabular data to be presented at varying screen sizes. By identifying the columns that are to be maintained at smaller sizes and providing the means of turning 'on' additional columns the primary focus that data illustrates is maintained.

share|improve this answer
    
Adam, it would be great if you could summarize the link in your response. –  dnbrv Jan 30 '12 at 15:42

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.