Avoid Mockupitis

what’s this stu! here?

messy

jay, i like whatyou’re doing herebut it needs work

Avoid Mockupitis

jbrogersTuesday, 13 September 11

what’s this stu! here?

messy

jay, i like whatyou’re doing herebut it needs work

Avoid Mockupitis

jbrogersTuesday, 13 September 11

Thank you.

Tuesday, 13 September 11


What’s a mockup?


What’s a mockup?

Invest

ment

Time

Napkin

Whiteboard

Wireframes

PhotoshopHTML Prototypes

Paper Prototypes

Code


The 6 Stages of Mockupitis


Early-Stage Mockupitis

Stages 1-3 : Scale Sydrome

Stretch Fever

Textorrhea

Multirrhoids


Stretch FeverMockupitis: Stage 1

The patient exhibits layout assumptions that won’t survive contact with HTML flow and changes in aspect ratio or display resolution.


Textorrhea

If the text don’t fit, you can’t commit

Mockupitis: Stage 2

The patient exhibits unexpected variations in text length that break the layout or reduce comprehension.


MultirrhoidsMockupitis: Stage 3

The patient presents controls that are inappropriate or unwieldy for the number of objects they contain.


Mockupitis: Stage 1


Mockupitis: Stage 1

Stretch Fever? Textorrhea? Multirrhoids?




Mockupitis: Stage 1

Know your users

Create stable areas

Maximum widths

Stretch Fever

Understand flow


Truncation Strategy

Enforce maximum length

Understand extremes

Mockupitis: Stage 2

Textorrhea


Understand Extremes

(...but don’t fear them!)

Mockupitis: Stage 3

Multirrhoids

Are you a nanny GUI?


Gestalt Design Continuation

Closure

Alignment

Proximity

Similarity



Mid-stage Mockupitis

“The Social Disease”

ConsistentosisLorem Ipsum


ConsistentosisMockupitis: Stage 4

A A A

X Q W

ORThe patient’s content has lost its internal consistency.


Mockupitis: Stage 5

Lorem IpsumLorem 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 nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat, sunt in culpa deserunt

The patient is speaking a dead language.



Mockupitis: Stage 3

Consistentosis

Stick with a narrative

Follow the bouncing ball


Get as real as you can

Mockupitis: Stage 3

Lorem Ipsum

Respect your audience


ixda.org/node/30529

Realsitic (sic) Data in Wireframes/Prototypes/Mockups


Advanced Mockupitis


Advanced Mockupitis


Mockupitis: Stage 6

Patternopathy

The patient has the wrong skeletal structure.


Object A

Object B

Object C


Object A

Object B

Object C


Option A

Option B1

Option B2


Option AOption B

Option B1Option B2


Option AOption BOption C


Map the logic

Mockupitis: Stage 6

Occam’s Razor

Patternopathy

Innovate and Test





ToolsTuesday, 13 September 11

Learn

ing Cu

rve

Interactivity

IllustratorOmniGraffleVisio

GliffyBalsamiq

MockFlowMockingbird

Static Links States Data

HotglooAxure

JustinMind

Fireworks


Learn

ing Cu

rve

Interactivity

IllustratorOmniGraffleVisio

GliffyBalsamiq

MockFlowMockingbird

Static Links States Data

HotglooAxure

JustinMind

Fireworks

HTML


Stretch FeverTextorrheaMultirrhoids

ConsistentosisLorem Ipsum

Patternopathy



The EndTuesday, 13 September 11

Resources

Prototyping

How Buildings Learn

Sketching User Experiences


Resources

IXD11Tim Wood “Scandalous Interaction”

UX Australia 2010Todd Zaki Warfel “Under the Kimono”

UX Australia 2010Anthony Quinn “The Secret Life of Deliverables”


6:15 - Agile/UX Hootenanny at Atlassian HQ


Thank you.

jbrogersmockupitis


This font was scanned from 1920’s newspaper headlines by the

H.P. Lovecraft Historical Societywww.cthulhulives.org


http://www.cthulhulives.org

http://www.cthulhulives.org