Sunday, January 20, 2008

Web site prototyping: hand-crafted mockups in Denim

As a software developer, I'd like to concentrate on the interaction flow of web application and leave visual design to a graphic designer.
However, there is a common problem when reviewing the early prototype with customers: they tend to focus on design issues instead of interaction/navigation you are trying to address at the meeting. Apparently, this is main reason even many visual designers prefer starting with paper-based wireframes, or rough ("low-fidelity") sketches in software (e.g. Visio, PowerPoint), instead of html. To understand difference between wireframe and prototype, see e.g. nice discussion here or follow links.

Recently I found the Denim web site prototyping tool that aims at this early stage of design. From their web site: "DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming."
Denim is an outcome of university research, Java GUI application with a long history, but never reaching mainstream awareness. Primarily oriented on pen tablet input, it "preserves the important properties of pencil and paper: a rough drawing can be produced quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified using editing gestures."

Quick evaluation. Pros:
  • zooming from site maps to storyboards to details of an individual page
  • easy hyperlinks from page component to another page
  • test the interactions in the Run mode, or export to HTML
  • conditional hyperlinks (e.g. depending upon checkbox in the mockup)
  • looks like paper sketches, users are more eager to suggest modifications; not distracted with design issues
  • ability to replace handwritten component with text input or an image
  • portable (requires only JRE 5), no installation needed.
Cons:
  • tablet oriented: mouse + keyboard are less intuitive to use (and my mouse-drawn text looks horrible)
  • no reusable page chunks as header, menu, etc. (although promised in a future release)
  • design-oriented, not technology-oriented: great for working with customers, but I also need to communicate the design with the implementation team. I am missing a separate layer (or level of detail) that enables assigning technical comments to pages, components, links. Something like tags in commercial EasyPrototype, but with explicit control over visibility.
To make your own opinion, try an exported DENIM HTML site, or see videos on the home page.

No comments: