Implement selected UX/UI improvements

[pinussilvestrus]

This is an epic issue that may be broken down into multiple tasks if needed

What should we do?

Alongside the initial release of the Camunda platform properties (cf. #2) we want to improve the initial UI & UX of the properties panel. In the last weeks/months we focus more on functionality and properties completeness rather than the user interface. To bring this to a state that is sufficient for the release, we want to conduct a dedicated UI / UX polishing. That includes

• create a dedicated list of improvements to be made
• implement these improvements

To have a smooth transition from concept to implementation, we have a prototype we will use to identify the need for updates to be made.

The UX/UI improvements include (cf. Miro Board)

• General behavior
  • keeping expanded state of sections across selections (cf. #98)
  • ensure closed state on lists and nested lists (cf. #111)
  • sort, insert on top, open + focus on creation (cf. #96)
  • ==> These are handled separately
  • ==> Action item: align with @MaxTru regarding behaviors topic (#96)
  • ==> Action item: consider using the useLayout fix for (nested) list items as well (cf. this comment) @pinussilvestrus
• General design updates
  • align spacings and margins
  • adjust header styles (swap type and label)
  • set group titles to bold on expanded
  • better indicate empty groups with greyed out arrow icons
  • improve data marker dot
  • align/adjust icons
  • cleanup style sheet in general (if needed, cf. #15)
  • ... and many more quick fixes
• Unify design system
  • align color palette
    • ==> Decision: we will make sure the color schema is used in the properties panel (using the correct variables)
  • align font (IBM Plex Sans)
    • ==> Decision: this will not be part of the library, use Arial as the default
  • align basic form components
    • make sure we don't define custom components only for the properties panel (except toggle), that should be unified for the whole Camunda Modeler application
    • ==> unbuild custom checkbox component (cf. #21, #115)
• Interaction updates
  • update hover states for create, remove, and arrow (colors, font, visibility)
  • add new create button for empty lists (align to the left)
  • ensure hover area matches click area
  • prevent user selections where necessary
• Wording updates (cf. #81 + guidelines)
  • sentence case
  • plural
  • group titles
  • labels
  • ==> Action item: @andreasgeier will clarify with DevRel whether sentence case is still the wanted form
• Ordering updates
  • example: all the different input/output groups cf. #95
  • do we need more ==> Decision: we will wait for feedback
• Implement minimal a11y guidelines
  • ensure semantic titles for buttons and titles
  • ensure all actions are clickable + accessible buttons
  • ensure correct title/label cropping
• Other improvements
  • sticky group headers ==> we will investigate whether this is feasible with minor effort
  • ==> anything else is not part of the design finishing, cf.
    • implement multi & empty state (cf. properties-panel#69)
    • advanced data markers (cf. Implementation)
    • custom form components

Why should we do it?

Be prepared to release the properties panel in a sufficient state, UI & UX-wise.

[pinussilvestrus]

Kickoff with @pinussilvestrus and @andreasgeier

04-10-2021

Priorities and timing

• In general, we try to keep key results like this short in order to aim for OKR completeness. Therefore, we want to keep the initial scope small and if there is time left, we do additional iterations within the quarter
• For the order of implementation, we prioritize
  • behavior
  • design
  • order of groups (we assume no action needed but will check in final review)
  • wording

State of behaviors

• 3 related issues about behaviors are almost done
• useLayoutState is in review (feat(hooks): add useLayoutState properties-panel#99 (comment)). Groups work as expected. Proposal for all other levels: keep them closed
• general issue about behaviors in work by Max

Prop panel as library

• should be independent
• Arial as default font
• use native form elements where possible, except toggle (needs to be styled)
• color schema will be included

Browser compatibility

• we design and test mainly for Chromium/Electron
• Second-tier, we also ensure bpmn.io browser support: Chrome, Firefox, Edge latest

Design fixes (cf. task list above)

• @pinussilvestrus to create a PR for all components together ==> test it alongside Camunda Modeler in a complete bundle
• wil consider scenarios like resizing, text truncation, title tags
• will pull icons from prototype

Wording

• Sentence case rule, we’ll once again check with Amara

Out of scope

• multi-select state, will be handled as bug (cf. Enable multi-select (and empty) state for the properties panel properties-panel#69)
• extended data marker will be handled as a separate feature
• custom form components are outside of design finishing
• (Sticky groups, we may consider it if there is time left)

==> Action points

• Align with @MaxTru: we need to decide about behavior issue, and implement (Allow auto-open when shouldSort=false for ListGroup properties-panel#96)
• @pinussilvestrus: will start with the design updates in a single branch => move fast, testing against Modeler
• @pinussilvestrus: check effort of additional level solution for useLayoutState
• @pinussilvestrus: check effort of sticky group headers
• @andreasgeier: check sentence case rule one final time with Amara

@andreasgeier + @pinussilvestrus agreed on another check-in point later this week to verify the current status (before Andi is heading to his vacation).

[andreasgeier]

• Align with @MaxTru: we need to decide about behavior issue, and implement (Allow auto-open when shouldSort=false for ListGroup properties-panel#96)

@MaxTru if possible, let's sync and decide this week. I have a proposal to limit the scope and to take the controversial sort out of the topic.

[pinussilvestrus]

Review session (8th October)

@pinussilvestrus @andreasgeier

Header

• type is not centered
• icon fill to have new black
• icon is not aligned to the left

Groups

• actions: outline of actions should be aligned to border (circle) ==> something we need to fix in Modeler
• actions: outline should not show up after click ==> something we need to fix in Modeler
• create label: should only be visible on hover
• increase list entries container padding to the bottom (3px)
• sidebar bottom for list items should be increased (2px)

Nested lists

• distance of nested list item is too far to the right, should be equal to the other distances
• hover of the arrow is cut off
• distance between two nested lists is too high, should equal to the upper entry

Form fields

• select height is a bit too less
• labels + description have to have 13px font size
• label distance to its input has to have 1px less
• checkbox labels have to have 14px font size
• checkbox labels need to be centered to the checkbox, increase padding to the left
• checkbox distance to next checkbox entry has to be decreased
• toggle labels have to have 14px font size (both toggle state + label itself), toggle height has to be decreased
• checkbox & toggle description has to be aligned to label

General observations

• Mouse cursor ==> that should be a general decision
• Sticky header ==> will double-check whether it's easily possible
• During @andreasgeier 's absence: let's merge it without additional design review, we can improve stuff later on