Design: Green arrows need more explanation

cds-snc / platform-forms-client

NextJS application that serves the public-facing website for Forms

https://forms-staging.cdssandbox.xyz/

MIT License

31 stars 12 forks source link

Design: Green arrows need more explanation #3789

Closed samsadasivan closed 1 week ago

samsadasivan commented 3 weeks ago

In the "Logique" graph, it wasn't clear to me why some questions had green arrows. Then I read the text above, but maybe that text should display the icon so I can connect the 2 together visually in my head.

Perhaps a legend or another way to show it is a "branching" action

Participant 5 (French flow) - Form file in slack

samsadasivan commented 2 weeks ago

PROPOSAL:

Adjust the descriptor below the H1 to act as a legend
The legend will only have the arrows (not the surrounding circles)
Language toggle and Reset rules will appear below this (current state)

SPECS

Flow sections arrow: Indigo-700, 16x16, padding: 10
Flow questions arrow: Emerald-700, 16x16, padding 10

samsadasivan commented 2 weeks ago

FUTURE:

Move the language switcher and the Reset rules button above in a tool bar.
Would be similar on other pages, and act as a tool bar. I want to dig into this idea more before proposing it fully, but its an interesting idea

samsadasivan commented 2 weeks ago

Design link -- Conditional Logic Alpha, Page: Ready for Dev, Section: Design: Green arrows need more explanation #3789