Published on June 24, 2013
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!
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
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 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
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 - 700€http://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 - 150€http://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 deﬁning content & 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 & ﬂowExperience in contestHateSoHware knowledgeTime for building the prototypeLimiCng the design process
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 evaluating user interfaces but also for gettingfeedback as soon as possible and validating the interaction modelWhat is Rapid prototyping?Design prototype
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
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
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
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 audience, the stageof the project and also your personal skills?Sketching the user experienceThe right toolDesign prototype
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
What is relevant isCommunicateThats our jobThe right toolDesign prototypeSketching the user experience
FunctionalExperienceHTML/CodeAdobe edgeFireworksAGer eﬀectsKeynotePaper 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
Make it real3What would life be if we had nocourage to attempt anything?VINCENT VAN GOGH
Further readingSketching the user experienceSketching the user experienceSketching User Experiences: Getting the DesignRight and the Right DesignBill Buxton2007Designing interactionsBill Moggridge2007
Further readingSketching the user experienceSketching the user experiencePrototype toolsUX Culture Design Workflow WireframingResponsive design workﬂow on mulCple touchpointshttp://viljamis.com/blog/2012/responsive-workﬂow/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/
Thanks!Follow me on twitter @myinteractionto continue the discussion!
allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone
Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...
Bill Buxton - Sketching User Experiences: The Workbook jetzt kaufen. ISBN: 9780123819598, Fremdsprachige Bücher - Industriedesign
Sketching User Experiences: The Workbook eBook: Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton: Amazon.de: Kindle-Shop
Bücher bei Weltbild: Jetzt Sketching User Experiences: The Workbook versandkostenfrei online kaufen bei Weltbild, Ihrem Bücher-Spezialisten!
Buy Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies) on Amazon.com FREE SHIPPING on qualified orders
Sketching User Experiences has 1,381 ratings and 63 reviews. Danien said: The title suggests that this book would be about designing user experiences in ...
Lesen Sie Sketching User Experiences: The Workbook von Saul Greenberg mit Kobo. In Sketching User Experiences: The Workbook, you will learn, through step ...
About the Author Trained as a musician, Bill Buxton began using computers over thirty years ago in his art. This early experience, both in the studio an on ...
Sketching User Experiences has 198 ratings and 8 reviews. Amber said: Sketching Working Experience: The Workbook provides information about the step-by-s...
Buy Sketching User Experiences: The Workbook on Amazon.com FREE SHIPPING on qualified orders
About this workshop. Being responsible for imagining, designing, or communicating digital product ideas and user experiences is no easy feat. Learning how ...