Redesigning a table
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.
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.
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.
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.
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.
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.
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.