Skip to content

Instantly share code, notes, and snippets.

@giannissc

giannissc/xilem-widget-ux-guide.md

Last active September 3, 2024 09:15
Show Gist options
  • Save giannissc/172c6c591997ee14f6120134a7990697 to your computer and use it in GitHub Desktop.
Save giannissc/172c6c591997ee14f6120134a7990697 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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

Widget Set

Application Examples

  • Inspired by Gnome Apps and Gnome Circle. These are all relatively simple apps with a single goal in mind
  • The intention here is not to replicate their entire functionality but to paint in broad strokes to be able to evaluate the Xilem-way to reactivity against the real world.

Examples

Utilities

Advanced Examples

@PoignardAzur
Copy link

This is good stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment