Accordion Form

[jcfilben]

Exploration + Use Cases Related #1440 4/25 Shareout with findings + next steps

Tasks

• [x] schedule kick off call w/ @dianeumoh, Greg, Betty - knowledge transfer, motivations, use cases, scalability
• [x] review existing design - [ ] research any guidance on the vast internet [2 days max]
• [x] create a problem statement
• [x] share-out and review with team - [ ] create a couple of design ideations - [ ] review with designers - [ ] refine based on review
• [ ] create follow on tickets for subsequent work

Acceptance Criteria

- [ ] multiple design iterations generated

• [x] Decide on a direction to take (Accordion Form v.s. Enhancing Wizards)
• [ ] follow on tickets created

Problem Statement + Proposal

Wizards were designed for users to progress through a form with multiple steps easily. Designers have told us that the current pattern is too much for users when completing forms that require only a few steps, which is ultimately causing other designers to create new patterns such as Accordion Forms. How might we improve upon our current Wizard component/guidance so that designers are comfortable with using Wizard for all multi-step related forms?

We believe that enhancing our Wizards to clearly show previous, current, and next steps will make the experience more manageable for users. We will be incorporating ideas from the Accordion Forms designs and will follow up with designers for review.

Initial Notes

Brought up by Diane in office hours 2/9/23:

Diane presented a design she had been working on that could be used when a wizard is too much but a regular form isn't quite right. She presented a design for a multi step progressive form or 'Accordion Form'.

This is beneficial for forms that have multiple steps, but are not overly complex. It also gives the user the ability to see all the processes involved at a glance.

Diane mentioned she is interested in collaborating with the design system team on this.

Scott brought up that we could run into issues with validation when there are dependencies across multiple sections.

Figma file with Diane's design: https://www.figma.com/file/aloqJzdIpAgNlh8kzJ5sia/Login-%26-User-Management-(Glasgow)?node-id=4380%3A21546&t=Z9Cy04BI6omi31gE-1

[SOjaHPE]

@dianeumoh we'll make sure to tag you if we need your feedback or have questions regarding this ticket.

[KennyAtHPE]

Related patterns/components: Wizard Layer Forms Managing Child Objects

[KennyAtHPE]

Notes from meeting w/ Diane:

'Simple' use case for accordion forms

• Concerns with how screen readers would jump from section to section. Are next steps disabled or just styled to look as if they're disabled?
• Concerns with how validation would occur from section to section.
• Mentioned that these should be used for simple processes (ex. scheduling a call) and that the SSO example they had should instead be within a Wizard.
• Previous user testing they've conducted
• Mentioned that her main inspiration was from accordion forms from Material
• Suggested we reached out to Greg F. and Betty D. as they are both working on progressive forms

[halocline]

Great notes. Thank you for sharing @KennyAtHPE

RE:

• Suggested we reached out to Greg F. and Betty D. as they are both working on progressive forms

I know Greg has looked into these quite a bit and has findings where they work and where they can be problematic.

I believe Revanth brought some accordion form ideas / use cases for some flows in GLCS. Their use cases would be good to understand as well.

[KennyAtHPE]

@halocline reaching out to Revanth now for those use cases, thanks for the suggestion.

[kurt-ph]

Summarized notes from meeting w/Greg:

Component Problem

• When to use a wizard?
• When to use accordion form?

Scenario Example: You just purchase a device subscription. Bought a whole bunch of access points, gateways, switches, and etc.

• When you purchase this stuff, it gets through software supply change, being shipped to the dock.
• You get this email, you get a link, here is your subscription & your device is ready to go. You go click a button in the email and some magic happens. Users show up in this setup guide. A walkthrough guide, with 1-2-3 go with this step.

Other use cases:

• Update subscription keys.
• Go to service subscription, input your subscription key for those devices.
• Go to device subscriptions, then…input required field (multiple form steps) in order to complete step X.

Scenario 2: Set of devices is loaded on a table/

• How do I select 500 items? How do I select 100 items?
• I would do search for the modal, device type?
• How do I select a whole bunch of those things, a whole robust interaction to search
• Functionality to select and find multiple things.
• **How do I multi-select a whole bunch of things?
  • Is there a way to sort/filter specific content when multi-select.

Questions raised:

• **Do we do this in 1-2-3 steps, which is accordion component trying to solve??

• Jessica, interaction can route to SSO (Single Sign-On)

• Isn’t it complicated to use accordion form vs wizard?

• Big question, when to use according vs wizard?

• Is there an opportunity to look at our wizards component instead and use that as step tracker? A way to solve this use case?

  • Mentioned cases on real estate, scroll within a scroll, the big complex interaction pattern.
  • Scheduling a call with IT support, where you put in a date & time for appointments. (Can this be done in a modal?)
  • When do you use accordion forms vs modal and wizards. What is the feasibilities there?

• Keypoints from Greg:

  • Wizards allow you to focus on the area.
  • Accordion pattern, great for simple “set up account” workflow. Prefer simple 1-2-3 steps, quick & simple.
  • Depends on how much data you configure in each of those steps. Less the better.
  • Have users setup an account with your name, description and address, less than what you want to do for wizards, but more what you want to do in modals.

[KennyAtHPE]

Greg's use case

---

Notes from meeting w/ Betty

Potential flows that could be turned into Accordion Forms:

• Wizard
• Modal

An Accordion form can:

1. "Prime" the user for the steps needed to complete the task. 
2. It can provide added confidence to complete the task by having visibility of all steps.
3. Visual arrangement is pleasing and can improve motivation Need to look more into "lists"

How many steps are best for this type of form? I'd say 3-4 steps...more than that could become overwhelming.

[KennyAtHPE]

Shared use case from Revanth. Not entirely sure if this is an accordion form

[KennyAtHPE]

Storage Step Wizard Wizards from Oracle (Scott worked on this) Wizard docs from Nimble GL Test Drives Step Wizard

[kurt-ph]

Shared use case from Revanth. Not entirely sure if this is an accordion form

I looked into this more, it acts more of a UI Drawer to either canvas interaction or sets of data tables. Not an accordion form, just a long side drawer for page element configuration.

[KennyAtHPE]

4/25 update

Share out with findings + next steps. Sharing out to the DS team, Melanie, Diane, Greg, and Betty