I'm creating a tree table for use on our platform. We currently use chevrons for our expand/collapse buttons, and in doing a lot of research across UX forumns, I decided on the rule that the chevron should point in the direction a user can expect the action to happen.

So, for example, the chevron faces down if an accordion box is collapsed - indicating that if user clicks it, it expands down. For a left-docked side panel, chevron points right when it's collapsed indicating that when clicked, panel expands right.

My dilemma I'm trying to solve now is - we are adding tree table function to our data grids. Meaning, I'll need to add expand/collapse button. Every example of a tree table I've seen has chevron facing right when row collapsed, and it faces down when it is expanded. In prior meetings, most agreed that was also the most intuitive and familiar.

Just a few examples of tree tables with right/down chevron direction use:

https://experience.sap.com/fiori-design-web/tree-table/ https://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx https://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#tree-grid

So, I'm currently leaning towards going against our rule for chevron direction for tree grid applications, in favor of going with most familiar / intuitive to most users. But curious if anyone has any other thoughts on this.

Also, worth noting - using a plus / minus button would be ideal here, but not an option as our table also uses checkboxes for selecting rows, and placement of expand / collapse button and checkbox will be near each other so we want to avoid two different types of clickable box shapes. In addition, the "indeterminate" state of checkbox would look too similiar to a minus icon.

enter image description here

  • Hi, and welcome to the site! Just for clarification: Your statement "tree table [..] has chevron facing [..] down when it is expanded" does not match the image, where the chevron faces up while expanded. Which is what you want to do? – virtualnobi Jan 22 '20 at 8:11

I'd either go with the "tree style" of using chevrons (I was actually raising my eyebrows when reading your first paragraph :-), or use the plus/minus icons.

The image you show only includes the tree-internal design - where would the panel title and controls go? If the closing function (e.g., the minus button) is on the far right of the panel title, there's not much confusion with the indeterminate checkbox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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