xilem-widget-ux-guide.md

UX Notes:

General Visuals

• The current state/value of a widget should be obvious/visible.
• If the value doesn't fit the last digit should be faded to indicate that the value shown is only partial. A good heuristic would be to choose a size that is large enough to fit 3 digit numbers (e.g. selecting a value between 0-100)
• Expand the label when the user is interacting with the widget.
• The the widget's state/value should always be visible, move the location of the label if necessary (e.g. when pointer is interacting with the widget)
• A widget should optionally provide an indication of the min/max boundaries, where relevant.
• The slider should optionally provide an indication of intermediate values (e.g. axis ticks) between the min/max boundaries, where relevant.
• UI elements that are used for fine control (e.g. knobs) should be big enough to make them easy to grab.
• For widgets with a single functionality the entire widget's area should optionally be wired to trigger the widget's action.
• The user should be able to reset to a default value (double click).
• The user should be able to input the value using the keyboard (right click), where relevant.
• The user should be able to navigate the UI using both keyboard and pointer navigation

Widget State and Visual Feedback Mechanisms

Various methods can be used to indicate a state change:

• Luminosity/Brighness changes
• Color hue changes
• Color saturation/chroma changes
• Drop Shadow changes
• Size changes
• Shape changes
• Position changes

The human visual system is most sensitive to motion and luminsity changes hence the most effective way to communicate a state change is with position, size and/or luminosity changes to UI elements. You can optionally use drop shadows for extra bling!

Idle State:

An average state of size/luminisity.

Hover State:

It should provide a sense that something is picked up, brought closer to the light and inspected - hence it should be bigger and/or brighter than idle.

Focus State:

It is customary to show a stroked path around the bounding box of a widget.

Active State:

It should provide a sense that something is being pushed away from the user (and the light) - hence it should be smaller and/or darker than idle.

Warn State

Change color to amber and show an exclamation mark or a warning triangle

Success State

Change color to green and show a checkmark

Failure State

Change color to red and show a cross

Pending State

Change widget content to a loader

Reveal State

Show arrow, 3 dots or 3 bars (hamburger menu icon)

Hide/Close State

Show either an arrow or a cross

Low-level Widget Categories

Control

• Inputs (text, numerical, password, url/email, date, time, color)
• Pickers (day, date, time, timer, color)
• Buttons (text, icon, floating, segmented)
• Multiple selection (checkgroup, radiolist, segmented)
• Single selection (radiogroup, radiolist, segmented, switch)
• Numerical selection (linear slider, rotational slider, stepper)

Feedback

• Label
• Progress bar
• Loaders (linear, radial, dotted)

Layout

• Linear (Row, Column, Stack)
• Grid
• Flex
• Canvas
• Geometric Constraints
• Tree or Hierarchical
• Table

Context

Spaces

• Window space
• Subwindow space
• Virtual space

Navigation

• Context Encapsulation
• Context Scroling
• Context Divider (e.g split or comparison slider)
• Contexnt Extension (e.g. Panels)
• Context Expansion (e.g. Accordion or Expander)
• Context Switcher (e.g. Tabs or View Switcher)

High-level Widget Categories

Visual

• Cards

Bars

• Tab bar
• View Switcher
• Search bar
• Header/App bar
• Banner bar
• Tool bar
• Pagination bar

Panels

• Side panel
• Bottom panel
• Panel Dock

Subwindows

• Tooltips
• Dropdown lists
• List Menus
• Radial Menus
• Modals/Dialogs
• Notifications/Toasts

Common UX Patterns

• Selection (area, click, Ctrl + A, Ctrl + Shift + Arrow, Ctrl + Click, Shift + Shift, Long press + Drag)
• Zoom (pinch gesture, area, wheel, Ctrl + -/+)
• Scroll (pan, wheel, middle click, slider knob, arrow keys)
• Rotate (pivot gesture)
• Context switch (click, pan, wheel)
• Drag and drop
• History Undo/Redo
• Position Snapping (free, grid, POI)
• Background patterns (lined, square grid, dot grid)

Relative Pointer (Mouse)

Relative Pointer (Touchpad)

Absolute Pointer (Pen)

Absolute Pointer (Touchscreen)

Mouse/ Touchpad / Touchscreen

• PointerButton::Primary: Mouse Left Button / Tap / Tap
  • Single click / Single Tap
  • Double click / Double Tap
• PointerButton::Secondary: Mouse Right Button / Two-finger Tap / Long press
• PointerButton::Auxiliary: Mouse Middle Button / Touch Gestures
  • Vertical Scroll: Scroll Wheel / Pan Gesture
  • Horizontal Scroll: Tilt Wheel / Pan Gesture
• PointerButton::X1: Mouse Back Button
• PointerButton::X2: Mouse Forward Button

Keyboard

This is good stuff.