Avoid Mockupitis

1,800 views

Published on

This presentation was given on 25 August at UX Australia 2011.

Published in: Design, Economy & Finance
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,800
On SlideShare
0
From Embeds
0
Number of Embeds
294
Actions
Shares
0
Downloads
23
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

Avoid Mockupitis

  1. 1. Avoid Mockupitis messy what’s this stu here? jay, i like what you’re doing here but it needs work jbrogersTuesday, 13 September 11
  2. 2. Avoid Mockupitis messy what’s this stu here? jay, i like what you’re doing here but it needs work jbrogersTuesday, 13 September 11
  3. 3. Thank you.Tuesday, 13 September 11
  4. 4. Tuesday, 13 September 11
  5. 5. What’s a mockup?Tuesday, 13 September 11
  6. 6. Code HTML Prototypes Investment Photoshop Wireframes Whiteboard Napkin Paper Prototypes Time What’s a mockup?Tuesday, 13 September 11
  7. 7. The 6 Stages of MockupitisTuesday, 13 September 11
  8. 8. Early-Stage Mockupitis Textorrhea Multirrhoids Stretch Fever Stages 1-3 : Scale SydromeTuesday, 13 September 11
  9. 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. 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. 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. 12. Mockupitis: Stage 1Tuesday, 13 September 11
  13. 13. Mockupitis: Stage 1 Stretch Fever? Textorrhea? Multirrhoids?Tuesday, 13 September 11
  14. 14. Tuesday, 13 September 11
  15. 15. Tuesday, 13 September 11
  16. 16. Mockupitis: Stage 1 Stretch Fever Know your users Create stable areas Maximum widths Understand flowTuesday, 13 September 11
  17. 17. Mockupitis: Stage 2 Textorrhea Truncation Strategy Enforce maximum length Understand extremesTuesday, 13 September 11
  18. 18. Mockupitis: Stage 3 Multirrhoids Understand Extremes (...but don’t fear them!) Are you a nanny GUI?Tuesday, 13 September 11
  19. 19. Gestalt Design Continuation Closure Alignment Proximity SimilarityTuesday, 13 September 11
  20. 20. Tuesday, 13 September 11
  21. 21. Mid-stage Mockupitis Lorem Ipsum Consistentosis “The Social Disease”Tuesday, 13 September 11
  22. 22. Mockupitis: Stage 4 Consistentosis A A A The patient’s content has OR lost its internal consistency. X Q WTuesday, 13 September 11
  23. 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 deseruntTuesday, 13 September 11
  24. 24. Tuesday, 13 September 11
  25. 25. Mockupitis: Stage 3 Consistentosis Stick with a narrative Follow the bouncing ballTuesday, 13 September 11
  26. 26. Mockupitis: Stage 3 Lorem Ipsum Get as real as you can Respect your audienceTuesday, 13 September 11
  27. 27. Realsitic (sic) Data in Wireframes/ Prototypes/Mockups ixda.org/node/30529Tuesday, 13 September 11
  28. 28. Advanced MockupitisTuesday, 13 September 11
  29. 29. Advanced MockupitisTuesday, 13 September 11
  30. 30. Mockupitis: Stage 6 Patternopathy The patient has the wrong skeletal structure.Tuesday, 13 September 11
  31. 31. Object A Object C Object BTuesday, 13 September 11
  32. 32. Object A Object B Object CTuesday, 13 September 11
  33. 33. Option A Option B1 Option B2Tuesday, 13 September 11
  34. 34. Option A Option B Option B1 Option B2Tuesday, 13 September 11
  35. 35. Option A Option B Option CTuesday, 13 September 11
  36. 36. Mockupitis: Stage 6 Patternopathy Map the logic Occam’s Razor Innovate and TestTuesday, 13 September 11
  37. 37. Tuesday, 13 September 11
  38. 38. Tuesday, 13 September 11
  39. 39. Tuesday, 13 September 11
  40. 40. ToolsTuesday, 13 September 11
  41. 41. Illustrator OmniGraffle JustinMind Axure Learning Curve Visio Fireworks Hotgloo Balsamiq Gliffy MockFlow Mockingbird Interactivity Static Links States DataTuesday, 13 September 11
  42. 42. Illustrator OmniGraffle JustinMind Axure Learning Curve Visio Fireworks Hotgloo Balsamiq Gliffy MockFlow HTML Mockingbird Interactivity Static Links States DataTuesday, 13 September 11
  43. 43. Stretch Fever Textorrhea Multirrhoids Consistentosis Lorem Ipsum PatternopathyTuesday, 13 September 11
  44. 44. Tuesday, 13 September 11
  45. 45. The EndTuesday, 13 September 11
  46. 46. Resources Prototyping How Buildings Learn Sketching User ExperiencesTuesday, 13 September 11
  47. 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. 48. 6:15 - Agile/UX Hootenanny at Atlassian HQTuesday, 13 September 11
  49. 49. Thank you. jbrogers mockupitisTuesday, 13 September 11
  50. 50. This font was scanned from 1920’s newspaper headlines by the H.P. Lovecraft Historical Society www.cthulhulives.orgTuesday, 13 September 11

×