Previous post
UX leadership insight #10: Tools of trade
(See my earlier posts for introduction to the series.)
Watercolor paintings and oil paintings look no doubt quite different. The artist had a vision about the desired end result and then selected the painting technique that is best suited to reach it. In any form of art or craft, the tool is always visible in the end result. The same applies to interaction design.
The most typical process for interaction design is to draw wireframes of screens. After that, a visual designer will start working on the wireframes and designs the visuals. This process and selection of tools will be visible in the end result. Let’s say, if you design with Visio/Omnigraffle/Powerpoint, and then fill in the boxes with graphics, you will get … boxes with graphics: screens after screens, dialog boxes, windows, discrete states, z-hierarchy.
However, discrete (yet pretty) boxes is not my ideal of an optimal UI. What is your view as a design lead, what kind of result would you like to see? In my view, the UIs should be much more dynamic and fluid: canvases that transform to other canvases, objects that flex and transform, use of different shapes, fluent transitions. Interaction, that is genuinely utilizing the continuity of time. UIs that never stand completely still. Interaction that smoothly leads viewer’s eyes, hands and mind.
I’m not sure if there are proper design tools available for this. What would be the next generation of Harel’s state charts to describe and specify fluid interaction? Anyone?
Back to Nordkapp.fi12:34
i’d say video prototypes do this kind of stuff well, though they need to be done very rigorously and by a person who knows the medium (ie. video). the production work can be *very* time-consuming if one doesn’t know what to do. and it’s not that hard – just requires the right people who can do it feasibly and enough technical specifications for the system so the designer can create appropriate simulations of the system into the video.
and there are many levels of fidelity one can work with to speed up the process and structure the prototyping into smaller pieces and levels of detail. f.ex. you don’t necessarily need computer graphics at all in the beginning stages – a stop motion animation with post-it notes is an okay medium (but you really have to know the stop motion animation process in order not to get into trouble!).
13:01
I think there’s a fine line between hardcore video and wireframes— it all depends on who you need to communicate to. I’ve often found a bell curve on the needed fidelity on the style.. E.g. for impatient consumers one needs to have a movie trailer-like experience, which has a set of focused actions and good story to tell. On the other hand, when communicating to say, scrum team you need to worry less about the wow and more about the granularity and details. And of course more high up at corporate hierarchy you go, less time your audience has and hence you need to follow more trailer-like aesthetics and storytelling.
What comes to day-to-day team work, I think small demos work quite nicely. Individual transitions, effects etc. Small, important details that finally make the experience. Almost as if you’d develop an UI framework as you go. And while at it, there should be a few approximate pixel-perfect layouts and more detailed / functional wireframes, either interactive or stills. This way it’s easy to communicate your work on all levels of stakeholders, and also leave a clear visual trail where you’re heading.
14:39
Good article! I share this same vision of a fluid UX. I think until we have more fluid tools, it remains for the design lead to challenge the design teams to think this way. That said, I do think many designers intuitively share this vision, but how to make it as clean, simple and sharp as the rest elements in the UX… Constant prototyping helps but I do think a lot of it happens in the “head” until you start seeing actual running sw. This again may be a challenge when dealing with customers. The faster you get to actual SW the better.