Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

ABOUT

ADVERTISING

CONTRIBUTE

SIGN IN

JOIN UX

ARTICLE NO. 540

JUNE 24, 2010

by Will Evans (http://uxmag.com/contributors/will-evans)

COMMENT
(#comments)

share

Design in art, is a recognition of the relation between various things, various elements in the creative flux. You cant invent a design. You recognize it, in the fourth dimension. That is, with your blood and your bones, as well as with your eyes. - D.H. Lawrence (http://en.wikipedia.org
/wiki/D._H._Lawrence)

In designing mostly interactive systems (spaces, processes, and artifacts for people to use), I must increasingly stretch the limits of communication tools to explore and document what it will be like to interact with the things I create. Artifacts used in communicating design create an inherent frame of experience between the subjective response of the person for whom I design, and my expectations of their response. There is a divergence of meaning in that the audience can only experience the communications artifact, not the object being communicated.

If you reveal your secrets to the wind, you should not blame the wind for revealing them to the trees. - Kahlil Gibran (http://en.wikipedia.org/wiki/Khalil_Gibran) I have described wireframing in a previous article (http://www.uxmag.com/design/shades-of-grey-wireframes-as-thinkingdevice) as a form of design communication that enables stakeholders, team members, users, and clients to gain firsthand appreciation of existing or future problem spaces and solutions. Wireframing (http://uxmag.com /topics/wireframes) adds several facets to the value to communication: the wireframe itself acts as a cognitive artifact (http://www.usabilityfirst.com/glossary/cognitive-artifact/) ; the process of creating wireframes is a mode of conversational exploration; and the process of envisioning, external actualization, and reflection is a task-artifact cycle (http://www.interaction-design.org/encyclopedia/task_artifact_cycle.html) (depicted below). This cycle represents a continuous, mutually dependant evolution towards a hopefully positive solution.

1 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

ABOUT THE AUTHOR(S)

Will Evans is Director, Experience Design for Semantic Foundry (http://semanticfoundry.com/) with 14 years industry experience in interaction design, information architecture, and experience design strategy. Will earned an mba as well as masters degrees in humancomputer interaction and cognitive psychology. He currently serves on the board of directors for the Information Architecture Institute. View Profile
(/contributors/will-evans)

RELATED ARTICLES Design Studio and Agile UX : Process and Pitfalls (/articles/design-studio-and-agile-ux-process-and-pitfalls)
Strategies on improving effectiveness and avoiding failure when adapting Design Studio for agile projects, large and small.
NOVEMBER 08, 2011

Design Studio and Agile UX : Process and Pitfalls (/articles/design-studio-and-agile-ux-process-and-pitfalls)

Strategies on improving effectiveness and avoiding failure when adapting Design Studio for agile projects, large and small.
NOVEMBER 08, 2011

Experience Maps Identify Inefficiencies and Opportunities (/articles/experience-maps-identifyinefficiencies-and-opportunities)

Experience maps are useful in visualizing how each customer interaction combines to create the overall experience.
OCTOBER 04, 2011

Wireframes are representations of a design made before final specifications exist, which is problematic because in comparison to sketches they are higher fidelity representations of design. Unfortunately, although wireframes are meant to inform design processes and design decisions, they often can be viewed as more concrete than sketches, and therefore considered more final. An essential aspect of creativity is not being afraid to fail. - D.r Edwin Land (http://en.wikipedia.org/wiki/Edwin_H._Land) I have often thought that the activities of both sketching and wireframing can best be described as modalities of decision analysis. With each new design decision explored, new constraints are introduced as new opportunities arise. At an abstract level, a particular problem space is framed by the tools we feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, and timeliness of artifacts created. In reflecting on the way many user experience designers actually work and reading the comments on my article describing the wireframing process, Shades of Gray: Wireframes as Thinking Device (http://www.uxmag.com/design/shades-of-grey-wireframesas-thinking-device) , it seemed necessary to discuss the role and philosophy of sketching in my personal process.

2 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

I see sketching as an important pre-wireframing technique for doing divergent and transformative design, something that fundamentally differentiates what has been called big D, and small d design. Not to put too fine a point on itit is what separates the user experience designers from the wireframe monkeys. This is the argument that I have made, and base it in part on how Buxton defines design in Sketching User Experiences (http://www.amazon.com/Sketching-User-Experiences-Interactive-Technologies/dp/0123740371) , when he writes: What I mean by the term design is what someone who went to art college and studied industrial design would recognize as design. At least this vague characterization helps narrow our interpretation of the term somewhat. Some recent work in cognitive science (Goel 1995, Gedenryd 1998) helps distinguish it further. It suggests that a designers approach to creative problem solving is very different from how computer scientists, for example, solve puzzles. That is, design can be distinguished by a particular cognitive style. Gendenryd, in particular, makes clear that sketching is fundamental to the design process. Furthermore, related work by Suwa and Tversky (2002) and Tcerksy (2002) shows that besides the ability to make sketches, a designers use of them is a distinct skill that develops with practice, and is fundamental to their cognitive style. Amen. I think as designers we must go out of our way to avoid purely abstract thinking and instead use sketches to restore presence to our work by interactively seeing and doing in the iterative task-artifact cycle that sketching affords, as opposed to going from abstraction to wireframing. As I wrote previously in Shades of Gray: Wireframes as Thinking Device (http://www.uxmag.com/design/shades-of-grey-wireframes-as-thinkingdevice) : I think of Design 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.

Sketches are a modeling process I employ to be able to conceive and predict the consequences of certain design arguments within an unresolved problem space whose borders have not been fully defined. When we sketch an interaction, we are making an argumenteven if it is one that will be tossed away. Representational artifacts such as sketches, wireflows or physical models like paper prototypes are important tools for design since they help in assessing and reflecting on the details of a solution in relation to the whole problematic context in which it is situated. Using pencil and paper speeds up my doing-seeing loop of creation, judgment and reformulation. Few other tools are as fast as pencil and paper in this respect. As a designer, I can draw a line and immediately evaluate it. This conversational process between myself and visualization of the design situation enables the generation of new ideas. As I draw sketches, I see the problem in another way, perhaps because a line came out slightly wrong on the paper. Taking a step back or looking at a sketch from a different angle leads to new ideas and thoughts.

3 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

New ideas are then nothing but old ideas in new combinations or old ideas looked upon or interpreted from a new perspectivesketching then becomes what Erving Goffman (http://en.wikipedia.org/wiki/Erving_Goffman) called framing (http://en.wikipedia.org/wiki/Framing_(social_sciences)) . This is also what Paul Laseau (http://books.wwnorton.com/books/Author.aspx?id=9703) calls a conversation with ourselves in which we communicate with sketches. This idea is also related to Donald Schn (http://en.wikipedia.org/wiki/Donald_Schn) s concept of a reflective conversation with the materials of a design (http://hci.stanford.edu/publications/bds/9-schon.html) , because as designers we shape the situation mentally, in an implicit way, and then explicitly respond through sketching. Schn writes: In a good process of design, this conversation is reflective. In answer to the situations back-talk, the designer reflects-in-action on the construction of the problem, the strategies of action, or the model of the phenomena, which have been implicit in his moves. The sketches also form a documentation of the design process without adding any administrative overhead. I can learn a lot by browsing back through old sketches; watching the evolution of an idea as my understanding of the problem space is explored, and refined, and this documentation can tell a narrative of design decisions to be shared with direct and indirect stakeholders who can then see why certain choices were embraced, and others discarded. Externalizations of different kinds (sketches, wireframes, prototypes (http://uxmag.com/topics/prototypes) ) are especially useful for communication purposes where I want to present ideas to another member of the design team, to the client, or to a user. The presentation sketches are usually not as rough as working sketches are and their purpose is not only to communicate an idea, but also to persuade the other parties that a particular design is better than other alternatives. Every creator painfully experiences the chasm between his inner vision and its ultimate expression. - Isaac Bashevis Singer ( ( ) http://en.wikipedia.org/wiki/Isaac_Bashevis_Singer)

As noted above, the sketch can be rapid and spontaneous, but it leaves stable traces in contrast to conversation, which is evanescent. Conversation is important for the argumentative assessment and communication of design alternatives, which, I think, is at the core of design activities (sketch, present, critique, refine). Designers employ a language of talking and sketching in parallel. Schn describes the work of an architectural design professor named Wim Quist in a session with a student: In the media of sketch and spatial-action language, he represents buildings on the site through moves which are also experiments. Each move has consequences described and evaluated in terms drawn from one or more design domains. Each has implications binding on later moves. And each creates new problems to be described and solved. Quist designs by spinning out a web of moves, consequences, implications, appreciations, and further moves. The quote above is a clear statement of what much of design work is about. In terms of distributed cognition, it describes design work as spread over both designers and their representational artifacts (e.g., sketches). The representational artifacts are, in turn, physical embodiments of the culture and context in which they have evolved through the lifecycle of a project. I think the cultural practices of designers, including spatial-action language, provide a solid process for performing experimental design exploration. It is part of this knowing-through-action, that design knowledge is revealed in spontaneous and skillfully performed actions. This language is also constitutive of our practicing user experience community in the ways in which we communicate both with ourselves, with our teams, clients, and to our designs themselves.

4 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

Because sketches are faster, require less overhead, and by their nature are perceived to be less done, they are better suited to the task-artifact cycle of design exploration. They should be considered an effective modeling process for designers to be able to conceive and predict the consequences of certain design arguments during the design ideation phase and subsequently leading to better design.

Photos (on Flickr (http://www.flickr.com/photos/27764576@N06/sets/72157623191748325/) ) by Michael Leis

(http://blog.michaelleis.com/)

References
Buxton, Bill (2007). Sketching User Experiences (http://www.amazon.com/Sketching-User-Experiences-InteractiveTechnologies/dp/0123740371) . Boston, MA: Morgan Kaufman. Carroll, John M., Kellogg, Wendy A. and Rosson, Mary Beth (1991): The Task-Artifact Cycle (http://www.interaction-design.org/encyclopedia/task_artifact_cycle.html) . In: Carroll, John M. "Designing Interaction: Psychology at the Human-Computer Interface". Cambridge University Press Norman, Donald A. (1991): Cognitive artifacts (http://hci.ucsd.edu/10/readings/norman_cognitiveartifacts.pdf) . In: Carrol, John M. "Designing Interaction: Psychology at the Human-Computer Interface Cambridge University Press. Schn, D. A. (1987). Educating the Reflective Practitioner: Toward a New Design for Teaching and Learning in the Professions (http://www.amazon.com/Educating-Reflective-Practitioner-Professions-Education /dp/1555422209) . San Francisco, CA: Jossey-Bass Publishers.

COMMENT 9 POST A COMMENT (/comment/reply/1607#comment-form )

share

5 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

COMMENTS

Add a new comment

Login via:
(https://uxmag.rpxnow.com/openid (/ajax_register/login?destination=node%2F1607) /openid/v2/signin?token_url=http%3A%2F %2Fuxmag.com%2Frpx%2Ftoken_handler%3Fdestination%3Dnode%252F1607) (https://uxmag.rpxnow.com /openid/v2/signin?token_url=http%3A%2F %2Fuxmag.com%2Frpx%2Ftoken_handler%3Fdestination%3Dnode%252F1607) (https://uxmag.rpxnow.com /openid/v2/signin?token_url=http%3A%2F %2Fuxmag.com%2Frpx%2Ftoken_handler%3Fdestination%3Dnode%252F1607) /v2/signin?token_url=http%3A%2F %2Fuxmag.com%2Frpx%2Ftoken_handler%3Fdestination%3Dnode%252F1607) (https://uxmag.rpxnow.com

Name Email Address

(/filter/tips)

Because of problems with spam comments, HTML in comments is not permitted. URLs are allowed, but they will not be rendered as clickable links.

Post Comment

June 25, 2010

Thanks for this. Sketching has made a significant difference to the quality of my work as a designer. I started out my UX career by going straight to wireframes - sketching is something that I discovered later. Kees Dorst's book Understanding Design was a big factor in changing my approach and has some excellent essays on design as exploration rather than deduction. My first sketches were really just hand-drawn wireframes but with practice (and watching how those from a product design background work) I've learned to sketch interactions rather than just screens. This has given my work far more cohesion and provides crucial context for individual screens and design elements. Something that I've been doing for a while now which might be useful to anyone out there dabbling in sketching: always do an alternative solution, no matter how good or obvious the first one you do might seem. The number of times I end up going with (or borrowing from) that second or third alternative never ceases to amaze me!

June 26, 2010

Great post. Congrats.

July 06, 2010

Will - I really enjoyed the article, thanks! But can we have more pictures of you sketching? I kid! I kid! :-)

July 07, 2010

Thanks Will - a really great and insightfull article. Like you mention is it really nice to watch old sketches after a while - it indeeds makes the whole proces insightfull. Bookmarked it straight away. Offtopic question - what kind of pencils/markers do you prefer to sketch with? @Andy - thanks man just ordered "Understanding Design" straight away

July 08, 2010

Liked the way you captured this: "What I mean by the term design is what someone who went to art college and studied industrial design would recognize as design. At least this vague characterization helps narrow our interpretation of the term somewhat". Educated in both Industrial Design and Human Factors& Usability, I believe if the above characterization could be integrated into UX as a mainstream approach, the way Adaptive Path does, UX would be easier accepted as the holistic field which it is. Thanks.

July 20, 2010

Amen!!!!! This is another reason why yes, we really do need to restore the teaching of drawing in art school let alone regular college. It's not ordinarily even mentioned in engineering major curriculum. I posted my URL in the HOMEPAGE text box and got an error message stating that my message here was interpreted as spam. Wtf?

August 22, 2010

I've tried out a wireframing tool at insitui.com and it is like sketching. I'm never going back to hand drawing.

October 09, 2010

6 of 7

11/22/2011 2:53 PM

Shades of Grey: Thoughts on Sketching | UX Magazine

http://uxmag.com/articles/shades-of-grey-thoughts-on-sketching

Sketching is always extremely beneficial, but my impatient side urges me to rush to Photoshop, as my ideas always rush forward into the details very quickly, before anything is written down or sketched out. Allowing myself to set out time strictly for sketching out my ideas and brainstorming as much as I can would really help to ensure I get the best possible solution to the problem. Thanks for the advice and reminder!

November 08, 2010

Sketching (or storyboarding) has proven invaluable over the years. I think more needs to be done. In my current environment though, it is generally expected that more fleshed out designs (wireframes and even visual comps) will be presented by the UX group. It's as though business owners cannot conceive of what an addition to our site or application may look like without the higher fidelity designs. I think though this issue is a matter of setting appropriate expectations which has not taken place to-date. They expect, therefore we deliver. Unfortunately, we give up some fluidity and time savings by skipping the sketching process. It does me good to sketch on the whiteboards at my cube, but the group does not see the benefit...

7 of 7

11/22/2011 2:53 PM