UI Specification: travelling from strategy to surface

In the last postings of my Catalyze blog, I described the idea of interactive UI specifications. Such a specification incorporates not just UI design prototypes, but the set of all models and artefacts that make up the design process and the design rationale. This includes text-based descriptions as well as diagrammatic notations.
Interactive specifications provide a more tangible and living way to define the look and feel of a UI. When the UI is discussed at the design layer, stakeholders and experts can drill down into the information layers below the surface in order to look at, review or change the underlying requirements. Accordingly, interactive UI specifications especially enhance transparency and traceability.
Travelling between the abstract and the detail belongs to the most frequent and most important activities in the design of innovative UIs. Staring with early design visions, the team will soon develop first sketchy layouts and more concrete design proposals later. During all phases of the design process this comes with facing design challenges, making difficult decisions and handling trade-offs. In the end, the iterative design process leads to a UI specification that is forwarded to developers.
Because interactive UI specifications lean upon a visualization of requirements and solutions, they can eliminate many shortcomings of text-based specification documents. The aim is to turn specification-driven development processes into processes where prototypes drive the progress. They externalize the outcome of translating requirements into the UI. And, they can substitute textual specifications if they include other detailed information that us usually integrated into hundreds of pages of text.

The idea of interactive specifications can be very well mapped to the so called 5-S-approach of Garret. The levels of surface and skeleton relate to abstract and detailed prototyping activities. The structure stages addresses the need of having descriptions of dialog flow. With regards to notations that are adequate to describe UI storyboards, the structure is as well best described with rather visual and diagrammatic notations. For example, diagrams such as flow charts, activity diagrams or data flow diagrams are very helpful to describe the structure. The scope of the software must describe functions and content. Both usability experts and software engineers know notations such as (essential) use cases or use case diagrams to address this assignment. The needs and visions that are behind the UI development project are defined in the strategy stage. For this purpose, textual notations such as scenarios are very useful.

For interactive UI specifications, the 5-S approach is an interesting construction that additionally underlines the idea of incorporating different means of expression into UI specifications. With adequate tool-support, the different levels can be traversed interactively. If all artefacts at the corresponding levels are linked, the UI specification adds transparency and traceability to the development process. This not just helps to develop better UIs, but also strengthens the role of the usability professional.