Recently, our client wanted to come up with a solution for combining multiple tables into one. Now, that’s a tricky process. Each table has an unlimited number of columns and by simply joining them together, you end up with a large table with possible data duplications.
With such a design challenge, here’s what we need to consider:
- The user must be able to rename the columns, merge columns together, remove columns, rearrange columns and possibly do even more with them in the future — so it has to be scalable.
- It’s possible to combine more than two tables together, which means there should be scalable logic regarding how to differentiate each column and flag it, depending on its source.
- All of this should be achieved in as few steps as possible. Ideally, the solution should be modal-friendly so it can be reused later when we want to edit the table.
- Everything should be restriction-friendly so the user can, for example, evoke the solution when he/she only wants to merge columns and nothing else (certain steps in the app might use this feature).
The question is: How do you achieve all of the above with an intuitive solution?
Combining tables with other possible actions (above)
TL;DR: We categorized the actions into two groups: those applicable to one column only, and those applicable to multiple. Then we listed them as inputs, so they can be renamed directly. We included a select box for each of them, so the user can select one or multiple — and perform actions on them (like merging, deleting, rearranging). And we did all of that with the user in mind, creating a robust solution that is intuitive and easy to use.
Let's talk about how we tackled the problem and the solution we came up with at the end of the process.
Discovery Phase
First, we broke the problem down into smaller chunks — to understand all possible actions a user can perform while combining the tables together. Together with the client, we established these actions:
- Remove Column(s)
- Rename Column(s)
- Reorder Column(s)
- Bulk Reorder Columns (if possible)
- Merge Columns (two or more) and the ability to set a name for a newly-merged column
- Merge the newly-merged column with another column (if possible)
- Set table ID
The next step was simplifying — to determine how to perform some of these actions intuitively and to allow the user to discover them along the way.
Basically, that means grouping actions together:
- Remove (one or multiple columns at a time)
- Rename Column (only one at a time)
- Reorder (one or multiple columns at a time)
- Merge (one or multiple columns at a time; columns can also be newly-merged ones)
- Set table ID
As you can see, there's always a way to simplify things. We cut seven base actions down to five.
Thinking About the Layout and Flow
It was then time to sketch out some ideas for the overall layout. Our initial plan was to divide the solution into multiple steps to minimize the cognitive load – but we discovered this would prolong the whole table-creation process, and that the order of these steps could conflict with each other.
For example, if we set the first step to be merging and then reordering, what if the user wanted to go back to merging but had already reordered a bunch of columns?
We realized that it should be in one single step.
First Drafts
When coming up with new solutions, our approach is always to first put everything we want on one page, then align and, in the process, often uncover how to visualize specific parts.
We started by putting a column name down with actions and description text containing the name of the table from which the data is coming.
Very general idea behind the actions for one column (above)
This is where we start seeing ways to improve — which is exactly what these drafts are great for. Optimization. We created the first general draft of one column, visualizing all the actions. Then it was time for the next step.
Optimization (The Fun Part)
First, let's think about the actions. Are they specific to this exact column? Or maybe they can be used for multiple columns at once? … See where we're heading with this? The first improvement was dividing the actions into the ones specific to the column and ones that can be applied to multiple. The new sketch looks like this:
Dividing the actions into column-specific and “apply to selection” ones (above)
We can continue by simplifying the column source from being a name to an icon — specifically, a logo — and getting rid of the edit icon by combining it with the name as an input. The next iteration looks like this:
Rename by just typing and logo as a representation for the source table (above)
Things are now starting to look like the final version, but we still have some improvements ahead — like the ability to search for columns (let's be real, there could be dozens or possibly hundreds) and make sure we can bulk rearrange when selecting more columns (nice thing to be easily discovered by the users).
Example of multi-action (above)
We’ve come a long way from the initial setup, which had tons of options, to a simple solution that solves each of the seven base requests.
Final Solution
Finally, we just have to put all of this into a modal and create various states for the engineers — so they know all the possible interactions a user can have. The final result looks like this:
Final UI (above)
Try the "Merge" in this Prototype (above)
To summarize: We’ve created a solution for merging multiple tables together, rearranging, bulk rearranging, removing, bulk removing and renaming columns — all in one, simple-to-use modal that we can evoke anytime to quickly edit tables. We can also get rid of certain features when needed (like reordering or merging) and we can also scale features by adding more actions to the action panel (we would only show an icon with a tooltip on hover).
Hope this can help you with your future designs. Keep striving for more!
Would you like to join the STRV team? We're hiring!
