I'm currently building a new SaaS product, and am revisiting a few of my old decisions about certain patterns. In this specific case it's the design language for three types of ineractions that happen within table cells.
So we are dealing with complex data models, and most of the platform is tables.
We currently have 3 types of interactions that happen from within table cells, when user is clicking on the element that appears as text.
Action 1 – go 'inside' the item to view it's details. This is a simple parent – child – grandchild (sometimes) interaction, when you view the details of a complex item. Top level page is listing all items, they have their details and their own children sometimes, and they are quite compelx so we need a whole page to show the details.
Action 2 – navigate elsewhere withing a platform. This is esentially a link, but it is not an outbound resource, instead a different section inside the same platform.
Action 3 – Perform an action. Right now all actions are be launching a modeless preview with a few entries of simple data, but in future I can easily see we would need to launch modals with simple 1-2 field input, or perform some sort of action, like 'launch upgrade', etc.
So there are three actions, and you could argue that Actions 1 and 2 are essentially the same – it's just that one navigates user within the item they clicked (usually name coulmn) but the other navigates user to a different place in the platform. According to this argument it would be OK to use same visual styling for the text — for example underline, since the action is same, i.e. 'navigation'. However I feel it's still great to set the expectation for the user upfront, and differentiate between the two, so they understand the expected outcome before the interaction happens. I would in fact do this straight away, but I currently lack the design language for this – both actions are right now marked with underlined black text.
It gets even worse, because Action 3 is also an underlined black text at the moment, since our branding is all black and green. Making all Actions in the table green completely steal the attention from anything else, even primary CTAs, and makes everything way too colorful. I think making them blue would be way less jarring, but it is somewhat outside of the design system right now.
I plan to introduce the blue color into the design system to be used for actions, but before I do that, I wanted to see if there are any other practices you might suggest, so I can build some materials and verify these interactions with a few users before committing.
To sum it up – we have three interaction types, and we use one design language for all 3 so far. I would ideally like to have 3 different patterns, one for each interaction, but when scanning different SaaS software myself I struggle to find anything solid.
Would appreciate your thoughts on this!
