I am working on the UX of a low-code development platform where I need to have an tree explorer and a properties panel for different items in both the explorer and the components in the middle section.

My thoughts are to go for a layout similar to Axure, Sketch and other such tools where the exploring panels would be on the left side while the property editing and configuration on the right side.

What do you think of this? Do you know of any research done on this paradigm?

  • 1
    This is only my interpretation, but the layer or page selecting being on the left, and the property editing/configuring on the right, may be because of the fact we read left to read in Western languages and also view progress from left to right. Layers and folders are top level, while properties are layer specific. – Wanda Nov 15 '17 at 10:09
  • If possible, implementing a way for the panels to be dragged around and moved to different parts of the window allows users to set up the environment the way that they like (personally I like the explorer and object properties on the same side). – MoonRunestar Nov 15 '17 at 11:02
  • Yes, we are also planning to implement resizing and pop-out from the panel the different sections. – Ioana Nov 15 '17 at 11:31

It sounds like that would be fine, though I'd put the left and right panels in collapsible trays so that the user can hide them and increase the amount of space for development.

If they are collapsed by the user, perhaps they can automatically expand if the user does something that requires their visibility (like searching for a file, inspecting an element, etc.)

I do like the comment about letting the user drag the panels around, because some people use vertical viewports.

The arrangement of the panels is done according to master-detail relationship from left to right (in LTR languages),

So in your case, it sound right, explore will control the content, and properties is controlled by the content.

Here is an interesting article:

https://blogs.windows.com/buildingapps/2017/05/01/master-master-detail-pattern/

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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