Tuesday, July 7, 2015

The Value of Wireframes: or How I Learned to Stop Worrying and Love the Wireframe

All too often during an initial client presentation of wireframes they come out of the meeting less than enthused. And sometimes you can’t blame them. They don’t have any color or pictures and what does “lorem ipsum dolor” mean? I think it’s Latin for “My leg hurts.”

That doesn’t mean wireframes are not important, quite the opposite. As we continue to build large scale global websites like intranets and customer applications, the value of wireframes in the design process is integral to delivering a WOW experience to our clients. Determining high level decisions like hierarchy, navigation and content placement is more effective through wireframes than through high fidelity designs. Making changes is simpler and quicker and ultimately saves the client time and resources.

Even so, some clients need convincing about the value of wireframes. To help set the stage, I’ve imagined a hypothetical exchange between a hesitant client and one of the many talented Rightpoint User Experience consultants.

Talented Rightpoint User Experience Consultant: Now that we’ve finished the discovery and requirements gathering we’re ready to move on to the wireframes.

Hesitant Client: Wireframes? What are those?

Rightpoint: Think of them like a blueprint for a house. Before we build the house, paint the walls the color we like and find a nice throw rug we need to figure out how you are going to use the house. Do you need a two-story family home or will it be for a retired couple?

Wireframes are a way to bring together many disciplines to help determine how information is arranged (Information Architecture), how the content is structured (Content Strategy), how the user flows will work (User Experience), and how the modules operate (Interface Design).[1]

Client: Okay, but why do we need them?

Rightpoint: People are very visual thinkers and wireframes are a great decision making tool. We’ve already defined the requirements and user types so now it’s time to take those findings and build something tangible. Putting wireframes in front of the group helps align everyone to decisions about how the site should be laid out, how users will interact with the site and it will help ensure we have addressed all the business and user needs

Client: Why aren’t these in color? And where are all the pictures? These are just empty boxes and gibberish!

Rightpoint: Wireframes are kept black and white with limited imagery and content because right now we are only making decisions about content hierarchy and page flow rather than typography and color palette.

They are used as a communication device. You should feel comfortable criticizing the low-fidelity of the wires because ultimately this is not what your end-user will be seeing. People are less likely to provide feedback on high-fidelity designs because it’s assumed a lot of time has been invested in creating the design so nothing can be changed. The opposite is true for wireframes. The low-fidelity invites feedback and constructive criticism and allows the designer to make changes simply and on the fly.

Client: Okay, it looks like we are aligned on the overall layout and structure of the site. What’s next?

Rightpoint: Now we test! By adding some simple interactive elements and including actual content and imagery to the prototype we have increased the fidelity level and made it closer to the real thing. With our higher fidelity prototype we can place it in front of actual end-users to interact with our prototype and observe their behavior.


Client: I think we know our users pretty well. What new things can we learn from them?

Rightpoint: Of course you know your users, but you have to remember you aren’t the user yourself. When you work so closely designing and building an experience you develop a sort of tunnel vision with your product and may forget about the people who will actually use it. Before you test your designs, your assumptions are just that, assumptions. Standing back from the design and observing people interact with it helps test those assumptions and may identify potential pain points your users may face. Maybe a call to action wasn’t as clear as you expected or users regularly had trouble navigating to an important page. This gives designers and stakeholders real world data to refine and tweak the designs further until we have them just right.

Client: Well, I’m convinced. Just tell me where to sign.

Practicing good user experience means showing empathy for the user and your client is no exception. Understanding their concerns early on in the design process makes for a better experience for them and moves towards a better product for everyone in the end. Addressing your client’s concerns early on will ensure their satisfaction with the final product.

Learn more about the UX discipline from these previous Thinking & Doing Blog posts:

UX From The Inside Out: Practicing UX Through Company Culture by Anne Petersen

Features of a Good E-commerce Experience by Sarah Wallace

Back to Basics: UX 101 by Paul McAleer

[1]Better Wireframes: Introduction for Clients & Designers. Ben Groulx. Custom Fit Online. http://www.customfitonline.com/news/2014/3/21/better-wireframes-introduction-for-clients-and-designers/