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

Published May 13, 2016 by Jane Portman
Categories:

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.

Practicum

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.

The 1-Hour UI Audit: Get Your Free Course

With this free email course you’ll conduct a simple do-it-yourself audit of your web app: eliminate the obvious design flaws, gain control of your features, and start building the UI that customers really want.