CRAFTING MODULAR TABLE COMPONENTS: BEST PRACTICE
by Ridwan Taufik / UIUX Designer
Table displays are widely used in various types of software, especially software related to data processing such as database management systems, inventory management systems, accounting applications, and web-based applications that require structured data displays.
Creating table displays in the User Interface can often be extremely challenging for beginner designers because they have to manage rows and columns containing various types of information, including texts, images, buttons, toggles, input fields, tags, dropdowns, and more. Beginner designers usually directly draw table, rows, columns, then put components directly on the canvas frame. This practice is not necessarily wrong, but the design output using this method will lead the design to become unscalable.
The first problem that designers must encounter without modular framework is when they are asked to revise one or more parts of the table. This will cause the design process to become superslow as they have to “destroy” the entire table first and then tidy it up again.
With a modular framework, this difficulty can actually be easily overcome.
Why?
Basically, not only table components need to be made using a modular principle. The entire product should be designed with the same principle so that it can be easily developed and changed in the future. In designing a product, a designer will use many interrelated components that need to work together to provide the best user experience.
But this time, we will only focus on creating table components. Besides improving the user experience, designing tables in a correct manner will also speed up the designer’s work, which means also save development efforts and resources in the long term.
In this post, I will explain how table components are designed in the development of Food Market Hub, and how they are used across multiple screens. Food Market Hub is a B2B SaaS software that specializes in the F&B industry and is widely used by food suppliers and restaurants in Southeast Asian countries. The platform uses table displays on many of its pages, which not only function to display datapoints but also allow users to interact directly with the table using buttons, checkboxes, input field, toggle switches, etc.
PROBLEMS
Every time designer is asked to create a table display, designer created new components that are unique and have never been made before. This is because the data points and user interaction expectations are different on each page.
For example, on the ORDER page that displays a list of orders, the table has columns as follow:
Supplier Name, Branch Name, Order Date, Order Value, Order Status, Requested & Estimated Delivery Date, and CTA.
To create a table on ORDER page, the designer creates a new component at the row level.
In his next task, the designer is asked to create a PRODUCT page that displays a list of Stock (product) in which contains column as follow:
Product Image, Product Name (text), Product Code (text), Status, Batch Control Active/Inactive (text), Tag, PAR Level (text), On-Hand Qty (text), Primary Button, and Secondary Button.
For PRODUCT page task, the designer creates another new component at row level that is different from the component used on the ORDER page.
The above practice is incorrect because:
- Not time-efficient. In fact, many cells (sub-sections) of the table are reused.
- Design becomes unscalable. While developing a product in a scalable manner is important because it allows for efficient and effective growth.
- Due to unscalability, editing particular part of table become so tiring. Because changing the padding property of the status column on the ORDER page will not change the padding property of the status column on the PRODUCT table.
- There is likely to be a lot of inconsistency in terms of size, alignment, and distance between one cell and another at a detailed level. Fixing it would be a nightmare for designer. This inconsistency will also be a major problem for developers who working on the code.
- All of the above mistakes will hinder the development time of the digital product as a whole.
SOLUTION AND STEPS TO REPRODUCE:
- The creation of table components should not be done at the ROW level, but rather at the CELL level.
- List down all possible types of cells that will be used on all application pages, whether on full-page views, drawer views, or modal windows.
- Create all cell component variations with various states, and keep following basic interface design principles such as the “Rule of 4-pixel” principle and maintain consistency in padding, coloring, border style, constraint & alignment.
- The types or variations of cells that are found and will be reused are as follows:
Design Result
a. Making Primitive Component Level of the Cell
Primitive component in this case defined as component that will be used repeatedly in all table cells. In the Atomic Design Framework, primitive component are often referred to as molecules; a combination of atoms; the smallest entities that cannot be further divided.
Primitive cell text will be used repeatedly in almost all cells, consisting of Thumbnail/avatar, left icon, prefix, infix, suffix, right icon 1, right icon 2.
b. Text Variations and LABEL ROW cells
c. CONTENT ROW cell variations
EXAMPLE USAGES OF MODULAR TABLE COMPONENTS
Post we finished all cell variations, now we can easily use them in creating table as you can see below.
CLOSING
Designing modular table components by manually crafting all cells variations and setting up them with precision and care - does require extra patience. However the result lead to a huge impact in the end. Design job can be done many times faster. Development efficiency can be maximized. And ultimately, the user experience can be enhanced with a neatly organized and consistent table display.
Reusable components not only save time and money but also create a more consistent and cohesive user experience.”
— Dan Mall, Founder and Director of SuperFriendly.
Ridwan Taufik is an experienced full package product designer that consistently provide thoughtful output, always focus on problem solving, responsible for every single pixel on deliverables screen.
