Working in Context: Rapid Animated Prototyping / Nir Kosover (UX Salon 2016)

858b5b3e4765fae6dd19603157f6c84f?s=47 UX Salon
April 19, 2016

Working in Context: Rapid Animated Prototyping / Nir Kosover (UX Salon 2016)

Great products are all about a needed value and an appealing coherent story. We use prototypes to get a glimpse into that story, trying to bridge the context gap between ourselves and our users. Nir will present rapid animated prototyping as a way of working in context and creating those great coherent products.

858b5b3e4765fae6dd19603157f6c84f?s=128

UX Salon

April 19, 2016
Tweet

Transcript

  1. None
  2. BEFORE WE START

  3. LET ME APOLOGIZE

  4. I KNOW, LUNCH IS AWESOME

  5. HI I’LL KEEP IT SHORT :)

  6. 180,000 10 1 Trees Years Boy 4 Hours (avg.) ABOUT

    ME
  7. WORKING IN CONTEXT Rapid animated prototyping

  8. “ Well, it's either a penis or a toe, I'm

    not 100% sure.
  9. From Latin contextus, to join together, to weave; CONTEXTPenis /

    Toe ? “ Well, it's either a penis or a toe, I'm not 100% sure. Dr. Grant Anderson
  10. CONTEXT From Latin; contextus, to join together, to weave;

  11. Culture, Gender, Hobbies, Career, demographic etc.. BACKGROUND CONTEXT 1

  12. None
  13. None
  14. Whole scenario of the usage, sequence of events, surrounding words,

    spatial reference IMMEDIATE CONTEXT 2
  15. ? Eschew “ For several years I was a heavy

    smoker but now that I have learned to Eschew cigarettes I feel much better.
  16. For several years I was a heavy smoker but now

    that I have learned to Eschew cigarettes I feel much better. “ ? Eschew = To avoid (something) especially because you do not think it is right, proper, etc.
  17. What we ‘as planners’ know or think vs. what someone

    using the product actually know or how he is actually using the product CONTEXT GAP
  18. SO, WHAT DO WE DO?

  19. SO, WHAT DO WE DO? MVP state of mind Proper

    research The flow
  20. A serious of screens / Prototype that demonstrate the product

    THE FLOW
  21. Invisionapp.com FLOW

  22. ARTBOARDS https://www.invisionapp.com/do/ by https://www.designernews.co/

  23. Rapid Animated Prototyping FLOW

  24. THE ESSENCE Defining & designing products should be flow driven

    & should include basic contextual animations 1. Research 2. Decide on your most common flow, and start with 3. Use a tool that can auto-animate between screens 4. Test as you go 5. Iterate - learning is the key METHOD
  25. 1. Research 2. Decide on your most common flow, and

    start with it 3. Use a tool that can auto-animate between screens * 4. Test as you go 5. Iterate - learning is the key METHOD * Highly recommended ENCE g & designing products should be flow driven hould include basic contextual animations
  26. 1. Everything is a flow, a sequence 2. Motion is

    the narrator, it tells the story of that sequence 3. We can “wireframe” motion just like we wireframe design MOTIVATION?
  27. CASE STUDY Let’s create a music recording app

  28. THE SETTING Complexity / Features Common iPhone music apps

  29. GOAL 1. Something that we would use 2. We have

    to do it fast 3. Simplicity & Design as core values
  30. VERSION 1

  31. None
  32. WHAT WE LEARNED 1. You don’t really need a screen

    for each channel 2. The shapes don’t make sense.. 3. Missing basic features - volume, settings
  33. VERSION 2

  34. None
  35. WHAT WE LEARNED 1. Channels are still a bit awkward

    2. Mute, pause /play, volume need some work 3. Is recording next channel clear?
  36. VERSION 3

  37. None
  38. WHAT WE LEARNED 1. Channel behaviour - almost there 2.

    Volume - yeahhh!!! 3. Settings + load songs - Yeahhhh!!
  39. It’s time for design and refinements!

  40. None
  41. Intercom.IO

  42. MVP for MVP’s

  43. 1. It’s easy to consume more time with animations 2.

    Tools shortcomings (Hover states, scroll, etc..) 3. Falling in love with the animations - loose focus.. CON’s?
  44. 1. Work in context (full usage scenraio, immediate feedback loop)

    2. Test your ideas very early in the process 3. Treat animations as an integral part of the product 4. Get buy-in for ideas PRO’s?
  45. CRASH COURSE

  46. CRASH COURSE Set docu

  47. Set document size URSE

  48. MOBILE!

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. It’s gotta be FAST

  62. less than 30 sec. At least a few min. http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/

  63. Andrew Haskin

  64. 1. Context 2. Bridging the context gap 3. Full usage

    flows, like vertical slices, best to test assumptions 4. Keynote crash course QUICK SUMMARY
  65. Jam Looper 1.0

  66. Silent launch on March 1st 3500 users 126 states 45%

    returning users Avg. use time of 7 min. Avg. of 3 channels per Jam
  67. Jam looper

  68. Thanks!

  69. None