How to design a mobile table and top table UI design tips

Designers and business owners have often viewed tables in the digital world with disdain. However, you shouldn't view these as a hindrance but as a method for enhancing the user experience.

Often, developers opt for CSS techniques to make tables for mobile devices. Using CSS stems from a backlash against its excessive use during the early days of the web.

Recognizing the value of tables when used appropriately, especially for displaying data, is important. Correctly utilized, tables for data representation are both beneficial and necessary.

But the situation changes regarding small screens.

Tables, by nature, are space-consuming, while phones and tablets typically offer limited-screen real estate.

Over the years, we've shifted focus from the size constraints of mobile screens to understanding their functionality on the smaller screens where we need to display data.

Yet, when addressing the topic of data tables, mobile screen sizes pose the greatest challenges.

So, let's discuss potential methods for improving the table design UI for mobile processes.

Most table UI designs for mobile devices fail to meet user's needs.

The trend of using responsive designs often fails to address user needs fully.

Most designers employ a handful of approaches for mobile UI table design, but many of them make it difficult for users to read the presented data.

Their methods are aesthetically pleasing or clever but often fail to fulfill their intended purpose. They don't adequately address user needs that require the functionality of viewing, analyzing, and interacting with tabular data.

Let's explore some common tactics designers use for table UI design for mobile.

Use scrolling for large data sets

One common table UI design tactic for mobile is horizontal scrolling. The horizontal scrolling method allows users to scroll or click on an image with the table, leading them to a scrollable table full or data or information relevant to them.  

This approach ticks the box for showing a table and requires minimal design effort. However, its simplicity is also its downfall. The element is too large for the screen its being viewed on.

The well-known confusion caused by horizontal and vertical scrolling is only marginally improved by adding fixed columns or headers for the rows.

Using images instead of designing a table

Another strategy is completely abandoning tables and using graphics in their place. At first glance, this seems effective. By presenting data visually, your users can quickly consume the data.

When images convey the message more effectively than a traditional table, it might seem logical to use.

However, this approach requires consistent use of images across your website.

The method gives the impression that mobile users are less valued than desktop visitors.

Responsive templates

The most widely used solution today is responsive table design.

Each row morphs into a mini table, with labels and corresponding data in opposite rows.

While this method may visually adapt to smaller screens, it fundamentally changes the table's structure and may not preserve the clear relationship between labels and data that a traditional table provides.

Using responsive tables in web development is popular, yet it presents significant challenges in practice. This technique, widely adopted because of its responsiveness, allows teams to replicate existing models easily.

However, this method often needs to be revised regarding user experience.

Responsive table UX design mistakes

Responsive tables transform in a way that can confuse users. They often abandon the traditional table format, leading to interactions that don't make sense.

For instance, developers might add features that aren't needed.

Rows in such tables can become excessively tall, consuming the entire viewport and leaving users lost.

The design fundamentally undermines the purpose of tables - allowing users to scan down columns for quick comparison, or data retrieval is lost.

Our Experience with Designing Tables

We have consistently found these responsive solutions inadequate.

Such approaches often fail because they do not respect the user's need to view information in a traditional tabular format.

Tables must maintain their essential structure - with rows and columns that users can easily scan. In the following sections, we'll discuss design concepts and tactics that are effective for making tables work on smaller screens.

Good table UI design prioritizes user needs

Aim for simplicity when making responsive tables. You can do this with:

• Fewer columns
• Fewer words
• Legible labels
• Icons

While it seems obvious that designs should only show what users need, many business owners want to include unnecessary data.

Large tables with numerous columns are inherently challenging to use, a problem magnified on phones where screen size limitations prevent large tables from fitting comfortably.

Users typically struggle with tables that present large amounts of data, regardless of screen size.

Design Strategies when you use a table UI design for your website

Here are the strategies you can use to make your tables better easier for users.

Avoid unnecessary data

A straightforward strategy is to eliminate non-essential information. Doing this requires careful communication with your team to understand the purpose and value of each column.

When data fails to offer value, it's often possible to omit that data, although it can be challenging to convince stakeholders of this necessity.

Sometimes, you might find that a list can accurately share the data. If so, use a list.

It eliminates the need for a table, simplifies design, and improves user comprehension.

Use icons and shorten words

While tables often avoid abbreviations and jargon, they can benefit from them, especially on mobile. Reducing text length and using icons for status information or actions can significantly enhance usability and conserve space.

For example, instead of a lengthy "two items remaining," a simple green checkmark could tell users you have that product. Using this approach leads to more user-friendly tables.

Only give the data users really need

Another issue is tables that often repeat information.

Removing repetitive data and including it only in the table header can make the table more scannable and efficient.

Refining the information presented in optimizing table data for mobile devices is crucial to enhance usability and readability.

Let's consider a scenario involving a service center's data. A table for this type of company would need data such as:

• address
• contact information
• services

However, by following three simple rules, you can reduce the information presented to readers.

We simplify the user's decision-making process by omitting the above data points, which are less relevant.

Simplification can also be achieved through abbreviation and the use of icons. You could use a star for a favorite rather than the words. You save space and make the function easily identifiable at a glance, enhancing the user experience.

Avoid redundant labeling or context in the table. For example, distances don't always need labels or a header indicating they are measured in miles. Simplifying these elements can make the table more straightforward and less cluttered.

Use Progressive Disclosure for Enhanced Clarity and minimalistic designs

Progressive disclosure is a powerful tool in table design. It provides just enough information for users to make an informed choice, with additional details accessible on a subsequent page.

Considering everything holistically

When designing a table, thinking about the entire user journey is vital.

Often, tables are an entry point to more detailed data on another page.

Reducing clutter in the main table view allows users to select an item from the table and access all necessary details on a dedicated page or through an expandable container.

Using flexible containers

Incorporating accordions within tables can be an effective way to manage additional information. While long accordions can be overwhelming, smaller, well-designed ones can fit seamlessly within a table layout.

Hide actions in expandable accordions

A common application is to use expanded accordions for displaying actions. Imagine a desktop table where actions are placed in columns on the right-hand side. These actions could be hidden on mobile, and an icon could be used to indicate it could be clicked and opened. When a user taps a row, the actions can be displayed immediately below it, maintaining a clean overall design while offering full functionality.

Create extra pages to reduce complexity

Even if there's no direct requirement for a subsidiary page, this approach can be beneficial. Our example shows that each row might include an arrow indicating selection, leading to a detailed page with all the omitted information. The method creates a more focused and user-friendly table experience.

How to effectively design mobile tables

Designing compact tables involves a blend of graphic design features, many of which have been successfully used in print design for centuries.

Here are some effective strategies to create tables that are both readable and fit well on a mobile screen:

Use smaller font sizes.

Within your design system process, you likely have various text sizes, and using smaller text for detailed content like tables is a key reason for this variety. The smaller text enhances table readability by providing sufficient room for content.

While the temptation might be to pack as much content into a table as possible, using large text forces you to compromise on spacing, which can reduce readability for users on your website or app.

Since tables usually contain dense data, users will closely examine them. Even if the words look small, it will not matter because people will zoom in and read closely.

Focus on what's most important

Identify and highlight the most important data in tables with a limited number of columns. Although often important, data on the far right of a table can be overlooked due to its positioning and brevity.

Emphasizing this data, perhaps by making it bold, helps users locate it more easily. However, be cautious with bolding. If you bold irrelevant information, people will focus on it more intensely rather than look at the most important information.

Use scrolling correctly

Contrary to common belief, table pagination is not always the ideal UI design approach. Breaking up tables into pages can disrupt the flow and understanding of data.

Often, tables need longer to necessitate pagination, and presenting all data together is usually straightforward and more effective.

Consider using infinite-scrolling techniques for longer tables, which load additional rows as the user scrolls. This approach is often misunderstood as problematic due to poor implementations, but it is generally a superior solution to pagination.

Only include labels when needed

While table headers have been used in the examples thus far, they are not mandatory and can introduce complexity, slow down user scanning, consume vertical space, and potentially scroll off the page.

In mobile tables, it's not essential to label obvious elements, such as fields that are clear from their context or format. For instance, in Figure 2, where only the name, favorite star and distance are displayed, labels are omitted because the format and context make their meaning evident.

Dates and times are other fields that often do not require labels.

In tables, you can often forego labeling columns that might not be immediately obvious by providing a page title.

Allow users to customize their views

Customization of tables can be a valuable feature depending on factors such as the data, audience, and user requirements.

While there's a general tendency to avoid overcomplicating user interfaces with customization options, tables may benefit from sorting and filtering controls in specific cases.

Here are key considerations when implementing customization controls:

Unobtrusive: Customization controls should be discreet and not clutter the default table view. They should only appear when users actively seek them.

Optional: The customization features should be optional, and the table should function well in its default format. Users should feel empowered to decide whether they want to utilize customization options.

Understandable:

1. Ensure that customization controls are clear and understandable.
2. Avoid jargon and technical terms that may confuse users.
3. Use plain language that conveys the purpose of each control.

The key challenge is ensuring that customization controls are designed with simplicity. Users often have limited familiarity with technical terms and icons.

Controls for tables with lots of data

Complex tables may not fit entirely on small screens. To address this issue, you can load only the minimum data typical users need and provide controls for users to discover or add more information.

When dealing with extensive rows of data, search, sort, and filter functions can help surface the information users need. Additionally, consider using the drill-down functions mentioned earlier to display more data within each row.

In cases where users have diverse data needs, controls can enable them to select which columns to display. However, limiting the displayed columns to those that fit on the screen is crucial, preventing the need for horizontal scrolling.

Summary

Implementing table customization options should be a thoughtful decision based on data, user needs, and the overall user experience. Strive to strike a balance between offering flexibility and maintaining simplicity.

Legacy data and organizational constraints may limit data structure changes, but design creativity and adherence to user-centric principles can help deliver a satisfying mobile table experience.

Mobile should never be treated as second-class visitors, considering the widespread use of tablets and phones for content consumption. Utilize design skills and guidelines to ensure users access accurate and comprehensive information on mobile platforms.

Frequently Asked Questions

How to design a table?

When designing a table, aim for readability and avoid visual clutter; use the best row style, clear contrast, visual cues, proper alignment, tabular numerals, appropriate line height, enough padding, and subtext to create an effective design.

‍

What makes a good data table?

A good data table should have a clear header and description, legible typography, adequate spacing between columns and rows, and be user-friendly to enable users to scan, understand, analyze, compare, and act upon the information within them.

‍

What are the benefits of using gestures instead of clicks in mobile table UIs?

Gestures offer advantages such as quicker execution, one-handed operation, and less precise clicking, making user interaction with mobile table UIs more efficient and enjoyable.