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
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:
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
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.
and left positioned with
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.