11

Is there any explanation on why the expanded node/folder has an arrow pointing down and collapsed pointing to the right?

My guess, an arrow pointing down directs user down to the content of that node. Pointing up would direct up to the sibling, which does not make sense, same as pointing to the left. The last choice is pointing to the right, which directs user straight to the more.

And of course - no arrow, nothing to expand.

enter image description here

On the other hand - expanders and Win11 UI seems to break this pattern - right aligned arrow to the right indicates navigation action.

enter image description here

3
  • 5
    The arrows are a regression in user experience compared to the older plus/minus marks, just in the name of being "different".
    – Ben Voigt
    Jul 5, 2023 at 20:27
  • I don't think the two examples are contradicting. If it's from a different company than MS it's certainly not an issue, using > in GUI's can have more than one use-case. What explorer are you using in the top picture? I think the right aligned arrow to the right in second picture indicates sub-navigation, not navigation action..?
    – agiopnl
    Jul 11, 2023 at 22:31
  • I don't think the two examples are contradicting. If it's from a different company than MS it's certainly not an issue, you have to see the software published as a whole. What explorer are you using in the top picture? I think the right aligned arrow to the right in second picture indicates sub-navigation, not navigation action..?
    – agiopnl
    Aug 18, 2023 at 0:32

2 Answers 2

8

In the directory view, a well-established and widely accepted pattern is used. This pattern effectively utilizes semiotics to convey a message: there is more content to explore. Since Western cultures typically read from left to right (LTR), users naturally anticipate new content to appear on the right side. Therefore, the arrow is used to convey this expectation through its directionality. (cognitive semiotics)

It's important to note that the simple arrow direction described above is a simplification of the approach used by older text-based systems, where expanding files required various commands such as ls, tree or dir. Text-based systems have limitations, and the older they are, the more restricted their capabilities tend to be. In older systems, users had to navigate into a folder, expand it, navigate into a sub-folder, expand it, and so forth. See example below:

enter image description here

In visual interfaces, which are commonly used nowadays, this entire process is condensed into a single symbol: >. Once a folder is expanded, the arrow points downward, indicating that everything below that line and up to the next folder at the same level belongs to that folder. Additionally, the rightward orientation signifies that folders below will be slightly indented to the right of their parent, facilitating visual scanning. This distinction is the primary difference compared to your second example.

Now, let's consider your second example. It employs another well-known pattern known as an accordion. The icon used to represent the behavior of expanding and collapsing content can vary. In your specific case, a downward-facing arrow implies that the content will expand downward, aligning with users' expectation of a downward motion. Similarly, in the expanded view, the arrow faces upward, indicating that the element will collapse in an upward motion.

However, it's worth mentioning that arrows pointing right (similar to the directory tree example) are also commonly used in accordions, as well as the plus and minus signs.

enter image description here

And it can even be placed somewhere else (even with different icons). See jQuery UI for an example of arrows pointing right and also placed on the left, which mimics the directory tree approach.

enter image description here

and left positioned with plus and minus signs.

enter image description here

The aforementioned example is from this page, featuring a lot of accordions. An interesting observation from an anthropological standpoint is that when you visit the page, you'll notice that all the accordions featuring the sign on the left were created by Asian developers. Interestingly, many of these developers appear to be from India, where the prevalent writing orientation is left-to-right (LTR). This observation is merely presented as a curiosity.

6

Indeed, it seems that the older style serves to indicate whereas the newer style serves to promise.

By "indicate" I mean to point your attention to where you should look — to highlight something of interest. Hence, the → arrow is essentially a stylized bullet: "Item here!" And the ↓ arrow says: "Items here!"

By "promise" I mean to point in the direction you will go if you interact with the item. ↓ says "Things will appear under me," ↑ says "Things will roll back up," and → says "You'll be taken to a new page." This → as new page also depends on the mobile idiom of swiping screens.

The two seem to answer different questions. The "indicate" style answers the question: "What am I looking at? What's important?" Whereas the "promise" style answers the question: "What will happen if I do this?"

We might theorize that as UIs become more standardized and uniform, the need to point out what you're looking at is diminished, while the need to distinguish types of behaviour is increased.

Your Answer

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

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