Revisit check creation UX
rdubrock opened this issue · 4 comments
This is intentionally vague. We haven't reconsidered the UX of creating a check in a long time, and we're at the point where we need to reevaluate.
I'd suggest using scripted checks as the starting point, and we can incorporate new ideas into the existing check types.
Here is a UI Prototype and Figma for the Check creation flow.
01 Create new HTTP check - Define check
02 Validation -Probes
03 Create new HTTP check - HTTP Settings
04 Create new HTTP check - TLS configuration
05 Create new HTTP check - Authentication
06 Create new HTTP check - Validation
07 Create new HTTP check - Advanced options
08 Create new HTTP check - Alerting
I was just reviewing the PR that @rdubrock put up and I had comments about the way the section validation works which I've noticed he did copy from these designs but it diverges from the example that Saga have for wizard forms (it's worth noting that I think their example can be improved upon, too).
I find it confusing as a user when I fill in sections 1 and 2 and I get green validation checks, but after I review section 3 and move on I get no green check for this section. It makes me think I haven't filled it in correctly and makes me hesitant to move on due to the previous behaviour. As a developer I know it has no required fields but I don't as a user so I think it is valuable feedback to understand they have reviewed the step correctly and it is valid as it stands. It is possible in these sections to trigger errors if you add inputs which are empty, so if you then correct those errors I think it should show as a green validation.
I also think that if you click from step 1 to step 8 it should validate all previous steps even if you haven't visited them but we can review that functionality in more detail at a later date 😃
Hey Chris, thanks for your insightful review of the PR! You're right about the section validation.
The original design focused on validating only mandatory sections when incomplete. This keeps things smooth for users by avoiding unnecessary checks and preventing sections from appearing complete ("passed") if they haven't been reviewed. Optional empty sections, by their nature, don't require validation.
While mimicking the existing design seems efficient, it creates inconsistencies with Saga's wizard form example (which, as you mentioned, could benefit from improvements itself).
Maybe we can move beyond a strict pass/fail system and explore a "visited" state for sections. Here's an idea:
- For optional sections a user hasn't visited, utilize a neutral information icon (ℹ️) in a gray color. This icon would signify the presence of additional options.
- For sections a user has reviewed, use a green checkmark (✅) to indicate completion.
This can eliminate the confusion of a checkmark for unvisited sections and leverage an information icon to nudge users towards exploring those sections.
This is mostly in production now with #759
The one thing I didn't have time to squeeze in, is that in @majavojnoska's designs, check type selection is a dropdown. Currently it's still a navigational step with cards.