An Alternative Design for a Shitty Table

I officially apologize for the title above (and also for my english!). But truth has been said. Seriously though, as UI Designer, I hate a long ass table in the website. Not only I have to use a scrollbar, but also it’s disguise a boeing cockpit. It’s like an Accounting Person try to build a website for their own people. Me personally need a very long learning curve to understand the data and information inside the table.

So, here’s my solution. Instead of using a responsive table (in this case it’s not solve anything). Why don’t we pick the MOST important thing then isolate them into a group. And of course, while doing this I need to consult with the users and make a conclusion. Here we go.

Now we have a date, ID, Name, Email, Amount Due, Status, Notes, Action and Assignee CS. Well it’s still a lot of column but, at least we separate them for the next step.

Later on the story we group them together and make it a“card” like.

I replace labels with icons. Label will appear when user hover at the icon. I check with the user about this current progress and they feel happy about it.

So what happen with the rest information? Where are they now? Since we decide to isolate the most needed information to the top, the rest of the data placed on the bottom. Technically, they will appear when user click on one of the cards.

One thing I like with this new design is changing the Actions column with 3 dots icon. It gives you a neat and clean design. To be honest, I inspired from Slack.

And here’s the final result of my current project. It’s not perfect and still need some improvements. But at least, it looks way better and sophisticated. I know some of you still wonder how to make it a better table etc. And this is one of my solution. Please let me know if you have some feedback and thought. Cheers!