Monday, September 20, 2004

UI Patterns and Techniques: Introduction

UI Patterns and Techniques

This is a terrific resource from Jennifer Tidwell.
Introduction
If you're running short on ideas, or hung up on a difficult design quandary, read over these and see if any of them are applicable.
Jenifer Tidwell jtidwell @ alum.mit.edu http://jtidwell.net
About Patterns

Organizing the Content
Overview Plus Detail
Hub and Spoke
Extras On Demand
Step-by-Step Instructions
One-Window Drilldown
Intriguing Branches
Multi-Level Help

Getting Around
Clear Entry Points
Toplevel Navigation
Color-Coded Divisions
Animated Transition
Detail View Navigation

Organizing the Page
Visual Framework
Center Stage
Titled Sections
Card Stack
Closable Panels
Movable Pieces
Progressive Disclosure
Progressive Enabling
Property Sheet
Diagonal Balance
Liquid Layout

Getting Input From Users
Good Defaults
Forgiving Format
Fill-in-the-Blanks
Input Hints
Input Prompt
Dropdown Chooser
Remembered Choices
Illustrated Choices

Showing Complex Data
Sortable Table
Tree-Table
Alternating Row Colors
Cascading Lists
Jump to Item
New-Item Row

Commands and Actions
Multi-Level Undo
Smart Menu Items
Prominent Done
Prominent Cancel
Action Groups
Rollover Effects
Progress Indicator
Command History
Macros

Direct Manipulation

Smart Selection
Edit-in-Place
One-Off Mode
Spring-Loaded Mode
Constrained Resize
Composite Selection
Simultaneous Views

Stylistic Elements

Deep Background
Few Hues, Many Values
Contrasting Font Weights
Corner Treatments
One-Pixel Lines
Skins