Page MenuHomePhabricator

Codex's Accordion layout uses a down-chevron for closed state and an up-chevron for open state, but other UXes use right- and down-chevron
Closed, ResolvedPublic

Assigned To
Authored By
Jdforrester-WMF
Jan 31 2024, 8:42 PM
Referenced Files
F41805529: CleanShot 2024-02-07 at 17.56.31.gif
Feb 7 2024, 5:12 PM
F41805475: image.png
Feb 7 2024, 5:12 PM
F41805449: image.png
Feb 7 2024, 5:12 PM
F41805464: image.png
Feb 7 2024, 5:12 PM
F41805447: image.png
Feb 7 2024, 5:12 PM
F41805440: image.png
Feb 7 2024, 5:12 PM
F41780753: Captura de pantalla 2024-02-05 a las 11.38.31.png
Feb 5 2024, 10:38 AM
F41753384: image.png
Feb 2 2024, 4:31 PM

Description

Noticed when chatting with Roan, the new Accordion layout's icons are surprising to me. Wikifunctions has an accordion control with a right-/down-chevron control, which is what I expected these to look like.

However, I note that the W3C's and Bootstrap's examples also do what Codex does, so maybe everyone else is wrong? Looking at this research from Nielsen, should we be migrating other use cases?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF subscribed.

Is this the use case referred to in Wikifunctions?

image.png (224×337 px, 12 KB)

Looking at the design inventory for the Accordion component, it seems like this "nested logic" use case stands out against the others. It almost looks to me closer to the "TreeView" use case of the Vector 2022 ToC. That design does use the right- and down- chevron, and is not meant to be covered by the Accordion use case (see T325351). Funnily enough, the "Wikifunctions" example in the inventory shows the Codex Accordion approach, although I don't think this was eventually implemented.

Is this the use case referred to in Wikifunctions?

image.png (224×337 px, 12 KB)

Looking at the design inventory for the Accordion component, it seems like this "nested logic" use case stands out against the others. It almost looks to me closer to the "TreeView" use case of the Vector 2022 ToC. That design does use the right- and down- chevron, and is not meant to be covered by the Accordion use case (see T325351). Funnily enough, the "Wikifunctions" example in the inventory shows the Codex Accordion approach, although I don't think this was eventually implemented.

When we designed the new Codex Accordion, we kept in mind all these use cases (down/up or right/down arrows) and we decided to go with this down (collapsed) and up (expanded) arrows since it was the most common case in the accordions captured in the inventory. For TreeViews T325351(ToC) we planned to use the other solution (right/down arrows) since in this case there could be more than one nested item, so the right/down arrows make more sense.

Captura de pantalla 2024-02-05 a las 11.38.31.png (964×1 px, 72 KB)

sharing a few examples that i've been collecting in the past months as we've been working on the nested/expanding/collapsing UI on wikifuntions

print dialog on macos (gif)

image.png (800×756 px, 103 KB)

(interactive) notes app

image.png (1×2 px, 498 KB)
image.png (800×1 px, 199 KB)
image.png (1×2 px, 819 KB)

more experimental UIs

image.png (922×2 px, 400 KB)

the only example i've found so far where the chevron is point up/down is in the gmail sidebar (gif)

CleanShot 2024-02-07 at 17.56.31.gif (800×314 px, 824 KB)

CCiufo-WMF claimed this task.

Resolving this since I don't think this task will lead to anything more than the discussion we've already had in the comments. The Wikifunctions use case isn't really the target for the current Codex Accordion and we might want to use different designs depending on the application (like the TreeView).