[IxDA Discuss] good template examples

[Christopher Fahey]

Andrea Kulkarni wrote:
> I don't need to worry about navigation or toolbar
> types of issues.  I'm looking for a more elegant way
> to spec animations, from how each screen looks, to
> what each objects behaviour is, and what captions are
> displayed depending on conditions.  

When designing for rich interactions and animated UIs, I've found that it's
often valuable to NOT use pre-existing templates at all and to instead
innovate a new presentation technique specifically for the UI being
designed. Interaction design is, to me, in large part a process of visual
communication. A UI designer must sometimes "reinvent the wheel" in the
artifacts and documentation. I value IAs with strong visual communication
and graphic design skill. If you think about it, an IA/ID/UX designer is in
some respects a graphic designer whose audience is a little more
specialized.

Think of it this way: when an illustrator is asked to make a diagram for USA
Today, the New York Times, or National Geographic about how, say, the human
genome is being mapped or about how the NSA cross references America's
private phone calls, they can't just grab a template. They need to draw on a
long history of visual communications: graphic design, instructional design,
visual metaphors, information design, cartoons, whatever it takes.

Sometimes UI design is the same. Sometimes you must invent a new template to
suit the application you're designing.

My specific advice is this:
1) Think about using some cartoon conventions: storyboards, word balloons,
etc. 
2) Look at the sketches and whiteboard drawings you and your team
undoubtedly made along the way. Or just start drawing a diagram (with pencil
and paper, or whiteboard) with the intention of using it to help explain the
application to a colleague. Draw all the little boxes, arrows, and
thumbnails you need to communicate the concept, without too much excess
detail. You'll have some rough diagrams, some small some large, some notes,
some erasures and dotted likes, etc. Stop and take a look at the diagram you
just drew. Hey look, maybe that's a good sketch for your design template? 

(This is exactly what happened to my team a few years ago when designing a
mobile app: We were making flowcharts on the whiteboard, and in each box in
the flowchart we were practically designing the whole UI for each screen.
Then we realized: our formal wireframe and flowchart documents can be one
and the same document, unifying them on a single diagram. One artifact
instead of two. Worked out great.)

-Cf

Christopher Fahey
____________________________
Behavior
http://www.behaviordesign.com
me: http://www.graphpaper.com