SlideShare a Scribd company logo
1 of 133
Download to read offline
2009
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
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
instinct
 • 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
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
instinct = natural tendency




                              2009
natural tendency
    is often due to


 convenience


                      2009
convenience
              2009
convenience
is not healthy.
                  2009
convenience
   is lazy.
              2009
convenience
is an opportunity to do better.
                                  2009
2009
2009
2009
THEN LO AND
 BEHOLD FOLKS
Guess what unthinkable
atrocity happened next

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




                                 2009
2009
Egads!


         2009
2009
SCREW
LEMONADE.


            2009
You
are 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 levels
of 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 search bars:   Common “login” links:




                                              2009
Going with the
status quo just for
the convenience?



                      2009
2009
THINK
        2009
Common search bars:   Common “login” links:




                                              2009
THINK
        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
2009
?
    2009
Aha! Why don’t we bundle all
the ads together so the readers will
easily figure 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
Articles




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

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
2009
Something dominant
paired with something
       recessive




                        2009
2009
2009
Something dominant
paired 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 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
                   Time published: 7:05p



    Headline: RP moves to resume communist rebel talks
                   Category: Headlines
                  Time published: 7:00p

                             ...

                                                                 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
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 be
more logical ways
to group the data.




                     2009
Where were we?




                 2009
Our instinct
may 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
Intuition       but you should
may tell you to      consider


                    Relayouting




                                   2009
Intuition       but you should
may tell you to      consider

     mimic         Group data more
     Excel           intelligently




                                     2009
Intuition       but you should
may tell you to      consider

       be             having
    blog-like        hierarchy




                                   2009
Intuition       but you should
may tell you to      consider

    list things     listing things
       down         down better




                                     2009
2009
Thank you




            2009

More Related Content

Similar to Breaking Instincts: common web design bad habits

Presentation geniusstevejobs
Presentation geniusstevejobsPresentation geniusstevejobs
Presentation geniusstevejobs
Sheik Ahmed
 
BusinessWeek: The Presentation Secrets of Steve Jobs
BusinessWeek: The Presentation Secrets of Steve JobsBusinessWeek: The Presentation Secrets of Steve Jobs
BusinessWeek: The Presentation Secrets of Steve Jobs
Mauricio Godoy
 
Go tomeeting presentation_secrets_of_steve_jobs
Go tomeeting presentation_secrets_of_steve_jobsGo tomeeting presentation_secrets_of_steve_jobs
Go tomeeting presentation_secrets_of_steve_jobs
noeleen368
 
Presentation Secrets Of Stevejobs
Presentation Secrets Of StevejobsPresentation Secrets Of Stevejobs
Presentation Secrets Of Stevejobs
bhavanishanker
 
Presentation Secrets Of Steve Jobs
Presentation Secrets Of Steve JobsPresentation Secrets Of Steve Jobs
Presentation Secrets Of Steve Jobs
Manoj Shriyan
 

Similar to Breaking Instincts: common web design bad habits (20)

Designing Moblin For Netbooks (with notes)
Designing Moblin For Netbooks (with notes)Designing Moblin For Netbooks (with notes)
Designing Moblin For Netbooks (with notes)
 
Npl imagine 9oct
Npl imagine 9octNpl imagine 9oct
Npl imagine 9oct
 
Designing Moblin For Netbooks
Designing Moblin For NetbooksDesigning Moblin For Netbooks
Designing Moblin For Netbooks
 
Presentation geniusstevejobs
Presentation geniusstevejobsPresentation geniusstevejobs
Presentation geniusstevejobs
 
When Your Coworkers might be Virtual
When Your Coworkers might be VirtualWhen Your Coworkers might be Virtual
When Your Coworkers might be Virtual
 
BDW: How To Pitch Your Ideas
BDW: How To Pitch Your IdeasBDW: How To Pitch Your Ideas
BDW: How To Pitch Your Ideas
 
Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)
 
The Presentation Secrets of Steve Jobs
The Presentation Secrets of Steve JobsThe Presentation Secrets of Steve Jobs
The Presentation Secrets of Steve Jobs
 
Go To Meeting Presentation Secrets Of Steve Jobs
Go To Meeting Presentation Secrets Of Steve JobsGo To Meeting Presentation Secrets Of Steve Jobs
Go To Meeting Presentation Secrets Of Steve Jobs
 
Steve Jobs Presentations
Steve Jobs PresentationsSteve Jobs Presentations
Steve Jobs Presentations
 
Meeting Presentation Secrets Of Steve Jobs
Meeting Presentation Secrets Of Steve JobsMeeting Presentation Secrets Of Steve Jobs
Meeting Presentation Secrets Of Steve Jobs
 
Presentation Secrets Of Steve Jobs
Presentation Secrets Of Steve JobsPresentation Secrets Of Steve Jobs
Presentation Secrets Of Steve Jobs
 
BusinessWeek: The Presentation Secrets of Steve Jobs
BusinessWeek: The Presentation Secrets of Steve JobsBusinessWeek: The Presentation Secrets of Steve Jobs
BusinessWeek: The Presentation Secrets of Steve Jobs
 
Presentation Secrets of Steve Jobs - Carmine Gallo - BusinessWeek Columnist
Presentation Secrets of Steve Jobs - Carmine Gallo - BusinessWeek ColumnistPresentation Secrets of Steve Jobs - Carmine Gallo - BusinessWeek Columnist
Presentation Secrets of Steve Jobs - Carmine Gallo - BusinessWeek Columnist
 
Steve Jobs Secret Presentations
Steve Jobs Secret PresentationsSteve Jobs Secret Presentations
Steve Jobs Secret Presentations
 
Go tomeeting presentation_secrets_of_steve_jobs
Go tomeeting presentation_secrets_of_steve_jobsGo tomeeting presentation_secrets_of_steve_jobs
Go tomeeting presentation_secrets_of_steve_jobs
 
The presentationsecretsofstevejobs
The presentationsecretsofstevejobsThe presentationsecretsofstevejobs
The presentationsecretsofstevejobs
 
Presentation Secrets Of Stevejobs
Presentation Secrets Of StevejobsPresentation Secrets Of Stevejobs
Presentation Secrets Of Stevejobs
 
Presentation Secrets Of Steve Jobs
Presentation Secrets Of Steve JobsPresentation Secrets Of Steve Jobs
Presentation Secrets Of Steve Jobs
 
Presentation Secrets Of Steve Jobs
Presentation Secrets Of Steve JobsPresentation Secrets Of Steve Jobs
Presentation Secrets Of Steve Jobs
 

Recently uploaded

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 

Recently uploaded (20)

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call GirlsBook Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 

Breaking Instincts: common web design bad habits