Sketchingthe UX ExperienceAntonio De PasqualeSenior Interaction Designer at frog@myinteraction
My name is Antonio De PasqualeIm a Senior Interaction Designer at frog MilanA little about meIm specialized in digital int...
Interaction Vs VisualConceptDesign researchBenchmarkWireframeInformation architectureUser RequirementsUser testingUser exp...
Interaction & VisualIn reality is like this
Sketchingthe UX ExperienceIntroductionA different design approachThe responsive ageVisualizing the UXDesign prototypeLevel...
INTRODUCTION
A differentdesign approach1Perfection is achieved, notwhen there is nothing more to add,but when there is nothing left to ...
What is the User Experience?Introduction A different design approachSketching the user experienceUser Experience encompass...
Research Concept Wireframe Visual Develop User testDocumentA typicalwaterfall UX design processFrom concept design to the ...
Waterfall model doesn’t make that much sensein the responsive age.That model worked 3/4 years ago when we livedin a differ...
YesterdayDesktop app, fixed grid, mobile interfacesIntroduction A different design approachSketching the user experience
Introduction A different design approachSketching the user experienceN95 first release to the market in Italy: March 2007 ...
Introduction A different design approachSketching the user experienceTodaySmart Tv, Web App, Mobile, Console, Responsive d...
Amazon Kindle Fire HD - 150€http://www.youtube.com/watch?v=ryYPduoGNjcIntroduction A different design approachSketching th...
A different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketch...
Research ConceptA different design workflowThings are changing.We need to evolve the processIntroduction A different desig...
The responsive age2Form follows functionDIETER	  RAMS
The responsive ageSketching the user experienceIntroduction
The responsive ageSketching the user experienceWhat is the shape of digital experiences?The evolution of technology is cha...
Clear, iphone & Mac apphttps://vimeo.com/51690799VideoIntroductionSketching the user experienceThe responsive age
Sketching the user experienceThe responsive ageSame contents, different shapesWeb site, application, digital software is n...
Sketching the user experienceThe responsive age1920 px1440 px1024 px320 pxDesign for the responsive ageWe need to sketch, ...
From templates to the experienceSketching the user experienceThe responsive ageIntroduction
ConsistentSignatureContinuosTransferableShareableAugmentedContext UsersPatterns to help understand and define strategiesfo...
Unified design language system acrossproducts & servicesSketching the user experienceThe responsive ageConsistentIntroduct...
Sketching the user experienceThe responsive ageTailored unique brand experience that makes the productsdistinguishable wit...
ContinuosSynchronize your data, creating a continuosmultiscreen experienceSketching the user experienceThe responsive ageI...
Enable content shifting across multiple devices,sharing screens or in case of simultaneous useSketching the user experienc...
ShareableAllow multiple actors to have a simultaneousinteraction, or share and customize the same deviceThe responsive age...
AugmentedPhysical interactions go far beyond thedigital screensThe responsive ageSketching the user experienceIntroduction
Visualizing the UX3We like design to be visually powerful,intellectually elegant, and above all timeless.MASSIMO	  VIGNELLI
Introduction Visualizing the UXSketching the user experienceSetting a visionShaping an idea is a continuous process that n...
Introduction Visualizing the UXSketching the user experienceAnalyze problems & constrains. Refine ideas andexplore all the...
Introduction Visualizing the UXSketching the user experienceVisualize & prototype your concept. Get the feel ofthe real im...
Paper prototypingInteractive wireframeMotion wireframeHTML DesignOur toolsHow we can sketch & prototypethe user experience...
Introduction Visualizing the UXSketching the user experienceLow fidelity / No interactive
Paper prototypingIntroduction Visualizing the UXSketching the user experienceLow fidelity / Low interaction
Introduction Visualizing the UXSketching the user experience
Introduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionInteractive wireframes
Interactive wireframesIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Medium interaction
Motion prototypeIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionKeynote Anima...
Introduction Visualizing the UXSketching the user experienceHigh fidelity / Low interactionMotion prototypeRedefining Andr...
HTML DesignIntroduction Visualizing the UXSketching the user experienceHigh fidelity / High interaction
Paper prototyping Interactive wireframes Motion wireframes HTML DesignIntroduction Visualizing the UXSketching the user ex...
DESIGN PROTOTYPE
Levels of fidelity1It’s the little details that are vital.Little things make big things happen.COACH	  JOHN	  WOODEN
Levels of fidelitySketching the user experienceIts a User centered design methodology for designing,communicating ad evalu...
Sketching the user experienceRelease Early, Release OftenAlways test, to verify all the different aspects of your designwi...
Sketching the user experienceFail Early, Fail OftenIts not important to close everything for testing our design concept.Ev...
High fidelityLow fidelityUser testConceptevaluationSketching the user experienceThere is no such thing as high or low fide...
The right tool2Give me a lever andI can move the world.ARCHIMEDE	  DI	  SIRACUSA
FunctionalExperienceTechnologistDesignerWhat is the perfect tool?It depends.Depends on what you have to test, what is your...
Short cycleLong &progressiveA prototype life cycleThe life of a prototype is directly connected to the problem it has to s...
What is relevant isCommunicateThats our jobThe right toolDesign prototypeSketching the user experience
FunctionalExperienceHTML/CodeAdobe	  edgeFireworksAGer	  effectsKeynotePaper	  prototype Proto	  UIInteracNve	  pdfThe righ...
Make it real3What would life be if we had nocourage to attempt anything?VINCENT	  VAN	  GOGH
FURTHER READING
Further readingSketching the user experienceSketching the user experienceSketching User Experiences: Getting the DesignRig...
Further readingSketching the user experienceSketching the user experiencePrototype toolsUX Culture Design Workflow Wirefra...
Thanks!Follow me on twitter @myinteractionto continue the discussion!
Upcoming SlideShare
Loading in...5
×

Sketching the user experience

29,930

Published on

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.

Published in: Design, Technology, Business
2 Comments
126 Likes
Statistics
Notes
  • a clear representation about user experience and its sequential process. businesses will get user experience assistance from various reputed companies like salzer technologies and many more offers user experience solutions to enhance the operability.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Form follows function was first coined by Louis Sulllivan in his article article The Tall Office Building Artistically Considered in 1896 .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
29,930
On Slideshare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
779
Comments
2
Likes
126
Embeds 0
No embeds

No notes for slide

Sketching the user experience

  1. 1. Sketchingthe UX ExperienceAntonio De PasqualeSenior Interaction Designer at frog@myinteraction
  2. 2. My name is Antonio De PasqualeIm a Senior Interaction Designer at frog MilanA little about meIm specialized in digital interfaces & user experienceIm passioned about the "aesthetics" of movementIm from Sicily and I love the sea.@myinteraction
  3. 3. Interaction Vs VisualConceptDesign researchBenchmarkWireframeInformation architectureUser RequirementsUser testingUser experience flowMotion prototypePrototype...ConceptVisual researchMoodboardGrid designIconographyTypographyUI ElementsScreen designMotion designPrototype...Most people think like this
  4. 4. Interaction & VisualIn reality is like this
  5. 5. Sketchingthe UX ExperienceIntroductionA different design approachThe responsive ageVisualizing the UXDesign prototypeLevels of fidelityThe right toolMake it real!
  6. 6. INTRODUCTION
  7. 7. A differentdesign approach1Perfection is achieved, notwhen there is nothing more to add,but when there is nothing left to take away.ANTOINE  DE  SAINT  EXUPÉRY
  8. 8. What is the User Experience?Introduction A different design approachSketching the user experienceUser Experience encompasses all aspects of theend-users interaction with the company, itsservices, and its products.
  9. 9. Research Concept Wireframe Visual Develop User testDocumentA typicalwaterfall UX design processFrom concept design to the finalproduct on the marketIntroduction A different design approachSketching the user experience
  10. 10. Waterfall model doesn’t make that much sensein the responsive age.That model worked 3/4 years ago when we livedin a different context with different devicesIts overIntroduction A different design approachSketching the user experience
  11. 11. YesterdayDesktop app, fixed grid, mobile interfacesIntroduction A different design approachSketching the user experience
  12. 12. Introduction A different design approachSketching the user experienceN95 first release to the market in Italy: March 2007 - 700€http://www.youtube.com/watch?v=U-PxHUdur9Q
  13. 13. Introduction A different design approachSketching the user experienceTodaySmart Tv, Web App, Mobile, Console, Responsive design
  14. 14. Amazon Kindle Fire HD - 150€http://www.youtube.com/watch?v=ryYPduoGNjcIntroduction A different design approachSketching the user experience
  15. 15. A different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReviewResearch Concept
  16. 16. Research ConceptA different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReview
  17. 17. The responsive age2Form follows functionDIETER  RAMS
  18. 18. The responsive ageSketching the user experienceIntroduction
  19. 19. The responsive ageSketching the user experienceWhat is the shape of digital experiences?The evolution of technology is changing theboundaries of designIntroduction
  20. 20. Clear, iphone & Mac apphttps://vimeo.com/51690799VideoIntroductionSketching the user experienceThe responsive age
  21. 21. Sketching the user experienceThe responsive ageSame contents, different shapesWeb site, application, digital software is not anymore a static template.Its a frame in an extended fluid experienceIntroduction
  22. 22. Sketching the user experienceThe responsive age1920 px1440 px1024 px320 pxDesign for the responsive ageWe need to sketch, visualize, test, prototype and understand the dynamicbehaviors on different devices with different proportions & resolutionsOur job now is to create future friendly design ecosystemsIntroduction
  23. 23. From templates to the experienceSketching the user experienceThe responsive ageIntroduction
  24. 24. ConsistentSignatureContinuosTransferableShareableAugmentedContext UsersPatterns to help understand and define strategiesfor the multiscreen worldSketching the user experienceThe responsive ageIntroduction
  25. 25. Unified design language system acrossproducts & servicesSketching the user experienceThe responsive ageConsistentIntroduction
  26. 26. Sketching the user experienceThe responsive ageTailored unique brand experience that makes the productsdistinguishable with a consistent interaction modelSignatureIntroduction
  27. 27. ContinuosSynchronize your data, creating a continuosmultiscreen experienceSketching the user experienceThe responsive ageIntroduction
  28. 28. Enable content shifting across multiple devices,sharing screens or in case of simultaneous useSketching the user experienceThe responsive ageTransferableIntroduction
  29. 29. ShareableAllow multiple actors to have a simultaneousinteraction, or share and customize the same deviceThe responsive ageSketching the user experienceIntroduction
  30. 30. AugmentedPhysical interactions go far beyond thedigital screensThe responsive ageSketching the user experienceIntroduction
  31. 31. Visualizing the UX3We like design to be visually powerful,intellectually elegant, and above all timeless.MASSIMO  VIGNELLI
  32. 32. Introduction Visualizing the UXSketching the user experienceSetting a visionShaping an idea is a continuous process that needsmany iterations cycles for making it in focus
  33. 33. Introduction Visualizing the UXSketching the user experienceAnalyze problems & constrains. Refine ideas andexplore all the details to make it possibleExplore the details
  34. 34. Introduction Visualizing the UXSketching the user experienceVisualize & prototype your concept. Get the feel ofthe real impact in a physical wayFeel the experience
  35. 35. Paper prototypingInteractive wireframeMotion wireframeHTML DesignOur toolsHow we can sketch & prototypethe user experience?Introduction Visualizing the UXSketching the user experience
  36. 36. Introduction Visualizing the UXSketching the user experienceLow fidelity / No interactive
  37. 37. Paper prototypingIntroduction Visualizing the UXSketching the user experienceLow fidelity / Low interaction
  38. 38. Introduction Visualizing the UXSketching the user experience
  39. 39. Introduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionInteractive wireframes
  40. 40. Interactive wireframesIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Medium interaction
  41. 41. Motion prototypeIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionKeynote Animated Prototypehttp://www.lukew.com/ff/entry.asp?1171
  42. 42. Introduction Visualizing the UXSketching the user experienceHigh fidelity / Low interactionMotion prototypeRedefining Android (Frog)http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
  43. 43. HTML DesignIntroduction Visualizing the UXSketching the user experienceHigh fidelity / High interaction
  44. 44. Paper prototyping Interactive wireframes Motion wireframes HTML DesignIntroduction Visualizing the UXSketching the user experienceLoveQuick  and  dirtyEasy  to  doFast  feedbackVery  inclusive  HateNot  quick  enoughToo  dirtyHard  to  shareNot  self  explainingLoveDetailed  and  solidGood  for  defining  content  &  explain  behavioursHateHard  for  user  tesCngTo  funcConal  with  lessexperience  of  the  flowThe good and the badLoveEmoConalHigh  quality  feedbackTesCng  dynamic  behavioursHateTime  to  build  themSoHware  knowledgeWork  beJer  in  an  advanced  stateLoveTest  interacCvityPerfect  for  tesCng  process  &  flowExperience  in  contestHateSoHware  knowledgeTime  for  building  the  prototypeLimiCng  the  design  process
  45. 45. DESIGN PROTOTYPE
  46. 46. Levels of fidelity1It’s the little details that are vital.Little things make big things happen.COACH  JOHN  WOODEN
  47. 47. Levels of fidelitySketching the user experienceIts a User centered design methodology for designing,communicating ad evaluating user interfaces but also for gettingfeedback as soon as possible and validating the interaction modelWhat is Rapid prototyping?Design prototype
  48. 48. Sketching the user experienceRelease Early, Release OftenAlways test, to verify all the different aspects of your designwith different levels of fidelity according to the stage of the projectLevels of fidelityDesign prototype
  49. 49. Sketching the user experienceFail Early, Fail OftenIts not important to close everything for testing our design concept.Every stage is a possible entry point to verify, discuss, iterate, design.Levels of fidelityDesign prototype
  50. 50. High fidelityLow fidelityUser testConceptevaluationSketching the user experienceThere is no such thing as high or low fidelity,only appropriate fidelity that allows you to achievethe goals youve set for doing a prototypePrototype archetype Vs Fidelity  Hand  Sketch Linked  pdfInteracCve  Wireframe  Video  simulaConSemi  funcConal  prototypeFull  funcConal  prototypeLevels of fidelityDesign prototype
  51. 51. The right tool2Give me a lever andI can move the world.ARCHIMEDE  DI  SIRACUSA
  52. 52. FunctionalExperienceTechnologistDesignerWhat is the perfect tool?It depends.Depends on what you have to test, what is your audience, the stageof the project and also your personal skills?Sketching the user experienceThe right toolDesign prototype
  53. 53. Short cycleLong &progressiveA prototype life cycleThe life of a prototype is directly connected to the problem it has to solveDesignEvaluateCommunicateIterateMore cycles, more refinements: better results!The right toolDesign prototypeSketching the user experience
  54. 54. What is relevant isCommunicateThats our jobThe right toolDesign prototypeSketching the user experience
  55. 55. FunctionalExperienceHTML/CodeAdobe  edgeFireworksAGer  effectsKeynotePaper  prototype Proto  UIInteracNve  pdfThe right tool is the one that helps youin communicate your conceptWe need to explain complex problems & big project in a simple wayand test if theyre clear and meaningful to people.There is no perfect toolThe right toolDesign prototypeSketching the user experience
  56. 56. Make it real3What would life be if we had nocourage to attempt anything?VINCENT  VAN  GOGH
  57. 57. FURTHER READING
  58. 58. Further readingSketching the user experienceSketching the user experienceSketching User Experiences: Getting the DesignRight and the Right DesignBill Buxton2007Designing interactionsBill Moggridge2007
  59. 59. Further readingSketching the user experienceSketching the user experiencePrototype toolsUX Culture Design Workflow WireframingResponsive  design  workflow  on  mulCple  touchpointshttp://viljamis.com/blog/2012/responsive-workflow/Reference & InsightsDesign  process  in  the  responsive  agehttp://www.slideshare.net/pkattera/design-process-for-responsive-web-designDoes  form  follow  funcCon?http://www.smashingmagazine.com/2010/03/23/does-form-follow-function/Embracing  the  UX  Spectrumhttp://uxmag.com/articles/embracing-the-ux-spectrumVisualizing  the  user  experiencehttp://www.slideshare.net/grantrobinson/visualising-the-user-experience-2261349Where  wireframesare  concernedhttp://uxmag.com/articles/where-wireframes-are-concernedDesign  beJer  &  fasterwith  rapid  prototypinghttp://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. 60. Thanks!Follow me on twitter @myinteractionto continue the discussion!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×