{"id":78,"date":"2013-09-02T09:02:18","date_gmt":"2013-09-02T07:02:18","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=78"},"modified":"2013-09-03T17:57:29","modified_gmt":"2013-09-03T15:57:29","slug":"dont-make-me-think","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/dont-make-me-think\/","title":{"rendered":"Don’t make me Think"},"content":{"rendered":"

Steve Krug’s ‘Don’t make me think’ \u00a0is a classic in the world of web design. I recently pulled the 2006 print from my book shelf to give it a (first) read. And it was worth it!<\/p>\n

This is what stayed with me the most (ordered by chapter):<\/p>\n

    \n
  1. \n

    Don’t make me think<\/h3>\n

    – Remove as much as possible the ‘question marks’ (Where am I, Where can I find, What does this mean
    \n– Make things self-evident, or if this is not possible, self-explanatory<\/li>\n

  2. \n

    How we really use the web<\/h3>\n

    – We don’t read, we scan. (I like this analogy: web users tend to act like sharks: they have to keep moving or they’ll die)
    \n– We satisfice (choose the first reasonable option)
    \n– We muddle through
    \n<\/li>\n

  3. \n

    Billboard Design 101<\/h3>\n

    Five important things to make your site understandable:
    \n– Clear visual Hierarchy
    \n– Take advantage of Conventions
    \n– Break pages up in clearly defined areas
    \n– Make obvious what is clickable
    \n– Minimize noise (busy-ness, background noise)<\/li>\n

  4. \n

    Why users like mindless choices<\/h3>\n

    Making the choices mindless is one of the main things that make a site easy to use.<\/li>\n

  5. \n

    Omit needless words<\/h3>\n

    Happy talk must die.\u00a0Instructions must die<\/li>\n

  6. \n

    Designing Navigation<\/h3>\n

    What makes browsing a website different from navigating a tool store?
    \n– No sense of scale
    \n– No sense of direction
    \n– No sense of location<\/p>\n

    The Home Page is like the North Star, a fixed point to base your navigation on.<\/p>\n

    Purposes of Navigation:<\/strong>
    \n1. Help us find what we are looking for
    \n2. Tell us where we are
    \n3. It gives us ‘ground under our feet’
    \n4. It tells us what is there<\/strong> – Navigation reveals content!
    \n5. It tells us how to use the site<\/strong> – where to begin, what are your options
    \n6. It gives us confidence<\/strong> in the people who built it<\/p>\n

    Persistent Navigation (or Global Navigation)<\/strong>
    \nShould include the five most important elements:
    \n– Site ID
    \n– A way Home
    \n– A way to search
    \n– Utilities (help to use the site; give information about the publisher)
    \nabout us, archives, contact us, company info, help, news, search, site map
    \n– Sections (the primary Navigation)<\/p>\n

    Secondary, tertiary etc. navigation
    \n<\/strong>Don’t forget to design the lower levels of navigation! It is important<\/p>\n

    Page Names
    \n<\/strong>Driving in L.A. is fun because the street signs are big, and they are in the right place.<\/p>\n

    Four things about page names to keep in mind:
    \n– Every page needs a name
    \n– The name needs to be in the right place
    \n– The name needs to be prominent
    \n– The name needs to match what I clicked (or match as closely as possible)<\/p>\n

    ‘You are here’<\/strong>
    \n\"navigation-ubevindtzichhier\"<\/a><\/p>\n

    – Highlights, indicators, bold text ..
    \n– Clearly visible!<\/p>\n

    Breadcrumbs
    \n<\/strong>– Show the path from the home page to where you are.
    \n– For most sites breadcrumbs\u00a0alone<\/em> are not a good navigation scheme. They are not a replacement for showing at least the top two layers of the hierarchy
    \n– Put them at the top
    \n– Use > between levels
    \n– Boldface the last item
    \n– Don’t use instead of page names<\/p>\n

    The Trunk Test
    \n<\/strong>Imagine you’ve been blindfolded and locked in the trunk of a car, and then dropped somewhere in the deep bowels of the website. Can you answer the following questions?
    \n– What site is this?
    \n– What page am I on?
    \n– What are the major sections of the site?
    \n– What are my options at this level?
    \n– Where am I in the scheme of thing? (‘you are here’
    \n– How can I search?<\/p>\n

    Why is his important?\u00a0Don’t forget that visitors often do not enter your website through you home page!
    \nB.t.w. The trunk test is done on printed screenshots where you circle the items mentioned above as fast as possible.<\/li>\n

  7. \n

    Designing the Home Page<\/h3>\n

    ‘The Home page is beyond your control’
    \nThink about al the things your home page has to accommodate:
    \n– Site identity<\/strong> and mission<\/strong>
    \n– Site Hierarchy<\/strong>
    \n– Search<\/strong>
    \n– Teases<\/strong> of the good stuff inside
    \n–\u00a0Timely content <\/strong>(show that the page is alive)
    \n– (Deals)
    \n–\u00a0Shortcuts\u00a0<\/strong>to the most requested pieces of content
    \n– Registration<\/strong><\/p>\n

    And the more abstract objectives:
    \n– Show me what I am looking for
    \n<\/strong>–\u00a0.. and what I am not looking for
    \n<\/strong>– Show me where to start
    \n– Establish credibility and trust<\/b><\/p>\n

    And then the conditions and constraints:
    \n–\u00a0Everybody wants a piece of it
    \n–\u00a0To many cooks\u00a0<\/strong>(too many opinions)
    \n– One size fits all<\/strong><\/p>\n

    The first casualty of war<\/span><\/p>\n

    Designing a home page inevitably involves compromises.
    \nBut the one thing you can’t afford to loose is\u00a0conveying the big picture
    \n<\/strong>– What is this?
    \n– What do they have here?
    \n– What can I do here?
    \n– Why should I be here (and not somewhere else)?<\/span><\/span><\/p>\n

    How to get the message across<\/span><\/strong><\/p>\n

    Two important places where we expect to find explicit statements of what the site is about:
    \n– The tagline<\/strong>\u00a0– right next to the site id. Make sure it is good!
    \n–\u00a0The welcome blurb –\u00a0<\/strong>a prominent block on the home page, visible without scrolling<\/p>\n

    Guidelines for getting the message across:
    \n–\u00a0 Use as much space as necessary\u00a0<\/strong> – Don’t sacrifice your message. But also don’t use more space than needed.
    \n–\u00a0Don’t use a mission statement as welcome blurb<\/strong> – nobody reads your corporate mission statements
    \n–\u00a0It is one of the most important things to test<\/strong><\/p>\n

    Taglines
    \n<\/span><\/strong>– Good: clear an informative. Bad: vague
    \n– Good: just long enough
    \n– Good: convey differentiation and a clear benefit. Bad: generic
    \n– Good: personable, lively, sometimes clever<\/p>\n

    The fifth question: Where do I start?
    \n<\/span><\/strong>– if I want to search
    \n– if I want to browse
    \n– if I want to sample the best stuff<\/p>\n

    Home page navigation can be unique
    \n<\/span><\/strong>It can be different, but not\u00a0too<\/em> different.
    \n– Section descriptions\u00a0<\/strong>You may want to describe the main sections on the home page
    \n–\u00a0 Different orientation\u00a0<\/strong> – horizontal vs vertical may be necessary
    \n–\u00a0 More space for identity<\/strong> – The site ID is usually larger on the home page, and there is a tag line (not needed on every page probably)<\/p>\n

    But users have to recognize that the Home page navigation and the persistent navigation are two versions of the same thing. This means: same section names, same order, same grouping. Mostly same visual cues.<\/p>\n

     <\/li>\n

  8. Design teams and usability…<\/li>\n
  9. Usability testing…<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Steve Krug’s ‘Don’t make me think’ \u00a0is a classic in the world of web design. I recently pulled the 2006 print from my book shelf to give it a (first) read. And it was worth it! This is what stayed with me the most (ordered by chapter): Don’t make me think – Remove as much […]<\/p>\n","protected":false},"author":3,"featured_media":91,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20],"tags":[21],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":6,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/78\/revisions\/140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}