Sketching the user experience

14 %
86 %
Information about Sketching the user experience
Design

Published on June 24, 2013

Author: antoniodepasquale

Source: slideshare.net

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.

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!

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

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

Related pages

Sketching User Experiences: The Workbook: Amazon.de: Bill ...

Bill Buxton - Sketching User Experiences: The Workbook jetzt kaufen. ISBN: 9780123819598, Fremdsprachige Bücher - Industriedesign
Read more

Sketching User Experiences: The Workbook eBook: Saul ...

Sketching User Experiences: The Workbook eBook: Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton: Amazon.de: Kindle-Shop
Read more

Sketching User Experiences: The Workbook Buch portofrei ...

Bücher bei Weltbild: Jetzt Sketching User Experiences: The Workbook versandkostenfrei online kaufen bei Weltbild, Ihrem Bücher-Spezialisten!
Read more

Sketching User Experiences: Getting the Design Right and ...

Buy Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies) on Amazon.com FREE SHIPPING on qualified orders
Read more

Sketching User Experiences: Getting the Design Right and ...

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

Sketching User Experiences: The Workbook eBook by Saul ...

Lesen Sie Sketching User Experiences: The Workbook von Saul Greenberg mit Kobo. In Sketching User Experiences: The Workbook, you will learn, through step ...
Read more

Sketching User Experiences: Getting the ... - Bill Buxton

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

Sketching User Experiences: The Workbook by Bill Buxton ...

Sketching User Experiences has 198 ratings and 8 reviews. Amber said: Sketching Working Experience: The Workbook provides information about the step-by-s...
Read more

Sketching User Experiences: The Workbook: Saul Greenberg ...

Buy Sketching User Experiences: The Workbook on Amazon.com FREE SHIPPING on qualified orders
Read more

Sketching for User Experience | Design Workshop | General ...

About this workshop. Being responsible for imagining, designing, or communicating digital product ideas and user experiences is no easy feat. Learning how ...
Read more