UI Spec Reviews

As the spec writing process starts to gather steam, routine check-ins and reviews need to occur to ensure accuracy, and more importantly, capture any missed issues or conflicts/confusions with other members of cross-disciplinary team, particuarly QA or Development.

The reviews are not a time to go through word by word every single line or what’s written, nor is it a time for “committee writing”–simply unproductive! Instead, the weekly reviews should be a time to identify major issues that cropped up during the writing, gaps/deltas, and potential conflicts with what’s been prototyped vs. developed or tested. High level issues should be surfaced and debated, not tactical tweaks.

Before the weekly reviews, the spec writer should be in constant touch with the designers and QA, having a tight feedback loop on getting inputs, making sure changes to the design are communicated, etc.

On UI specs…

UI specs should capture the following pieces of data: consistent terminology, pixel-level measurements, annotated screenshots (see prior post on how to create accurate images for specs), behavioral descriptions beyond the obvious or “for free” stuff, with cross-references where appropriate and useful between depedent specs.

Tables and spreadsheets do NOT make for good spec content or layouts as they tend to be hard to read.

Indeed, specs should be considered “designed artifacts”, not simply last minute or post-mortem writing thrown together at the end of a prototyping phase. Per schedules, the spec writing should occur somewhat in parallel, with engagement with the spec writer and devs, QA, UI designer, prototyper, etc.

Chunking and spacing the text and imagery properly is necessary to achieve that delicate balance of creating a document that is easily scannable and comfortable/inviting to read at length. Extensive prose text is not recommended. Avoid “should”, “could”, “would”, and any explanations/rationale–this is not a defense but a statement of what is to be. In effect, a recipe or cookbook so that if a disaster wiped out the company, then a remote dev team can rebuild the product from the specs (presuming that the documents are backed up somewhere!)

Good design (per Dieter Rams)

I have this linked in another post, but it’s certainly worth its own explicit posting for folks to link to for future reference:

Dieter Rams 10 Principles of Good Design

Good design is innovative.
Good design makes a product useful.
Good design is aesthetic.
Good design helps us to understand a product.
Good design is unobtrusive.
Good design is honest.
Good design is durable.
Good design is consequent to the last detail.
Good design is concerned with the environment.
Good design is as little design as possible.
Back to purity, back to simplicity.

Swiss Inspiration

One of the time-tested designs that still provides value and utility is good ol’ Swiss graphic and information design, characterized by a highly refined rational structure with minimal “embellishments” (ie, superfluous ornamentations, gratuitous imagery, etc.) and whatever imagery is there (if any) is supported by a tightly resolved grid system. Spartan. Rational. Utilitarian. Logical. Simple. Clean. But also very useful for something like enterprise app UI’s whereby the structure must be highly organized (since there’s often an overflow of data types crammed into a dense display area) and transparent enough so as to allow the data to be king, taking center-stage.

As part of a client project to leverage Swiss design for data navigation/presentation, I found these sources of Swiss design inspiration:

CMU Swiss Posters (Typography)

Weingart book

Muller-Brockman book

Dieter Rams 10 principles

Swiss Graphic Design book

other swiss graphics/posters (from flickr)

Software Design Resources

Here’s a listing of some resources that I provided at a recent guest lecture for design students at San Jose State University. Enjoy!

——

Notes on the Software Design Process
Lecture Handout: Further reading and resources

Papers/Essays

Good Design in the Digital Age by Richard Buchanan
Designers: Time for Change by Clement Mok
Fog of Design: Lessons on the Complexity of Practice by Uday Gajendar
Designing the Enterprise Experience: How IA Advances UCD by Uday Gajendar

Books

About Face 2.0: Essentials of Interaction Design by Alan Cooper
Designing Interfaces by Jenifer Tidwell
Designing Visual Interfaces: Communication-Oriented Techniques by Kevin Mullet/Darrell Sano

Creating Breakthrough Products by Craig Vogel/Jonathan Cagan
Designing for Interaction by Dan Saffer
Toothpicks and Logos by John Heskitt
Information Architecture (polar bear book) by Peter Morville

The Tufte Books (all)

Understanding Your Users by Baxter/Courage

Websites

Oracle UI Guidelines
http://www.oracle.com/technology/tech/blaf/specs/index.html

Apple UI Guidelines
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html

Windows UI Guidelines
http://msdn2.microsoft.com/en-us/library/aa511258.aspx

SAP Design Guild
http://www.sapdesignguild.org/