Modern Enterprise UI design — Part 1: Tables

Thoughts, patterns, and solutions.

James Jacobs
Mar 19, 2018 · 8 min read

Designing for enterprise is hard. Why? Because, generally speaking, Enterprise software is complicated. You have vast amounts of data to display, user configurable UIs, complex workflows, automated tasks and much more. Designing for all these things can be a bit of a challenge 😓.

As a result, some Enterprise applications offer a poor user experience and end up looking, well, a bit dull.

Image for post
Image for post
Typical enterprise application

Over a series of posts, I’m going to break down some common enterprise application UI patterns, problems, and possible solutions.

It’s worth pointing out, there is no one size fits all. The patterns and solutions mentioned below are things I’ve found to work, through iteration, user feedback, and testing. Solutions should, of course, be tailored to your application and more importantly your users. Nothing beats speaking to your users and watching them use your software.

Let’s start with tables

Image for post
Image for post

Above is a typical example of a table in an enterprise application. Lovely isn’t it. Let’s explore how we can improve the experience of complex tables and what we need to consider when doing so.

Here are some questions we need to consider when designing and building out a data table:

  • What devices will be used to view the table?
  • Do we have control over the data that will be displayed or is it configurable by the user?
  • How can we aid quick scanning of the table data?- If the table will contain a lot of data, how can we make it’s easy for users to find the data they need?
  • Will rows have shared actions, such as edit or delete?
  • Could table cells contain lots of data, addresses or even paragraphs of text?

Above all, remember to speak to your users, find out how they will use the table and the data it will present.

Note: For the rest of this post, I’m going to assume we’re working on a web-based application although the majority of the points below apply to any enterprise application regardless of platform.


Basics first

Image for post
Image for post
Unstyled table

First, let’s add some basic styles that provide a clear separation of rows, aid readability and remove some of the default browser styles.

Image for post
Image for post
Styled table

It goes without saying that the table should be accessible to all users. Using proper semantic markup is a must so that users of screenreaders can navigate through the table one cell at a time, hearing column and row headers spoken to them. Column headers should be descriptive and relevant. Table styles should meet WCAG 2 AA contrast guidelines (or even AAA depending on the level of compliance needed).


Responsive tables

Image for post
Image for post
Our table at 375px x 667px (iPhone 7)

At the moment our table isn’t responsive so it won’t look great on devices with smaller screens. Responsive table design is a huge topic that’s outside the scope of this post. So, for now, let’s look at two common approaches:

Collapsing columns

Image for post
Image for post
Columns that overflow the width of the screen are hidden

With this pattern, any columns that don’t fit on screen are hidden. They can be toggled by the user to show the hidden data. You could take this one step further by defining which columns should be given priority at different viewport widths ensuring critical columns are still visible on smaller screens.

Horizontally scrolling tables

Image for post
Image for post
Horizontally scrolling table

Perhaps users need to compare multiple rows quickly without having to jump around expanding things? One common pattern is to allow the table to horizontally scroll on smaller screens, removing the need for hidden columns. Consider using both patterns and provide an option to switch between the two.


Dealing with lots of data

Pagination

Image for post
Image for post
Pagination in action

By adding pagination, we can limit the number of rows per page making the data a little easier to digest. Above we’re using ten rows per page.

Pagination has many benefits. It makes it easier for users to search through the list manually, gives them a sense of control (unlike infinite scrolling) and allows users to keep a mental note of a rows location. When using pagination we should allow the user to choose the number of items per page (ideally saving their choice for the future) and also display the total number of items in the list, and how many are in view.

Image for post
Image for post
User definable pagination

Allowing the user to change the number of items per “page” can make it easier when comparing multiple rows than may span 1 or more pages.

It’s also worth considering at what amount of data the table will need paginating. For example, if we paginate to 10 items per page, but there are only 11 items, then a user would need to click next to view the final row. Why not programmatically check if there are, say more than 20 and if so enable pagination.

Lazy loading

Image for post
Image for post
Loading more rows on demand

Another common pattern, either by a “load more” button under the table or by loading additional data when the user scrolls to the bottom of the table. I’d recommend pagination over this, mainly for the benefits listed above. Infinite scrolling removes some aspects of user control (When will the data end? How many records have I viewed?). It’s more suited to apps that focus on users consuming a stream of data rather than a list of data where more user control is needed.

Searching the table

Image for post
Image for post
Live searching of table data

Another solution would be to filter the table data by specific search criteria.

Sorting by columns

Image for post
Image for post
Sorting by column

Sorting data by columns allows users to group similar data by a column values.

These patterns work great in tandem, filtering the table to show relevant data, searching for fine-grain results and then sorting the results by value.

Providing a summary of data

Image for post
Image for post
A visual summary provides an overview of the accompanying table

Adding a visual summary above the table can assist the user in quickly analysing the data.


Designing for the unknown 🔮

Could the table contain very long URLs or paragraphs of text (address data, user submitted messages, form field values)? We’ve got a couple of options here:

Truncate long text

Wrap long strings


Row actions

Image for post
Image for post
Performing actions on multiple rows at once.

Table Actions

Printing table data

Downloading table data

Image for post
Image for post
Menu providing table level actions

In this example, we’ve used an “actions” drop-down menu above the table to allow for table specific actions


Viewing additional row data

Modals

Image for post
Image for post
Viewing additional row data in a modal

Modals allow the user to stay on the same page as the table but give greater focus to the additional information and any actions that may be performed.

Detail panel

Image for post
Image for post
Viewing additional row data in a panel

Depending on the situation, you may find that a modal might not be the ideal solution if you need to keep the data under the modal visible. A detail panel that slides into the page might be a better solution when keeping in context and needing to keep the data in the table visible.


Closing thoughts

The UI’s above were built with the Pulsar design system which delivers the bulk of this functionality to the Jadu Continuum Platform.

Update: Part 2 which looks at modal dialogs is now live!

Pulsar

The product design team at Jadu

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store