Table manners: approaching data comparison tables on small screens.

A really successful search and discovery application does more than just let people search for information. It helps it's audience to answer the questions "what am I looking at? What does this all mean?"

Good applications communicate, and getting that right is a design problem. It's why we take the user experience of our applications so seriously.

After all, data can be really intimidating. It can be incomplete, and feel messy, complicated and confusing. Through our applications, our job is to interpret information, pull it apart and then reconfigure it for our clients and their customers in a way that meets their needs, regardless of their situation: on a huge control room screen, on their desktop workstation, or on their smaller screened tablet or mobile. We must consider where and how information is presented on each page, and we must control how that data behaves in different circumstances.

With this in mind we thought we'd look at one particular element of our application toolkit: data tables, and specifically how they appear on smaller screens. What follows are some of the out of the box options we offer, so that as a Twigkit powered application comes together, helping different people to access and understand what they're looking at becomes a human rather than technical problem to be solved.


Data tables are very often amongst the widest elements on a page, and can only shrink so much before things start to become over-crowded, or fall apart entirely.

The data comparison table above presents data cleanly enough on large screens, but it's structural integrity goes out of the window as soon as the screen width narrows. Categories are eventually lost entirely, forcing our audience to scroll back and forth.

So what can we do?

What follows are a few different Twigkit approaches to this problem. The 'right' option is all about context. It will depend on an understanding of the audience and the job that they're trying to do, and the role and characteristics of the content itself.


By creating a 'stuck' left hand column users can scroll or swipe horizontally to browse comparison categories without having to dart backwards and forwards to check which company it is that they're looking at.


By slightly reconfiguring our table (essentially flipping our x and y axis), the same 'stuck' left hand column now gives the table a different focus: we can now browse by specific characteristic rather than per company.


A different approach is to break the table into individual cards on small screens.

This is a neat solution which allows us to view the data more like traditional search results, and one that keeps subjects together with their data very neatly. The downside? It's much harder to cross reference and compare different comparison categories.


Did we say it was harder to cross reference and compare different comparison categories? It doesn't have to be!


And if circumstances demand it, we can even take a pinch of one and a drop of another, and create something that combines both.

We hope that this has given you a window into our thinking as well as our technology. And we should be clear - we think about big screens as well! More about this in a coming blog.