Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Shredding the Wireframe: Intro to Rapid UX Prototyping

2 622 vues

Publié le

This presentation/workshop covers:

- Current state of UX, limitations of common deliverables (e.g. wireframes)
- POV on prototyping and why it's important in user experience design
- Available tools (Invision, Justinmind, etc)
- Case study: using the Tech Summit app as an example
- What about the spec?

Key Takeaways

- Wireframes are near obsolete
- Why prototype
- Available methods
- Learn about available tools, pros and cons
- Documenting detailed functionality (annotating the prototype)

Publié dans : Design, Technologie
  • We called it "operation mind control" - as we discovered a simple mind game that makes a girl become obsessed with you. (Aand it works even if you're not her type or she's already dating someone else) Here's how we figured it out... ♣♣♣ https://tinyurl.com/y52uv4vq
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Love the screenshots of despair shout out and credit!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Overflow Cafe staff likes your presentation, thank you.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Shredding the Wireframe: Intro to Rapid UX Prototyping

  1. 1. Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish Photo source: Musician Buzz
  2. 2. Agenda • What is UX? (Let’s make sure we are on the same page here) • Example deliverables • Limitations of wireframes/embracing the prototype • Some awesome tools (Invision App, Justinmind, POP) • Case study: Razorfish Tech Summit App • What about the spec? • Q+A 1 Photo source: MC Quinn, Flickr
  3. 3. But first…introduce yourself
  4. 4. What is UX? 3
  5. 5. What is UX? 4 • Empathizing with users to make products better (feel their pain) • Understanding how consumers will actually use a product or service and design • It used to be about web sites and web-based applications, but mobile web sites and applications, social platforms need a lot of UX help Source: Office Space (20th Century Fox)
  6. 6. Our Common Enemy 5 Source: Screenshots of Despair http://screenshotsofdespair.tumblr.com/
  7. 7. Our Patron Saint 6 “Design is not just what it looks like or feels like. Design is how it works.” –Steve Jobs, Patron Saint of User Experience Practitioners
  8. 8. Origins of the Term 7 Source: Businessweek
  9. 9. Rooted in 8 • Architecture • Graphic design • Industrial design • Human Factors
  10. 10. Also heavily inspired by 9 • Film • Animation • Comics
  11. 11. The Process 10 1. Get to know users 2. Analyze user tasks and goals 3. Establish requirements 4. Prototype ideas 5. Test Rinse and Repeat
  12. 12. How We Measure Success • Effectiveness – how easily can users achieve their goals • Efficiency – how fast can they do it • Satisfaction – Experience = good/bad? (Would they share it with others?) 11
  13. 13. 12
  14. 14. 3 Key Practices in UX 13 Research Knowing the user Information Architecture + Interaction Design Sketching the experience Content Strategy Planning, development, and management of content Photo sources: CannedTuna, Flickr; Martin Stabe, Flickr; Baldiri, Flickr
  15. 15. Some Deliverables
  16. 16. Ecosystem Diagram 15 c c
  17. 17. User Journeys 16 c c c
  18. 18. Site Map 17 c
  19. 19. Wireframes 18 c
  20. 20. We <3 wireframes, but they are quickly becoming obsolete.
  21. 21. Wireframes Have Several Limitations • What you see is often not what you get • Insufficient when describing nuanced interaction • Approvals can never be final until the result is seen in code • It’s difficult to test wireframes • Many clients have difficulty providing feedback on wireframes • Laborious, time intensive • Inefficient for detailing responsive design 20 Image source: Wikipedia
  22. 22. 21 Development Processes are Evolving
  23. 23. Out with Waterfall* 22 * As with a symphonic orchestra, the emphasis of Waterfall is the plan (or score) and therefore before beginning any kind of development there needs to be a clear vision in order. Orchestras however typically don’t function well when project goals are in flux or unclear (i.e. the composition is still being written). Photo source: Vancouver 125, Flickr
  24. 24. In with Agile* 23 * Every software development firm or agency seems to have it’s own flavor of agile, leading to difficulties in applying a standard definition to the term. At Razorfish, it has come to mean a tight, fast process that is multi-disciplinary yet on the outside might appear to be somewhat chaotic. Like any good jam session, agile can be good in situations where the end-goals of projects are not completely defined. Photo source: Incase, Flickr
  25. 25. 24 And we need some new tools
  26. 26. 25 Enter the Prototype
  27. 27. What do we mean when we say prototype? A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. 26 Source: Wikipedia Photo source: Steve Jurvetson, Flickr
  28. 28. Advantages to Prototyping the UX 27 • Get early buy-in from business stakeholders • Enables testing early and often with users • Encourages multi-disciplinary collaboration • Plays well with the agile methodology • Shows not just what it will look like but how it will work • Kill fewer trees
  29. 29. There are several categories • Proof-of-Concept Prototype • Form Study Prototype • User Experience Prototype • Visual Prototype • Functional Prototype (a.k.a Working Prototype) 28 Source: Wikipedia
  30. 30. The Fidelity Spectrum 29 Low Medium High Photo sources: Cesar Astudillo, Flickr, Invision App, Razorfish Emerging Experiences
  31. 31. 30 Set Expectations on Prototype Fidelity
  32. 32. Some Popular Tools 31
  33. 33. 32
  34. 34. 33
  35. 35. 34
  36. 36. 35
  37. 37. 36 Case Study: Razorfish Tech Summit App
  38. 38. About the Razorfish Tech Summit • Annual event hosted by Razorfish • Includes clients and industry thought leaders • Two days of keynotes, panels, case studies and workshops • Explore how these changes impact customer experiences 37 Photo source: Razorfish Emerging Experiences
  39. 39. Our Mission Create an app for Razorfish’s 2014 Tech Summit that: • Provides basic conference information • Show cases Gimbal Beacon technology • Design and build in an insanely short period of time 38
  40. 40. The Gimbal Beacon 39
  41. 41. Tech Summit App Features 40 • Linkedin Authentication/Registration • Location aware heat map visualization (with easter eggs/prizes) • Beacon integration • Calendar with list of events, and speakers (link to Linkedin profiles) • About the summit • Get help (contact information for event organizers) • IOS device support
  42. 42. 41 Sketching the Experience
  43. 43. 42 Application Map
  44. 44. 43 Sketching the Experience
  45. 45. 44
  46. 46. 45
  47. 47. 46
  48. 48. 47
  49. 49. 48
  50. 50. 49
  51. 51. 50
  52. 52. Testing: Early and Often 51 Formal and guerilla usability testing
  53. 53. But What About the Spec? 52
  54. 54. 53 Plays well with Box or Dropbox
  55. 55. Thanks!! Photo sources: Dustin Gaffke, Flickr
  56. 56. 55 Q+A

×