Why early wireframes need to look hand-drawn

There are many kinds of mockups to show users and stakeholders. Different levels of fidelity will elicit a variety of feedback. In UX, we generally assume that the lower the fidelity, the more we’re looking at feedback on interaction, organization of pages in a structure, and page to page flow. Higher fidelity mockups are better for feedback on layout, colors, content wording and overall design aesthetic.

Given the availability of high-resolution bootstrap PSDs, it’s easy to quickly build a few screens in a high-fidelity and think that these will suffice for getting feedback on basic organization and flow issues. Don’t make this mistake. If it’s early in the process, and your organization is still trying to understand the problem or the proposed solution, use low-fi mockups in the hand-drawn style.

Mockups that looks ‘rough’ or hand-drawn prevent people from getting caught up in the details, and help them focus on one thing at a time. You get better feedback on the high-level idea on what you’re trying to accomplish, rather than the details of layout, color etc. But why is it so problematic to present hi-fi mockups early on in the design process?

Pay attention to psychology
Giving someone a high-resolution mockup and then asking them ‘not to pay attention to details’ violates some shop-worn principles of human psychology. People want to talk about things they know. And many people, especially non-visual people, will want to comment on the details (technical accuracy of content etc) you are presenting. This isn’t their fault, they’re simply applying their knowledge to what they see. Actually, it’s your fault as a designer for presenting them with something you should know won’t elicit the kind of feedback you are looking for.

Most people aren’t good at juggling multiple things in their imagination: we’re horrible multi-taskers.  Simultaneously giving feedback and imaging how the design ‘should be’ is simply too much. Give stakeholders one thing to comment on, and make sure the details are obscured – by using wireframes in the hand-drawn style. I don’t mean inaccurate or sloppy. I mean mockups that look hand-drawn – here’s a style guide.

Understand all your users
Being a UX designer means understanding your users – ALL your users. Stakeholders and peers consuming your wireframes are your users too, and you need understand their needs, mental modals and problems.

People looking at your wire-frames want to:

• Give feedback (they want to talk)
• Know they were heard
• Know their comments made an impact on the product

Getting better feedback on mockups is a win-win. The product will be better, and trenchant comments will make it into the final product design. People will feel heard and appreciated. Help this process by giving your peers a wireframe that makes it clear that you’re early in the process; and that you’re still struggling to understand the problem and solution. You’ll drive a more productive conversation, get better feedback, get a better product, and win points by listening and integrating feedback into the end product.