How to Redesign a News Site to Overcome Common Habits

Breaking
Instincts
Common bad habits and
how to fight them

Rico Sta. Cruz
ricostacruz.com
2009

Rico Sta. Cruz
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.

2009

I got up incredibly early today
just for you guys.

And you guys are
awesome for coming in
this early!

2009

Like all people

2009

are inclined to do things
a certain way.

2009

We are all inclined to do
certain things by
instinct

2009

instinct
• an innate, typically ﬁxed 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

Have:
• an innate, typically ﬁxed 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

instinct = natural tendency

2009

natural tendency
is often due to

convenience

2009

convenience
is not healthy.
2009

convenience
is lazy.
2009

convenience
is an opportunity to do better.
2009

THEN LO AND
BEHOLD FOLKS
Guess what unthinkable
atrocity happened next

2009

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

2009

SCREW
LEMONADE.

2009

You
are 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

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

Three levels
of categories?
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

Moving forward,
let’s add the
header.

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

2009

Common search bars: Common “login” links:

2009

Going with the
status quo just for
the convenience?

2009

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

2009

That’s
more like it.

2009

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

2009

Now
we’re talkin’
business.

2009

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

2009

We’re
on a roll, yo!

2009

Advertisements

2009

Aha! Why don’t we bundle all
the ads together so the readers will
easily ﬁgure out what to ignore!
About 2 hours ago from web

Iv_nevr_heard_of_clickthru_rates
Marketing Manager

2009

Lets try it this way:
Intersperse advertisements with content.

2009

First
on the header,
the nav bar, and the
right sidebar.

(Let’s tackle
the content later.)

2009

Yarr, It’s a news site! Of course I’ll
make a headline news item ﬁrst!

About 2 hours ago from web

captain_obvious

2009

Awesome
work, capitan!

2009

Intermission:
The pair rule

2009

Ever notice how the
text in these slides are
always like this?

2009

Something dominant

2009

Something dominant
paired with something
recessive

2009

Something dominant
paired 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

Secondary Tertiary

2009

Swell.

(From this)

2009

Headline: 4 killed when Vietnam war-era bomb explodes
Category: Headlines
Time published: 8.07p

Headline: Amid bombings, martial law fears, CIA chief arriving
Category: Business
Time published: 7:27p

Headline: Jackson children take center stage in LA
Category: Entertainment

Headline: RP moves to resume communist rebel talks
Category: Headlines

...

2009

Our instinct
may drive us to do the most
straightforward approach:

2009

Excelitis
ex·cel·i·tis, NOUN
the inane human tendency to lay things
out in a table format

2009

THE HORROR, MAKE IT STOP
2009

Some columns
aren’t always
necessary.
(Here, deadlines and
tags are only shown
when the items have
them)

2009

Or there may be
more logical ways
to group the data.

2009

Where were we?

2009

Okay,
perhaps:

2009

Some
examples.

2009

Well thought-of
2009

Consider instead:

2009

Intuition but you should
may tell you to consider

Relayouting

2009


mimic Group data more
Excel intelligently

2009


be having
blog-like hierarchy

2009


list things listing things
down down better

2009

How to Redesign a News Site to Overcome Common Habits

Recommandé

Recommandé

Contenu connexe

Similaire à How to Redesign a News Site to Overcome Common Habits

Similaire à How to Redesign a News Site to Overcome Common Habits (20)

Dernier

Dernier (20)

How to Redesign a News Site to Overcome Common Habits