Website Navigation: 7 Best Practices, Design 提示s 和 警告s

分享这
安迪Crestodina
分享

小事造就大事. 你的网站导航就是一个很好的例子. The structure 和 labels of your navigation can have a huge impact on results. 原因如下:

  • 导航影响交通: how high you’ll rank, how much traffic you’ll get from search
  • 导航影响转换: how easy the site is to use, what percentage of visitors convert into leads 和 customers

Here is a video 和 checklist for website navigation best practices. 这些是设计的想法和技巧,以及网站菜单应该做什么(和不应该做什么)的例子.

1. 是描述性的

"十三水游戏做什么"并不是说你做什么. “产品”、“服务”或“解决方案”也是如此.” Descriptive navigation that uses keyphrases is better for two reasons. 这就是搜索引擎优化和转化率的作用.

  • Descriptive labels in your navigation are good for search engines
    The navigation bar is a key place to indicate relevance to search engines. 因为你的导航出现在每个页面上, the descriptive label shows Google that you are truly about that topic.
  • Descriptive labels in your navigation are good for visitors
    Your navigation bar is visually prominent, so it communicates instantly. 当它列出你的主要产品或服务时, 这是显而易见的, 乍一看, 你的公司预先做什么, 这样他们就知道他们来对地方了.

使用你的主导航作为一个地方,开始告诉人们和搜索引擎你在做什么. Use labels that use top-of-mind phrases for visitors 和 流行的关键词.

警告! 避免贴上“服务”和“解决方案”这样的标签.”

If you have one page listing all of your services, it will never rank. 那是因为它不专注于一个主题. 你网站上的每一页都有机会获得排名, 只要它专注于一个主题, 在一个短语.

No one is searching for “products” or “services,” so these labels don’t help your rankings.

This is why your website architecture, not just the navigation, is key for SEO. 一个经过搜索优化的网站为每个服务、每个产品、每个团队成员和主题都有一个页面. 避免制作一个“服务”页面,除非它链接到其他,搜索每个服务的优化页面.

更多信息,请阅读 如何制作网站地图.

2. 避免format-based导航

导航标签如“视频,” “photos” 和 “white papers” tell visitors the format of the content, 但不是主题. People don’t go to websites looking for videos or whitepapers. They visit websites looking for answers 和 information.

Labels indicating the format aren’t descriptive 和 therefore, not very helpful to visitors. That’s why Aurora Bedford from the 尼尔森诺曼集团 建议不要使用基于格式的导航.


Users interested in a specific topic usually don’t care in what format the information will be delivered to them; they are focused solely on finding answers that will address the question they had in mind.——Aurora Bedford,用户体验专家, 尼尔森诺曼集团


3. 避免下拉菜单

受欢迎的,是的. 但这不是个好主意. 避免下拉菜单有两个原因:

  • 对搜索引擎有好处: Drop down menus can be difficult for search engines to crawl. Depending on how they’re programmed, they may lead to problems.
  • 好为游客: 可用性研究表明 下拉菜单很烦人. 原因如下: visitors move their eyes much faster than they move their mouse. 当他们将鼠标移动到菜单项上时, they’ve likely already decided to click… 和 then you gave them more options. 这只是访客脑子里的一个小插曲.

更重要的是, 下拉框鼓励访问者跳过重要页面. If you’re using dropdowns, you can easily see this problem in your analytics.

website-navigation-ga

But the research shows that one type of drop down menu 在可用性研究方面表现出色:“mega drop down”.” These offer lots of options, making that moment of friction worth it.

If you have a big site with lots of pages 和 a very diverse set of products or services, 超级菜单也许是个好主意, despite the fact that they dramatically increase the number of links from your home page.

4. 把菜单项限制在7项以内

一些网站的主页上有数百个链接. 那就糟糕了. Limiting the number of links in your main navigation is good for two reasons. These are the same two reasons to use descriptive labels:

  • Fewer items in your navigation are good for search engines
    你的主页在搜索引擎中最有“权威性”,因为更多的网站链接到你的主页而不是你的内部页面. This authority flows down to deeper pages through your navigation.

    如果你的主页有大量的链接,这 稀释 the authority passed from it down to your interior pages. This reduces the likelihood that your interior pages will rank.

    你的导航就越简洁, 更多的权限将流向每个内部页面, 让你的内页更有可能排名.

    内部连接最佳实践 为更多的细节.

Example: If your homepage has an authority of 38 according to Open Site Explorer, then is has just this amount of authority to pass along to interior pages.

website-navigation-ose

假设您的导航包含50个条目,并与页面上的每个其他链接和按钮相结合, 你的主页总共链接到200个页面. 这意味着从主页传递到每个页面的权限数量除以200.

如果你把链接的数量减半, you’ll double the amount of authority passed from the home page, 和 increase the chance that your interior pages will rank.

website-navigation-pagerank

提示!链接的计算器计算任何页面上的链接数量. 它还估计了如果减少链接数量,传递的权限会增加多少. It uses PageRank, not Domain Authority, but the concept is the same.

  • 在你的导航中较少的条目对访问者是有好处的
    Short-term memory holds only seven items, plus or minus two. 这是来自 著名的心理学论文 由乔治·米勒于1956年出版.

    最近的研究表明,尽管大脑使用“分块记忆”作为一种提高短期记忆的方法, 这个数字取决于类别. 数字可能是7,但单词只有5.

    不管, 更多的项目在您的导航, the more difficult the information is to remember 和 process for your visitors. 从视觉上看,8比7大得多. If you have too many, visitors’ eyes may scan past important items.

    If you need to use more than seven items, consider breaking them up into groups.

警告! 避免长时间列表.

Break out your navigation into groups of five to seven items.

提示! Each time you remove a menu item (or any other element) from a page, 剩下的东西在视觉上更加突出,更容易被看到和考虑.

做出艰难的决定需要自律. 你能做到的. 挑战自己,把它减少到5个!

5. 网站导航的顺序很重要

The number of items matters, but so does the order of those items.

在网站导航, 就像任何列表一样, 开头和结尾的条目是最有效的, because this is where attention 和 retention are highest. 它被称为 系列位置效应,它结合了认知偏见:

  • 首因效应: Items at the beginning of a list are more easily remembered.
  • 近因效应: Items at the end of a list (or things that just happened) are more easily remembered.

因此,十三水游戏在导航的开头或结尾放置的任何东西都会变得更加突出. 十三水游戏应该把那些对十三水游戏的业务和十三水游戏的游客最重要的东西放在这些地方.

总是把对游客来说最重要的东西放在视觉上最突出的地方. This aligns with the core principal of web design 和 content marketing:

First give visitors what they want, then they might give you what you want.

So put the most popular, important items at the beginning of the navigation. 不知道这些是什么? 只要看看你的分析. 说到分析,让十三水游戏进入最后一个技巧.

6. 如何优化网站的导航

Designing your navigation is the beginning, not the end. 数字墨水永远不会干. 创建导航后的几个星期, you can use 分析 to look back 和 do a bit of evaluation.

有两个报告将显示你的访问者最常用的导航项. One is the “navigation summary” or “in-page” view in the Behavior 报告. 其他的是行为流/用户流报告.

In-page 分析 shows little orange boxes next to each of your navigation items, indicating what percentage of visitors went to each page from any page. 这是 错误和误导 有几个原因. 这也是一个小问题.

如果这个报告不适合您,您可以从您的主页查看“导航摘要”. 页面列表和每个页面的浏览量百分比会让你很好地了解你的菜单中正在运行的内容.

website-navigation-navsummary

另一个关于人们点击什么的视图在你的 Behavior > Behavior Flow 报告. 这份报告和 Audience > Users Flow 报告. These 报告s are identical unless you are tracking events. Event tracking is added to the Behavior Flow 报告 data.

In either case, the 报告 will look something like this:

website-navigation-behavior-flow

提示! For more insights into how to use the User Flow 报告, read 通过您的网站的顶部路径.

这些报告都是了解访问者正在使用哪些导航项,哪些没有使用的方法, 使优化.

Here are some examples of decisions you might make based on your analysis from these 报告s.

  • 删除 items that rarely get clicked, if they aren’t critical
  • 重命名 or relabel that rarely get clicked, if they are important
  • 移动 那些经常被点击到开始的项目

警告! Keep in mind that your home page may not be the entry point for many visitors. 一个搜索优化的网站有很多入口点. Many (or even most) visitors won’t start from the home page.

7. 移动设备上的网站导航

响应十三水在线游戏 has brought with it mobile navigation best practices 和 st和ards. 可以用两个词来概括:“汉堡包图标”.”

这是 an icon made up of three short horizontal lines, representing a menu. But it looks a bit like a s和wich, so people call it the hamburger icon. It appears in the top right of mobile websites 和 clicking it reveals the navigation menu.

下面是一些移动导航的例子.

Website-Navigation-Best-Practices-Nav-Icons

尽管这已经成为一个主导标准, adding the word “menu” may help visitors find this type of “hidden” navigation. 尼尔森诺曼集团警告说 hidden navigation increases task completion time for visitors.

Pro提示! 为移动的游客, make sure that the phone number turns into a button that dials the number when tapped. 只需将tel:添加到href代码中,作为站点移动版本的电话号码. 代码应该看起来像这样:

(773)348.4581

一个好的网站会让你的电话响个不停.

更多关于手机导航和按钮的想法,请阅读 如何设计一个按钮.

绘制(并改变)你的航线

We hope these tips gave you new ideas 和 inspiration for your menus. Ideally, you can implement your ideas quickly in your content management system. A good site is flexible, letting you adjust the labels 和 order of your menus.

任何规则都有例外. 不确定你是否应该做出改变? Ask an expert web strategist to review your 分析 with you.

Make your navigation work well for both human visitors 和 search engine robots. 你的分析会为此感谢你的!

有其他想法或问题吗? 那“home”键呢? 它是必要的? 你把你的电话号码写在你的标题里了吗? 请在下方添加您的评论.

分享这

你有什么想法??

签了字你就同意了十三水游戏的 隐私政策.

评论(29)
  • 伟大的作品,安迪! 我已经在搜索引擎优化工作多年,我仍然从你的每一篇文章中学到一些新的东西. 感谢Link Juice测试的介绍.

  • 我认为它将永远在极简主义之间, 用户需求, 虚假的用户体验以及十三水游戏想要展示更多内容的欲望.
    非常感谢. I have 10+ years of the marketing experience but your articles is very useful for me,

  • 嗨,安迪。!

    I have a question about two different options for navigation, 我将使用“服务”链接作为一个例子-

    1. 服务列在导航菜单中,当单击它时,会出现一个下拉菜单,其中包含8个服务. 每个服务都把你带到它自己的页面.

    2. 服务列在导航菜单上,直接指向一个名为Services的页面,该页面包含8个链接,指向有关这些服务的8个单独页面.

    这些选项中有一个对SEO更好吗? 我更喜欢选择2, but I was told that the more information is in the navigation bar, 更好的.

    谢谢!

    • 我通常更喜欢选择二,因为这是一个更好的方式引导访问者通过网站. But if you have a lot of options (10+) the “mega dropdown” might be a good choice.

      我会寻找除了“服务”以外的任何标签.“尽量用描述性的! 更好的搜索引擎优化和用户体验……

  • If you can’t identify the seven most important things to put on your menu, without drop-downs 和 with concise yet informative descriptions, you probably haven’t put enough 虽然t into what your website is about.

    (And my h和’s up higher than Arnold Horshack on that one. 有罪!)

  • 嘿,安迪!
    谢谢 for sharing such a great content about designing a site. 我还有别的问题,你能推荐一些你极力推荐的seo和设计服务吗?或者你提供这些服务吗??

    • We offer web design services, but we don’t do SEO as a separate, service. 这是十三水游戏设计过程的一部分. 但是有成千上万的搜索引擎优化公司. If you can, I recommend finding someone local that you can meet with regularly.

  • 我是如此匆忙地编辑我的网站导航,以至于我忘记感谢你的这篇精彩的文章:p

    回答你的问题, I put my email with (at) instead of @ at the top of the sidebar – no number, 虽然, since I don’t see my target audience communicating with me across continents!

    再次感谢.

  • 谢谢你的指点. 更好的设计就像简单的换挡模式. 提供快速、简单、全面的工作场所. 是的. 这样做.

  • 非常有用的指导. #3 -雾角里窝角-哈哈! You have a knack for making learning humorous 和 entertaining. 谢谢你!.

    • 很有趣,你抓住了. That was an 80’s cartoon reference for our Gen X readers!

  • 真的很喜欢这篇文章. 关于检查的一件事:引用的下拉菜单研究主要集中在添加信息的下拉菜单上,而不是一般的下拉菜单. Drop down menus may be annoying but if designed with the other best practices you mention, 我敢打赌,这一功能将是最小的问题. Mega-menus are equally annoying when they overwhelm the viewer with too many options.

  • 非常有帮助,谢谢你的这篇文章

  • 这是 time to kill the 7 plus/minus 2 urban myth for menus. 它适用于试图回忆项目, not when they’re visually in front of them as they are in a menu.

  • Hi, 你会建议什么代替“服务”在导航,如果一个公司有太多的服务,每个是一个导航项目,但没有足够的服务有一个mega下拉菜单?

  • 读完这些建议后, 请注意这个页面上的菜单结构打破了文章中定义的规则.

  • Andy, this is another article that is extremely helpful. 谢谢!

    However, it appears from the comments that this originally appeared 5 years ago. 在互联网时代度过了一生. 2017年的最佳实践发生了什么变化?

    • 我相信这是一个伟大的网站, you are working great on the content 和 quality of this site at the same time.

  • 一个客户有一家生产公司. with two events on their site, 和 each event has its own off-site ticket page. 他们希望在顶部主菜单中包含一个“TICKETS”链接,并有一个下拉菜单,其中包含到每个非站点页面的链接. My rule is to never link off your site in the main menu. 你的想法?

  • 伟大的阅读和坚实的建议贯穿始终.

    Question: When it comes to listing Products in a mega dropdown, 你对按制造商和用例列出产品有什么想法吗. 住宅/办公/商业)? Any SEO pitfalls or caveats to this organizational approach?

  • 这是伟大的职位,先生. 谢谢你!!

  • 我认为这是一个非常棒的帖子. 非常感谢与世界分享这一切.

  • 你好, 在子菜单上搜索客户问题的答案,我找到了一些这样的网站. 他们都说下拉菜单不好,然后又说只有几个顶级菜单项. 那么如何在矛盾中实现这个呢?

    这是 not that I don’t underst和 the gist of both statements, but no one gives the solution.

  • 你好,我有一个问题,如果我不使用下拉菜单,只有类别,how can i let the visitors find the sub links under the category quickly ? 因为我没有侧边栏的页面. 谢谢

  • 嗨,安迪。. 有用的信息,但你可能希望更新链接果汁计算器部分,因为该工具不再存在的链接,你分享. 如果你有别的选择,我很乐意听听. 谢谢.

  • 嗨,安迪。! 我正在创建我的第一个网站(一个博客),遇到这篇文章在谷歌搜索“网站导航最佳实践.这本书充满了许多我从未想过的珍宝和想法,所以我把它添加到我的日历中,每月重读一次. 谢谢你分享你的见解!

  • I am confused about the website navigation bar location. Would it be ok to have navigation in the website sidebar? 因为我的网站有更多的类别. 不可能让每个人都处于高层.

  • What is your 虽然t on having navigation links that then bring you to another site? 例如,我的组织有一个年度活动,十三水游戏有一个单独的网站为该活动. Should our organizational site have a nav link to a page about the event, 然后链接到另一个网站, 或者直接到另一个网站? 十三水游戏内部在这个问题上有分歧. 谢谢!!!

  • I would really like to know why you do not mention anything about the Order of the links. Al虽然 I agree that the order of navigation is important, I don’t agree with why. 我可以用更大的仓位效应超过你的连续仓位效应, 设计良好的链接最经常使用或链接我想我的访问者看到或使用第一个. 当我查看链接列表时, I look to search them alphabetically (unless one st和s out by color or size). 第一个和最后一个条目都不突出. And the longer the link list, the more I expect it to be in alphabetical order. But I do not see ANYONE making that point (probably because it is so obvious). 但对于那些不知道或反驳为什么字母顺序不重要的人来说,有必要这么说. This is true whether a pop down menu or a list of links to one side of the page. So what is the industry st和ard regarding [alphabetical] link order?

 
Join over 16,000 people who receive web marketing tips every two weeks.

签了字你就同意了十三水游戏的 隐私政策.

分享这