UX - Cluster Explorer

[lvuch]

confluence list with attachments: https://confluence.suse.com/pages/viewpage.action?spaceKey=CU&title=UX+Next+Up

---

Cluster Explorer

• [x] Icons for top-level items only - e.g. Workload, Apps & Marketplace etc
• [x] Rename Apps & Marketplace to 'Apps'
• [ ] Global Settings
  • We need to change the nav here and break things out
  • Other UIs will want to add sections to the settings nav, so we should think about how that will look

    ---

Controls

• [x] See below - I think we need to revisit the way we display groups in tables - the colours we use don't seem quite right, especially when you consider the row selection colour.

---

Forms

• [ ] Sticky form buttons - form modal buttons should be in a footer that sticks to the bottom of the page
• [ ] Validation - we need to improve form validation and actually show which field(s) need fixing. Consider adding icon/badge to the tabs when the form has multiple tabs and the error might not be on the visible tab.

Dual Control

Some places we use a dual control - like this:

• [ ] The grey background is confusing - we should avoid this across the board and only use that for disabled controls.
• [ ] I'm not 100% sure the two controls in this example need to be joined.

Button Sizes

• [x] I still think 40px is too high for all buttons
• [ ] I think we should have a toolbar control that we use above the lists and the buttons and controls in it should be smaller
• [x] I think we could get away with 32px buttons across the entire UI if we wanted
• [x] I think the buttons are too big when used in forms, e.g. Add Port and Add Variable as shown below - do these need the light blue background? Could we use a different presentation for this case?
• [x] rancher/dashboard#4163

Form Controls

• [x] We still have sizing issues, e.g. Prefix field is higher than the others - probably time to actually use a fixed height and be clear what that is

• [x] Another example where we still have issues: (Deployment Create → Resources)

OR

• [ ] Another example - you click 'Add Node Selector' and we use a grey block for the form for that selector - we have a blurry box shadow and the delete icon at the top right is badly positioned and squeezed in. There's nothing to say that these things in blocks are node selectors. I think we can document and improve the UI pattern for this case of adding items to a list where each item has a form.

Drop downs

• [ ] The blue border should go all around the drop-down - I think we can improve the look (low priority).

For deployment > Create, the container drop-down includes an item to add new one:

• [ ] It feels like we need to get a consistent pattern in place - if we display like this, it feels that we should at least have a separator in the menu.

---

Tabs

• [x] Tab presentation could be revisited - I'm not a fan of the grey background:

---

Other

• [ ] We need to review the UI for Continuous Delivery, Monitoring, CIS Scans, Backups, Istio etc - these all need a thorough review.

[lvuch]

@nwmac "I think we need to be clearer on the use of Primary and Secondary buttons (are those the only two?)" we currently have three primary, secondary and tertiary. Primary should really only be used once per page as the main action so it is easy to find. Examples: create (top of list) and save (bottom of create page). Secondary would be something like cancel or back. Currently, there is a mix of tertiary (was light blue, new pr changes to transparent) and secondary used internally on pages (example "add tolerations"). For tertiary we could utilize something more like btn-link and an icon.

I'd love to see all uses in storybook to clarify.

[lvuch]

from @catherineluse https://confluence.suse.com/display/CU/Reviewing+Helm+chart+overview+pages

[lvuch]

after chat with @catherineluse: ideas around user education:

• guided tour
• playground
• one-click installs, use case boiler plates specifically with charts

[catherineluse]

To expand on the user education stuff, the main intent is to make it so that users don't have to leave Rancher to learn how to use it. Ideally they should have to leave Rancher less often to go and read the docs or other third-party tutorials. For comparison, some database software comes with a playground that has preloaded data that lets you see what you can query. Similarly, Rancher could come with playground apps that are designed to allow users to learn by playing within Rancher, such as Istio's example book app. https://istio.io/latest/docs/examples/bookinfo/

• On the home page we could invite users to deploy a playground application (like the istio book app) which could be used for in-app demos and walkthroughs of Fleet, Istio, Logging and Monitoring apps.
• After users install one of Rancher's helm chart applications, the next page they see could give guided prompts about what to do next. For example, it could give you the opportunity to start an in-app tutorial about how to do a canary deployment with Istio, or deploy apps with Fleet.
• Helm chart app landing pages could have some additional text that can help users more quickly understand how their goal maps to a custom resource that they need to configure.
• Helm chart apps could come with home pages that help you visualize an overview of what is currently deployed and how the custom resources are related (for example, since Monitoring involves filtering so that a huge amount of metrics turns into a small number of alerts, there could be some help for checking what is happening at each level of the waterfall from top to bottom - what is being scraped, followed by what is being fired to alertmanager, then what is being filtered by alertmanager, then what is actually going to receivers. Each step could provide links to the appropriate dashboard to check what is at each level of the waterfall.)

[gaktive]

@nwmac is this still needed? Upon discussion with @lvuch, it sounds like some of this was addressed though the linked PRs were closed by accident so they need reopening to see how relevant they are.