Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

29
Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ ideas

Transcript of Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

Page 1: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

Jim Vomero@nJim

Rebecca Pugliese@BeccaRun

JimVomero.com/ideas

Page 2: 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

Page 3: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 4: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 5: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 6: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

The Results

Our awesome volunteers Our audience

“Cookie Card Sort Results” on our website

Page 7: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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”

Page 8: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

In-Person card sorts work too

Page 9: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Card Sorting

Page 10: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 11: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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.

Page 12: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 13: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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.

Page 14: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 15: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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.

Page 16: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

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

Page 17: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

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

Page 18: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

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

Page 19: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Warm Up : Sketch a low fidelity wireframe

glasscpa.com

Page 20: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Practical Sketching

Warm Up : Sketch a low fidelity wireframe

glasscpa.com

Page 21: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 22: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 23: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Diagraming: Microsoft Viso

Page 24: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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…

Page 25: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A Cacoo example…

Page 26: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A design problem: united.com

Page 27: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun

Technologies for Sketching

A design problem: united.com

Page 28: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

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

Page 29: Jim Vomero @nJim Rebecca Pugliese @BeccaRun JimVomero.com/ideas.

//

Resources at: JimVomero.com/Ideas

#ideas13 @nJim @BeccaRun