Designing a template for complex data tables was part of a complex admin redesign I've completed for my client. It is for a b2b service that enables entrepreneurs to run online gambling sites by renting them e-gaming platforms. The overarching goal of the admin is giving entrepreneurs full control over products, players, and operations. Integral to that is reporting: providing detailed breakdown to key areas of operation by making live data available.
Basically: tables. Complex tables. With lots of data that users can view, sort, filter, search, and restructure—even on the go! The challenge was coming up with a table template that does all of these, despite the constraints of space on mobile.
Project scope
This case study focuses on user experience and interaction design of the tables, without attempting to discuss the entire project. The complete scope of the project entailed product design starting from discovering requirements, user and business needs, competitive analysis, writing users stories, prioritising features, planning design sprints, revising and restructuring information architecture, UX&UI design, developing a design system, and different sets of specifications for design and for content. I was supported by a UX researcher.
Expand row function
In addition to horizontal scrolling, users can also view all the information in a row by expanding it. The contents of each row can be viewed as a list, revealed by expanding the row accordion style. I used the wrong icon here.
Sticky table header
Sticky table headers remain on top of the screen as the table is being scrolled, continuing to inform users about which column they see.
Floating Back to top button
This button appears at the bottom of the screen—at the thumb's reach—as the table is scrolled, allowing for an easy way to jump to the top of the page.
Customising rows
Users can customise what they see in their tables.
Column visibility ON/OFF
Users can hide columns, so they can focus on theones relevant to them. Looking back at this, now I would use a toggle instead of the eye icon.
Reordering columns
Users can choose to see the most relevant information first.
Lockable left column
Optional aid to help keep track of where we are in the table, at the cost of horizontal space.
Tabs
Tabs are an intuitive way of grouping a set of reports together. This reduces cognitive load on users, and made the number of reports much more manageable. For example, we can join three reports (Player activity today, Player activity this week, and Player activity this month) into a single report called Player activity, with three tabs: Day, Week, and Month.
Typographic detail
Typographic detail needed to be very delicate and aggressive in the same time to accommodate as much data as possible on the little space the format offers. Without jeopardising legibility.
Only the underline is coloured in link text
Usually linked text is highlighted with a colour different from the body text. However in this UI I there is so much information to process on so little surface, that I wanted to make it as easy as possible. As black on white provides more the most contrast, and easiest to read, I kept link text as black, and only used coloured for the underlining stroke.
Font choice
The Roboto family used for the tables has been developed by Google as the system font for its mobile operating system Android. It has been crafted to work well on mobile devices in small sizes, making it a good choice for for the task at hand. It's big family with many variants to cater for all I this job needed.
Lining numerals
Rows that contain numerical values are right aligned, and they use the font Robot Mono. Every number of it has the same width, so the numbers line up, making it easy to scan and compare values.
Condensed column headers
Column headers shouldn't be longer than the information in the column cells, otherwise valuable vertical space is wasted. This is especially difficult to avoid, because most of the columns contain dollar amounts, and until a user starts turning over big volumes, these numbers are bound to be short initially. So I used a condensed variant of Roboto for column headers. However, column headers still might need to be truncated, and in this instances I added an info icon+ tooltip for explanation.
Differentiating negative and positive values with background colour
The subtle red and green background colour for positive and negative numbers supports quick visual processing of information.