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

Published May 13, 2016 by Jane Portman
Categories:

• Articles
• Design
• UI Practicum

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:

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

• WHAT you’re displaying (filters, dropdown menus to display certain kind of items only, the search field, etc.)
• HOW you’re displaying it (pagination, display settings, how many items you want to display per page, etc.)

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:

• Using a headline or placing information that’s common for all tabs underneath the tab line (should be above).
• Messing with the right corner of the tab area. Never place controls there, as it will be hard to tell where they belong and what exactly they influence!
• Using tabs to denote filters or states. Only use tabs to manage chunks of data independent of each other!
• Using several tabs to manage very similar data tables (or the same data table). Most likely, the tabs can be replaced with dropdown filters in a single data table.

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.

• Identify what controls are filtering the data (WHAT) and what controls merely tweak the display settings (HOW).
• Make sure all controls are placed in their logical locations.
• Make sure there’s just one prominent CTA (usually “Add New”).

With tabs, use the following rules:

• Use the tab line as a logical divider: everything above it is common for all tabs, everything below relates to the selected tab only.
• Don’t mess with the tab control itself.

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.