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:
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.
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 firstname.lastname@example.org, 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.