• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sketching the user experience
 

Sketching the user experience

on

  • 27,601 views

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 ...

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.

Statistics

Views

Total Views
27,601
Views on SlideShare
22,796
Embed Views
4,805

Actions

Likes
91
Downloads
481
Comments
1

30 Embeds 4,805

http://campus.khipu.net 2764
http://www.iphone-entreprise.com 1396
http://digitalrhythm.com.au 260
http://dizart.fr 135
https://twitter.com 57
https://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 29
http://www.linkedin.com 26
http://www.scoop.it 22
http://digitalrhythm.wordpress.com 19
http://b2bmarketingplan.tumblr.com 17
http://gmailany.blogspot.it 11
https://www.linkedin.com 9
http://www.google.com 6
http://www.pinterest.com 6
http://ejemplomedicinacuartoc.blogspot.com 5
http://cloud.feedly.com 5
http://www.weebly.com 5
http://gmailany.blogspot.com 4
http://ejemplovalentina.blogspot.com 4
http://re-publica.de 4
http://myli2627.blogspot.com 4
http://ejemploportafolioinformatica.blogspot.com 3
http://pinterest.com 3
http://www.pulse.me 2
http://webranding.org 2
http://intra.newriver.co.kr 2
http://www.cotexcosac.com 2
http://www.tumblr.com 1
http://www.tcdigital.co.uk 1
http://www.blogger.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Form follows function was first coined by Louis Sulllivan in his article article The Tall Office Building Artistically Considered in 1896 .
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sketching the user experience Sketching the user experience Presentation 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  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  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
    • 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 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  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
    • 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 DesignRight and the Right DesignBill Buxton2007Designing interactionsBill Moggridge2007
    • 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/
    • Thanks!Follow me on twitter @myinteractionto continue the discussion!