Summer Web 2011

Prototyping UXSimplicity of Facts<SummerWeb /> ‘11Cristi Bârlãădeanu, on 3rd of June 2011

User ExperienceCristi Bârlãădeanu, <SummerWeb /> ’11

“A persons perceptions andresponses that result from theuse or anticipated use of aproduct, system or service.” ISO FDIS 9241-210:2009Cristi Bârlãădeanu, <SummerWeb /> ’11

Don’t jump to the solution beforeyou understand the problem.If I had one hour to save the world, Iwould spend the first 55 minutesdefining the problem. Albert EinsteinCristi Bârlãădeanu, <SummerWeb /> ’11

Make things simple, intuitive, takingthe context into consideration.Simplicity is powerful.Guide your users into taking simpledecisions, keeping them away fromdistractions.Cristi Bârlãădeanu, <SummerWeb /> ’11

Acknowledge that the user is not(necessarily) like you.Engage beginners and attractexperts. Designing for many peopledoesn‘t mean designing for thelowest common denominator. Google User Experience GuidelinesCristi Bârlãădeanu, <SummerWeb /> ’11

Jesse James GarrettCo-founder of Adaptive PathCo-founder of Information Architecture InstituteUser Experience DesignerCoined the term “AJAX”Authored The Elements of User Experience Design(diagram, book afterwards)Cristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramCristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsCristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsScope Specifications, Requirements, BriefsCristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsScope Specifications, Requirements, BriefsStructure Information Architecture, Interaction DesignCristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsScope Specifications, Requirements, BriefsStructure Information Architecture, Interaction DesignSkeleton Interface Design, Navigation DesignCristi Bârlãădeanu, <SummerWeb /> ’11

“Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsScope Specifications, Requirements, BriefsStructure Information Architecture, Interaction DesignSkeleton Interface Design, Navigation DesignSurface Visual/ Sensory DesignCristi Bârlãădeanu, <SummerWeb /> ’11

PrototypesCristi Bârlãădeanu, <SummerWeb /> ’11

“An original type, form, orinstance serving as a basis orstandard for later stages.” American Heritage DictionaryCristi Bârlãădeanu, <SummerWeb /> ’11

Why do we need them?Cristi Bârlãădeanu, <SummerWeb /> ’11

Text has limited expressivitywhen describing Human-ComputerInteraction.UX does not originate fromhundreds of pages of text.Cristi Bârlãădeanu, <SummerWeb /> ’11

Having extensive documents todescribe your concept can easilycause people not seeing the woodfor the trees.Consequences of needs andrequirements are not realized.Cristi Bârlãădeanu, <SummerWeb /> ’11

Helping visualizing ideas in front ofstakeholders from stage oneavoids premature decision making.Enables considering alternativeapproaches to the problem.Cristi Bârlãădeanu, <SummerWeb /> ’11

How to prototypeCristi Bârlãădeanu, <SummerWeb /> ’11

Characteristics of a good prototypeCristi Bârlãădeanu, <SummerWeb /> ’11

Characteristics of a good prototypeFast Time to build is criticalCristi Bârlãădeanu, <SummerWeb /> ’11

Characteristics of a good prototypeFast Time to build is criticalFocused Target essential aspectsCristi Bârlãădeanu, <SummerWeb /> ’11

Characteristics of a good prototypeFast Time to build is criticalFocused Target essential aspectsDisposable Be prepare to throw it awayCristi Bârlãădeanu, <SummerWeb /> ’11

Stages of prototypingDesign, Communicate, EvaluateIterate“Release early, release often.” Agile development mantraCristi Bârlãădeanu, <SummerWeb /> ’11

Common techniquesPaper prototyping Business origamiWireframes Structure as primaryHTML templates Basic user responseInteractive prototypes High fidelityCristi Bârlãădeanu, <SummerWeb /> ’11

Choose the fidelity wiselyVisual Sketch – StyledFunctional Static – InteractiveContent Lorem ipsum – Real contentCristi Bârlãădeanu, <SummerWeb /> ’11

Keep your eyes on the ball. Anyprototype should guide youthrough:VisionSketch-based visioningCollaboration with sketch-boardsDesign/ Implementation draftsCristi Bârlãădeanu, <SummerWeb /> ’11

“Double diamond” process modelDiscover Define Develop Deliver Design Council, 2005Cristi Bârlãădeanu, <SummerWeb /> ’11

Questions?Cristi Bârlãădeanu, <SummerWeb /> ’11

Thank you!cristi@unicity.rohttp://twitter.com/kristachehttp://facebook.com/cristi.barladeanuCristi Bârlãădeanu, <SummerWeb /> ’11

http://swapps.wordpress.com	256
url_unknown	4
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1

Summer Web 2011

by kristache on Jun 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 263

Statistics

Summer Web 2011 — Presentation Transcript