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.

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!