Click To Reveal vs Rollover Navigation Better For Organic?
-
Hi,
Any thoughts, data or insights as which is better in a top navigation... click to reveal the nav links or rollover to reveal the nav links? Regular content in an accordion (click to reveal) is evidently not best practice. Does that apply to navigation as well?
Thanks! Best... Mike
-
Interesting UX question. Short answer; click menu is best, but its not black and white.
Naturally its more subtle than that. You mention regular content. Regular content being hidden by any mechanism is naturally not too user friendly. Accordions can often be overlooked, text hidden in the hover state of images is a client favourite that is also terrible UX practice. The mechanism doesn't matter too much - its the fact content is hidden by an un-signposted mechanism. The author knows its there, but your visitor will not.
Menu isn't content though; its a different beast. A menu needs to exhibit good information hierarchy. We try to keep our main menu to 7 items or less, essentially for clarity of the first tier of offerings. This can often necessitate sub-menus. Sub-menus are hidden content, we're just arguing the toss about mechanism. So first off we'd suggest a nice little signpost like a downward arrow to show which main items have sub-menus
Also note we don't have hover states on touch devices, so unless you're planning on a second type of menu for that, your choice is made for you and it'll certainly need to be selection rather than hover based.
Select to get something is more in keeping with how everything else on the web works; text links, buttons etc. Hover feels more immediate but if your site demographic is broad, bear in mind that the dexterity required will elude a percentage of your audience. Consider the accessibility implications of this and your site client needs.
For example, hover menus can be a real pain when the sub-menu content is wider than the trigger area. This will have happened to all of you; hover over the main menu item, see the sub-menu item you want, move the mouse to select the sub menu item... o dear the sub menu has disappeared on you. You left the hover area before reaching the sub menu and the hover state is lost. As well as accidental deactivation its quite possible to get annoying accidental activation with hover too.
As well as audience consider the sub-menu itself. If you have a couple of small items consider hover, a massive mega-menu will nearly always be better toggled by selection. On that note, if you're using mega-menus consider Nielsens excellent guide here: https://www.nngroup.com/articles/mega-menus-work-well/
PS: I'd encourage everyone to start thinking about selection rather than 'clicks'. I still slip up myself, but clicks are an outmoded, desktop-centric term that is very dangerous to bandy about when making responsive websites. Much as your anchor text should never be "Click here" we should always be thinking about "selection". Selection speaks to intent and action rather than physical methodology, as that methodology can be clicking, yes, but also tapping, voice command, keyboard based, etc.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Sudden drop in organic traffic after migration from Django to Wordpress.
I have seen a sudden drop organic reach in a particular page of our website www.hackerearth.com/innovation earlier this was www.hackerearth.com/sprint. I although understand that it happens while migration but it has been a while we did the migration. The migration happened around May month. Something similar has happened to our blog. Earlier it was a blog.hackerearth.com now hackerearth.com/blog _Could anyone suggest me what could be the possible issue for the drop in traffic? _
Intermediate & Advanced SEO | | Rajnish_HE0 -
Blog - subdomain vs. subfolderq
Hi everyone I work on an ecommerce site and I'm trying to get more content together for the site & blog. The development team want to put the blog we have on a subdomain of our site, my question is - what is better for SEO Subfolder vs. subdomain I've read a couple of articles to say subfolder is better and a subdomain needs a lot of management to build up authority itself? Thanks!
Intermediate & Advanced SEO | | BeckyKey0 -
H Tags Vs "H Style" Tags?
Hey everybody! So I was wondering what the difference between the H tags and "H Style". My first thought is that it's just the style guide, and not actually a meta tag, but before I go around changing all these styles I want to make sure my computer isn't going to explode SEO juice. Thanks!
Intermediate & Advanced SEO | | HashtagHustler0 -
Ranking better in different countries than in the UK
My URL is: www.geckonewmedia.comMy friend's site is being ranked in the top 10 in Google in countries such as Norway, Poland, Spain, Germany and France for the term "web design Edinburgh"The site is UK based and it's ranking on page 3 over here. I went into the webmaster tools and changed the location setting to UK on Monday this week as I thought that might be the issue. So far there's been no change.Can anyone help me out with the reason why it might be ranking so well abroad but not in the UK?Thanks
Intermediate & Advanced SEO | | geckonm0 -
Canonical tag + HREFLANG vs NOINDEX: Redundant?
Hi, We launched our new site back in Sept 2013 and to control indexation and traffic, etc we only allowed the search engines to index single dimension pages such as just category, brand or collection but never both like category + brand, brand + collection or collection + catergory We are now opening indexing to double faceted page like category + brand and the new tag structure would be: For any other facet we're including a "noindex, follow" meta tag. 1. My question is if we're including a "noindex, follow" tag to select pages do we need to include a canonical or hreflang tag afterall? Should we include it either way for when we want to remove the "noindex"? 2. Is the x-default redundant? Thanks for any input. Cheers WMCA
Intermediate & Advanced SEO | | WMCA0 -
Using Meta Header vs Robots.txt
Hey Mozzers, I am working on a site that has search-friendly parameters for their faceted navigation, however this makes it difficult to identify the parameters in a robots.txt file. I know that using the robots.txt file is highly recommended and powerful, but I am not sure how to do this when facets are using common words such as sizes. For example, a filtered url may look like www.website.com/category/brand/small.html Brand and size are both facets. Brand is a great filter, and size is very relevant for shoppers, but many products include "small" in the url, so it is tough to isolate that filter in the robots.txt. (I hope that makes sense). I am able to identify problematic pages and edit the Meta Head so I can add on any page that is causing these duplicate issues. My question is, is this a good idea? I want bots to crawl the facets, but indexing all of the facets causes duplicate issues. Thoughts?
Intermediate & Advanced SEO | | evan890 -
Extensions Vs Non Extensions
Hello, I'm a big fan of clean urls. However i'm curious as to what you guys do, to remove them in a friendly way which doesn't cause confusion. Standard URLS
Intermediate & Advanced SEO | | Whittie
http://www.example.com/example1.html
http://www.example.com/example2.html
http://www.example.com/example3.html
http://www.example.com/example4.php
http://www.example.com/example5.php What looks better (in my eyes)
http://www.example.com/example1/
http://www.example.com/example2/
http://www.example.com/example3/
http://www.example.com/example4/
http://www.example.com/example5/ Do you keep extensions throughout your website, avoiding any sort of confusion and page duplication; OR Put a canonical link pointing to the extension-less version of each page, with the anticipation of this version indexing into Google and other Search Engines. OR 301 Each page which has an extension to an extension-less version, and remove all linking to ".html" site wide causing errors within software like Dreamweaver, but working properly. OR Another way? Please emphasise I'm sorry if this is a little vague and I appreciate any angles on this, I quite like clean url's but unsure a hassle-less way to create it. Thanks for any advice in advance0 -
Ever Wise to Intentionally Use Javascript for Global Navigation?
I may be going against the grain here, but I'm going to throw this out there and I'm interested in hearing your feedback... We are a fairly large online retailer (50k+ SKUs) where all of our category and subcategory pages show well over 100 links (just the refinement links on the left can quickly add up to 50+). What's worse is when you hover on our global navigation, you see the hover menu (bot sees them as ) of over 80 links. Now I realize the good rule of thumb is not to exceed 100 links on a page (and if you did your math, you can see we already exceeded that well before we let the bots get to the good stuff we really wanted them to crawl in the first place). So... Is it wise to intentionally shield these global nav links from the bots by using javascript?
Intermediate & Advanced SEO | | mrwestern0