I have a table(in dashboard) where i compare data between two columns. I am trying to show the same data in mobile. I have 8 columns in total. I need to show at least 6 columns(Important) in mobile. How can i convert that to mobile. Use case : User has to compare Number of funded companies and Total funding's raised by individual companies for different business models.


I've had to do something similar.
I tried vertical columns at first with sticky table heading in order to keep context, but because the ten columns were long the user had to scroll both vertically and horizontally.

Afterwards, I tried horizontal columns. This way I could fit 10 columns in the same screen so there was no vertical scroll (except on 4" phones and down but even that was minimal compared to before).

I kept the sticky table heading on the left side (see the third mockup) to keep context (users still know in what column (row) they are looking).

I hope this helps.


download bmml source – Wireframes created with Balsamiq Mockups

|improve this answer|||||

For simplicity I will do it like this (the picture is taken from this link). The comparison will be divided one by one into 8 simple table (each per your comparison column). The title of each table is what attribute you want to compare per item. You use the first column of each table for the name/picture of the item you want to compare and the second row for comparison data.

This way no matter how long the content of the comparison data, it can always be overflowed to the y-direction without messing up the shape of the entire table(s). And also you only use vertical scroll to show all the contents. As we know horizontal scroll is uncommon in mobile application, especially for devices that utilize swipe left/right for page navigation.

If you expect to use many items for comparison, you also can make each table collapsible to simplify the view.

enter image description here

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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