Simple, NON-DESIGNED, working demos that illustrate interaction, navigation, and basic page elements.

It's easy to rely on instincts and experience when designing out interactions, jumping from concept straight to detailed page schematics without a thorough understanding of how the pages relate or how a user will interact with them. Click-throughs are a quick and easy way to visualize and test interaction and page components. Because they generally do not include design elements, they are a great way to focus discussion and decisions on issues of interaction and information architecture.

There is no "correct" time in the design process to use a Conceptual Click-through. Uses include:

  • Visualizing process flows and identifying transactional elements and content needs
  • demonstrating/validating navigational models
  • storyboarding basic design elements to demonstrate hierarchy, navigation, and interaction
  • creating a common understanding of functionality and navigation for a client or project team
  • on the extreme end, detailed wire-frame (or schematic) click-throughs for usability/concept testing

Sketch-style
Sketch-style click-throughs counteract a natural tendency to view demos as "finished." By eliminating any hint of execution methods or design style, the focus can be kept firmly on the concept and interaction.

  1. Draw screens - Using trace paper makes placement of elements easier, as you can draw the screens sequentially while referencing the previous screen. Draw non-changing items (like headers or navigation bars) only once and use it as your background photoshop file for creating all screens. To keep lettering and line elements straight, use graph paper as a guide (either place under your tracing paper or use non-reproduction graph paper). If you don't feel confident in your sketching abilities, create simple schematics in quark or illustrator and trace over them for that sketchy feel.
  2. 2) Scan screens - scanning in grayscale or RGB will give you better results than true black and white or line art modes.
  3. 3) Create JPEGs or GIFs - Use photoshop to create JPEGs for each screen and element (roll-over, layer, etc). Make sure screens are the same size.
  4. 4) Build HTML files - Use an HTML editor or WYSIWYG (like DreamWeaver) to create files with links, roll-overs, etc.
  5. 5) View in browser

Schematic style
These are easier to produce, especially if you aren't a comfortable sketcher although they do have the drawback of being more concrete.

  1. Build HTML files - Use an HTML editor or WYSIWYG (like DreamWeaver) to create simple page schematics. Use type, form elements, and simple shapes to represent page elements. Keep pages as diagrammatic as possible.
  2. View in browser