我们从眼球追踪研究中知道，用户倾向于快速把他们的眼睛移到左边的列表。只有当最左边的一两个词引起人们的注意时，人们才会去阅读清单的其余部分。

的菜单设计指南至少对于垂直菜单来说是这样的:

  • 对齐菜单，这样用户的眼睛就可以在一条直线上移动，而不必重新获取每一行的开头。
  • 启动每个菜单项用一两个最能传达信息的词。
  • 避免用同样的几个词开始列清单，因为这样做会让它们更难被扫描。

将导航菜单与右边距对齐可能看起来很酷，但结果是左边缘不整齐严重降低速度用户可以扫描菜单并选择他们喜欢的选项。

(当然，左对齐的原则适用于从左到右读取的语言。为相反方向阅读的语言，指南是相反的:你应该右对齐菜单。无论哪种情况，关键是让用户更容易从他们开始阅读的那一边向下浏览。)

看看下面的截图。我在这个示例中选择了大学站点，但是在商业站点上也发现了右对齐的导航问题。

印第安纳、密歇根和范德比尔特大学的导航菜单截图。
三个大学网站的导航菜单。左至右:
印第安纳大学、密歇根大学和范德比尔特大学。

请注意，扫描菜单是多么困难。矛盾的是，Vanderbilt在同一个截图中为我们提供了一个正确对齐的例子:扫描顶部菜单比扫描底部菜单要快得多。

更复杂的是，其中两张截图也违反了反对使用所有大写字母，会降低10%的可读性。当你混合情况下在美国，上升和下降产生不同的字母形式，而所有的大写产生方方正正的形状。当您保留传统的单词形状时，用户识别单词的速度会更快。(举例来说，比较左边菜单中的“Employment”和中间菜单中的“Employment”。)

最后，中间菜单的文本和背景颜色的对比太低。违反了三个易读性准则会让中间的菜单特别难以阅读，尤其是对于视力较低的用户。所以，在这个例子中，密歇根大学获得了最差菜单设计奖。(学校有一个很好的人机交互程序，但显然网站设计者没有咨询当地的专家。)

诚然，菜单对齐是一个小点，而不是顶部更高层的roi设计优先．但要做对很容易——只要不要和右边对齐就行了。

更新菜单

在发表这篇文章的8小时后，我收到了来自密歇根大学设计团队的电子邮件，他们重新设计了导航菜单。快的工作。

重新设计的导航菜单来自密歇根大学。
密歇根大学的旧(左)和新(右)导航菜单。

通常，我不会因为有人重新设计了我批评的网站而更新我的文章。毕竟，我提到的任何网站都只是用作一个例子一个更大的原则和任何特定的设计选择的批评仍然是有效的，无论错误是否存在于一个特定的网站。但在同一天修复可用性问题是不寻常的，这也让我可以向你展示上面改进菜单的截图。我想你会同意，它比早期的设计更容易阅读。