Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

62
(P) SKETCHING, WIREFRAMING, PROTOTYPING (P)HILIPP SCHRÖDER FRONTEND CONFERENCE 2012 6.9.2012
  • date post

    21-Oct-2014
  • Category

    Design

  • view

    9.501
  • download

    0

description

A video recording of the talk is available online: http://youtu.be/C6HjF8XlxH0?t=2m32s Compelling and powerful web applications such as Google Maps and Facebook have become mainstream and are setting a benchmark in terms of usability and design. Meanwhile, agile development is taking the software development world by storm. UX designers used to the traditional "waterfall" way of working - with lots of design documentation and big handovers - often struggle with the new development approach. Without any claim to silver bullets, I will outline some practices and guiding principles for improving user interfaces by iterating on frontend design & code by way of sketching, wireframing and prototyping. I intend to share some lessons learned from working in a agile development environment and talk about ways of collaborating effectively with stakeholders & team members. Compelling and powerful web applications such as Google Maps and Facebook have become mainstream and are setting a benchmark in terms of usability and design. Meanwhile, agile development is taking the software development world by storm. UX designers used to the traditional "waterfall" way of working - with lots of design documentation and big handovers - often struggle with the new development approach. Without any claim to silver bullets, I will outline some practices and guiding principles for improving user interfaces by iterating on frontend design & code by way of sketching, wireframing and prototyping. I intend to share some lessons learned from working in a agile development environment and talk about ways of collaborating effectively with stakeholders & team members.

Transcript of Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Page 1: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

(P)

SKETCHING, WIREFRAMING, PROTOTYPING(P)HILIPP SCHRÖDER

FRONTEND CONFERENCE 20126.9.2012

Page 2: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

How to Be Agile and Avoid Half-Baked User Experience

SKETCHING, WIREFRAMING, PROTOTYPING

Page 3: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

@pips1TWITTER, ANYONE?

Page 4: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

"TWTTR SKETCH", CC BY JACK DORSEY ON FLICKR

INITIAL SKETCH OF TWITTER

Page 5: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

"THE TWITTERVERSE V0.9", CC BY B_D_SOLIS ON FLICKR

TWITTER ECO-SYSTEM

Page 6: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

TRENDS

Page 7: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

WHAT IS THIS AGILE THING THAT EVERYBODY IS TALKING ABOUT, REALLY?

Page 8: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Individuals and interactions over processes and tools

➡ Working software over comprehensive documentation

➡ Customer collaboration over contract negotiation

➡ Responding to change over following a plan

AGILE MANIFESTO

HTTP://AGILEMANIFESTO.ORG/

Page 9: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY NC ND SANGUDO ON FLICKR

TRADITIONAL RELAY RACE

Team members run alone.

Collaboration is not built into the game.

Page 10: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY-SA GUFFEYGF ON FLICKR

AGILE RUGBY GAME

Intensive and continuous collaboration is core to the game.

Reach the goal line again and again to win the game.

Page 11: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ All agile frameworks rely on Empirical Process Control.

➡ Traditional frameworks (and most current management approaches) rely heavily on Defined Process Control.

A CRUCIAL DIFFERENCE:PROCESS CONTROL

Page 12: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

CHARLIE CHAPLIN IN “MODERN TIMES”

DEFINED PROCESS CONTROL

Page 13: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

WHY WATERFALL DOESN’T WORK FOR ME

Page 14: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

CC BY-NC-ND SHENGHUNG LIN ON FLICKR

RELAY RACES & “DEATH MARCHES”

Page 15: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

CC BY-NC YUAN2003 ON FLICKR

KNOW-HOW SILOS

Page 16: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

NO TEDIOUS SPEC WORK

Page 17: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

WHY AGILE DEVELOPMENT WORKS FOR ME

Page 18: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

1 ITERATION = 1 SPRINT = 2 WEEKS TO 1 MONTH

EMPIRICAL PROCESS CONTROL - AS EXEMPLIFIED BY SCRUM

24hrs

Sprint planning End of project

Delivery / Sprint review

Sprint retrospective

Product Backlog Development

Goal achieved / money run down

Page 19: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

... in order to quickly generate business value and develop software that satisfies user needs.

EVERY ITERATION, WE HAVE AN INCREMENT OF WORKING SOFTWARE

Page 20: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

... in order to continuously improve both.

EACH ITERATION, WE REVIEW THE PRODUCT (WHAT WE BUILT) & THE PROCESS (HOW WE WORK)

Page 21: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

WATERFALL AGILE

REDUCING UNCERTAINTY

High Low

Hig

hLo

w

Means UncertaintyHow do we build it?

End

Unc

erta

inty

Wha

t do

we

build

?

High Low

Hig

hLo

w

Means UncertaintyHow do we build it?

End

Unc

erta

inty

Wha

t do

we

build

?

Page 22: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Agile aims to enable “hyper productivity” through close collaboration, self-organization, empowerment and focussing of the team and the stakeholders

TEAM WORK TAKES THE CENTER STAGE IN AGILE

Page 23: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Peer to peer exchange of information➡ Collective learning➡ Collective responsibility (shared goal)

AGILE IS A PULL SYSTEM

Page 24: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

THE CURRENCY IN AGILE ISSHARED UNDERSTANDING

Shared understanding

Product Owner

Developer

DesignerTester

Scrum Master

Page 25: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

to improve efficiency & effectiveness➡ Keeping focus on (customer) value➡ Removing non valuable activities

(e.g. excessive documentation)➡ Optimizing the workflow & information flow to

achieve the shared goal➡ Attention to symptoms of overburden

(work with a sustainable pace)

LEAN THINKING

Page 26: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Communicate fast and light (sketching)➡ Work in small continuous iterations➡ Collaborate actively across roles/silos

(participatory design)

MERGING AGILE WITH UX DESIGN

Page 27: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

PARALLEL TRACKS, UX AHEAD OF DEVELOPMENT

UX research & ideation 3Collaborate on iteration 1

Refine design for iteration 2UX research & ideation 2

Refine design for iteration 1UX research & ideationCreate initial concepts

UX research & ideation 4Test iteration 1

Collaborate on iteration 2Refine design for iteration 3

Implement high dev low UI features Implement designs

Design 1b

Design 2b

Code

Test iteration 1 Provide input for iteration 4

Validate designProvide input for iteration 3

Validate designProvide input for iteration 2

Collaborate with designerProvide input for iteration 1-n

Customer data Customer data Customer data Customer data

Design 3b

Code

Design 1

Development environment setup

Design 2

Design 3

Iteration 0 Project initialisation

Iteration 1 Iteration 2Pre-project

Customer (Product Owner)

Designer

Developers

Page 28: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

THE ROLE OF DESIGN HAS CHANGED

Page 29: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

BESCHREIBUNG

AGILE ANTI-PATTERN:GENIUS DESIGN & THE "BIG REVEAL"

Page 30: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

DESIGNER'S ROLE IN AGILE: KEEPER OF THE VISION & FOREMOST FACILITATOR

Product Owner

UX Designer

UX Researcher

Developers

Customer Service Rep

Users

Visual Designer

Page 31: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

PROTOTYPING

Page 32: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

VISUALIZE AND SHARE CONCEPTS

Page 33: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Ordered by visual & functional fidelity

MANY TOOLS AND APPROACHES FOR PROTOTYPING

Vis

ual F

idel

ity

Functional Fidelity

SketchPen & Paper

Interactive SketchesPaper Prototyping

Wireframe SketchPen & PaperBalsamiq

Interactive Wireframe SketchPaper PrototypingBalsamiq: Export to PDF or HTML

Proof of Concept PrototypeHTML (960 Grid System + JQuery)

"Clean" Wireframe / DiagramOmniGraffle

Interactive "Clean" WireframesAxure RP Pro

Rich Interactive "Clean" WireframesAxure RP Pro

Design CompPhotoshop or Illustrator

Interactive Design CompFireworks

"Production Ready" PrototypeHAML + SCSS + JQuery

Hybrid Wireframe / Design CompsOmnigraffle + Photoshop

Page 34: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Audience➡ Intent➡ Familiarity and learnability➡ Cost➡ Collaboration➡ Distribution➡ Throwaway versus reusable

CRITERIA FOR PICKING THE RIGHT TOOL

SOURCE: TODD ZAKI WARFEL (2009): PROTOTYPING - A PRACTITIONER'S GUIDE, NEW YORK: ROSENFELD MEDIA

Page 35: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Fast, cheap Slow, expensive

Slo

w, e

xpen

sive

Speed & CostPROTOTYPING

Vis

ual F

idel

ity

Functional Fidelity

SketchPen & Paper

Interactive SketchesPaper Prototyping

Wireframe SketchPen & PaperBalsamiq

Interactive Wireframe SketchPaper PrototypingBalsamiq: Export to PDF or HTML

Proof of Concept PrototypeHTML (960 Grid System + JQuery)

"Clean" Wireframe / DiagramOmniGraffle

Interactive "Clean" WireframesOmniGraffle Pro

Rich Interactive "Clean" WireframesAxure RP Pro

Design CompsPhotoshop or Illustrator

Interactive Design CompsFireworks

"Production Ready" PrototypeHAML + SCSS + JQuery

Hybrid Wireframe / Design CompsOmnigraffle + Photoshop

Page 36: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Shared communication➡ Working through a design➡ Selling an idea to stakeholders➡ Validating design➡ Gauging technical feasibility and value

USES OF PROTOTYPES

Page 37: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Different tools are suitable for different usesUSES OF PROTOTYPES

Vis

ual F

idel

ity

Functional Fidelity

Sketch Interactive Sketches

Wireframe Sketch Interactive Wireframe Sketch

Proof of Concept Prototype

"Clean" Wireframe / Diagram Interactive "Clean" Wireframes Rich Interactive "Clean" Wireframes

Design Comps Interactive Design Comps "Production Ready" Prototype

Hybrid Wireframe / Design Comps

Creating a shared communication”Is this what you meant?”

Working through a designDoes the system have all the features required?Which UX concept works best?

Working through a designDoes the workflow make sense at a high level?

Validating UX design direction with stakeholdersEvaluating the usability of proposed designs for new systems

Gauging technical feasibility and valueExploring isolated interactions as a proof-of-conceptSelling an idea to your boss or team membersValidating the implementation of requirements with stakeholders

Selling an idea to stakeholders

Communicating UI design / distributing design documentationSupplementing printed documentation for offsite development teams

Validating UX designPerforming usability tests with non-savvy user groupsEvaluating the usability of proposed UX designs for an existing systemPerforming remote testing

Page 38: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING

Page 39: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Sketchiness invites critique.➡ With unfilled "holes", interpretation is

necessary, which leads to new ideas.Opposite: High Fidelity➡ A High Fidelity UI Mockup says

"I'm full of finished, mature ideas".

SKETCHINESS

Page 40: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Sketching is useful...➡ as research tool➡ for working through a concept➡ for working through a design (wireframe sketch)➡ as shared communication➡ for validating UX design direction

SKETCHING USES

Page 41: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING AS RESEARCH TOOL

Page 42: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING FOR WORKING THROUGH A CONCEPT

Page 43: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING WIREFRAMES FOR WORKING THROUGH A DESIGN

Page 44: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING AS SHARED COMMUNICATION

SKETCHES BY STEFANO VANOTTI

Page 45: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SKETCHING FOR VALIDATING UX DESIGN DIRECTION

Page 46: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

“CLEAN” WIREFRAME

Both widgets need to be of the same height...

Page 47: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

DIAGRAMS

Page 48: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

INTERACTIVE "CLEAN" WIREFRAME

Page 49: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

HYBRID WIREFRAME / DESIGN COMP

Page 50: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

LIVE SITEDESIGN COMP BY OLIVIER HEITZ

DESIGN COMP WORKING SOFTWARE

HIGH FIDELITY PROTOTYPES

Page 51: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

SOFTWARE INCREMENT ON TESTING SERVERANNOTATED SKETCH OF A WIDGET

SKETCH WORKING SOFTWARE

CROSS-FUNCTIONAL PAIRING: INTERACTION DESIGNER + FRONTEND DEVELOPER

Page 52: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Why is this cool?➡ The sketch showed just enough intent as a

basis for estimating effort and as a starting point for implementation.

➡ No time was wasted for a detailed written specification (which can be misinterpretated).

➡ We both learned from each other during pairing and got a deeper understanding of the feature.

➡ The prototype was available for testing on the test server “immediately”, allowing feedback from real users quickly.

FROM SKETCH TO WORKING PROTOTYPE

Page 53: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Since they are relatively time-intensive / expensive, create HiFi prototypes only if necessary:➡ If your audience is the client, users or an

external development team➡ Selling an idea➡ Usability testing➡ Detailed design specifications

WHEN TO CREATEHIGH FIDELITY PROTOTYPES?

Page 54: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Building software is a creative process. ➡ Designers have good tools for creativity. ➡ Adapt & learn!

TAKE AWAYS FOR DEVELOPERS

Page 55: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

Recognize and accept the creative process of software development.➡ Yes, it's messy.➡ Yes, there is a "looping circularity".

It's how we learn and improve.➡ Take work-in-progress for what it is.

TAKE AWAYS FOR PRODUCT MANAGERS

Page 56: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Keep focused on value - the actual user experience

➡ Remove non valuable activities - e.g. excessive documentation

➡ Be pragmatic - use whatever gets the job done➡ Visualize and share your work - invite valuable

critique

TAKE AWAYS FOR DESIGNERS (1)

Page 57: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Get feedback often - ➡ catch glaring mistakes early,➡ foster shared understanding and ➡ collective ownership

➡ Every encounter is an opportunity to learn➡ Every encounter is an opportunity to hone your

skill in persuasion :-)

TAKE AWAYS FOR DESIGNERS (2)

Page 58: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

If no design framework was established up-front, you will have late iterations for consistency.

DRAWBACKS / LIMITATIONS

Page 59: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

➡ Rails team @ ZHdK➡ Team π @ Liip

TEAM THANKS

Page 60: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

(P)

TWITTER.COM/[email protected](P)HILIPP SCHRÖDERMERCI!

Page 61: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience

- Bill Buxton (2007): Sketching User Experiences - Getting the design right and the right design. San Francisco: Morgan Kaufmann Publishers.

- Todd Zaki Warfel (2009): Prototyping - A Practitioner's Guide, New York: Rosenfeld Media

- Fred Beecher (2009): Integrating Prototyping Into Your Design Process - Using appropriate fidelity for the situation, http://www.boxesandarrows.com/view/integrating, last accessed 2012-09-05

- Jakub Linowski: Interactive Sketching Notation, http://www.linowski.ca/sketching, last accessed 2012-09-05

FURTHER READING & RESOURCES