Sketching the user experience

Download Sketching the user experience

Post on 17-Aug-2014

27.927 views

Category:

Design

6 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

<ul><li> Sketchingthe UX ExperienceAntonio De PasqualeSenior Interaction Designer at frog@myinteraction </li> <li> My name is Antonio De PasqualeIm a Senior Interaction Designer at frog MilanA little about meIm specialized in digital interfaces &amp; user experienceIm passioned about the "aesthetics" of movementIm from Sicily and I love the sea.@myinteraction </li> <li> Interaction Vs VisualConceptDesign researchBenchmarkWireframeInformation architectureUser RequirementsUser testingUser experience flowMotion prototypePrototype...ConceptVisual researchMoodboardGrid designIconographyTypographyUI ElementsScreen designMotion designPrototype...Most people think like this </li> <li> Interaction &amp; VisualIn reality is like this </li> <li> Sketchingthe UX ExperienceIntroductionA different design approachThe responsive ageVisualizing the UXDesign prototypeLevels of fidelityThe right toolMake it real! </li> <li> INTRODUCTION </li> <li> 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 </li> <li> 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. </li> <li> 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 </li> <li> 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 </li> <li> YesterdayDesktop app, fixed grid, mobile interfacesIntroduction A different design approachSketching the user experience </li> <li> 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 </li> <li> Introduction A different design approachSketching the user experienceTodaySmart Tv, Web App, Mobile, Console, Responsive design </li> <li> Amazon Kindle Fire HD - 150http://www.youtube.com/watch?v=ryYPduoGNjcIntroduction A different design approachSketching the user experience </li> <li> A different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReviewResearch Concept </li> <li> Research ConceptA different design workflowThings are changing.We need to evolve the processIntroduction A different design approachSketching the user experienceWireframe VisualDevelopUser testPrototypeSketchReview </li> <li> The responsive age2Form follows functionDIETER RAMS </li> <li> The responsive ageSketching the user experienceIntroduction </li> <li> The responsive ageSketching the user experienceWhat is the shape of digital experiences?The evolution of technology is changing theboundaries of designIntroduction </li> <li> Clear, iphone &amp; Mac apphttps://vimeo.com/51690799VideoIntroductionSketching the user experienceThe responsive age </li> <li> 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 </li> <li> 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 &amp; resolutionsOur job now is to create future friendly design ecosystemsIntroduction </li> <li> From templates to the experienceSketching the user experienceThe responsive ageIntroduction </li> <li> ConsistentSignatureContinuosTransferableShareableAugmentedContext UsersPatterns to help understand and define strategiesfor the multiscreen worldSketching the user experienceThe responsive ageIntroduction </li> <li> Unified design language system acrossproducts &amp; servicesSketching the user experienceThe responsive ageConsistentIntroduction </li> <li> Sketching the user experienceThe responsive ageTailored unique brand experience that makes the productsdistinguishable with a consistent interaction modelSignatureIntroduction </li> <li> ContinuosSynchronize your data, creating a continuosmultiscreen experienceSketching the user experienceThe responsive ageIntroduction </li> <li> Enable content shifting across multiple devices,sharing screens or in case of simultaneous useSketching the user experienceThe responsive ageTransferableIntroduction </li> <li> ShareableAllow multiple actors to have a simultaneousinteraction, or share and customize the same deviceThe responsive ageSketching the user experienceIntroduction </li> <li> AugmentedPhysical interactions go far beyond thedigital screensThe responsive ageSketching the user experienceIntroduction </li> <li> Visualizing the UX3We like design to be visually powerful,intellectually elegant, and above all timeless.MASSIMO VIGNELLI </li> <li> Introduction Visualizing the UXSketching the user experienceSetting a visionShaping an idea is a continuous process that needsmany iterations cycles for making it in focus </li> <li> Introduction Visualizing the UXSketching the user experienceAnalyze problems &amp; constrains. Refine ideas andexplore all the details to make it possibleExplore the details </li> <li> Introduction Visualizing the UXSketching the user experienceVisualize &amp; prototype your concept. Get the feel ofthe real impact in a physical wayFeel the experience </li> <li> Paper prototypingInteractive wireframeMotion wireframeHTML DesignOur toolsHow we can sketch &amp; prototypethe user experience?Introduction Visualizing the UXSketching the user experience </li> <li> Introduction Visualizing the UXSketching the user experienceLow fidelity / No interactive </li> <li> Paper prototypingIntroduction Visualizing the UXSketching the user experienceLow fidelity / Low interaction </li> <li> Introduction Visualizing the UXSketching the user experience </li> <li> Introduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionInteractive wireframes </li> <li> Interactive wireframesIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Medium interaction </li> <li> Motion prototypeIntroduction Visualizing the UXSketching the user experienceMedium fidelity / Low interactionKeynote Animated Prototypehttp://www.lukew.com/ff/entry.asp?1171 </li> <li> 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 </li> <li> HTML DesignIntroduction Visualizing the UXSketching the user experienceHigh fidelity / High interaction </li> <li> 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 &amp; explain behavioursHateHard for user tesCngTo funcConal with lessexperience of the owThe good and the badLoveEmoConalHigh quality feedbackTesCng dynamic behavioursHateTime to build themSoHware knowledgeWork beJer in an advanced stateLoveTest interacCvityPerfect for tesCng process &amp; owExperience in contestHateSoHware knowledgeTime for building the prototypeLimiCng the design process </li> <li> DESIGN PROTOTYPE </li> <li> Levels of fidelity1Its the little details that are vital.Little things make big things happen.COACH JOHN WOODEN </li> <li> 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 </li> <li> 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 </li> <li> 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 </li> <li> 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 </li> <li> The right tool2Give me a lever andI can move the world.ARCHIMEDE DI SIRACUSA </li> <li> 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 </li> <li> Short cycleLong &amp;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 </li> <li> What is relevant isCommunicateThats our jobThe right toolDesign prototypeSketching the user experience </li> <li> FunctionalExperienceHTML/CodeAdobe edgeFireworksAGer eectsKeynotePaper prototype Proto UIInteracNve pdfThe right tool is the one that helps youin communicate your conceptWe need to explain complex problems &amp; 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 </li> <li> Make it real3What would life be if we had nocourage to attempt anything?VINCENT VAN GOGH </li> <li> FURTHER READING </li> <li> Further readingSketching the user experienceSketching the user experienceSketching User Experiences: Getting the DesignRight and the Right DesignBill Buxton2007Designing interactionsBill Moggridge2007 </li> <li> Further readingSketching the user experienceSketching the user experiencePrototype toolsUX Culture Design Workflow WireframingResponsive design workow on mulCple touchpointshttp://viljamis.com/blog/2012/responsive-workow/Reference &amp; 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 &amp; fasterwith rapid prototypinghttp://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/Proto.io http://proto.io/Paper stencil &amp; prototype http://www.uistencils.com/ </li> <li> Thanks!Follow me on twitter @myinteractionto continue the discussion! </li> </ul>