There are a number of high-end prototyping and wireframing tools out there these days (iRise, Axure, etc.), but nothing beats good ol’ fashioned paper, pens, and tape to work collaboratively to brainstorm interfaces and functional flows. This article outlines an approach we have used successfully on a number of occasions. Using paper allows the group to model their ideas, identify and address any issues in that model, and use the result as the basis for more detailed wireframes or click-through prototypes.
What You’ll Need
- The right group of people This sounds easier than it is. Try to think through all the groups in the organization that have a stake in whatever functions are being defined. Often, there is a component that will have an impact on recruiting, or investor relations, or have legal ramifications. Make sure all groups that are impacted feel as though they have representation in the room during the exercise.
- Personas and Scenarios If you’ve done the up-front work to develop personas and define some functional flows through the system, it will be helpful to have them on hand. The personas will keep everyone honest as they try to rationalize pet features and functions, while the scenarios will provide a good launch pad and basis for each functional discussion.
- Wireframing Cutouts I’ve uploaded a Wireframe Cutout Kit in the resources section here. After you unzip the archive, print out as many copies of the backdrop, elements, and popups as you feel you need. The backdrops and elements should be printed on tabloid (11 x 17) paper while the popups should be printed out on letter (8.5 x 11). Cut out the individual elements so they can be pasted to the backdrop to create mockups of each page. The elements included come from the Yahoo Design Patterns Library. An alternative is the Konigi Omnigraffle Wireframe Stencils, or the UserFocus Paper Prototype Cutout Kit.
- Pencils, Pens, and Highlighters You’ll be labeling the elements as you attach them to the backdrop, as well as writing explanatory notes on the assembled mockups.
- Restickable Glue You’ll want to coat the back of the elements with this glue so that the pieces can be placed, removed, and placed again until you get it right.
- Tape and Several Colors of Yarn (optional)While this isn’t necessary, it allows you to model a physical representation of links between pages. One of the most difficult things for the team to visualize will be the linkages between elements and the yarn makes that relationship explicit. The different colors are useful in delineating different link targets (_self, _blank, and AJAX popups).
- Digital Camera When the exercise is complete, you’ll want to capture the finished product. Scanning of the pages will document the placement of elements on the page, but the connections between pages will be lost unless you can capture it while it’s still hanging.
How It Works
It will probably be difficult to get on everyone’s schedule at the same time. Prioritize your attendees and ensure they can be there for the entire exercise. If at all possible, try to schedule the session off-site so that people are not distracted by the call of their office or interrupted by passersby leaning in the door. If it must be onsite, insist on a “topless” meeting so that people aren’t checking their email throughout the session.
Once you have everyone in the room, start by hanging one backdrop on the wall. If you’ve done the work ahead of time to define personas and scenarios (recommended), you can use those to frame the discussion. Either way, you should pick a specific task and talk through the flow and necessary components (e.g. “Let’s walk through how a user would create a profile in the system starting with their first visit to the site.”). Start with the background you have hung on the wall. Explain that the blank page is the first page your user will encounter. In most cases this will be the home page, but there will be situations where the user enters on a secondary or tertiary page in your hierarchy. Make sure to label the page.
The pages and elements are constructed in a way that should force the stakeholders to address screen real estate issues. There is a dotted line on the backdrops to indicate the portion of the page that is visible on load and the parts that would require scrolling to see. The AJAX popups are designed to fit comfortably in the safe area of the visible page. As the group is placing elements on the page, try to encourage them to stick to the elements that are directly related to the scenario being discussed. If someone says “we need the weather available on the home page,” but you’re discussing profile creation, explain that there will be time to go back and fill in useful but not essential elements later. Make a note of the request and revisit it later.
Once you’ve reached a point of interaction (clicking a link, submitting a form, etc.), hang another backdrop on the wall. Use the colored thread and tape to indicate the connection between the button/link and the new page, then continue adding elements to the new page until another point of interaction is reached.
Once you’ve completed one flow (in our example, the user has created a profile), move on to the next. Once you’ve completed all functional flows, determine the global functions (contact, subscribe, about, etc.) and walk through those. After you’ve completed all the flows, revisit any of the general information requests and represent those on the pages where possible. By the time you’re done, you should have a pretty good view of the system and it’s constituent information screens and flows.
Now is a good time to bust out the digital camera and capture your work for posterity. Shoot with enough detail to reconstruct the relationships between pages later. That’s the next step in the process.
What Next: Make It Real
Now that you’ve captured the output of the wirefaming session, the task remains to present it in a fashion that everyone involved can validate it. You should still scan every page and create a PDF of each node in the hierarchy, but you’ll be better served by translating the decisions you’ve made into a clickable “prototype.” Even with pretty pictures and multi-colored yarn being used to describe a system, people have a difficult time visualizing what interacting with the system might feel like. Enter the HTML mockup.
I’ve also included a zip file containing the page elements as HTML. You should use this to create a clickable model of the output of your discussions so that you can share it with the group and ensure that what you heard was what they said. You can copy and paste elements into pages and create functioning links between the pages using this setup (Adobe Dreamweaver recommended). Once you’ve completed translating the paper-based exercise into a workable HTML version, you can send out the link in an email, ask people to test the flows and provide you with their feedback for future iterations.
Now, once you’ve received explicit approval of what you’ve done, you have concrete examples to hand off to the visual designers and developers to begin implementation. Please provide me with any feedback you have and look for other exercise kits in the near future.
