Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

  • Density and complexity
    • of information
    • of user interface controls
  • Font sizing
  • Font leading and tracking
  • Borders and colours
  • Spacing
  • Text and layout direction (vertical vs. horizontal, left vs. right)
  • Linearization and flattening of columns, etc.
  • The appearance of textual cues: sarcasm, emphasis, humour, etc
  • Form field indications: required vs. optional, etc.
  • Speed of transitions
  • Self-voicing
  • Link affordances:
    • external links
    • navigational cues
    • purpose of a link(eg. definitions, relationships, tags, etc.)

Navigational and Behavioural Transformations

  • Time-space condensations - separation of elements that were presented simultaneously into a linear sequence, or vice versa.
    • Auto-portalisation - opening of "windows" in-place to other parts of application state without losing view context on demand
  • Focus cues
  • Concept maps
    • Describes the structure or overall shape of a user interface visually, showing regions and how they relate to each other
  • Importance levels (eg. politeness in live regions, etc.)
  • Sorting (ascending vs. descending)
  • Breadcrumbs
  • Tool tips and expanded descriptions

Control Transformations

  • SelfAuto-voicing, auto-completion, word prediction, especially in context- or application-specific ways
  • Toolbars and menus

...

Modalities

Control Types

Visual

Pointer

Auditory

Keyboard

Textual

Voice

 

Swutch Switch

 

On-screen keyboard: pointer vs. scanning

...

For a user who has screen magnification enabled or is using a low resolution display, there are certain types of transformations that are most important. The ability to linearize the screen, flattening columns and laying out the page vertically is particularly effective. The user interface needs to be flexible enough to respond to this need, as well as to handle presentational and styling issues such as effective word-wrapping and re-sizing of UI controls.

Transformation and Non-transformation 

An "all-win" modality for transformation is non-transformation - presenting alternative modes for access in one and the same view as a "fat interface" (with possibly latent behaviours). For example, a reordering control could be simultaneously accessible by Web 1.0-style numeric dropdowns as well as Web 2.0-style drag and drop. Alternatively, parts of the interface which could become dynamically editable when clicked on, but simultaneously presented with old-style navigation controls leading to a dedicated view for editing. Where this can be achieved it is ideal, since the form of the interface remains familiar to all users, especially where the "advanced" rendering would gracefully degrade to the basic rendering in the presence of primitive clients.

Except, of course, in cases where we can deliver a significantly improved user experience by designing alternative components that are specifically designed for a particular control scenario, assistive technology, or personal need. One of the potentially exciting abilities of FLUID is to, through transformation, deliver a user experience that is designed for unique needs rather than optimized for nobody in the universal design scenario.

Implementing UI Transformation

...