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

21,326 views

Published on

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.

Published in: Design, Technology, Business
1 Comment
38 Likes
Statistics
Notes
No Downloads
Views
Total views
21,326
On SlideShare
0
From Embeds
0
Number of Embeds
557
Actions
Shares
0
Downloads
226
Comments
1
Likes
38
Embeds 0
No embeds

No notes for slide

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

  1. (P)6.9.2012FRONTEND CONFERENCE 2012SKETCHING, WIREFRAMING, PROTOTYPING(P)HILIPP SCHRÖDER
  2. SKETCHING, WIREFRAMING,PROTOTYPINGHow to Be Agile and Avoid Half-BakedUser Experience
  3. TWITTER, ANYONE?@pips1
  4. INITIAL SKETCH OF TWITTER"TWTTR SKETCH", CC BY JACK DORSEY ON FLICKR
  5. TWITTER ECO-SYSTEM"THE TWITTERVERSE V0.9", CC BY B_D_SOLIS ON FLICKR
  6. TRENDS
  7. WHAT IS THIS AGILE THING THATEVERYBODY IS TALKING ABOUT,REALLY?
  8. AGILE MANIFESTO➡ Individuals and interactions over processes and tools➡ Working software over comprehensive documentation➡ Customer collaboration over contract negotiation➡ Responding to change over following a planHTTP://AGILEMANIFESTO.ORG/
  9. TRADITIONAL RELAY RACETeam members run alone.Collaboration is not built into the game.HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY NC ND SANGUDO ON FLICKR
  10. AGILE RUGBY GAMEIntensive and continuous collaboration is core to the game.Reach the goal line again and again to win the game.HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY-SA GUFFEYGF ON FLICKR
  11. A CRUCIAL DIFFERENCE:PROCESS CONTROL➡ All agile frameworks rely on Empirical Process Control.➡ Traditional frameworks (and most current management approaches) rely heavily on Defined Process Control.
  12. DEFINED PROCESS CONTROLCHARLIE CHAPLIN IN “MODERN TIMES”
  13. WHY WATERFALLDOESN’T WORK FOR ME
  14. RELAY RACES & “DEATH MARCHES”CC BY-NC-ND SHENGHUNG LIN ON FLICKR
  15. KNOW-HOW SILOSCC BY-NC YUAN2003 ON FLICKR
  16. NO TEDIOUS SPEC WORK
  17. WHY AGILE DEVELOPMENTWORKS FOR ME
  18. EMPIRICAL PROCESS CONTROL - AS EXEMPLIFIED BY SCRUM Sprint Delivery / retrospective Sprint reviewProduct Backlog Sprint planning Development End of project Goal achieved / money run down 24hrs 1 ITERATION = 1 SPRINT = 2 WEEKS TO 1 MONTH
  19. EVERY ITERATION, WE HAVE ANINCREMENT OF WORKINGSOFTWARE... in order to quickly generate business value anddevelop software that satisfies user needs.
  20. EACH ITERATION, WE REVIEWTHE PRODUCT (WHAT WE BUILT) &THE PROCESS (HOW WE WORK)... in order to continuously improve both.
  21. REDUCING UNCERTAINTY WATERFALL AGILE High High What do we build?What do we build? End UncertaintyEnd Uncertainty Low Low High Means Uncertainty Low High Means Uncertainty Low How do we build it? How do we build it?
  22. TEAM WORKTAKES THE CENTER STAGEIN AGILEAgile aims to enable “hyper productivity” throughclose collaboration, self-organization,empowerment and focussing of the team and thestakeholders
  23. AGILE IS APULL SYSTEM➡ Peer to peer exchange of information➡ Collective learning➡ Collective responsibility (shared goal)
  24. THE CURRENCY IN AGILE ISSHARED UNDERSTANDING Product Owner Scrum Master Developer Shared understanding Tester Designer
  25. LEAN THINKINGto 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)
  26. MERGING AGILE WITH UX DESIGN➡ Communicate fast and light (sketching)➡ Work in small continuous iterations➡ Collaborate actively across roles/silos (participatory design)
  27. PARALLEL TRACKS,UX AHEAD OF DEVELOPMENT Pre-project Iteration 0 Iteration 1 Iteration 2 Project initialisation Collaborate with designer Validate design Validate design Test iteration 1 Provide input for iteration 1-n Provide input for iteration 2 Provide input for iteration 3 Provide input for iteration 4Customer 1 2 3 n(Product Customer data ign Customer data ign Customer data sig Customer data Owner) D es D es De UX research & ideation 3 UX research & ideation 4 UX research & ideation UX research & ideation 2 Collaborate on iteration 1 Test iteration 1 Create initial concepts Refine design for iteration 1 Refine design for iteration 2 Collaborate on iteration 2 Refine design for iteration 3Designer De De De sig si g si g n n n 1b 2b 3b de d e Co Co Development environment Implement high dev setup low UI features Implement designs Developers
  28. THE ROLE OF DESIGNHAS CHANGED
  29. AGILE ANTI-PATTERN:GENIUS DESIGN & THE "BIG REVEAL"BESCHREIBUNG
  30. DESIGNERS ROLE IN AGILE:KEEPER OF THE VISION &FOREMOST FACILITATOR UX Researcher Users Visual Designer UX DesignerCustomer Service Rep Product Owner Developers
  31. PROTOTYPING
  32. VISUALIZE ANDSHARE CONCEPTS
  33. MANY TOOLS AND APPROACHES FOR PROTOTYPING Ordered by visual & functional fidelity Design Comp Interactive Design Comp "Production Ready" Prototype Photoshop or Illustrator Fireworks HAML + SCSS + JQuery Hybrid Wireframe / Design Comps Omnigraffle + Photoshop "Clean" Wireframe / Diagram Interactive "Clean" Wireframes Rich Interactive "Clean" WireframesVisual Fidelity OmniGraffle Axure RP Pro Axure RP Pro Proof of Concept Prototype HTML (960 Grid System + JQuery) Wireframe Sketch Interactive Wireframe Sketch Pen & Paper Paper Prototyping Balsamiq Balsamiq: Export to PDF or HTML Sketch Interactive Sketches Pen & Paper Paper Prototyping Functional Fidelity
  34. CRITERIA FORPICKING THE RIGHT TOOL➡ Audience➡ Intent➡ Familiarity and learnability➡ Cost➡ Collaboration➡ Distribution➡ Throwaway versus reusableSOURCE: TODD ZAKI WARFEL (2009): PROTOTYPING - A PRACTITIONERS GUIDE, NEW YORK: ROSENFELD MEDIA
  35. PROTOTYPINGSlow, expensive Speed & Cost Design Comps Interactive Design Comps "Production Ready" Prototype Photoshop or Illustrator Fireworks HAML + SCSS + JQuery Hybrid Wireframe / Design Comps Omnigraffle + Photoshop "Clean" Wireframe / Diagram Interactive "Clean" Wireframes Rich Interactive "Clean" Wireframes Visual Fidelity OmniGraffle OmniGraffle Pro Axure RP Pro Proof of Concept Prototype HTML (960 Grid System + JQuery) Wireframe Sketch Interactive Wireframe Sketch Pen & Paper Paper Prototyping Balsamiq Balsamiq: Export to PDF or HTML Sketch Interactive Sketches Pen & Paper Paper Prototyping Fast, cheap Functional Fidelity Slow, expensive
  36. USES OF PROTOTYPES➡ Shared communication➡ Working through a design➡ Selling an idea to stakeholders➡ Validating design➡ Gauging technical feasibility and value
  37. USES OF PROTOTYPES Different tools are suitable for different uses Design Comps Interactive Design Comps "Production Ready" Prototype Communicating UI design / Validating UX design distributing design documentation Performing usability tests with non-savvy Hybrid Wireframe / Supplementing printed documentation user groups for offsite development teams Evaluating the usability of proposed UX Design Comps designs for an existing system Performing remote testing "Clean" Wireframe / Diagram Interactive "Clean" Wireframes Rich Interactive "Clean" WireframesVisual Fidelity Selling an idea to stakeholders Proof of Concept Prototype Gauging technical feasibility and value Wireframe Sketch Interactive Wireframe Sketch Exploring isolated interactions as a proof- of-concept Validating UX design direction with Selling an idea to your boss or team stakeholders members Evaluating the usability of proposed Validating the implementation of designs for new systems requirements with stakeholders Sketch Interactive Sketches Creating a shared communication Working through a design ”Is this what you meant?” Does the workflow make sense at a high level? Working through a design Does the system have all the features required? Functional Fidelity Which UX concept works best?
  38. SKETCHING
  39. SKETCHINESS➡ Sketchiness invites critique.➡ With unfilled "holes", interpretation is necessary, which leads to new ideas.Opposite: High Fidelity➡ A High Fidelity UI Mockup says "Im full of finished, mature ideas".
  40. SKETCHING USESSketching 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
  41. SKETCHING AS RESEARCH TOOL
  42. SKETCHING FORWORKING THROUGH A CONCEPT
  43. SKETCHING WIREFRAMES FORWORKING THROUGH A DESIGN
  44. SKETCHING AS SHAREDCOMMUNICATION SKETCHES BY STEFANO VANOTTI
  45. SKETCHING FOR VALIDATING UXDESIGN DIRECTION
  46. “CLEAN” WIREFRAMEBoth widgets need to be of the same height...
  47. DIAGRAMS
  48. INTERACTIVE "CLEAN" WIREFRAME
  49. HYBRID WIREFRAME /DESIGN COMP
  50. HIGH FIDELITY PROTOTYPESDESIGN COMP WORKING SOFTWAREDESIGN COMP BY OLIVIER HEITZ LIVE SITE
  51. CROSS-FUNCTIONAL PAIRING:INTERACTION DESIGNER + FRONTENDDEVELOPERSKETCH WORKING SOFTWAREANNOTATED SKETCH OF A WIDGET SOFTWARE INCREMENT ON TESTING SERVER
  52. FROM SKETCH TO WORKINGPROTOTYPEWhy 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.
  53. WHEN TO CREATEHIGH FIDELITY PROTOTYPES?Since they are relatively time-intensive /expensive, create HiFi prototypes only ifnecessary:➡ If your audience is the client, users or an external development team ➡ Selling an idea ➡ Usability testing ➡ Detailed design specifications
  54. TAKE AWAYSFOR DEVELOPERS➡ Building software is a creative process.➡ Designers have good tools for creativity.➡ Adapt & learn!
  55. TAKE AWAYSFOR PRODUCT MANAGERSRecognize and accept the creative process ofsoftware development.➡ Yes, its messy.➡ Yes, there is a "looping circularity". Its how we learn and improve.➡ Take work-in-progress for what it is.
  56. TAKE AWAYSFOR DESIGNERS (1)➡ 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
  57. TAKE AWAYSFOR DESIGNERS (2)➡ 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 :-)
  58. DRAWBACKS / LIMITATIONSIf no design framework was established up-front,you will have late iterations for consistency.
  59. TEAM THANKS➡ Rails team @ ZHdK➡ Team π @ Liip
  60. (P)MERCI!(P)HILIPP SCHRÖDERTWITTER.COM/PIPS1PS@VISUALPUN.CH
  61. FURTHER READING & RESOURCES- 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 Practitioners 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
  62. RESOURCES MENTIONED INQUESTIONS & ANSWERS- Kim Goodwin (2009): Designing for the Digital Age: How to Create Human-Centered Products and Services, Indianapolis: Wiley.- Jeff Gothelf (2011): Lean UX: Getting Out Of The Deliverables Business. http:// uxdesign.smashingmagazine.com/2011/03/07/ lean-ux-getting-out-of-the-deliverables- business/, last accessed on 2012-09-07

×