Interactive Sketching Notation

User and Social Experience Design

An under-development notation system for user interaction interaction design documentation.

I stumbled across Wireframes Magazine today – a blog dedicated to collecting and sharing user interface design and information architecture wireframe production techniques, tools and examples – and found Jakub Linowski’s Interactive Sketching Notation.

It’s a work in progress, a system for describing UI elements and interactions in a way that are intended to make it faster to design and read interaction diagrams. The Notation covers things such as handling user input, tying into external business processes and offline user activities, transitions, delays and conditional processing.

Assuming you’re doing this level of sketching on paper with a more refined presentation in electronic format for your UI specs you’ll need a black and red pen and probably a pencil. By the way, my favourite sketching pens are the Artline Drawing System 0.3 and ZIG Millenium 005.

Jakub uses the concept of a Delta Box to define an area that is implied to persist across interactions to avoid you having to draw the whole region or screen again, taking time and consuming document real estate.

I tried putting a few interactions through the Notation but the first example I chose of AJAX form field validation didn’t fit as the Notation doesn’t provide for general keyed input, doesn’t support the idea of dynamic server request/response and didn’t really allow me to easily show new elements being dynamically inserted into a screen such as you would for displaying feedback without redrawing the whole screen. So maybe I chose too advanced and rich a scenario for a run through the first first of his Notation system.

I then tried something simple like a search box on a screen and bound a key:enter handler to the query box and a generic click event to the submit button. Would probably be good if there was a way of aggregating or implying redundant handlers … maybe that should be left till further along the design process, but if you did chose to using this Notation system for the final user interface specifications then you’d need to make sure you capture all these cases especially if you’re responsible for usability and accessibility otherwise there’s a good chance developers won’t implement them.

The Notation is a good start and I’ll be sharing these and more thoughts with Jakub – the main things for me I think that need work on is handling DOM manipulating and dynamic UI changes, incorporating patterns, generally a more object-oriented design approach to specifying UI components and widgets and how to embed and link those into screens and regions … for example designing a form feedback widget and then simply pointing out where that widget should be inserted and when it should be activated rather than respecifying it for every screen.

I understand that the primary goal is for quick, shallow sketching so you don’t want to overcomplicate it and start having to put reference numbers to an appendix or inventing a hieroglyphic-like symbols system but there’s definitely scope to expand the system.

Download Interactive Sketching Notation.

// purecaffeine.com is a user interaction and UX design, social media and Government 2.0 blog run by professional Canberra, Australia web user interaction designer Nathanael Boehm, licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.

Related posts:

1. Sketching
2. Transient feedback
3. Style guides and UI implementation