How to best display details views

Discussion
1

I noticed that in the official Retool templates, whenever there's a table of items, the detail view of each one is always shown on the side. I feel that's not the best way.

The details take space, making the table shorter and you have to scroll it horizontally if it has more than 4-5 columns. They also take away the focus as the user is now seeing 2 things at once.

Wouldn't a modal work better? What do you think?

2

Hey @vangelov,

I feel like this is very dependent on the UX you're going for. I've used both implementations (detail view container visible always vs action that triggers a modal with that info) and in the end it depends on how you need your UI to work.

For some use-cases, opening a modal to get information, is just another step/click for the user which we can save. For others, a modal works best. Especially if there are many assocations with an object that you need to fetch.

3

I agree it can work both ways.

I found it strange that the majority of examples use the side approach, though. It makes me wonder whether this is somehow considered "best practice".

1 Like
4

Hi @vangelov,

You are right about wondering which method is the best.

I strongly suspect that most examples and docs (particularly from Retool) use the side approach
because they know you have a 1920x1080 monitor and

  • their example application is usually trivial and has few tables/forms/components
  • they want you to be able to see the detail at the same time as the table (eg if showing when selectedRow changes)

I use side by side when there is enough available width for the app
I use modals when the Table component needs the full width of the screen
I use a hidden form (show on click) when there are only a few fields in the data source.

Regards,

5

Hi there, Thanks for the feedback! Similar to @stewart.anstey's comments, I think there's probably a balance of wanting to use our templates to demonstrate how Retool works (in simplified examples), while also showcasing good design practices. I'd love to hear from even more of our community about the layouts that work best for end users in the real world :crossed_fingers:

Also, our team is working on shipping quite a few design improvements over the next few quarters, so we'll have to refactor our templates a bit once these improvements ship. One of these improvements is app "drawers," which recently shipped to Retool Cloud & help with drilling down on app data. I don't believe our templates have been updated to use drawers yet, but thought I'd share in case you find it helpful as an alternative to the standard modal. As always, let us know if you have any feedback on things you'd like to see in Retool :slightly_smiling_face: