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

2. User Experience
Cristi Bârlãădeanu, <SummerWeb /> ’11

3. “A person's perceptions and
responses that result from the
use or anticipated use of a
product, system or service.”
ISO FDIS 9241-210:2009
Cristi Bârlãădeanu, <SummerWeb /> ’11

4. Don’t jump to the solution before
you understand the problem.
If I had one hour to save the world, I
would spend the first 55 minutes
defining the problem.
Albert Einstein
Cristi Bârlãădeanu, <SummerWeb /> ’11

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

6. Acknowledge that the user is not
(necessarily) like you.
Engage beginners and attract
experts. Designing for many people
doesn‘t mean designing for the
lowest common denominator.
Google User Experience Guidelines
Cristi Bârlãădeanu, <SummerWeb /> ’11

7. Jesse James Garrett
Co-founder of Adaptive Path
Co-founder of Information Architecture Institute
User Experience Designer
Coined the term “AJAX”
Authored The Elements of User Experience Design
(diagram, book afterwards)
Cristi Bârlãădeanu, <SummerWeb /> ’11

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

9. “Five planes” model of UX – 5S diagram
Strategy Creator’s objective, Audience needs
Cristi Bârlãădeanu, <SummerWeb /> ’11

10. “Five planes” model of UX – 5S diagram
Strategy Creator’s objective, Audience needs
Scope Specifications, Requirements, Briefs
Cristi Bârlãădeanu, <SummerWeb /> ’11

11. “Five planes” model of UX – 5S diagram
Strategy Creator’s objective, Audience needs
Scope Specifications, Requirements, Briefs
Structure Information Architecture, Interaction Design
Cristi Bârlãădeanu, <SummerWeb /> ’11

12. “Five planes” model of UX – 5S diagram
Strategy Creator’s objective, Audience needs
Scope Specifications, Requirements, Briefs
Structure Information Architecture, Interaction Design
Skeleton Interface Design, Navigation Design
Cristi Bârlãădeanu, <SummerWeb /> ’11

13. “Five planes” model of UX – 5S diagram
Strategy Creator’s objective, Audience needs
Scope Specifications, Requirements, Briefs
Structure Information Architecture, Interaction Design
Skeleton Interface Design, Navigation Design
Surface Visual/ Sensory Design
Cristi Bârlãădeanu, <SummerWeb /> ’11

14. Prototypes
Cristi Bârlãădeanu, <SummerWeb /> ’11

15. “An original type, form, or
instance serving as a basis or
standard for later stages.”
American Heritage Dictionary
Cristi Bârlãădeanu, <SummerWeb /> ’11

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

17. Text has limited expressivity
when describing Human-Computer
Interaction.
UX does not originate from
hundreds of pages of text.
Cristi Bârlãădeanu, <SummerWeb /> ’11

18. Having extensive documents to
describe your concept can easily
cause people not seeing the wood
for the trees.
Consequences of needs and
requirements are not realized.
Cristi Bârlãădeanu, <SummerWeb /> ’11

19. Helping visualizing ideas in front of
stakeholders from stage one
avoids premature decision making.
Enables considering alternative
approaches to the problem.
Cristi Bârlãădeanu, <SummerWeb /> ’11

20. How to prototype
Cristi Bârlãădeanu, <SummerWeb /> ’11

21. Characteristics of a good prototype
Cristi Bârlãădeanu, <SummerWeb /> ’11

22. Characteristics of a good prototype
Fast Time to build is critical
Cristi Bârlãădeanu, <SummerWeb /> ’11

23. Characteristics of a good prototype
Fast Time to build is critical
Focused Target essential aspects
Cristi Bârlãădeanu, <SummerWeb /> ’11

24. Characteristics of a good prototype
Fast Time to build is critical
Focused Target essential aspects
Disposable Be prepare to throw it away
Cristi Bârlãădeanu, <SummerWeb /> ’11

25. Stages of prototyping
Design, Communicate, Evaluate
Iterate
“Release early, release often.”
Agile development mantra
Cristi Bârlãădeanu, <SummerWeb /> ’11

26. Common techniques
Paper prototyping Business origami
Wireframes Structure as primary
HTML templates Basic user response
Interactive prototypes High fidelity
Cristi Bârlãădeanu, <SummerWeb /> ’11

27. Choose the fidelity wisely
Visual Sketch – Styled
Functional Static – Interactive
Content Lorem ipsum – Real content
Cristi Bârlãădeanu, <SummerWeb /> ’11

28. Keep your eyes on the ball. Any
prototype should guide you
through:
Vision
Sketch-based visioning
Collaboration with sketch-boards
Design/ Implementation drafts
Cristi Bârlãădeanu, <SummerWeb /> ’11

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

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

31. Thank you!
cristi@unicity.ro
http://twitter.com/kristache
http://facebook.com/cristi.barladeanu
Cristi Bârlãădeanu, <SummerWeb /> ’11