- One of the more common questions
that I get in my Mobile UX class is about tables.
How do we make tables fit on a smartphone screen?
Even though you may not realize it,
this question has been around
since way before mobile phones were so widespread.
And in order to answer it, we should look back
at the research in the field of information visualization.
Why is this topic not specific to mobile?
For the simple reason that since the dawn of tables,
there have tables that were too big for someone's screen.
When I was working at Xerox PARC, I remember Stu Card,
one of the human-computer interaction pioneers
and fathers of information visualization,
working on an array of eight 24-inch monitors.
But even if you have a 64 inch monitors,
there will be a table that's too big even for that.
And even if your table was displayable
on such a huge screen, the person interacting with it
will not have the working memory capacity
to take in all that content.
The most basic thing you can do to make tables more usable
is fixed columns and row headings,
like in this example from Fidelity.
This will ensure that people
will know what cell they're looking at,
even though they will have to scroll horizontally
or vertically in order to get to that cell.
Next, ask yourself,
what are people trying to do with your table?
Often, they will want to compare two rows or two columns,
and that's not easy if those columns or rows
don't fit on the same screen.
Users would have to go to one cell, memorize its info,
then move on to the other item in a different column or row
and compare what they see there
with what they can remember about the first item.
So to facilitate comparison,
allow users to one, hide columns that are of low interest,
and two, reorder columns so they can see those
they are interested in side-by-side.
For this latter functionality,
often drag and drop is the obvious implementation.
But if the table is big,
it can be difficult to drag a column in the right place
across several screen pools of information.
That's why we recommend that for tables with many columns,
you include a reorderable list view of all the column names.
Similarly, let users hide certain rows
by filtering out records
that are less relevant for their tasks.
Think about the types of folders
that people will be interested in.
For example, in a product comparison table,
people are often interested only in rows that are different.
So allowing them to hide the similarities
can make the table smaller.
So if you're asking yourself, how can you display big tables
with a limited screen real estate?
The answer is, you cannot.
Seeing the whole table on a screen
is rarely relevant to the user's task.
What designers need to do
is carry out a thorough task analysis
to understand what a task is
and then offer users the tools to complete it.