Summer Web 2011

1,493 views

Published on

Published in: Spiritual, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,493
On SlideShare
0
From Embeds
0
Number of Embeds
587
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Summer Web 2011

  1. 1. Prototyping UXSimplicity of Facts<SummerWeb /> ‘11Cristi Bârlãădeanu, on 3rd of June 2011
  2. 2. User ExperienceCristi Bârlãădeanu, <SummerWeb /> ’11
  3. 3. “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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. “Five planes” model of UX – 5S diagramCristi Bârlãădeanu, <SummerWeb /> ’11
  9. 9. “Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsCristi Bârlãădeanu, <SummerWeb /> ’11
  10. 10. “Five planes” model of UX – 5S diagramStrategy Creator’s objective, Audience needsScope Specifications, Requirements, BriefsCristi Bârlãădeanu, <SummerWeb /> ’11
  11. 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
  12. 12. “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
  13. 13. “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
  14. 14. PrototypesCristi Bârlãădeanu, <SummerWeb /> ’11
  15. 15. “An original type, form, orinstance serving as a basis orstandard for later stages.” American Heritage DictionaryCristi Bârlãădeanu, <SummerWeb /> ’11
  16. 16. Why do we need them?Cristi Bârlãădeanu, <SummerWeb /> ’11
  17. 17. Text has limited expressivitywhen describing Human-ComputerInteraction.UX does not originate fromhundreds of pages of text.Cristi Bârlãădeanu, <SummerWeb /> ’11
  18. 18. 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
  19. 19. Helping visualizing ideas in front ofstakeholders from stage oneavoids premature decision making.Enables considering alternativeapproaches to the problem.Cristi Bârlãădeanu, <SummerWeb /> ’11
  20. 20. How to prototypeCristi Bârlãădeanu, <SummerWeb /> ’11
  21. 21. Characteristics of a good prototypeCristi Bârlãădeanu, <SummerWeb /> ’11
  22. 22. Characteristics of a good prototypeFast Time to build is criticalCristi Bârlãădeanu, <SummerWeb /> ’11
  23. 23. Characteristics of a good prototypeFast Time to build is criticalFocused Target essential aspectsCristi Bârlãădeanu, <SummerWeb /> ’11
  24. 24. Characteristics of a good prototypeFast Time to build is criticalFocused Target essential aspectsDisposable Be prepare to throw it awayCristi Bârlãădeanu, <SummerWeb /> ’11
  25. 25. Stages of prototypingDesign, Communicate, EvaluateIterate“Release early, release often.” Agile development mantraCristi Bârlãădeanu, <SummerWeb /> ’11
  26. 26. Common techniquesPaper prototyping Business origamiWireframes Structure as primaryHTML templates Basic user responseInteractive prototypes High fidelityCristi Bârlãădeanu, <SummerWeb /> ’11
  27. 27. Choose the fidelity wiselyVisual Sketch – StyledFunctional Static – InteractiveContent Lorem ipsum – Real contentCristi Bârlãădeanu, <SummerWeb /> ’11
  28. 28. Keep your eyes on the ball. Anyprototype should guide youthrough:VisionSketch-based visioningCollaboration with sketch-boardsDesign/ Implementation draftsCristi Bârlãădeanu, <SummerWeb /> ’11
  29. 29. “Double diamond” process modelDiscover Define Develop Deliver Design Council, 2005Cristi Bârlãădeanu, <SummerWeb /> ’11
  30. 30. Questions?Cristi Bârlãădeanu, <SummerWeb /> ’11
  31. 31. Thank you!cristi@unicity.rohttp://twitter.com/kristachehttp://facebook.com/cristi.barladeanuCristi Bârlãădeanu, <SummerWeb /> ’11

×