Visual Interaction Vocabulary

From Dreamwidth Notes
Jump to: navigation, search

A site's visual interaction vocabulary is the list of guidelines describing the paradigm of how the site interaction and design works: when to use blockquotes, when to use standouts, when to use checkboxes, when to use radio buttons, when to put things in a div box in the margin, etc.

This document will cover both the terminology ("layout" vs "theme" vs "style", etc) used for these items in the site copy, and the visual "vocabulary" -- the visual elements used on a page, in an attempt to standardize the visual-interaction elements of the site.

Useful (if techy) resource: Visual Vocabulary for Interaction Design

Things we need to standardize the visual vocabulary for:

  • "Learn More" links/references to inline help
  • Single-choice decision points: single options that a user needs to decide between (both with and without default option)
  • Multiple-choice decision points: giving a user multiple settings to select/set on a single page
  • How to convey useful-but-not-vital information (visual characteristics of div boxes, etc)
  • Basic and extended configuration options for settings -- each configurable area should have a limited series of config options that we think will cover the majority of the use cases, with the extended (fully-customizable) options available on some kind of secondary screen