breaking instincts: common web design bad habits

2009

Breaking InstinctsCommon bad habits and how to fight them

Rico Sta. Cruzricostacruz.com

2009

Web designer, creative director, Internet marketer, web standards advocate, and all

around ninja of all things web

Creative Director for US Auto Parts Philippines, a local subsidiary of a US company with a diverse network

of e-commerce sites.

My personal blog is at ambiescent.com, and my online

portfolio is available at ricostacruz.com.

Rico Sta. Cruz

2009

I got up incredibly early today just for you guys.

And you guys areawesome for coming in

this early!

♥

2009

Designers

2009

Like all people

2009

are inclined to do things

a certain way.

2009

inclination

2009

We are all inclined to do certain things by

instinct

2009

• an innate, typically fixed pattern of behavior in animals in response to certain stimuli : birds have an instinct to build nests

• a natural or intuitive way of acting or thinking : they retain their old authoritarian instincts.

instinct

2009

Designers

2009

Like all people

2009

Have:• an innate, typically fixed pattern of behavior in animals in response to certain stimuli : birds have an instinct to build nests

• a natural or intuitive way of acting or thinking : they retain their old authoritarian instincts.

2009

= natural tendencyinstinct

2009

is often due to

natural tendency

convenience

2009

convenience

2009

convenienceis not healthy.

2009

convenienceis lazy.

2009

is an opportunity to do better.convenience

2009

THEN LO AND BEHOLD FOLKS

Guess what unthinkableatrocity happened next

2009

Eh?What could you be so upset about, young lad? Naturally, pasting follows after copying.

2009

Egads!

2009

SCREWLEMONADE.

2009

Youare meant for better things

than lemonade.

2009

Lets try this.

2009

Challenge:Redesign an online news site to be clearer,

easier-to-read, and steered clear of pitfalls that our instincts dictate us to fall through.

2009

Bring it on!

2009

Challenge:Redesign an online news site to be clearer, easier-to-read, and steered clear of pitfalls that our instincts dictate us to fall through.

2009

Navigation

2009

Three levelsof categories?

2009

THINK

2009

Going against our instincts, we don’t need to make our navigation mirror

the sitemap structure, do we?

2009

We can try to:

show it all (without hiding in hidden popups)

lay it out in a way that it’s not overwhelming

2009

1

2

3

2009

Moving forward,let’s add the header.

We need:» Search bar» Date today» Login/subscribe

2009

Common “login” links:Common search bars:

2009

Going with the status quo just for the convenience?

2009

THINK

2009

Common “login” links:Common search bars:

2009

THINK

2009

Searching is not an auxiliary function anymore.On content sites, it’s often a primary mode

of navigation.

2009

That’smore like it.

2009

Have personalized content?No need to hide your sign in links.

2009

Nowwe’re talkin’

business.

2009

Why don’t we better simulate a newspaper look?Most papers have news snippets above the heading.

2009

We’reon a roll, yo!

2009

Advertisements

2009

?

2009

Aha! Why don’t we bundle allthe ads together so the readers will easily figure out what to ignore!

Iv_nevr_heard_of_clickthru_ratesMarketing Manager

About 2 hours ago from web

2009

Lets try it this way:Intersperse advertisements with content.

2009

Firston the header,the nav bar, and theright sidebar.

(Let’s tacklethe content later.)

2009

Articles

2009

Yarr, It’s a news site! Of course I’llmake a headline news item first!

captain_obvious

About 2 hours ago from web

2009

Awesomework, capitan!

2009

Intermission:The pair rule

2009

Ever notice how thetext in these slides are

always like this?

2009

Something dominant

2009

Something dominantpaired with something

recessive

2009

Something dominantpaired with something

recessive

= sweet

2009

Okay, back to work.

2009

Again,the headline.

2009

We have a headline.Great! Then what?

2009

Sure,If you’re making a

blog theme.

2009

Fact:blobs of monotonous content

are boring.

2009

To the rescue!

2009

Primary

Secondary

Tertiary

and so on

2009

AND I JUST

Saved the day!

2009

Primary

2009

Secondary Tertiary

2009

Swell.

(From this)

2009

More articles

2009

Headline: 4 killed when Vietnam war-era bomb explodesCategory: Headlines

Time published: 8.07p

Headline: Amid bombings, martial law fears, CIA chief arrivingCategory: Business

Time published: 7:27p

Headline: Jackson children take center stage in LACategory: EntertainmentTime published: 7:05p

Headline: RP moves to resume communist rebel talksCategory: Headlines

Time published: 7:00p

. . .

2009

Our instinctmay drive us to do the most

straightforward approach:

2009

ex·cel·i·tis, NOUN

the inane human tendency to lay things out in a table format

Excelitis

2009

Exhibit A

2009

Exhibit B

2009

Exhibit C

2009

THE HORROR, MAKE IT STOP

2009

Sacrébleu!

2009

THINK

2009

Some columns aren’t always necessary.

(Here, deadlines and tags are only shown when the items have them)

2009

Or there may bemore logical waysto group the data.

2009

Where were we?

2009

Our instinctmay drive us to do the most

straightforward approach:

2009

Okay,perhaps:

2009

Better.

2009

Lists

2009

Some examples.

2009

Unimaginative

2009

Well thought-of

2009

Unspectacular

2009

Consider instead:

2009

Recap

2009

Intuitionconsidermay tell you to

but you should

Relayouting

2009


but you should

Group data moreintelligently

mimicExcel

2009


but you should

havinghierarchy

beblog-like

2009


but you should

listing thingsdown better

list thingsdown

2009

Thank you

breaking instincts: common web design bad habits

Design

online news site

p headline

headline news item

old authoritarian instincts

news snippets

intuitive way

common search bars

common login links