UI Practicum #3. Stop Making These Mistakes with Data Tables & Tabs

Published May 13, 2016 by Jane Portman

Data tables are the core of any web application, so any logical flaws in them will cause plenty of confusion to your users. In this issue of UI Practicum I’ll show you the mistakes to avoid with data tables and tabs.

Place Elements Where They Logically Belong

This is #1 mistake I see every single time! Any UI audit I do starts with rethinking the main data table (or better to say, rethinking the controls around them).

There are common logical locations for all controls. Here they go:

UI Practicum: Data Table

It’s very simple, actually. Your controls will fall into two categories:

Each category goes into its own corner. WHAT usually goes to the left, HOW usually goes to the right. Placing things in different locations can be very confusing!

If you have a nice empty corner somewhere, that doesn’t mean you should immediately fill it with random controls or new features.

Use Tabs Accurately

Here are the most common mistakes I see around using tabs:

To illustrate the ideal state of things, I’d love to show you this layout that’s very common and reliable:

In The UI Audit method we’re making sure each screen contains a single data table. If your screen is more complicated, then tabs are a perfect way to accommodate a few data tables within the same screen.


Whenever you’re dealing with a data table in your web app, follow this scenario.

With tabs, use the following rules:

Have complex UI puzzles in your own product? Send in your screenshots at jane@uibreakfast.com, and I’ll tear down the most interesting situations here in UI Practicum.

Want more content like this in your inbox?

Join 8,000 awesome people on my mailing list — SaaS founders, product managers, designers & developers who are business-driven and want to build better software.