breaking instincts: common web design bad habits
Post on 15-Jun-2015
1.730 Views
Preview:
TRANSCRIPT
2009
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
2009
Designers
2009
Like all people
2009
are inclined to do things
a certain way.
2009
2009
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
2009
2009
2009
THEN LO AND BEHOLD FOLKS
Guess what unthinkableatrocity happened next
2009
2009
Eh?What could you be so upset about, young lad? Naturally, pasting follows after copying.
2009
2009
Egads!
2009
2009
SCREWLEMONADE.
2009
Youare meant for better things
than lemonade.
2009
2009
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
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
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
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
?
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
2009
Something dominantpaired with something
recessive
2009
2009
2009
Something dominantpaired with something
recessive
= sweet
2009
2009
Okay, back to work.
2009
Again,the headline.
2009
We have a headline.Great! Then what?
2009
2009
2009
Sure,If you’re making a
blog theme.
2009
Fact:blobs of monotonous content
are boring.
2009
2009
2009
2009
2009
To the rescue!
2009
2009
Primary
Secondary
Tertiary
and so on
2009
2009
2009
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
Okay,perhaps:
2009
Better.
2009
Lists
2009
Some examples.
2009
2009
Unimaginative
2009
Well thought-of
2009
Unspectacular
2009
Consider instead:
2009
2009
2009
2009
Recap
2009
Intuitionconsidermay tell you to
but you should
Relayouting
2009
Intuitionconsidermay tell you to
but you should
Group data moreintelligently
mimicExcel
2009
Intuitionconsidermay tell you to
but you should
havinghierarchy
beblog-like
2009
Intuitionconsidermay tell you to
but you should
listing thingsdown better
list thingsdown
2009
2009
Thank you
top related