Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

YouTube videos are no longer supported on SlideShare

View original on YouTube

(P)
6.9.2012
FRONTEND CONFERENCE 2012
SKETCHING, WIREFRAMING, PROTOTYPING
(P)HILIPP SCHRÖDER
SKETCHING, WIREFRAMING,
PROTOTYPING
How to Be Agile and Avoid Half-Baked
User Experience
Upcoming SlideShare
Beyond manifestos
Beyond manifestos
Loading in …3
×

Check these out next

1 of 63 Ad

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

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Similar to Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience (20)

Advertisement

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

  1. (P) 6.9.2012 FRONTEND CONFERENCE 2012 SKETCHING, WIREFRAMING, PROTOTYPING (P)HILIPP SCHRÖDER
  2. SKETCHING, WIREFRAMING, PROTOTYPING How to Be Agile and Avoid Half-Baked User 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 THAT EVERYBODY 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 plan HTTP://AGILEMANIFESTO.ORG/
  9. TRADITIONAL RELAY RACE Team members run alone. Collaboration is not built into the game. HAT TIP: ANDERSRAMSAY.COM IMAGE: CC BY NC ND SANGUDO ON FLICKR
  10. AGILE RUGBY GAME Intensive and continuous collaboration is core to the game. Reach the goal line again and again to win the game. HAT TIP: ANDERSRAMSAY.COM IMAGE: 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 CONTROL CHARLIE CHAPLIN IN “MODERN TIMES”
  13. WHY WATERFALL DOESN’T WORK FOR ME
  14. RELAY RACES & “DEATH MARCHES” CC BY-NC-ND SHENGHUNG LIN ON FLICKR
  15. KNOW-HOW SILOS CC BY-NC YUAN2003 ON FLICKR
  16. NO TEDIOUS SPEC WORK
  17. WHY AGILE DEVELOPMENT WORKS FOR ME
  18. EMPIRICAL PROCESS CONTROL - AS EXEMPLIFIED BY SCRUM Sprint Delivery / retrospective Sprint review Product 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 AN INCREMENT OF WORKING SOFTWARE ... in order to quickly generate business value and develop software that satisfies user needs.
  20. EACH ITERATION, WE REVIEW THE 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 Uncertainty End Uncertainty Low Low High Means Uncertainty Low High Means Uncertainty Low How do we build it? How do we build it?
  22. TEAM WORK TAKES THE CENTER STAGE IN AGILE Agile aims to enable “hyper productivity” through close collaboration, self-organization, empowerment and focussing of the team and the stakeholders
  23. AGILE IS A PULL SYSTEM ➡ Peer to peer exchange of information ➡ Collective learning ➡ Collective responsibility (shared goal)
  24. THE CURRENCY IN AGILE IS SHARED UNDERSTANDING Product Owner Scrum Master Developer Shared understanding Tester Designer
  25. LEAN THINKING 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)
  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 4 Customer 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 3 Designer 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 DESIGN HAS CHANGED
  29. AGILE ANTI-PATTERN: GENIUS DESIGN & THE "BIG REVEAL" BESCHREIBUNG
  30. DESIGNER'S ROLE IN AGILE: KEEPER OF THE VISION & FOREMOST FACILITATOR UX Researcher Users Visual Designer UX Designer Customer Service Rep Product Owner Developers
  31. PROTOTYPING
  32. VISUALIZE AND SHARE 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" Wireframes Visual 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 FOR PICKING THE RIGHT TOOL ➡ Audience ➡ Intent ➡ Familiarity and learnability ➡ Cost ➡ Collaboration ➡ Distribution ➡ Throwaway versus reusable SOURCE: TODD ZAKI WARFEL (2009): PROTOTYPING - A PRACTITIONER'S GUIDE, NEW YORK: ROSENFELD MEDIA
  35. PROTOTYPING Slow, 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" Wireframes Visual 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 "I'm full of finished, mature ideas".
  40. SKETCHING USES 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
  41. SKETCHING AS RESEARCH TOOL
  42. SKETCHING FOR WORKING THROUGH A CONCEPT
  43. SKETCHING WIREFRAMES FOR WORKING THROUGH A DESIGN
  44. SKETCHING AS SHARED COMMUNICATION SKETCHES BY STEFANO VANOTTI
  45. SKETCHING FOR VALIDATING UX DESIGN DIRECTION
  46. “CLEAN” WIREFRAME Both widgets need to be of the same height...
  47. DIAGRAMS
  48. INTERACTIVE "CLEAN" WIREFRAME
  49. HYBRID WIREFRAME / DESIGN COMP
  50. HIGH FIDELITY PROTOTYPES DESIGN COMP WORKING SOFTWARE DESIGN COMP BY OLIVIER HEITZ LIVE SITE
  51. CROSS-FUNCTIONAL PAIRING: INTERACTION DESIGNER + FRONTEND DEVELOPER SKETCH WORKING SOFTWARE ANNOTATED SKETCH OF A WIDGET SOFTWARE INCREMENT ON TESTING SERVER
  52. FROM SKETCH TO WORKING PROTOTYPE 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.
  53. WHEN TO CREATE HIGH FIDELITY PROTOTYPES? 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
  54. TAKE AWAYS FOR DEVELOPERS ➡ Building software is a creative process. ➡ Designers have good tools for creativity. ➡ Adapt & learn!
  55. TAKE AWAYS FOR PRODUCT MANAGERS 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.
  56. TAKE AWAYS FOR 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 AWAYS FOR 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 / LIMITATIONS If 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ÖDER TWITTER.COM/PIPS1 PS@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 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
  62. RESOURCES MENTIONED IN QUESTIONS & 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

×