jim vomero @njim rebecca pugliese @beccarun jimvomero.com/ideas

Jim Vomero@nJim

Rebecca Pugliese@BeccaRun

JimVomero.com/ideas

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Finding Balance

Bringing perspectives together to find the best solution.

User Needs

Business Goals

Ideal Solution

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

Sort the cookies you have been given in a way that makes sense for your role

Zoo Keeper Veterinarian Teacher Butcher Grocery Store Clerk

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

Audience Participation – Tech-based

Your role: 5-y/o child Web Sort tool by UX Punk “Cookie Card Sort” on our website

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

Audience Participation – The old fashioned way

Your role: 5-y/o child Sort the cookies you have been

given in a way that makes sense for your role

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

The Results

Our awesome volunteers Our audience

“Cookie Card Sort Results” on our website

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

Optimal Sort by Optimal Workshop

“Optimal Workshop Results” on our website

A test you can take in your free time: “Optimal Workshop Example Test”

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

In-Person card sorts work too

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Paper Sketching

Sketching allows all stakeholders to explore and evaluate ideas in a non-technical way.

Idea Generation Collaboration Rapid Development

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Paper Sketching

Idea Generation: If you can’t afford to throw it away, then it’s not a sketch.

Wired, ”Concept Sketches” via Flickr, Creative Commons Attribution.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Paper Sketching

Collaboration: Sketching is a group activity, where design ideas arise from conversation.

Thomas Magdi [2003] Light bulb changer. US 6826983 B1

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Paper Sketching

Rapid Development: Allowing non-technical people to participate in a common way.

Wired, "Microsoft Mouse Prototypes” via Flickr, Creative Commons Attribution.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Sketches should capture the form and function of the user-experience.

You don’t need to be an artist Elements of a sketch Warm-up exercises

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

You don’t need to be an artist: Focus on the essence of an idea, sacrificing other details.

Library of Congress http://memory.loc.gov/ammem/bellhtml/bellhome.html.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Elements of a sketch include shapes, symbols an annotations; all learned through practice.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Interface elements provide a time-component to the design and allow for testing.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

loft42, ”Wireframes and such…” via Flickr, Creative Commons Attribution.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Warm Up : Sketch a low fidelity wireframe

glasscpa.com

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Warm Up : Sketch a low fidelity wireframe

glasscpa.com

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

Sketching technologies make it easier to modify, extend and duplicate designs ideas.

Slideshows Graphic Design Diagraming Web-Based Tools

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

Slideshow Software include drawing and shape libraries, transitions, and hyperlinks.

MS PowerPoint Keynote Google Presentation

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Diagraming: Microsoft Viso

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

Web-Based wire framing tools are designed for collaboration; many built for UX testing.

Cacoo HotGloo Many more…

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A Cacoo example…

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A design problem: united.com

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A design problem: united.com

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Testing Illustrations

Illustrations allow us to test early, test often…

Samuel Mann, ”Projects Paper-based Prototyping” via Flickr, Creative Commons Attribution.

Thank You

RebeccaPugliese@BeccaRu

n

Jim Vomero@nJim

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun