collaborative sketching for ux - nyu 02/19/14
DESCRIPTION
Collaborative Sketching for UX - as presented at NYU Poly, Brooklyn, NY, 02/19/14TRANSCRIPT
Collaborative Sketching for UXRobert Stribley
02/19/14
Arguably, we’ve been sketching for eons
But now, we’re sketching more than ever
• IdeaPaint Inc makes a paint that turns any surface into a whiteboard
• Its sales have doubled every year since introduced in 2008
• More than ½ its business is in the workplace
See “Doodling for Dollars,” Wall Street Journal, April 24, 2012
Why sketch?
• Enable communication
• Make abstract concepts concrete
• Iterate on ideas• Jumpstart
collaboration• Ensure recollection• Humanize ideas
What can I sketch?
• Home pages• Category pages• Product pages• Wizards & widgets• Search results• Process Flows• Anything, really
And there’s so much more to sketch for …
• Smartphones• Tablets• Google Glass• iWatches• Responsive design• Ubiquitous
computing
Who can sketch?
• Information architects• Interaction designers• Graphic designers• Content strategists• Project managers• Business analysts• Functional analysts• Developers • Client directors
Really, anyone can sketch
Cartoon by XKCD
A few ways we sketch at Razorfish:
• Solo• Sketch to comp• Communicate to client• Storyboarding• As a team – collaboratively
What sketching isn’t …
• Sketching isn’t only for designers
• Sketching isn’t difficult• Sketching isn’t drawing
You needn’t be Michelangelo to participate
However, we can learn from the pros
Who often begin with a sketch
Adding layers, detail, color
Until they complete their masterpiece
A Quick Case Study
Any idea what this is a sketch of?
“twttr sketch” Twitter.com
Twitter[This sketch] has very special significance – it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down. – Jack Dorsey, Twitter
Some Advice from the Experts
“The great benefit of drawing is that when you look at something, you see it for the first time.”- Milton Glaser
“There are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching.”
- Bill Buxton
Attributes of a Sketch
•Quick
•Timely
•Inexpensive
•Disposable
•Plentiful
•Clear vocabulary
•Distinct gesture
•Minimal detail
•Appropriate degree of refinement
•Suggest & explore rather than confirm
•Ambiguity
Bill BuxtonSketching User Experiences
"There is no more powerful way to prove that we know something well than to draw a simple picture of it. And there is no more powerful way to see hidden solutions than to pick up a pen and draw out the pieces of our problem."
Dan RoamThe Back of the Napkin
Collaborative Sketching
For the purposes of today’s workshop, sketching is …
•Quick•Simple•Collaborative
All the tools you need:
PaperSharpies
Photo by JasonTank, Flickr
Defining Collaborative Sketching
Origins• Rooted in Design Studio Methodology• Grew out of industrial design and architecture• No “rockstars”• Different versions/methods• For example, Todd Zaki Warfel, Message First, talks
about …• Create. Pitch. Critique.• 6.8.5 game
Methodology• Sketch• Limit your time• Don’t worry about mistakes or style
Goals• Benefit from the participation of your colleagues• Communicate ideas effectively by visualizing them• Quickly generate ideas and refine through
iterations
Process:
1. Discuss2. Sketch3. Share4. Revise
Discuss
• Discuss the experience you’re sketching• What’s its purpose?• What features are necessary?• How would you prioritize them?• What’s the audience?
• However, you are not discussing layout or design• Just the problem you’re trying to solve• No sketching yet
Sketch
• Sketch silently• Limit your time – 5, 10 minutes• Sketch as much has possible, as many different
ideas as possible• Emphasis is on quantity of ideas not quality of
sketches
Share
• Review your work with your team• Keep it short – 60 seconds each• You provide feedback to others
• What you like • Questions about didn’t work for you• You’re not grilling your colleagues and this is
not a competition
Revise
• Now begin your wireframe with a more informed view, more and better ideas
• And sketch again if you need to
Now, it’s your turn
Our Exercise
What to do?
Our Exercise: A home page for Events.com
• A website for finding local events– Listed by category– Listed by date– Listed by … what else?
• Who is the audience?– Locals– Tourists– Event promoters
Also, consider other event sites you’re familiar with. This will be your “competitive analysis”
In teams, sketch your ideas
1. Take 10 minutes to discuss what features belong here
2. Sketch your ideas silently for 10 minutes
3. Share your sketches with your team
4. Sketch again, incorporating what you learned from others
Discuss
Sketch
Share
Revise
Our Exercise:
Our Exercise:
1. Take 10 minutes to discuss what features belong here
Our Exercise:
2. Sketch your ideas silently for 10 minutes
Our Exercise:
3. Share your sketches with your team
Our Exercise:
4. Sketch again, incorporating what you learned from others
Some Resources
Books
Sketching Tools
The following apps are all for the iPad:
• Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro• Paper
Prototyping
AppSeedCurrently in development, this Kickstarter project lets you to turn your app sketches into working mobile prototypes
“Sketching is simply the fastest way to test ideas and visually brainstorm”– Greg Goralski, AppSeed creator
• Introduction to Design Studio Methodology http://uxmag.com/articles/introduction-to-design-studio-methodology
• The Design Studio Method – Presentation by Todd Zaki Warfelhttps://vimeo.com/37861987
Further Study
Thank you
www.slideshare.net/stribs