Every once in a while, you get challenged with designing the boring and dull stuff. Usually, this is something like a table. Or anything else that is used to present the user with lots of data. You know, the boring stuff. How to make this more attractive¬†(because we believe that’s important, right?)¬†is often a hurdle. Asking ourselves how to make it visually more appealing is often not the solution, asking ourselves how to improve the user experience, usually is.

To demonstrate my point, I picked a random table design from Dribbble, remade it in Figma, and started wondering how to improve it.

The image below is how I found it on Dribbble. Nothing special: some tiny data displayed from left to right.

Table design
The starting point. A simple table, made ‘fancy’ with some basic styling.

It looks quite okay on its own, but when stacked together, the boring looks start to appear.

Table design
Together it’s looks quite boring.

What’s most important? What is the main message?

My first question is: what does this table try to tell the user? In this specific case, it was providing an overview of sports activities. Sorted by how many places there are left in each event. I could draw two conclusions here:

  • Are the activities with no spots left essential to show? I probably cannot do anything with them anyway.
  • Are the activities all equally important? Or do I want to emphasize that some events are nearing it’s happening date or are nearly full? Which could possibly amplify the popularity, and make sure I don’t miss out on anything.

This led me to the following design, putting more emphasis on the rows that deserve some extra attention. Besides that, the call-to-action stands out a little more, and the indicator of how many people already signed up (the critical part) is moved to the front with some extra visual care.

Tables made pretty
Thinking about the UX, leads us to emphasising the important parts; making it also look more attractive.

I felt the difference was not big enough, so quickly arrived at the following design.

Tables made pretty
Bold choices might help to really direct the users eye.

In a complete table, it looks like this. Dividing the table into several sections. Making it easier to scan.

Table design
Bold choices might help to really direct the users eye.

Do we need boring stuff? Can we get rid of the tables?

It’s always worth asking: do we need to use this format (referring to a table in this case) to display the data. For our situation, we could also use cards to showcase sports events.¬†

Visual design cards table
Always question the wireframe; do we need a table to display the information. Or can we think of more user friendly and visually appealing ways?

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.