Get Better UX on Tables and Learn Why Responsive Matters

Chris Tsurcanu
Nov 1 · 6 min read

Let’s have a talk on how we should see and design tables. Especially in this so-responsive website design world. A couple of weeks ago, I’ve finished wireframing a website that wasn’t so targeted on building that rock-stellar user experience. It was about a company that uses affiliate marketing to drive sales on clients interested in solar panels and power banks. Gosh!

I don’t like beat around the bush but these guys were heavily focused on SEO and how to optimize their articles for Google bots rather than giving a semantic reading experience for their users. That frustrated me. You might say — why?

While big publishing companies pay for engineering their reading experience by also looking good in front of Google, at the end of the day, you’ll still have UX issues related to the interaction design or usability, even if Google tells you to basically remove all the images from your article (because you can add text or promo which might be against terms), you can’t get a 100% accurate reading experience by also licking the a$$ to Google Bots.

But let’s forget for a moment about it. It’s more like a personal problem I have with them. Let’s focus on not getting a bite to the bullet. Let’s find what’s great for both, users and bots. (Hint: because I love so much the Terminator franchise).

What’s next will definitely help you to better tailor any table, with any size on column, rows, or content. We’ll talk about a solution so effective that your users will starve to play with the table. And btw, that’s one of the principles in interaction design. Down below I’ve put two table designs. The one on the left is a traditional table, and the one on the right is something you should master!

Traditional web table vs modern web table
Traditional web table vs modern web table
Traditional or not so?

The key here is to see your table as an infographic or chart. Let’s get to the roots of a table. Let’s imagine this scenario:

Your boss gave you a spreadsheet doc and asked you to better organize and visualize the content of that table. What you would do next?

Well, probably you’ll do some dark magic and make a chart out of tables rows and columns. And while this method it’s so primitive and easy to do, (drum rolls!) — people get used to seeing a table being visualized like a chart. Because that’s the best of both worlds.

Remember: people get used to seeing a table as a graph! That’s what we did in our IT lessons in college. Not maybe you (but at least me), and that’s something that works for a long time.

UX should lay on techniques that are already working and trusted. And that’s what usability check does. If you’re a fan of trends, please go away. This article isn’t for you. Go and do super-big and super-awkward fond sizes and call them typography only to appeal in the eyes of really, (really) blinded people.

Let’s get back to our table. Here’s my practical approach to designing tables which already has been tested throughout multiple usability patterns and tests.

Use the Power of Tabs

Tabs are a powerful filtering and easy-to-access module in any UX. I’m not talking about those old-fashioned tabs, just like we have below:

Damn! He’s using IE. Now, that’s a real UX engineer with balls.

I’m talking about taking these tabs and add a bite of what clients call — ‘I want a modern website’. A really great example is Apple’s new Mac Pro website. They did a great job on infographics. They took their product specifications (its table’s row and columns) and lay it down as a chart.

Modern web table
Modern web table
Apple did it well!

Crawlers and users love to see your data is designed in a way where it makes sense to get the most of the content of a table in a clean, yet intuitive way. Many companies do infographics and charts but most of these are simple static graphics which isn’t promising when it comes to responsive. So, to make a final thought on this, try to visualize the content of your table, just like in this example:

Clean table UI is something your users will love

Don’t forget about responsive

Another thing that most of the companies and newbie designers is that they don’t know how to design a table when it comes to tablets and mobiles. How you would do so for one of these tables?

See? It was my example also. With the solar panel review company we’ve talked initially. These guys had a lot of solar companies to review, based on different features. So, by using the primitive way of displaying big data tables along with a modern and clean design, I was able to show multiple columns and its rows across different screen sizes.

Try to reverse-engineer the table data sets and find what can be grouped

This method works on any table. And if you don’t know how to design when it comes to huge content, just launch your Spreadsheet app and hit the magic ‘Chart’ button. At least, this is a quick workaround that will help you dive more into finding the best solution when it comes to visualizing and adapting your table.

Long columns can be nested into tabs, and rows can be designed as charts, numbers or progress bars, just like here:

How to solve the table legend?

That’s another thing to keep in mind. How I’m going to divide the content or group it based on different features or data sets? The answer is simple!

Remember how spreadsheet apps use colors to legend the table data. Use the same approach but adding a few intuitive notes here. The web has taught us a lot: how to shop, how to search, and even how to scroll :D

It also taught us how a button is looking and what colors, we as designers should use to emphasize an action or, in our case, a label.

In my example, I’ve used orange to emphasize the high-cost maintenance of solar panels. in your case, this might be an icon or star rating. Or even a simple text that’s still the same style across your entire tabs or table. users already know what's high and what’s low when it comes to price or how hard it is to get it done.

Colors, labels, and icons can help you nest down or group the table rows/columns. Use it wisely

Same thing with the labels. Just use them, but do not overcrowd the newly designed table with too many styles, colors or fonts. Try to ensure a seamless experience across tabs and table so users get ease on the learning curve. Remember how much time it takes a user to understand and scan the very first content? Eight seconds on average. So don’t bother him with too many requests.

Final Thought

We all been there. In the front of a screen with a hell of a table! next time you design one, try to group the table’s rows and columns. Find what’s common and what users really need to know. Sometimes, if your client told you to use a ‘Check vendor’ button as the last table row, try to simply find a suitable place to make this button feel comfortable for the users, or use a simple text link on the Vendor name/table column.

Try to use proper icons, colors, and style, but do not overuse it. Your reader’s eyes won’t like it.

And finally…stop using horizontal scroll and start implementing responsive tabs:

Thanks for getting here and I hope this was an informative guide to start building better tables on the web. If you believe what I’m writing is valuable for you, consider sharing this article or follow my work.

Drop the Mic…

Chris Tsurcanu

Written by

Ux Engineer at Five Visuals. Staying strong on tested & powerful UX strategies. New Articles every week.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade