sketching the user experience

Download Sketching the user experience

Post on 17-Aug-2014

27.939 views

Category:

Design

7 download

Embed Size (px)

DESCRIPTION

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

  • 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 interfaces & user experienceIm passioned about the "aesthetics" of movementIm from Sicily and I love the sea.@myinteraction
  • Interaction Vs VisualConceptDesign researchBenchmarkWireframeInformation architectureUser RequirementsUser testingUser experience flowMotion prototypePrototype...ConceptVisual researchMoodboardGrid designIconographyTypographyUI ElementsScreen designMotion designPrototype...Most people think like this
  • Interaction & VisualIn reality is like this
  • Sketchingthe UX ExperienceIntroductionA different design approachThe responsive ageVisualizing the UXDesign prototypeLevels of fidelityThe right toolMake it real!
  • INTRODUCTION
  • A differentdesign approach1Perfection is achieved, notwhen there is nothing more to add,but when there is nothing left to take away.ANTOINE DE SAINT EXUPRY
  • 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.
  • 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
  • Waterfall model doesnt 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
  • 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 - 700http://www.youtube.com/watch?v=U-PxHUdur9Q
  • Introduction A different design approachSketching the user experienceTodaySmart Tv, Web App, Mobile, Console, Responsive design
  • Amazon Kindle Fire HD - 150http://www.youtube.com/watch?v=ryYPduoGNjcIntroduction A different design approachSketching the user experience
  • A different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReviewResearch Concept
  • Research ConceptA different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReview
  • 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 changing theboundaries of designIntroduction
  • 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 not anymore a static template.Its a frame in an extended fluid experienceIntroduction
  • 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
  • From templates to the experienceSketching the user experienceThe responsive ageIntroduction
  • ConsistentSignatureContinuosTransferableShareableAugmentedContext UsersPatterns to help understand and define strategiesfor the multiscreen worldSketching the user experienceThe responsive ageIntroduction
  • Unified design language system acrossproducts & servicesSketching the user experienceThe responsive ageConsistentIntroduction
  • Sketching the user experienceThe responsive ageTailored unique brand experience that makes the productsdistinguishable with a consistent interaction modelSignatureIntroduction
  • ContinuosSynchronize your data, creating a continuosmultiscreen experienceSketching the user experienceThe responsive ageIntroduction
  • Enable content shifting across multiple devices,sharing screens or in case of simultaneous useSketching the user experienceThe responsive ageTransferableIntroduction
  • ShareableAllow multiple actors to have a simultaneousinteraction, or share and customize the same deviceThe responsive ageSketching the user experienceIntroduction
  • 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 needsmany iterations cycles for making it in focus
  • Introduction Visualizing the UXSketching the user experienceAnalyze problems & constrains. Refine ideas andexplore all the details to make it possibleExplore the details
  • Introduction Visualizing the UXSketching the user experienceVisualize & prototype your concept. Get the feel ofthe real impact in a physical wayFeel the experience
  • Paper prototypingInteractive wireframeMotion wireframeHTML DesignOur toolsHow we can sketch & prototypethe user experience?Introduction Visualizing the UXSketching the 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 Animated Prototypehttp://www.lukew.com/ff/entry.asp?1171
  • 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
  • HTML DesignIntroduction Visualizing the UXSketching the user experienceHigh fidelity / High interaction
  • 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 dening content & explain behavioursHateHard for user tesCngTo funcConal with lessexperience of the owThe good and the badLoveEmoConalHigh quality feedbackTesCng dynamic b