When we find ourselves with the need to adjust a large amount of data to small or reduced screen sizes, it is necessary to pay special attention to the design of the interfaces.
In this complex task it is important to always keep legibility in mind. Responsive or mobile tables are a headache for many.
General aspects to design tables on small or mobile screens
Information visualization researchers have long struggled with the problem of displaying data contained in many columns or rows when it does not fit on the screen on which the user is viewing it.
When tables are designed for small or mobile screens, it is necessary to design carefully so as not to affect legibility and not generate understanding problems for users.
The content shown in the table must be significant, so if we decide to remove information, special care must be taken not to remove relevant information.
The correct process for table layout is to create a usable table for a large screen before translating it to a small table. The fact that there is a need to create a table for a smaller screen can be a good reason to discard information that is not relevant or unnecessary for the user.
1. The width of the table columns
The number of columns that fit on a mobile screen depends directly on the width of those columns. Legibility must be maintained at all times, trying to keep the width of each column as small as possible.
2. Better if you don’t have to rotate the mobile to see the table
One of the resources that are usually used is to “force” the user to turn the mobile to be able to see the table in a horizontal position. It is true that in this way, we allow a greater number of columns to be displayed, but the number of rows that can be displayed is drastically reduced.
3. Sticky headers for columns
In any table that occupies more than the height of the screen in a vertical position, the headings that remain in a fixed position at the top of the mobile screen really help users to know what they are looking at.
Without sticky headers, it’s easy to lose the context of what the table is displaying.
4. Horizontal scrolling of the table
This type of tables for mobile screens, also known as “movable”, is not usually a very responsive solution for some Stakeholders, but it is very easy to use and the development time is short.
It consists of using horizontal swipe gestures to scroll the entire table.
It is recommended for tables with more than 2 columns and that do not exceed 8. It is also recommended that the first column (legend) be kept in a fixed position when the user executes the scroll to allow him to know to which part each displayed data belongs.
It is very important to show in the design that there is more data beyond the horizontal fold. Like carousels, arrows, break items, dotted markers, or even a horizontal scroll bar help users understand that break items exist.
5. Allow users to select data
When all the columns of the table do not fit on a mobile screen, one way to solve the problem is to use a filtering system so that users decide what information is most relevant to them and select to view it.
These types of tables are recommended when you need to see the data but not compare it.
On small screens users can only see a small part of the table compared to larger screens. The type of solution chosen depends on the type of data to be displayed.
Facebook Comments
Disqus