Valty's Notes

January 2020

Redesigning a table

TL;DR: You can see the new design down here

I stumbled across this post on reddit asking for feedback on a table design. I thought I'd use this as a chance to implement some of design principles I've been learning.

A table showing availability of hotel rooms
The original design

My first impressions was that the design was very busy. There was a lot of information in the table, and most my attention was being pulled away to the brightly coloured buttons around the outside. I think that the main issue was a lack of hierarchy. The solid buttons all looked like primary action buttons, while the content of the table took a back seat in terms of importance.

My first priority is to subdue the action buttons. I default to 3 main button styles in my designs: A primary button with a solid background (like the original design had), a secondary style with a neutral background & coloured border, and a tertiary style with just a bottom border underline.

I was also tossing up going for a style of button that was neutral when unselected, and had a dark neutral background when activated, as if pressed into the page. In the end I opted for the tertiary style, although both would have worked here.

Buttons in a tertiary underline style
Tertiary styled buttons

I right-aligned the buttons to provide a little separation. This way, the buttons could be more easily recognised as buttons when not enabled.

❦ ❦ ❦

The next issue I wanted to tackle was the table itself. There was a lot of information, and I wanted to highlight the important parts. Because I didn't know what the exact use case of this table was, it's hard say what information should be emphasised.

What I did instead was to try and group related information. Right away, I could see that the floor and block columns could be combined and separated with a bullet mark to reduce horizontal space. I then took this and added it under the room name as I felt that they could all be bundled as related information.

The room name, with floor and block information below it
Updated room, floor and block information

It is easy to fall into the trap of thinking that table cells can only hold one line of information. Stacking secondary info below can be a powerful way to supercharge your tables. I made the floor and block information smaller and grey to de-emphasise it compared to the room name. Since "floor" and "block" were repeated label information, I made them uppercase so they draw less attention.

The tenant and availability information in a single column
Updated tenant and availability information

I gave a similar treatment to the tenants and vacancy, adding some more information about how many spaces there are total.

❦ ❦ ❦

The green text highlighting for status was nice. Having colour makes the list more scannable and easier to digest. Here, I tweaked it a bit using inspiration from Steve Schoger (like most of the inspiration for this design) and used coloured pill boxes to wrap around the text.

The statuses displayed in coloured pill boxes
Statuses contained in pill boxes

Lastly, I looked at the action buttons on the right of each row. I was considering having a primary button here, and having it only visible on hover. That way, you are only showing a single primary button at a time. It is good to have a single primary call to action button visible on the page at one time.

I decided this wouldn't work here because there were two buttons that would have too much weight with both being primary. After cycling through a few designs with secondary and tertiary style buttons, I saw this design (again, Steve Schoger) which just had them as coloured links. It struck me that sometimes the button you want is actually just a link.

Action buttons as links
Action buttons as links
❦ ❦ ❦

The last touches were for some overall tweaks to bring it all together. I used a darker background with a white table colour so we could get rid of the table border altogether. I lightened the heading names to de-emphasise them. Finally, I chose a nice font to give it a unique feeling. For this design, I went with Montserrat which is free from Google Fonts.

The final design I prototyped below is not totally implemented. I am unable to simulate hiding and showing of the "Book" and "Check in" buttons without implementing it in React, but you'll get the idea of the design.

The final design

Rooms

Room Sharing Tenants Status
Room:01
Floor 0 • Block 1
1-sharing
0 / 1
1 available
Available Book | Check in
Room:02
Floor 0 • Block 1
1-sharing
0 / 1
1 available
Available Book | Check in
Room:101
Floor 1 • Block 1
2-sharing
2 / 2
0 available
Occupied Book | Check in
Room:102
Floor 1 • Block 1
2-sharing
0 / 2
2 available
Available Book | Check in
Room:01
Floor 0 • Block 2
3-sharing
0 / 3
3 available
Available Book | Check in
Room:02
Floor 0 • Block 2
3-sharing
0 / 3
0 available
Booked Book | Check in
Room:101
Floor 1 • Block 2
4-sharing
0 / 4
4 available
Available Book | Check in