This document discusses different stages of "mockupitis", a condition where mockups do not accurately represent the final product. It identifies six stages: stretch fever, textorrhea, multirrhoids, consistentosis, lorem ipsum, and patternopathy. Each stage is defined and recommendations are provided to address the issues. The document also discusses tools for creating mockups and prototypes and emphasizes the importance of testing mockups against real data and user needs.

1. Avoid Mockupitis
messy
what’s this
stu here?
jay, i like what
you’re doing here
but it needs work
jbrogers
Tuesday, 13 September 11

2. Avoid Mockupitis
messy
what’s this
stu here?
jay, i like what
you’re doing here
but it needs work
jbrogers
Tuesday, 13 September 11

3. Thank you.
Tuesday, 13 September 11

4. Tuesday, 13 September 11

5. What’s a mockup?
Tuesday, 13 September 11

6. Code
HTML Prototypes
Investment
Photoshop
Wireframes
Whiteboard
Napkin
Paper Prototypes
Time
What’s a mockup?
Tuesday, 13 September 11

7. The 6 Stages of Mockupitis
Tuesday, 13 September 11

8. Early-Stage Mockupitis
Textorrhea
Multirrhoids
Stretch Fever
Stages 1-3 : Scale Sydrome
Tuesday, 13 September 11

9. Mockupitis: Stage 1
Stretch Fever
The patient exhibits layout
assumptions that won’t
survive contact with HTML
flow and changes in aspect
ratio or display resolution.
Tuesday, 13 September 11

10. Mockupitis: Stage 2
Textorrhea
The patient exhibits
unexpected variations in
If the text don’t fit, text length that break
you can’t commit the layout or reduce
comprehension.
Tuesday, 13 September 11

11. Mockupitis: Stage 3
Multirrhoids
The patient presents
controls that are
inappropriate or unwieldy
for the number of objects
they contain.
Tuesday, 13 September 11

12. Mockupitis: Stage 1
Tuesday, 13 September 11

13. Mockupitis: Stage 1
Stretch Fever? Textorrhea? Multirrhoids?
Tuesday, 13 September 11

14. Tuesday, 13 September 11

15. Tuesday, 13 September 11

16. Mockupitis: Stage 1
Stretch Fever
Know your users
Create stable areas
Maximum widths
Understand flow
Tuesday, 13 September 11

17. Mockupitis: Stage 2
Textorrhea
Truncation Strategy
Enforce maximum length
Understand extremes
Tuesday, 13 September 11

18. Mockupitis: Stage 3
Multirrhoids
Understand Extremes
(...but don’t fear them!)
Are you a nanny GUI?
Tuesday, 13 September 11

19. Gestalt Design Continuation
Closure
Alignment
Proximity
Similarity
Tuesday, 13 September 11

20. Tuesday, 13 September 11

21. Mid-stage Mockupitis
Lorem Ipsum
Consistentosis
“The Social Disease”
Tuesday, 13 September 11

22. Mockupitis: Stage 4
Consistentosis
A A A
The patient’s content has
OR lost its internal consistency.
X Q W
Tuesday, 13 September 11

23. Mockupitis: Stage 5
Lorem Ipsum
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis
nostrud exercitation ullamco laboris
The patient is speaking a
nisi ut aliquip ex ea commodo
consequat Duis aute irure dolor in
dead language.
reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat
cupidatat, sunt in culpa deserunt
Tuesday, 13 September 11

24. Tuesday, 13 September 11

25. Mockupitis: Stage 3
Consistentosis
Stick with a narrative
Follow the bouncing ball
Tuesday, 13 September 11

26. Mockupitis: Stage 3
Lorem Ipsum
Get as real as you can
Respect your audience
Tuesday, 13 September 11

27. Realsitic (sic) Data in Wireframes/
Prototypes/Mockups
ixda.org/node/30529
Tuesday, 13 September 11

28. Advanced Mockupitis
Tuesday, 13 September 11

29. Advanced Mockupitis
Tuesday, 13 September 11

30. Mockupitis: Stage 6
Patternopathy
The patient has the wrong
skeletal structure.
Tuesday, 13 September 11

31. Object A Object C
Object B
Tuesday, 13 September 11

32. Object A
Object B
Object C
Tuesday, 13 September 11

33. Option A
Option B1
Option B2
Tuesday, 13 September 11

34. Option A
Option B
Option B1
Option B2
Tuesday, 13 September 11

35. Option A
Option B
Option C
Tuesday, 13 September 11

36. Mockupitis: Stage 6
Patternopathy
Map the logic
Occam’s Razor
Innovate and Test
Tuesday, 13 September 11

37. Tuesday, 13 September 11

38. Tuesday, 13 September 11

39. Tuesday, 13 September 11

40. Tools
Tuesday, 13 September 11

41. Illustrator
OmniGraffle JustinMind
Axure
Learning Curve
Visio Fireworks Hotgloo
Balsamiq
Gliffy
MockFlow
Mockingbird
Interactivity
Static Links States Data
Tuesday, 13 September 11

42. Illustrator
OmniGraffle JustinMind
Axure
Learning Curve
Visio Fireworks Hotgloo
Balsamiq
Gliffy
MockFlow
HTML
Mockingbird
Interactivity
Static Links States Data
Tuesday, 13 September 11

43. Stretch Fever
Textorrhea
Multirrhoids
Consistentosis
Lorem Ipsum
Patternopathy
Tuesday, 13 September 11

44. Tuesday, 13 September 11

45. The End
Tuesday, 13 September 11

46. Resources
Prototyping
How Buildings Learn
Sketching User Experiences
Tuesday, 13 September 11

47. Resources
IXD11
Tim Wood “Scandalous Interaction”
UX Australia 2010
Todd Zaki Warfel “Under the Kimono”
UX Australia 2010
Anthony Quinn “The Secret Life of Deliverables”
Tuesday, 13 September 11

48. 6:15 - Agile/UX Hootenanny at Atlassian HQ
Tuesday, 13 September 11

49. Thank you.
jbrogers
mockupitis
Tuesday, 13 September 11

50. This font was scanned from 1920’s
newspaper headlines by the
H.P. Lovecraft Historical Society
www.cthulhulives.org
Tuesday, 13 September 11