Click Navigation: A Thought Experiment

There are many ways to approach end users' needs and your desired functionality for a site. If people are needing easy access to a specific page, one could create a call-out on the homepage or add it as a quick link in the header. When a user initially arrives on the site, a pop-up could appear with a link to the page. You could even have a button follow the user everywhere they scroll. However, pros and cons exist for any approach and many variables can influence which works best for a given situation. Unless your site is used solely to send the message, "Yo!" there are many potential user stories for a site. With the way the web is now, those users are also coming from many different devices, browsers, and operating systems.  Accounting for all of those cases becomes quite the dilemma and it might not even be possible. It is best then to try and do a comparison of the options to see which covers the broadest audience. All of this brings me to the thought experiment today: What approach for site navigation shows the most pros for the largest amount of users? There are many ways a user could interact with a web page, but let's focus on the main two that you see online… hover and click.

With the increase of all of those devices there have been many changes in mentality towards design and functionality of a website. I'm sure you have heard plenty of new approaches and ideas due to this shift. There can also be some hesitance on changing older methods and I've been seeing it with the switch to click. I will admit now, as you might guess from the title, I have a bit of an opinion towards one side, but that's because I've had this thought experiment many times while developing sites. Let's take a look through the issues and needs of a navigation menu and you can also be the judge as to whether "click" is a good choice for interaction.

Want to just read the quick pros/cons?

Navigation layout options

In order for us to think this through it would be good to first determine what kind of navigation layout we are going to use. There are many types of menu layouts, but each have their different benefits for various sitemaps. You could go with the approach Apple does and just have no sub navigation. That is the simplest click navigation there is. However, one possible drawback is that you have to go through multiple pages to get where you want to go. You may have come across the 3-click rule that Jeffrey Zeldman wrote about as a design principle. I've often heard that argument for hover based functionality and at the surface it makes sense. That rule gained popularity around 2001, but by 2003 there were already test results from User Interface Engineering that didn't support that theory. Users' satisfaction didn't really change with the amount of clicks involved and were just as likely to complete it anyways. I would use 3-click rule more as a guideline. Yes, if you can easily get to a page in one click, great, but if a user wants to get to the information they are willing to click to get there. If people aren't cascading down your site then it might be your content more than usability due to progressive disclosure. For now, let's rule out this interaction approach as what we will choose for a menu, since it doesn't highlight the differences of click or hover. The main thing to note is that users are okay with clicking.

Okay, a sub menu free navigation isn't a good choice, so what else is there? There are hero menus that take up the full width of the navigation bar and there are dropdown menus that are vertically stacked. The latter will have the most interaction needed since sub menus often have sub-sub menus and so forth with those navigations. So let's choose vertically stacked sub menus for our experiment. We should also keep our sitemap in mind and really shouldn't choose a navigation option until we determine the sitemap, but I thought it would be good to know our navigation options. Will you have landing pages? Or will the sitemap be like Comcast for example and use your main tier navigation as categories rather than links. So we can show the more difficult aspects of navigation, let's go with having landing pages so there is a page for all main tier and sub tier links.

Now, what's the story?

Now that we know which navigation is being used and the sitemap we are using it for, let's imagine how the user's story will go. Let's say you have an e-commerce site that sells only the best items from 90's culture. A particular user is wanting to buy only the brightest neon green Hammer pants money can buy. In your sitemap that page is in "Hip Clothes" -> "Awesome Pants" -> "Hammer Pants". So the user will need to need to go to the main tier item "Hip clothes" then open up the sub menu listing to find "Awesome Pants" and then open the child menu of that to find "Hammer Pants". Let's also say that same user wants to go to "Awesome Pants" in a new tab just in case the "Hammer Pants" don't work out. This user is doing all of this on a Surface Pro from Microsoft, so they could either use their fingers to click through the site or use their mouse. I'm using this specific case since it allows for both input types on one device at the same time.

What's wrong with just hover?

We have our setting, our options, and our story, so now we can do a run through for a hover based navigation. Remember that the user can use touch or a mouse for your "desktop" 90's memorabilia site. Imagine that user not having or using a mouse currently. Touch users don't get a true hover, but some devices do the hover functionality on touch. There are Javascript libraries like Superfish that set up click like functionality for non-hover users to expand menus as well. So we do have options to have hover work in those cases. However, these don't exactly make a perfect interface for those users. The user is currently trying to open up "Awesome Pants" page to see the full listing. She or he taps "Hip Clothes" to expand the menu as if they hovered. Then the user taps "Awesome Pants" but it has a child menu so it opens up a menu as well. If they were hovering with a mouse they could just click the link and go to "Awesome Pants". So what is the touch user supposed to do? They could tap it again, but that might also close the menu instead. They could hold down and eventually a device popup menu will show as well. But can you safely assume the user will even know they can do any of that? Maybe the user thinks it is like Comcast and "Awesome Pants" is just a category and not a page. Hover just doesn't cut it anymore when we think about touch users. We can implement workarounds and fixes so devices understand what a hover does, but we can't solve disconnects that are occurring with touch and pointer devices.

Let's rule out touch for now and just focus on hover. Hover for desktop users is fine since they have a mouse right? Actually, that's not far off on the basic principles. However, there are some usability aspects that can be problematic with hover as well. Mouse users, depending on the navigation layout option, make items harder to click or users have to go through hover tunnels so they don't lose their menu. Users can't accidentally move their mouse too far or they will close the menu, etc. So there are a lot of potential issues that you'll want to keep in mind as well for mouse users.

"Click" bridges functionality all users

So let's have that same user go through the fully click based menu. Since we focused on the touch-screen user for hover functionality, let's first take a look at "click" from the mouse user's perspective. I am using the term "click" loosely since technically there are minor differences between a touch/tap and a "click", but in the end they both call the same functionality. The user first hovers over "Hip Clothes" and nothing happens. This is a common worry I've heard, but if you look at the Apple site example again, you'll remember that users are also used to simple click navigations and progressive disclosure. So if nothing happens and you really want some "Awesome Pants", what would you or any user do? Click. Now the menu has expanded and the user just learned that the navigation expands this way. They will do the same for "Awesome Pants" and will get the same response… an expanded menu. But we've hit the same issue as with the hover navigation. How do we get to the pants landing page?

This is the same issue as before, because we didn't put in the one mandatory adjustment that is necessary for the switch to click. That one adjustment would be to the sitemap. We will need to include the "Awesome Pants" link in its sub menu. The user could try clicking the same link again, but that will only close the menu. However, if you have "Awesome Pants" -> "All Pants" or even just "Awesome Pants" text again in the sub menu, users can get to the landing page still. Just like a form or many other things on a website, as a user continues through a task they will be focused on the new elements that show up and will work through the content top-down and from left to right (in English) . If you have easy to understand new phrasing or even the same phrasing, the user can recognize that the landing link is available there. The difference between this and the hover menu example is that there is something visual to indicate what to do, which is major.

Now I'm very open to counter arguments in this experiment, such as "couldn't we just add the sub-menu link in the hover example and keep it hover?" Yes, you could, but hover users now have two links that go to the same place so there may be some confusion there. And again, we have a disconnection between users. The beauty of switching to "click" is that it is something that is ubiquitous across all devices, browsers, and operating systems. Every program you have ever used most likely had a click menu because it is the simplest and most user friendly option. If we keep that Surface Pro user's story in mind, they have access to both a touch screen and a mouse. If you create an experience that is universal, they could even use a different device/computer and know exactly how to use it. Switching to click from hover, in this sense, creates an easy to learn and repeatable UI. I could also get into how all of the hover libraries had issues with the latest versions of windows phones and had to rework to match. Click functionality didn't need to be adjusted. However, that is probably for another day.

As you can see, hover has only a very specific pro for one type of audience but includes a lot of cons for a great majority of users. Click menus only really have a weak con which is that there is a bit more planning for sitemaps. However, that is something you might want to do even if you did a hover based menu. This thought experiment was to determine which has the most pros for the largest amount of users and click keeps winning that for every site I've worked on.