Watch the Ignite talk from Eyeo Festival 2013:

How it works

Tactile artifacts can be powerful tools when working with clients on website design and discovery projects. They help create structured limitations, within which productive conversations can take place and decisions can be made faster. Use this kit to help control scope and manage your client conversations, or simply use it as a tool for developing designs and websites faster.

The kit is intended to be printed. Some items can be laminated for re-use, and others should be left as one-time paper artifacts. The information below outlines each part of the kit, what it's used for, and how to assemble it.

Why Use Tactile Artifacts?

The physical nature of these artifacts acts on several levels to help streamline conversation. When we encounter physical objects, we take them at face value. The limitations present in the physical object can guide us to the solutions that we are seeking faster.

I have found in my work that using physical methods for wireframing and workshopping ideas with clients helps mitigate any confusion about what a wireframe is, or why we would want to limit primary navigation to seven items for example.

I hope you find this kit as useful as I have to jumpstart your next web project!

What's Included

Navigation Worksheets

Navigation Worksheets

Primary Navigation and Footer Navigation worksheets provide fill-in-the-blank spaces for menu items. Primary navigation is limited to seven, short menu items.

Instructions:

  • Navigation worksheets can be laminated for re-use, or printed as paper sheets for one-time use with the client.
  • Familiarize the client with both worksheets and use them in conjunction with the Wireframing toolkit to have productive discussion about site architecture and layout.
Back to Top
Wireframing Toolkit

Wireframe Toolkit

The Wireframe Toolkit provides two base "browsers" (one blank, and one with search and navigation elements) and two sets of blocks. The components are structured on a 12-column grid.

Instructions:

  • Print on tabloid size paper, ideally 80 lb or greater (i.e. thick paper). Consider printing two copies of each page to have multiple browsers and blocks to play with.
  • Cut out browsers and blocks according to dotted lines.
  • Laminate for re-use. Make sure to space blocks far enough apart when laminating to be able to cut out each block with ~1/8 inch margin around each block. Trim browser lamination down to 1/8 inch around the edges as well.
  • Purchase velcro tape (loop side) and place on white strips in the 12-column grid on each browser.
  • Purchase velcro coins (hook side) and place on the backs of each block element.
  • Use wet erase markers (not dry erase - these are hard to clean off laminated surfaces) with the client to sketch layout and wireframe ideas using browsers and blocks.
Back to Top
Visual Vocabulary Reference

Visual Vocabulary Reference

The Visual Vocabulary Reference sheet provides a set of descriptive terms to use when reviewing competitor or peer websites, and helps clients come up with words to express their aesthetic preferences.

Instructions:

  • Print enough copies for reference for each member of the client's team to have one.
  • Use this sheet as a reference when working with the Design Review and Site Descriptor worksheets.
Back to Top
Website Design Review Worksheet

Website Design Review Worksheet

Design Review Worksheets are useful when looking at example websites with the client. This can help you learn more about their design preferences, tease out descriptive terms they use to describe things they like and dislike.

Instructions:

  • Print one sheet per example site you are reviewing.
  • Use in conjunction with the Visual Vocabulary Reference sheet and the Site Descriptor Worksheet.
Back to Top
Site Descriptors Worksheet

Site Descriptors Worksheet

Use the Site Descriptors Worksheet to help clients prioritize aesthetic preferences.

Instructions:

  • Print one copy for each member of the client's team.
  • Have them list terms in order of importance. Refer to Visual Vocabulary Reference sheet for ideas.
Back to Top
Persona Template

Persona Template

Personas are a great way to identify audiences and better understand their needs. This template can be adapted to create re-usable personas, or print blank copies of the template to work with clients on creating personas from scratch.

Instructions:

  • If you want a set of re-usable personas, find rights-free or Creative Commons images of a variety of people (age, gender, ethnicity). Edit the template to have a persona for each picture, and give them a name. Print and laminate for re-use and let the client fill in the details.
  • If you want to define personas with the client, have clients create personas based on a discussion of primary audiences for their site. Consider bringing some magazines with a lot of people pictures in them to cut out and paste into the template.
Back to Top
Idea Cards

Idea Cards

Idea Cards are a way to control scope. Whenever someone comes up with an idea during discussion, write it down on an idea card to be evaluated for later. This is a physical manifestation of the "ice box" in agile methodology.

Instructions:

  • Print a stack of paper idea cards (cut along line).
  • Explain to clients at the start of the meeting that you will be using these cards to track ideas during the discussion. Have a spot identified on the table to place filled-out cards.
Back to Top