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

Tuesday, 13 September 11

What’s a mockup?

Tuesday, 13 September 11

What’s a mockup?

Invest

ment

Time

Napkin

Whiteboard

Wireframes

PhotoshopHTML Prototypes

Paper Prototypes

Code

Tuesday, 13 September 11

The 6 Stages of Mockupitis

Tuesday, 13 September 11

Early-Stage Mockupitis

Stages 1-3 : Scale Sydrome

Stretch Fever

Textorrhea

Multirrhoids

Tuesday, 13 September 11

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.

Tuesday, 13 September 11

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.

Tuesday, 13 September 11

MultirrhoidsMockupitis: Stage 3

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

Tuesday, 13 September 11

Mockupitis: Stage 1

Tuesday, 13 September 11

Mockupitis: Stage 1

Stretch Fever? Textorrhea? Multirrhoids?

Tuesday, 13 September 11

Tuesday, 13 September 11

Tuesday, 13 September 11

Mockupitis: Stage 1

Know your users

Create stable areas

Maximum widths

Stretch Fever

Understand flow

Tuesday, 13 September 11

Truncation Strategy

Enforce maximum length

Understand extremes

Mockupitis: Stage 2

Textorrhea

Tuesday, 13 September 11

Understand Extremes

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

Mockupitis: Stage 3

Multirrhoids

Are you a nanny GUI?

Tuesday, 13 September 11

Gestalt Design Continuation

Closure

Alignment

Proximity

Similarity

Tuesday, 13 September 11

Tuesday, 13 September 11

Mid-stage Mockupitis

“The Social Disease”

ConsistentosisLorem Ipsum

Tuesday, 13 September 11

ConsistentosisMockupitis: Stage 4

A A A

X Q W

ORThe patient’s content has lost its internal consistency.

Tuesday, 13 September 11

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.

Tuesday, 13 September 11

Tuesday, 13 September 11

Mockupitis: Stage 3

Consistentosis

Stick with a narrative

Follow the bouncing ball

Tuesday, 13 September 11

Get as real as you can

Mockupitis: Stage 3

Lorem Ipsum

Respect your audience

Tuesday, 13 September 11

ixda.org/node/30529

Realsitic (sic) Data in Wireframes/Prototypes/Mockups

Tuesday, 13 September 11

Advanced Mockupitis

Tuesday, 13 September 11

Advanced Mockupitis

Tuesday, 13 September 11

Mockupitis: Stage 6

Patternopathy

The patient has the wrong skeletal structure.

Tuesday, 13 September 11

Object A

Object B

Object C

Tuesday, 13 September 11

Object A

Object B

Object C

Tuesday, 13 September 11

Option A

Option B1

Option B2

Tuesday, 13 September 11

Option AOption B

Option B1Option B2

Tuesday, 13 September 11

Option AOption BOption C

Tuesday, 13 September 11

Map the logic

Mockupitis: Stage 6

Occam’s Razor

Patternopathy

Innovate and Test

Tuesday, 13 September 11

Tuesday, 13 September 11

Tuesday, 13 September 11

Tuesday, 13 September 11

ToolsTuesday, 13 September 11

Learn

ing Cu

rve

Interactivity

IllustratorOmniGraffleVisio

GliffyBalsamiq

MockFlowMockingbird

Static Links States Data

HotglooAxure

JustinMind

Fireworks

Tuesday, 13 September 11

Learn

ing Cu

rve

Interactivity

IllustratorOmniGraffleVisio

GliffyBalsamiq

MockFlowMockingbird

Static Links States Data

HotglooAxure

JustinMind

Fireworks

HTML

Tuesday, 13 September 11

Stretch FeverTextorrheaMultirrhoids

ConsistentosisLorem Ipsum

Patternopathy

Tuesday, 13 September 11

Tuesday, 13 September 11

The EndTuesday, 13 September 11

Resources

Prototyping

How Buildings Learn

Sketching User Experiences

Tuesday, 13 September 11

Resources

IXD11Tim Wood “Scandalous Interaction”

UX Australia 2010Todd Zaki Warfel “Under the Kimono”

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

Tuesday, 13 September 11

6:15 - Agile/UX Hootenanny at Atlassian HQ

Tuesday, 13 September 11

Thank you.

jbrogersmockupitis

Tuesday, 13 September 11

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

H.P. Lovecraft Historical Societywww.cthulhulives.org

Tuesday, 13 September 11