E-commerce Link: Design by Wire
Most Web projects include the task of wireframing site interactions to visually convey page-level design thinking. It's the wireframe that details the minutiae of how a site will work—detail that's required to create a useful, usable and engaging site. It's ironic that this core deliverable, the foundation for all subsequent design work, is so often misunderstood.
More than once, I've presented researched and thoughtful interaction designs only to receive feedback that the logo needs to be bigger and the "Terms and Conditions" link should read "Policies and Notices."
While these are easy adjustments to make, this type of feedback does not bode well for later stages of the site design process. Wireframes met with agreement and nodding without question or discussion are not being critically considered by clients. Issues will almost certainly surface later when designs become more tangible. At that point, it's difficult to make substantive changes without schedule shifts and rework.
Admittedly, wireframes can be difficult to read and can have limitations. Clients (whether internal stakeholders or external client teams) cannot see beyond the boxes and arrows to understand a site design's functional intent. It's hard to interpret from static drawings how dynamic interactions will work or feel. Because wireframes generally represent page templates, as opposed to unique pages, clients must envision each scenario where a template will be used, and how the content for that scenario will populate content zones. Still, user experience professionals present wires, request feedback and are surprised to get little of value back from client partners. Perhaps it's time to improve the process.
Here are six tips to make documentation more clear to client teams, enabling them to provide meaningful and actionable feedback on your work.
1. Don't skip from the title page straight to the wireframes. It's tempting to get right to business and start a wireframe review by jumping into the very first wire. Stop. Remember, your clients are experts in their own fields, not the field of interaction design. During initial reviews, it's as important to introduce them to the concept and purpose of wireframing as it is to discuss the specifics of their project.
Start your document by describing what wireframes are and what they aren't. Wires are about site functionality, behavior, navigation and content priority—in short, what a site DOES. Wires are not about exact page layout, copy or look and feel—what it LOOKS LIKE.
Next, show a high-level wireframe illustrating the content zones that will appear regularly across the site. Describe the patterns of content and interaction that can consistently be expected from each zone.
Lastly, your introduction should include a sitemap or flow diagram highlighting the pages that are wireframed in the remainder of the document. This allows clients to have a sense of place. They'll better understand what pages they're seeing and how they relate to the larger whole.
2. Don't show too much, particularly in early presentations. Make sure you're breaking wireframes up into manageable chunks. The first batch should include only the home page and a handful of top-level drill pages. After you've created, presented and iterated on batch one then move on to batch two. Presenting everything at once will only overwhelm the client, and you won't receive the quality of feedback you seek. By presenting in batches, you also can incorporate your early learnings into later rounds of wireframe work.
In addition to limiting the number of wireframes included in your document, you may want to limit the amount of design process you show. Clients don't need to see the sketches and explorations that you've tried and abandoned. Unless asked, only present the recommended evolutions in your wireframe deliverable.
3. Nod to the fold. Ahhhh, the fold. Clients notoriously want to jam everything above the fold, particularly on the home page. To avoid having the fold conversation sneak up on you during the design phase—or, even worse, during user acceptance testing—meet the fold issue head on early in the process. Show a fold reference mark in your wires. By doing so, you're indicating to your clients and designers which components need to fall into the first screenful of real estate for the chosen browser resolution.
Also, make it clear to clients that the fold will land differently for different users depending on their personal screen resolutions and the number of browser toolbars installed. Appropriate expectations now will save difficult conversations down the road.
4. Present in person or with a screen-sharing tool. You want to be able to read the temperature of the room through your clients' body language and facial expressions. In person, you can control the pace of the conversation and pause to clarify or respond to questions if necessary. You also can direct your clients' attention to make sure they're looking at the parts of the document you're describing and fully understanding the interactions that you've designed.
5. Create a framework to collect feedback and give explicit direction. Your meeting isn't quite over when your presentation is complete. Spend the last 10 minutes reviewing your expectations for feedback. It's not enough to say, "we're hoping to hear from you with comments by EOD Thursday," and leave it at that.
Create a template (an Excel matrix works well) to help your clients organize and consolidate their comments. This will ensure you're getting the information you need to make requested updates. Your matrix can include (among others) columns like: Issue Number, Issue Name, Wireframe Title, Issue Description, Priority Level and Reported By.
This feedback template is also a good place to remind your clients, in writing, about the types of things they should be looking for and commenting on. Comments should be about what the site does, not what it looks like.
6. Track design and copy issues separately. Inevitably, you will receive some comments that are more relevant to design and copy teams than they are to the wires. Track these design comments on a separate tab of your feedback spreadsheet and hand them over to the graphic design team when they kickoff their look and feel concepting work.yy
Cristin Siegel is the director of user experience and research at Chicago-based interactive agency Designkitchen. Reach her at firstname.lastname@example.org.