Top Tags

Tag Wireframing

Entries 2 Total

The Right Way to Wireframe

Presenters
Russ Unger, Will Evans, Fred Beecher, Todd Zaki Warfel

REGISTER NOW!

Background
Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe “wireframing” as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity – “looks like,” “behaves like,” “works like” – to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.

Description
This workshop will be presented in two parts and will revolve around a single design problem. Before the workshop, a third party (TBD) will provide clear business requirements to the four user experience designers leading it. They will each choose their own tool and method for exploring the requirements via wireframes and specifications. They will each work with their own graphic designer to develop and apply a visual design.

When the workshop begins, the workshop leaders will present the design problem/requirements to the participants. Participants will be separated into four different groups based on their preferred wireframing tool: paper, Visio, OmniGraffle, or Axure. Each group will be coached by one of the workshop leaders. In these groups, attendees will tackle the design problem through sketching and review sessions. At the end of the sketching activity, the teams will each choose their best sketch and will turn their sketches into wireframes using the tool of their choice.  Each team will then present their final solution to the workshop, taking questions and critiques from the attendees and session leaders.

After the presentations have been completed, each of the workshop leaders will show their own solutions. They will each provide a detailed account of how they arrived at their solutions and how the tools they used influenced them. Participants will be provided ample time to critique these solutions and ask questions of the workshop leaders.

Session Takeaway
Gain a better understanding of three different kinds of activities within the design and development process where wireframing is valuable:

  • Understanding existing user experiences and context.
  • Exploring and evaluating design ideas
  • Communicating ideas to and audience of decision makers and team members.
  • Provides user experience designers with a variety of approaches to creating wireframes.
  • Details four different approaches to business requirements synthesis and wireframe exploration.
  • Shows the advantages and disadvantages of different approaches within a specific context
  • Refutes the argument that wireframing is dead by showing that it has just multiplied its forms
  • The realization that the tools we use to design, such as wireframes, prototypes, etc. influence the way we think. Solutions, and probably even imagination, are inspired and often time limited by the tools we have at our disposal – which is perhaps the greatest takeaway from this session.

Shades of Gray: Wireframes as Thinking Device

“A picture is worth a thousand words. An interface is worth a thousand pictures.”
~ Ben Shneiderman, 2003

My good friend Russ Unger recently published a book for Peachpit entitled “A Project Guide to UX Design,” and for his chapter on wireframing, he asked me to contribute some designs, which I was pleased to do. He provided me with some background information and requirements for the redesign of a fictitious cruise-line operator home page and asked that I design some annotated wireframes which he could use as examples in his book. After I had completed this little exercise, he asked me to write a brief explanation of my process. This is the unabridged write-up I sent over to him explaining my use of wireframes as a ‘thinking device’ in the design process. No doubt it will be edited to fit the constraints of the book, but he was kind enough to let me post the original here.

Shades of Gray: Wireframes as Thinking Device

For me, wireframes act as a form of ‘thinking device’ for the setting and exploration of a given problem space – in this example, a home page for a cruise line operator. To understand the utility of wireframes it is important to understand the nature of designing. I think of “D”esign as an exploration of the conceivable futures. I use my sketches and wireframes as means to make explorative moves and assess the consequences of those moves. As I explore the problem space, I could relatively easily keep the design models in my head, but I would fail in my primary objective to create a framework for a conversation among the stakeholders, the intended audience, and me.

I think it is quite common for UX folks to view design as problem solving. For me, designing through the use of wireframes is a search in a problem space of alternatives; it’s a process of problem setting as much as it is a process of problem solving, which means that I always start with the context. To simplify, I pick my primary audience and the one activity which allows them to solve one goal quickly, effortlessly, elegantly. In this case, the primary audience wants to easily find the best cruise, at the right time, for the right price. I don’t even look at the requirements document or competitive analysis until after I have sketched a couple of ideas either on paper or using Omnigraffle, which explores the primary goal. I’m not looking for solutions at this point because the first round of wireframes provide a space to engage in a dialogue with other designers, stakeholders, and the wireframes themselves.

My design process could best be described as going from a phase of divergence, through a phase of transformation, to a phase of convergence. Throughout every phase, wireframes are presented to stakeholders for critique and conversation.

During the divergent phase the constraints and possibilities of the design situation are explored. I try to find facts in the design situation that are stable and hold on to them throughout the process. Large parts of this phase consist of information gathering and trying to understand and formulate the design problem. By sketching a number of wireframes, I can explore alternatives. All the impossible and conceivable ideas are presented, tested, and in many cases, tossed away.

My initial visions are formed during this phase. In the cruise line exercise I focused on the ‘centrality of search’ as a driving goal in the design. I already knew that I wanted to design the best cruise line search interface possible, and I wanted that activity to be brought front and center in the design. I sketched the concept of providing immediate suggested cruises even before the user had committed to seeing a complete search results screen. From the homepage, the user would be pulled into a conversation and engaged with the process of finding a great cruise. The concept behind this was first proposed by Peter Hong some years back at Blast Radius while collaborating on a new search interface between their team and ours at Kayak on the PinPoint Travel interface. It was built but then killed – but the idea is worth keeping alive – I think.

In the transformation phase, I decrease the number of alternatives, and the scope of my designs narrows as the wireframes speak back to me. I begin to toss out really bad ideas that I might have fancied in the beginning. It’s usually at this point that I go back and read the requirements document and try to understand the complete ecosystem of stakeholder and business needs, and address those in the context of my primary design goal; the one, central activity of my core audience. It’s also at this point that I begin to address other, competing needs. In the case of the cruise line operator, I sketched out the header, footer, and static content and blocked out areas in the design for content modules such as CTAs (Calls To Action) and promotions. I share the output from this stage with the key stakeholders, but also bring in the visual designer, development lead and quality assurance engineer so they can contribute to the process and provide more ideas while pointing out pitfalls and constraints.

Finally, as the designer, I have to make the decision to implement the design in a specification. During the ‘convergence’ stage, I create two or three candidates for final consideration. I use annotations to empower the wireframe to plead its case to stakeholders and targeted testers. The wireframes you see in Figure 1.a and 1.b are now at this stage, where the design changes are small and the details are being polished.

Here are two somewhat polished wireframes that survived the process. These are by no means perfect, but they do satisfice for the purposes of the exercise and to illustrate what my wireframes look like.

- will

Global Cruises Sample Wireframe 1.a

Figure 1.a | Global Cruises Sample Wireframe

———————————————-

Global Cruises Wireframe 1.b

Figure 1.b | Global Cruises Wireframe

———————————————-
Mark Brooks, a friend of Russ Unger, and visual designer – was able to take those wireframes and rather quickly start exploring various visual designs including the screen below.

Global Cruises Homepage Comp v1

Global Cruises Homepage Comp v1

———————————————-

If you wish to see the complete set – or for the raw Omnigraffle files which I am happy to share – just ping me on twitter: semanticwill

You can download the PDF here: globalcruises_ixd_v1.51 (PDF)

Omnigraffle Files here: globalcruises_ixd_v1.51 graffle (ZIP)