3

Can anyone suggest a name for this control?

enter image description here

It's designed to display nested hierarchical data, in the same manner as a TreeView control. However, unlike a tree, it can only expand one "branch" at a time - in the bottom half of the control. The top half contains a list of all of the parent items - the user can navigate to any level by clicking on the appropriate parent item.

I first came across this type of control on Betfair.com (which is also where the data for this demo application came from). It is used to navigate through the various betting markets available.

For want of something better, I've called it a StackView control, but there must be a more common term for this sort of display.

Edit: I've re-done the image for those people who don't get the hierarchical nature of this data.

Improve this question
3
  • Treeview, but it doesn't show any kind of hierarchy.
    – ammu
    Nov 29, 2018 at 4:04
  • 1
    Whatever this view is, please I beg you to not use it. It's a UX nightmare!
    – Shreyas Tripathy
    Nov 29, 2018 at 9:38
  • It's a breadcrumb bar + list view, except the breadcrumb bar is vertical instead of the usual horizontal.
    – bace1000
    Dec 2, 2018 at 8:43

3 Answers 3

Reset to default
5

I think what you are looking for is the accordion component.

https://en.wikipedia.org/wiki/Accordion_(GUI)

https://jqueryui.com/accordion/

Improve this answer
4
  • 2
    This is not correct - in an accordion, the panels are all independent with no hierarchy, and any one can be opened at any time.
    – Peregrine
    Nov 28, 2018 at 13:02
  • 1
    that's not 100% accurate in my view. First: you say accordions are independent with no hierarchy, and in the example you showed us the contents are completely independent from one another. And the case of being able to open multiple blocks or just one at a time is up to a coding choice, I don't think that doesn't necessarily define an accordion or not.
    – feelerino
    Nov 28, 2018 at 13:12
  • 1
    @feelerino - I don't think you understand the nature of this data - the items displayed are absolutely related. The items in white all belong to the bottom grey item - they are the individual betting markets for the Arsenal v Liverpool match. Each grey item is a subset of the (parent) item above it.
    – Peregrine
    Nov 28, 2018 at 13:26
  • sorry as I didn't identify the top items as parents of the Arsenal x Liverpool game. My bad. Now I realize it definitely isn't an accordion. It really seems a very particular UI component this way. Maybe there isn't a standardized name for it yet.
    – feelerino
    Nov 28, 2018 at 13:39
2

I don't think it is a common control at all. Seems to be a bad idea to begin with, as there is no visual connection between what you choose above connecting what you see below.

I think an accordion would actually be the proper control to use here, but this is not an accordion. It appears to be a home-made solution.

EDIT: Or maybe this should be a tree view? I've had to read through all of your comments to actually understand what this is doing.

After reading them all, this appears to be a tree view--but one lacking in visual cues to make it clear what is a child of what.

In conclusion, I guess I'd call this "a form of tree-view with odd visual design"

Improve this answer
1

Some variant of an Outline Control perhaps? Early versions of Visual Basic had an Outline control, as a fore-runner of the List View control:

enter image description here

Although – like a modern list-view – that used indentation. Possibly – since there's no indentation to indicate "level of descent" – a Flattened Outline Control would be the term?

Improve this answer
4
  • Isn't that just a variation on a TreeView, which would allow multiple branches to be open at once?
    – Peregrine
    Nov 28, 2018 at 16:10
  • In some ways, perhaps, just as some variants of an accordion may only allow one section to be open at a time, and some may allow multiple sections open at the same time. I've certainly seen "tree-view-like" controls where only one section can be open at a time (any "open" section would be auto-closed if a new section were opened). I chose Outline partly because it is similar to how some "outlining editors" work, and partly because it doesn't necessarily have the "should be indented" baggage that a (modern) tree-view tends to imply.
    – TripeHound
    Nov 28, 2018 at 16:15
  • In this control the indenting is implied ... every grey item is a child of the previous item.
    – Peregrine
    Nov 28, 2018 at 16:17
  • Yes, I realise that: I was talking about (but perhaps didn't make explicit) a physical indentation, where each "child" level is indented to the right. There is also the logical "indication of level" (by how far down the stack of (sub)categories you are), but – without a physical indentation – that might better be called a depth.
    – TripeHound
    Nov 28, 2018 at 16:20

Your Answer

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

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