DON’T MAKE MEDON T MAKE METHINKTHINK

Chapters 3 & 4Chapters 3 & 4

Presented by Brandi Hopkins

BILLBOARD DESIGN 101:DESIGNING PAGES FOR SCANNING NOTDESIGNING PAGES FOR SCANNING, NOTREADING

• Create a clear visual hierarchy on each page• Take advantage of conventions• Break pages up into clearly defined areasp g p y• Make it obvious what’s clickable• Minimize noise.

CREATE A CLEAR VISUAL HIERARCHY

Th i hi i h The more important something is, the more prominent it is.

Things that are related logically are also related Things that are related logically are also related visually.

Things are “nested” visually to show what’s part of what.

PROMINENCEPROMINENCEThis Works Doesn’t Work

Very Important This is really important

This Works Doesn t Work

y p

Less Important Doesn’t matter

Nowhere near as important OMG WHY AREN’T YOU READING THIS IT’S SUPER IMPORTANT

RE

LA

Related items

AT

ED

LO

G

Related items, such as navigation buttons are all together just as G

ICA

LL

Y

“practice areas” are separated from the rest.

Practice Areas –R

EL

AT

Practice Areas is also an example of nesting, where information is

l d i

TE

DV

ISU

placed in a subcategory that is obviously part of a larger, U

AL

LY

gbroader category.

CONVENTIONS ARE YOUR FRIENDS

Conventions of page p glayout help us read unfamiliar documents and scan more quickly.

Conventions are bright ideas that work bright ideas that work well and stick around.

Conventions give a sense of reassurance sense of reassurance to reader, but some designers are reluctant to use themreluctant to use them.

YE

TA

If you’re not going to use an existing web A

NO

TH

E

convention, you need to be sure that what you’re replacing it with either E

RST

INK

it with either (a) is so clear and self-explanatory that there’s no l i

KE

RO

Flearning curve, or (b) adds so much value that it’s worth a small learning A

NIN

NO

gcurve.

If you’re going to innovate, you O

VA

TIO

N

, yhave to understand the value of what you’re replacingN… replacing.

BR

EA

Dividing a page into A

KU

PP

A

p gclearly defined areas allows users to decide A

GE

SIN

TO

quickly which areas of the page to focus on and which O

CL

EA

R

areas they can safely ignore.R

LY

DE

FIN

Combining convention with rephrasing of N

ED

AR

E

rephrasing of conventional headers makes this site rock

EA

S site rock.

MAKE IT OBVIOUS WHAT’S CLICKABLEMAKE IT OBVIOUS WHAT S CLICKABLE

Clickable Clickable?Clickable Clickable?

SearchGO!

Search

Tweet This!

SEARCH here.com >

SearchSearch Search

SEARCH here.com

KEEP THE NOISE DOWN TO A DULL ROAR

Busy-ness—yEverything on the page is vying for your attention! OMG! Buy attention! OMG! Buy THIS now!

Background noise—No one noise is loud enough to be distracting on its own distracting on its own, but there is lots of noise distracting users.

ANIMAL, VEGETABLE, ORMINERAL?

Why users like mindless choices.

• “It doesn’t matter how many times I have to click, It doesn t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.” – Krug’s Second Law of Usability

“THREE MINDLESS, AMBIGUOUS CLICKS EQUALSONE CLICK THAT REQUIRES THOUGHT.” Much debate on wide

vs. deep site hierarchies.

How many clicks How many clicks before a user gets frustrated?

Keep choices simple Keep choices simple and straightforward.

Several mindless li k b h clicks are better than

one that requires a lot of thought.