1

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!

3
  • May I ask have you figured out other elements of interaction design that add up to emphasize the difference between the three patterns? For example, that the item details are shown in an overlay modal? If so, please share Nov 20, 2023 at 11:08
  • Hey Alex, there is a more or less nice example from Notion – when you hover on the Name cell, it shows a little small CTA inside the cell next to the name, and the CTA contains a small icon shaped like a modeless. The issue with this is that you need to interact with a separate dedicated CTA with it's own hotspot, versus interacting with the text in the cell itself. Felt like too much hunting for a hotspot with your cursor, especially if clicking the text would do something else like navigate the user away (in Notion it's inline edit), but I was planning to verify this with users. Nov 20, 2023 at 11:56
  • I find it hard to visualize what you've written so far so pardon me if I'm wrong, but I believe that you could try using a chevron down icon for Action 1 links, leave Action 2 as it is and for 3rd Action as a common practice I'd suggest using a button, especially if you plan to use modals for this action in the future.
    – fakermaker
    Nov 20, 2023 at 12:52

1 Answer 1

0

If you want provide all these actions to user as interchangeable actions you may provide control outside your table like radio buttons set to let user to select preferable behavior by himself/ Like this:

Show Details

InsideNavigateAction

So you'll be able to left design intact.

1
  • Thank you, we are considering this pattern, displaying controls on hover. There is one proof of concept case that does this – Meta Ads Manager. We're evaluating if this approach would be better than using unique language for each action. Dec 5, 2023 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.