Apps Redesign: Installation Form

[dszidi]

App Installation Forms

New Features

This form is a departure from the current App installation wizards and how the UI deals with full page forms in general. New features include:

• Configuration form that is full page instead of a slide-out wizard. Unlike the current app installation mechanism, the form is no longer encapsulated in a card.
• Section label tooltip triggers (adds the question mark icon)
• Section Help that is always visible. In addition to tooltips, the section help is always visible.
• Glossary with anchor links to different sections. To help users navigate lengthy forms, we include a glossary for each section header.
• Form Field Search. With the fixed-position glossary, this search field allows a user to search for the field they want to edit in an existing app.
• Validation error at-a-glance display. Even if the user does not have the field in view, validation errors display in the glossary to help with configuration.

Section Label Tooltips

Glossary

Section Help Text

Tips for Catalog Maintainers

Designing for apps forms is a little bit tricky. While the front end knows what fields will look like, we don’t have any context because the contents of the form are 100% determined by the catalogs. For this reason I'd like to include a list of things catalog maintainers should keep in mind when designing their forms.

• Break up forms into sections
• Provide a generous amount of "Section Help". There is ample room for it and users will greatly benefit
• Avoid having sections with too many fields and sparse section help text. This will result in wasted screen space

Summary

We feel that these designs represent a number of improvements over our current Apps interface.

• Replacing slide out wizards with full page forms allows for easier visibility of fields
• Using the entire page rather than encapsulating the form in a card, gives the form more real estate to work with
• Adding section help allows catalog maintainers guide users when dealing with complex app installation options.
• Adding the fixed position glossary allows easy navigation to specific sections and even fields
• Showing at-a-glance validation errors in the glossary, even when the user does not have the field in view, helps users with proper configuration

As always, we encourage and appreciate your constructive feedback. Please feel free to leave comments below.

[ptyork]

This is very nice. I love the full page, verbose view vs. the slide-out wizard paradigm. I always felt the UI here was constrained, wasteful of screen real estate, and a bit cumbersome. I also really like the idea of a fixed/floating glossary with validation error indicators. The error indicator icon is good, though maybe add an outline or highlight to the entire line to help improve visibility. Also, as someone who is visually impaired, I'd like to see the red font used in the error "tooltip" be a bit brighter to improve contrast (see WCAG & https://webaim.org/resources/contrastchecker/). Also might be nice to include the same error icon from the glossary to the left of the error "tooltip" to tie these together (i.e., "this is the detail behind this error indicator").

Would love to see an emphasis on common/important/required fields being kept somehow isolated from advanced fields, which may be entirely hidden behind an show/hide advanced toggle. Maybe per section. I assume this will be up to the app maintainers to provide this kind of grouping metadata, but having common plumbing and UI guidelines for this would be nice.

[PrivatePuffin]

Would love to see an emphasis on common/important/required fields being kept somehow isolated from advanced fields, which may be entirely hidden behind an show/hide advanced toggle. Maybe per section. I assume this will be up to the app maintainers to provide this kind of grouping metadata, but having common plumbing and UI guidelines for this would be nice.

This is up-to the catalog maintainer and has nothing to do with iX-Systems.
As a mater of fact, we already do this for TrueCharts ;-)

[Testpoint96]

Glad to see the full page display. That dynamic glossary will be a time saver too. Very nice thank you all.

[Emalton]

Designs look great! Supporting markdown for formatting the help sections may be good too if that's not already planned.

Also it would be great if when you clicked on the validation error icon in the glossary it would take you directly to the field that has errors.

[PrivatePuffin]

Designs look great! Supporting markdown for formatting the help sections may be good too if that's not already planned.

Also it would be great if when you clicked on the validation error icon in the glossary it would take you directly to the field that has errors.

Technically all text fields exposed to App developers are markdown capable already.
We, as TrueCharts, don't expect that to change and explicitly asked for things like link support.

[ksimm1]

@dszidi For the app installation screens, I'd like the ability edit the values.yaml directly on a tab, toggle or frame
Both Rancher and Portainer provide edit access to yaml in the UI for their similarly helm-based charts/apps

Rancher Example
https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/helm-charts-in-rancher/create-apps

Portainer Example
https://docs.portainer.io/user/kubernetes/helm/deploy

[PrivatePuffin]

This has been discussed for future additional after the new GUI is in.

[jonct]

Very nice! 🤩 Especially the Section Help text, IMO will be a huge improvement over clumsy workarounds I've used in Lab-SCALE.

[gravelfreeman]

I've been kinda harsh and direct in my other comment but this redesign is awesome and going in the right direction. I got nothing else to add. Can't wait to see this 🥇