OVER 3000 CUSTOMERS FROM STARTUPS TO LARGE ENTERPRISES

Microsol is the leading full service digital agency with a strong workforce of 87 employees and 14+ years in operations

Blog

How To Architect A Complex Web Table

Imagine you design a system for data researchers. Or an application for energy management. Or a dashboard for corn traders. Maybe you’re designing something like that right now. In all the mentioned cases, people will expect tables. Not those fancy ones from design inspiration sites but Excel-looking monsters with hundreds of cells and complex interaction.

In this case, a designer faces many challenges. For instance, matching design with existing frontend frameworks or struggling with “uncomfortable” data that smashes the layout. We’ll overcome these problems by means of the following steps: systematize needs, go atomic, and define interaction.
A trendy-looking table with little data versus a busy complex table

Expectation vs. Reality

1. Systematize Needs

So, you’ve interviewed the target audience and figured out their needs and wants. Now it’s time to piece together findings and transform them into an interface structure. For example, one user said, “I need to see how my data affects other parts of the application.” Or while watching another person work with old software you noticed he uses shortcuts and doesn’t touch a mouse at all. What does it mean?

The first user’s words are about input validation and hints. You’ll need to consider attaching alert or help information to a table. Or develop a system of meaningful colors. It depends on the domain and the mental model. The observation of the second user’s work might be a sign you need to design all actions keyboard-accessible. And you’ll probably need to think about shortcuts more profound than just “Cmd + C” and “Cmd + V”.

Get A Free instant Quote

Please fill the form below and one of your respesentative shall get in touch with you shortly.

    captcha

    WHAT CLIENTS SAY

    Microsol is simply perfect. Fast, responsive and going the extra mile. Before hiring them, we were processing all applications manually and everything was mess. Their coders done excellent work on our automation process. Now, we manage everything on few clicks.
    Matt SparksCEORocket Funding Group