Style Guide Primer for Agile Teams
There’s been a remarkable amount of dialogue lately on user experience design and agile recently. I’ve struggled to do the dialogue justice, but in the meantime I’ve taken one of the key points to heart: we should be focused on adapting traditional methods to a more agile cycle. To that end, here’s a missive both for the agile community and specifically my co-workers.
Style Guide Benefits
Developing a style guide can be highly useful practice in iterative development. Successful integration of a style guide into your development methodology has both end-user and team benefits.
| User Outcomes | Team Outcomes |
|---|---|
|
|
Examples
Copy Oriented
Know Your UX Acronyms:
(via B&A) |
The boxes and arrows house style guide is a sort of Funk & Wagnall’s / Manual of Style and describes the typographic style, tone, and even common abbreviations.
Beyond text, however, style guides should reach into interaction design: layout, spacing, visual design, and grouping constructs that are common across the application.
For Operating Systems: Human Interface Guidelines (HIG)
Thought on Test Driven Development Readers who check out the MSFT Vista HIG might have noted the similarity of some of the criteria expressed on specific elements to the tests one might write to insure a interface is ready to be deemed “working software”. Style guides can promote re-use of this criteria development work across implementations, essentially providing a base set for inheritance by custom types. As you would expect, violating these expectations while re-using the visual and interaction styles is a red flag for a potential user experience issue. |
At the most grandiose scale, a style guide can grow into a HIG. The early deployment of a HIG in Apple’s inital MacOS days was likely a key driver of Apple’s initial usability advantages over Windows. Despite the degree to which early Microsoft and Apple shared similar window, icon, menu, and pointer (WIMP) conventions, apple had a “Human Interface Guidelines” (HIG). This led to easier transfer of learning from one application to another for Apple users.
Microsoft has long caught up with extensive guidelines. Subtle aspects like making the labels of radio button and checkboxes clickable shape the way user’s expect the web to work.
Here’s an example from the Vista HIG expressing the Progressive Disclosure pattern and providing common graphical treatments to craft the affordance.
from the Vista Human Interface Guidelines
Web Application Style Guides
One of the best examples of a web application style guide, garnered from web search and the IXDA archives, is 2004 Oracle Browser Look and Feel (BLAF) Guidelines. The B&A communication style is included, but the BLAF also incorporates visual & page design as well as common interaction design concerns. This is split into sections for:
- Overarching concerns: color palette, mental model for save, and typographical conventions at the CSS level
- Components: Page elements or widgets and accompanying styles, ex. date picker & table styles.
- Templates: Page templates and complex components like messaging and search UIs
- Flow: Conventions around multi-step process design approaching a pattern library but including application specific conventions, example: Step by Step flows
This example spans Information Architecture concerns with guidance for information about navigation and current locations along with basic page wireframes. A key objective for this aspect of a style guide is to establish common names for the locations & widgetry. This provides an opportunity to make calls on where user and developer speak need to diverge. Much of the challenge of designing an effective user mental model can be accomplished by smart decisions in mapping internal to external terminology, but user mental models are truly a separate domain of UX work.
Further evolutions from a specific page flow wireframe yield page design elements to define common grouping, alignment, and chunking methods ideally down to the precise CSS implementation. On the interaction design side, the BLAF covers pattern implementations for master-detail views along with more local elements like pagination.
Agile Iteration and the Style Guide
While building a document of this complexity upfront is decidely un-agile, codifying conventions as they develop insures a top notch user experience, facilitates efficient implementation, and provides the key design criteria when it comes time to do UI refactoring. In some cases, doing some of this work upfront to generally shape an Epic or first release can help insure that UIs gel across story implementations.
At a bare minimum, looking for emerging UI conventions as initial work plays out and codifying them, if only in code, is critical to insuring incremental doesn’t mean inconsistent. As an application develops, the leader vs follower status of the style guide can vary.
Web Innovation, AJAX, and Patterns
As a UX specialist that does more web applications than anything else, it’s very exciting to see the interface design creativity of the commons and worldwide uptake of the web. Interactions on the web are not subject to the limitations (or supported by the bootstraps) of Windows Forms or the SWING UI toolkit. This has lead to a wider range of experimentation, subject to some notable but decreasing technical limitations.
It’s pretty easy to commit cardinal sins in web user interfaces, like using custom Flash scrollbars. Adherence to the core Microsoft HIG is the base level of concern, as that interaction has shaped the greatest number of users. Popular web-sites augment the user learning from the operating system (and often exceed it). Deviating from a conventions established by the combination of the OS and popular websites should be done with care and precision.
The YPatterns library, AjaxPatterns.org, and Tidwell’s interaction patterns all provide some guidance on established practice for deploying modern client side technology to user interface challenges. For a more visual experience, check out Messina’s Flickr design pattern collection.
Starting from patterns can help bootstrap your adoption of style guides, guide your architecture to useful levels of UI granularity, and provide a clear workflow — from pattern to lower level interaction and visual design.
Leave a Reply