While re-organizing and cleaning out my laptop, I re-discovered the interface design guidelines document Andrei and Donna created at Involution for our major client, Agile Corp. This has proven to be a highly valuable document, which also served as the platform for the class Andrei and I taught at San Jose State University last fall on interface design. It also became a handy tool when speaking at the Silicon Valley Codecamp event last fall too, when audience members demanded to get an easy listing of “core principles” for constructing intuitive, compelling UI’s for software products.
The design guidelines are as follows, focused on the craft of creating elegant, useful interfaces for websites, software, etc.
1. Mental models: For your software product to seem “intuitive” it needs to correspond to the user’s understanding of the system, expressed commonly as a simple meaningful metaphor
2. Structure: Wireframes are an effective means of organizing content into tidy, clean structures of data and functionality, per a rational proportional grid system. Keep the grids flexible yet consistent.
3. Direct manipulation: Second-hand information is no match for first-hand contact and interaction. Consider the mouse and keyboard as extensions of the user’s hand, trying to grasp on-screen info and commands. Beware of performance, latency, and feedback issues.
4. Terminology: Just call things what they are, avoid clever or cute marketing labels which only confuse users. Stick to standard industry names when possible.
5. Remove visual clutter: Remove extraneous ornamentation or lines or other noise that distract and interfere with user’s reading of a screen.
6. Flatten complexity: Every icon or button or control represents an exponential growth in decisions and options the user has to consider. Reduce redundancy and inconsistencies. Consolidate and flatten the interface.
7. Emphasis: If every control and data element is given maximum visual treatment, then nothing is standing out. Use thoughtful contrast and embellishment to call out certain elements. Decide which are more priority than others. If everything is emphasized then nothing is clear.
8. Typography: Follow the rule of 3–First start with 3 font variations to keep things simple and stick to it as much as possible before introducing more fonts. A font variation is anything that varies the font: size, color, style, weight, and of course typeface itself. Most visual noise and clutter and overemphasis is due to having too many fonts.
9. Color: Color is used to create emotion, mood, and also punctuate/emphasize elements as needed in the interface. Stick to a base, a highlight, some complements and black/white. Use color judiciously!