Breaking instincts: how to fight bad design habits

Transcript

1. View Slide

2. 2009
   Breaking
   Instincts
   Common bad habits and
   how to fight them
   Rico Sta. Cruz
   ricostacruz.com
   

   View Slide

3. 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
   

   View Slide

4. 2009
   I got up incredibly early today
   just for you guys.
   And you guys are
   awesome for coming in
   this early!
   —
   

   View Slide

5. View Slide

6. 2009
   Designers
   

   View Slide

7. 2009
   Like all people
   

   View Slide

8. 2009
   are inclined to do things
   a certain way.
   

   View Slide

9. View Slide

10. View Slide

11. 2009
    inclination
    

    View Slide

12. 2009
    We are all inclined to do
    certain things by
    instinct
    

    View Slide

13. 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
    

    View Slide

14. 2009
    Designers
    

    View Slide

15. 2009
    Like all people
    

    View Slide

16. 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.
    

    View Slide

17. 2009
    = natural tendency
    instinct
    

    View Slide

18. 2009
    is often due to
    natural tendency
    convenience
    

    View Slide

19. 2009
    convenience
    

    View Slide

20. 2009
    convenience
    is not healthy.
    

    View Slide

21. 2009
    convenience
    is lazy.
    

    View Slide

22. 2009
    is an opportunity to do better.
    convenience
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. 2009
    THEN LO AND
    BEHOLD FOLKS
    Guess what unthinkable
    atrocity happened next
    

    View Slide

27. View Slide

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

    View Slide

29. View Slide

30. 2009
    Egads!
    

    View Slide

31. View Slide

32. 2009
    SCREW
    LEMONADE.
    

    View Slide

33. 2009
    You
    are meant for better things
    than lemonade.
    

    View Slide

34. View Slide

35. View Slide

36. 2009
    Lets try this.
    

    View Slide

37. 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.
    

    View Slide

38. 2009
    Bring it on!
    

    View Slide

39. 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.
    

    View Slide

40. 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.
    

    View Slide

41. 2009
    Navigation
    

    View Slide

42. 2009
    Three levels
    of categories?
    

    View Slide

43. 2009
    THINK
    

    View Slide

44. 2009
    Going against our
    instincts, we don’t need to
    make our navigation mirror
    the sitemap structure, do we?
    

    View Slide

45. 2009
    We can try to:
    show it all (without hiding in hidden popups)
    lay it out in a way that it’s not overwhelming
    

    View Slide

46. View Slide

47. View Slide

48. 2009
    Moving forward,
    let’s add the
    header.
    We need:
    » Search bar
    » Date today
    » Login/subscribe
    

    View Slide

49. 2009
    Common “login” links:
    Common search bars:
    

    View Slide

50. 2009
    Going with the
    status quo just for
    the convenience?
    

    View Slide

51. View Slide

52. 2009
    THINK
    

    View Slide

53. 2009
    Common “login” links:
    Common search bars:
    

    View Slide

54. 2009
    THINK
    

    View Slide

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

    View Slide

56. 2009
    That’s
    more like it.
    

    View Slide

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

    View Slide

58. 2009
    Now
    we’re talkin’
    business.
    

    View Slide

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

    View Slide

60. 2009
    We’re
    on a roll, yo!
    

    View Slide

61. 2009
    Advertisements
    

    View Slide

62. View Slide

63. 2009
    ?
    

    View Slide

64. 2009
    Aha! Why don’t we bundle all
    the ads together so the readers will
    easily figure out what to ignore!
    Iv_nevr_heard_of_clickthru_rates
    Marketing Manager
    About 2 hours ago from web
    

    View Slide

65. 2009
    Lets try it this way:
    Intersperse advertisements with content.
    

    View Slide

66. 2009
    First
    on the header,
    the nav bar, and the
    right sidebar.
    (Let’s tackle
    the content later.)
    

    View Slide

67. 2009
    Articles
    

    View Slide

68. 2009
    Yarr, It’s a news site! Of course I’ll
    make a headline news item first!
    captain_obvious
    About 2 hours ago from web
    

    View Slide

69. 2009
    Awesome
    work, capitan!
    

    View Slide

70. 2009
    Intermission:
    The pair rule
    

    View Slide

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

    View Slide

72. 2009
    Something dominant
    

    View Slide

73. View Slide

74. 2009
    Something dominant
    paired with something
    recessive
    

    View Slide

75. View Slide

76. View Slide

77. 2009
    Something dominant
    paired with something
    recessive
    = sweet
    

    View Slide

78. View Slide

79. 2009
    Okay, back to work.
    

    View Slide

80. 2009
    Again,
    the headline.
    

    View Slide

81. 2009
    We have a headline.
    Great! Then what?
    

    View Slide

82. View Slide

83. View Slide

84. 2009
    Sure,
    If you’re
    making a
    blog theme.
    

    View Slide

85. 2009
    Fact:
    blobs of monotonous content
    are boring.
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. 2009
    To the rescue!
    

    View Slide

91. View Slide

92. 2009
    Primary
    Secondary
    Tertiary
    and so on
    

    View Slide

93. View Slide

94. View Slide

95. View Slide

96. 2009
    AND I JUST
    Saved the day!
    

    View Slide

97. 2009
    Primary
    

    View Slide

98. 2009
    Secondary Tertiary
    

    View Slide

99. 2009
    Swell.
    (From this)
    

    View Slide

100. 2009
     More articles
     

     View Slide

101. 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
     . . .
     

     View Slide

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

     View Slide

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

     View Slide

104. 2009
     Exhibit A
     

     View Slide

105. 2009
     Exhibit B
     

     View Slide

106. 2009
     Exhibit C
     

     View Slide

107. 2009
     THE HORROR, MAKE IT STOP
     

     View Slide

108. 2009
     Sacrébleu!
     

     View Slide

109. 2009
     THINK
     

     View Slide

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

     View Slide

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

     View Slide

112. 2009
     Where were we?
     

     View Slide

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

     View Slide

114. 2009
     Okay,
     perhaps:
     

     View Slide

115. 2009
     Okay,
     perhaps:
     

     View Slide

116. 2009
     Better.
     

     View Slide

117. 2009
     Lists
     

     View Slide

118. 2009
     Some
     examples.
     

     View Slide

119. View Slide

120. 2009
     Unimaginative
     

     View Slide

121. 2009
     Well thought-of
     

     View Slide

122. 2009
     Unspectacular
     

     View Slide

123. 2009
     Consider instead:
     

     View Slide

124. View Slide

125. View Slide

126. View Slide

127. 2009
     Recap
     

     View Slide

128. 2009
     Intuition
     consider
     may tell you to
     but you should
     Relayouting
     

     View Slide

129. 2009
     Intuition
     consider
     may tell you to
     but you should
     Group data more
     intelligently
     mimic
     Excel
     

     View Slide

130. 2009
     Intuition
     consider
     may tell you to
     but you should
     having
     hierarchy
     be
     blog-like
     

     View Slide

131. 2009
     Intuition
     consider
     may tell you to
     but you should
     listing things
     down better
     list things
     down
     

     View Slide

132. View Slide

133. 2009
     Thank you
     

     View Slide