Resizable panel

Question

I am designing a web application with a split view.

On the left side is a listing of objects. When a user selects the object, the contents on the right will reflect the selected object; basically a Properties Pane. However, there are additional contents in this pane that I would like to surface using a tabbed UI in the Properties Pane. The tabs will cause the pane to resize based on the contents. The info tab is a slender pane while the pane showing a table of data requires more horizontal space.

Is it annoying that the items on the left side will resize/reshuffle because the view in the properties pane has changed size. If this is ok, would the next selected object remain on the same tab or return to the first tab?

I don't know how frequent a user will switch but it may be frequent. Is there a better approach?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Yes- users lose their visual "anchors" when the UI changes/resizes outside of a manual resize that they initiated.

One idea/solution would be to dock the side panel on the bottom, and lay out the info into multiple columns, so that both the info tab and the table tab occupy a wide space with a vertical scrollbar.

Answer 2

Some strategies that you might want to consider, depending on your implementation details and other user related requirements:

• have a top/bottom split view option instead of left/right; it still allows you to split the different views while having more screen space for the tabs where needed.
• use a different UI component to organize the info panel on the right, such as a collapsible/accordion structure or a traditional file/tree view.
• resize the cards/tiles on the right hand panel so that the users don't have to scroll as much to look through the content
• provide a sort/filter/search for the cards/tiles on the right hand panel to surface results that the users are looking for without scrolling