Save 37% off PRO during our Black Friday Sale! »

Sketching the user experience

Sketching the user experience

Sketching the user experience. Learning the basic of UX design and understand a new design workflow for the responsive age with a more design-to-prototype approach. Understanding the value of design prototype at different levels & stage of the design process to test and validate the user experience.

F00c190b29ffec43bd7160caa3bd09ed?s=128

Antonio De Pasquale

June 07, 2013
Tweet

Transcript

  1. Sketching the UX Experience Antonio De Pasquale Senior Interaction Designer

    at frog @myinteraction
  2. My name is Antonio De Pasquale I'm a Senior Interaction

    Designer at frog Milan A little about me I'm specialized in digital interfaces & user experience I'm passioned about the "aesthetics" of movement I'm from Sicily and I love the sea. @myinteraction
  3. Interaction Vs Visual Concept Design research Benchmark Wireframe Information architecture

    User Requirements User testing User experience flow Motion prototype Prototype ... Concept Visual research Moodboard Grid design Iconography Typography UI Elements Screen design Motion design Prototype ... Most people think like this
  4. Interaction & Visual In reality is like this

  5. Sketching the UX Experience Introduction A different design approach The

    responsive age Visualizing the UX Design prototype Levels of fidelity The right tool Make it real!
  6. INTRODUCTION

  7. A different design approach 1 Perfection is achieved, not when

    there is nothing more to add, but when there is nothing left to take away. ANTOINE  DE  SAINT  EXUPÉRY
  8. What is the User Experience? Introduction A different design approach

    Sketching the user experience User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.
  9. Research Concept Wireframe Visual Develop User test Document A typical

    waterfall UX design process From concept design to the final product on the market Introduction A different design approach Sketching the user experience
  10. Waterfall model doesn’t make that much sense in the responsive

    age. That model worked 3/4 years ago when we lived in a different context with different devices It's over Introduction A different design approach Sketching the user experience
  11. Yesterday Desktop app, fixed grid, mobile interfaces Introduction A different

    design approach Sketching the user experience
  12. Introduction A different design approach Sketching the user experience N95

    first release to the market in Italy: March 2007 - 700€ http://www.youtube.com/watch?v=U-PxHUdur9Q
  13. Introduction A different design approach Sketching the user experience Today

    Smart Tv, Web App, Mobile, Console, Responsive design
  14. Amazon Kindle Fire HD - 150€ http://www.youtube.com/watch?v=ryYPduoGNjc Introduction A different

    design approach Sketching the user experience
  15. A different design workflow Things are changing. We need to

    evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test Prototype Sketch Review Research Concept
  16. Research Concept A different design workflow Things are changing. We

    need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test Prototype Sketch Review
  17. The responsive age 2 Form follows function DIETER  RAMS

  18. The responsive age Sketching the user experience Introduction

  19. The responsive age Sketching the user experience What is the

    shape of digital experiences? The evolution of technology is changing the boundaries of design Introduction
  20. Clear, iphone & Mac app https://vimeo.com/51690799 Video Introduction Sketching the

    user experience The responsive age
  21. Sketching the user experience The responsive age Same contents, different

    shapes Web site, application, digital software is not anymore a static template. It's a frame in an extended fluid experience Introduction
  22. Sketching the user experience The responsive age 1920 px 1440

    px 1024 px 320 px Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviors on different devices with different proportions & resolutions Our job now is to create future friendly design ecosystems Introduction
  23. From templates to the experience Sketching the user experience The

    responsive age Introduction
  24. Consistent Signature Continuos Transferable Shareable Augmented Context Users Patterns to

    help understand and define strategies for the multiscreen world Sketching the user experience The responsive age Introduction
  25. Unified design language system across products & services Sketching the

    user experience The responsive age Consistent Introduction
  26. Sketching the user experience The responsive age Tailored unique brand

    experience that makes the products distinguishable with a consistent interaction model Signature Introduction
  27. Continuos Synchronize your data, creating a continuos multiscreen experience Sketching

    the user experience The responsive age Introduction
  28. Enable content shifting across multiple devices, sharing screens or in

    case of simultaneous use Sketching the user experience The responsive age Transferable Introduction
  29. Shareable Allow multiple actors to have a simultaneous interaction, or

    share and customize the same device The responsive age Sketching the user experience Introduction
  30. Augmented Physical interactions go far beyond the digital screens The

    responsive age Sketching the user experience Introduction
  31. Visualizing the UX 3 We like design to be visually

    powerful, intellectually elegant, and above all timeless. MASSIMO  VIGNELLI
  32. Introduction Visualizing the UX Sketching the user experience Setting a

    vision Shaping an idea is a continuous process that needs many iterations cycles for making it in focus
  33. Introduction Visualizing the UX Sketching the user experience Analyze problems

    & constrains. Refine ideas and explore all the details to make it possible Explore the details
  34. Introduction Visualizing the UX Sketching the user experience Visualize &

    prototype your concept. Get the feel of the real impact in a physical way Feel the experience
  35. Paper prototyping Interactive wireframe Motion wireframe HTML Design Our tools

    How we can sketch & prototype the user experience? Introduction Visualizing the UX Sketching the user experience
  36. Introduction Visualizing the UX Sketching the user experience Low fidelity

    / No interactive
  37. Paper prototyping Introduction Visualizing the UX Sketching the user experience

    Low fidelity / Low interaction
  38. Introduction Visualizing the UX Sketching the user experience

  39. Introduction Visualizing the UX Sketching the user experience Medium fidelity

    / Low interaction Interactive wireframes
  40. Interactive wireframes Introduction Visualizing the UX Sketching the user experience

    Medium fidelity / Medium interaction
  41. Motion prototype Introduction Visualizing the UX Sketching the user experience

    Medium fidelity / Low interaction Keynote Animated Prototype http://www.lukew.com/ff/entry.asp?1171
  42. Introduction Visualizing the UX Sketching the user experience High fidelity

    / Low interaction Motion prototype Redefining Android (Frog) http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
  43. HTML Design Introduction Visualizing the UX Sketching the user experience

    High fidelity / High interaction
  44. Paper prototyping Interactive wireframes Motion wireframes HTML Design Introduction Visualizing

    the UX Sketching the user experience Love Quick  and  dirty Easy  to  do Fast  feedback Very  inclusive   Hate Not  quick  enough Too  dirty Hard  to  share Not  self  explaining Love Detailed  and  solid Good  for  defining   content  &  explain   behaviours Hate Hard  for  user  tesCng To  funcConal  with  less experience  of  the  flow The good and the bad Love EmoConal High  quality  feedback TesCng  dynamic   behaviours Hate Time  to  build  them SoHware  knowledge Work  beJer  in  an   advanced  state Love Test  interacCvity Perfect  for  tesCng   process  &  flow Experience  in  contest Hate SoHware  knowledge Time  for  building  the   prototype LimiCng  the  design   process
  45. DESIGN PROTOTYPE

  46. Levels of fidelity 1 It’s the little details that are

    vital. Little things make big things happen. COACH  JOHN  WOODEN
  47. Levels of fidelity Sketching the user experience It's a User

    centered design methodology for designing, communicating ad evaluating user interfaces but also for getting feedback as soon as possible and validating the interaction model What is Rapid prototyping? Design prototype
  48. Sketching the user experience Release Early, Release Often Always test,

    to verify all the different aspects of your design with different levels of fidelity according to the stage of the project Levels of fidelity Design prototype
  49. Sketching the user experience Fail Early, Fail Often It's not

    important to close everything for testing our design concept. Every stage is a possible entry point to verify, discuss, iterate, design. Levels of fidelity Design prototype
  50. High fidelity Low fidelity User test Concept evaluation Sketching the

    user experience There is no such thing as high or low fidelity, only appropriate fidelity that allows you to achieve the goals you've set for doing a prototype Prototype archetype Vs Fidelity  Hand  Sketch Linked  pdf InteracCve   Wireframe   Video  simulaCon Semi  funcConal   prototype Full  funcConal   prototype Levels of fidelity Design prototype
  51. The right tool 2 Give me a lever and I

    can move the world. ARCHIMEDE  DI  SIRACUSA
  52. Functional Experience Technologist Designer What is the perfect tool? It

    depends. Depends on what you have to test, what is your audience, the stage of the project and also your personal skills ? Sketching the user experience The right tool Design prototype
  53. Short cycle Long & progressive A prototype life cycle The

    life of a prototype is directly connected to the problem it has to solve Design Evaluate Communicate Iterate More cycles, more refinements: better results! The right tool Design prototype Sketching the user experience
  54. What is relevant is Communicate That's our job The right

    tool Design prototype Sketching the user experience
  55. Functional Experience HTML/Code Adobe  edge Fireworks AGer  effects Keynote Paper

     prototype Proto  UI InteracNve  pdf The right tool is the one that helps you in communicate your concept We need to explain complex problems & big project in a simple way and test if they're clear and meaningful to people. There is no perfect tool The right tool Design prototype Sketching the user experience
  56. Make it real 3 What would life be if we

    had no courage to attempt anything? VINCENT  VAN  GOGH
  57. FURTHER READING

  58. Further reading Sketching the user experience Sketching the user experience

    Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton 2007 Designing interactions Bill Moggridge 2007
  59. Further reading Sketching the user experience Sketching the user experience

    Prototype tools UX Culture Design Workflow Wireframing Responsive  design   workflow  on  mulCple   touchpoints http://viljamis.com/blog/2012/ responsive-workflow/ Reference & Insights Design  process   in  the  responsive  age http://www.slideshare.net/ pkattera/design-process-for- responsive-web-design Does  form  follow   funcCon? http://www.smashingmagazine.com/ 2010/03/23/does-form-follow- function/ Embracing   the  UX  Spectrum http://uxmag.com/articles/ embracing-the-ux-spectrum Visualizing   the  user  experience http://www.slideshare.net/ grantrobinson/visualising-the- user-experience-2261349 Where  wireframes are  concerned http://uxmag.com/articles/where- wireframes-are-concerned Design  beJer  &  faster with  rapid  prototyping http://www.smashingmagazine.com/ 2010/06/16/design-better-faster-with- rapid-prototyping/ Proto.io   http://proto.io/ Paper  stencil  &  prototype   http://www.uistencils.com/
  60. Thanks! Follow me on twitter @myinteraction to continue the discussion!