{"id":1807,"date":"2019-02-07T13:08:26","date_gmt":"2019-02-07T21:08:26","guid":{"rendered":"http:\/\/www.ildikototh.com\/?p=1807"},"modified":"2019-02-11T11:25:41","modified_gmt":"2019-02-11T19:25:41","slug":"skihood-com-heuristics","status":"publish","type":"post","link":"https:\/\/www.ildikototh.com\/index.php\/2019\/02\/skihood-com-heuristics\/","title":{"rendered":"Skihood.com Heuristics"},"content":{"rendered":"\n

This is the first of a couple posts I’ll be writing through the process of an unsolicited redesign of Mt. Hood Meadow’s website<\/a>. Let’s jump straight into the analysis!<\/p>\n\n\n\n

The Navigation<\/h2>\n\n\n\n

Number of choices<\/h3>\n\n\n\n

Theoretically, there are two levels of navigation:<\/p>\n\n\n\n

  1. Sign in \/ Register – Shopping Cart – Blog – Contact Us<\/li>
  2. The Mountain – Lessons & Rentals – Resort Services – Plan a Trip – Events & Race – Meadows PDX – Summer – Buy Online<\/li><\/ol>\n\n\n\n
    \"\"
    This is the top of the page when you arrive to<\/g> skihood.com. <\/figcaption><\/figure>\n\n\n\n

    HOWEVER, there isn’t enough difference in hierarchy distinguishing which level is more important, essentially putting the tally of top-level navigation elements at 12. That is way too many!<\/p>\n\n\n\n

    Cognitively, humans’ short term memory limits us to keep tabs on between three to seven items at a time.<\/mark><\/p>\n\n\n\n

    UI Issue: <\/strong>Furthermore, the contrast between the black background and the thin blue letters make the text hard to read, especially for those with visual impairments.<\/p>\n\n\n\n

    \"\"
    Contrast between background color and main menu elements<\/figcaption><\/figure><\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Menu Element Dissonance<\/h3>\n\n\n\n
    \"\"
    Main Menu<\/figcaption><\/figure>\n\n\n\n

    The right-aligned “Buy Online” button is a top-nav link, even though it is perceived as different from the others by placement and dissimilarity via the blue outline. However, it acts the same as the ones on the left, also forming a drop-down when hovering over it.<\/p>\n\n\n\n

    \"\"
    Drop down menu we see when hovering over “Buy Online”<\/figcaption><\/figure>\n\n\n\n

    Three problems here: <\/h4>\n\n\n\n
    1. What’s the purpose of writing “Store” at the top? All the other top-level links repeat the same text as the heading, but really, it’s completely unnecessary.<\/li>
    2. It covers half the page.<\/li>
    3. The outline-blue link looks like a button. The user is not expecting the hover to reveal a menu. This unexpected behavior sets us up for subconsious cognitive dissonance\/confusion later on in the site.<\/li><\/ol>\n\n\n\n
      <\/div>\n\n\n\n

      Secondary Menu<\/h3>\n\n\n\n

      After clicking on “The mountain” (or any other top-level item), you get a page with 5 to 13 secondary items in the form of left<\/g> navigation. <\/p>\n\n\n\n

      These links are the same size and color as the main navigation, further diluting the hierarchy, only separated by a bolder-all-caps heading. <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      UI issue<\/strong>: “The Mountain” top level<\/g><\/g> link’s background is now slightly darker to indicate that you are on that tab. Did you notice? I sure had trouble seeing that.<\/p>\n\n\n\n

      \"\"
      Darker background when you hover or when you click on it.<\/figcaption><\/figure><\/div>\n\n\n\n

      The second (and bigger) issue is that the visual hierarchy is not apparent. There is no hint that there might be something else further under each of these headings as it becomes evident when you click on a link in the left nav. And even that is only sometimes – not all secondary links have tertiary items under them, so finding things becomes sort of like an easter egg hunt.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Example of drilling down the left nav<\/h3>\n\n\n\n

      When someone clicks on “Hours of operation” they will expect a general outline of standard hours of operation such as
      <\/p>\n\n\n\n

      Monday: 9 am \u2013 4 pm,
      Tuesday: 9 am \u2013 4 pm,
      Wednesday: 9 am \u2013 9 pm etc. <\/strong><\/em>
      <\/p>\n\n\n\n

      I took this screenshot in February. <\/p>\n\n\n\n

      \"\"
      Here is what you see when you click on Hours of operations

      <\/figcaption><\/figure>\n\n\n\n