导航是Web网站重要的元素:置顶菜单的设计研究

文章描述:导航是Web网站中最重要的元素.

SirsiDynix公司UX/UI设计师Hyrum Denney在Smashing Magazine上发表了一篇文章《Sticky Menus Are Quicker To Navigate》,分享了自己对“置顶菜单”进行的可用性研究成果,及实现技术和相关挑战。CSDN对该文进行了编译,内容如下:

导航是Web网站中最重要的元素之一,大部分设计师都同意这一点。尽管如此,现在的导航并不总是容易使用。通常,用户必须滚动到网站的顶部才能访问导航菜单。最近,我在研究“置顶菜单”是否可以加速网站的导航。对此我进行了可用性研究。下面将展示本次研究的成果,以及一些实现的技术及相关的挑战。

图1

置顶导航的定义

置顶(或固定)导航是被锁定在网站某位置的菜单,当用户滚动页面时,该导航并不会消失,换句话说,用户可以在网站的任何地方访问该导航,而不用滚动页面。虽然置顶导航可以应用到任何菜单中,比如页脚、社交媒体按钮,但一般主要用于网站的导航上。图2展示了移动设备上标准导航与置顶导航的不同之处。

图2

可用性研究

研究背景

为了本次研究,我专门创建了两个几乎完全一样的测试网站。唯一的不同点是一个具有标准导航,另一个是置顶导航。在第一个网站中,要求四十个参与者限时完成5个任务。然后再到另一个网站上去完成另外不同的5个任务。这两个网站均在桌面电脑上进行测试,直到最后才会告诉用户两网站之间的不同。在测试完全结束后,通过对数据的分析,我得出两个有趣的结论。

1.置顶菜单可使导航快22%

研究数据显示,参与者不必将页面滚动到顶部,就可以快速地找到他们所需要的内容。22%看起来可能并不是一个大数据,但对访问者却有很大的影响。根据该数据,置顶导航可以帮助访问者每5分钟节约36秒。当然,如果你正增强用户体验,让用户在页面中停留更长的时间只是其中的一个好处。应该让用户深入探索该网站,不受任何限制地找到所需要的东西。

2.100%的参与者更喜欢置顶菜单,但不知道喜欢的原因

在测试的最后阶段,我都会问用户是否注意到两个网站的不同之下。但没人能说得出。变化很微小,没人注意到它,因为他们都在专注于完成彼此的任务。当询问参与者感觉哪个网站更容易使用。40位参与者均认为有置顶导航的网站更容易使用(使用更快速)。很多人评论说:“我不知道这两个网站有什么不同之处,但我感觉通过点击置顶导航可以节省更多的时间。”如此评论显示出用户对置顶导航的绝对支持。

桌面软件的置顶导航

想象一下,你正在Word中输入一个文档,每当你想加粗一个单词,或加宽页边距,都必须滚动到第一页进行设置。是不是一想起来,就让人沮丧啊。无论你正在做什么,大部分桌面软件都会时刻提供一个完整的导航菜单供你访问。Web浏览器也应该这样,如果我们必须滚动到网站的顶部才能访问浏览器的地址栏,那就太可笑了。

优秀案例分享

最近,Facebook和Google+也采用了置顶导航。在美国访问量最高的25家网站中,现在只有16%采用了置顶导航。下面列举出一些在这方面做得很棒的网站。

Fizzy Software

这是水平置顶导航中一个很好的例子,位于顶部。当使用该网站时,用户会感觉很舒服。

图3

Web Appers

该网站的导航是垂直的,位于左侧,与Google+的导航有点相似。它唯一的缺点是,如果屏幕的高度低于560像素,那么菜单下面的部分就无法访问了,我在上网本上测试该网站时发现了这个问题。

图4

MakeBetterApps

MakeBetterApps这是另一个精彩的例子。导航略微透明,它下面的内容依稀可见,这是一个很不错的尝试。

图5

Rodolphe Celestin

Rodolphe Celestin该网站的置顶导航横跨网站的顶部,但当你向下滚动页面时,导航的设计就会发生细微变化。只要保持好一致性,如此简化该设计是一个很好的技巧。同时,该网站的设计者还采用了当下正流行的设计方法:整个网站只有一个页面,导航上的链接是一个个锚点,点击后可以跳到页面的相应位置。这些都使该网站使用起来很舒服。

图6

注:相关网站建设技巧阅读请移步到建站教程频道。

[1] [2]  下一页

时间: 2024-12-08 19:57:09

导航是Web网站重要的元素:置顶菜单的设计研究的相关文章

置顶菜单可用性研究 可使网站导航快22%

SirsiDynix公司UX/UI设计师Hyrum Denney在Smashing Magazine上发表了一篇文章<Sticky Menus Are Quicker To Navigate>,分享了自己对"置顶菜单"进行的可用性研究成果,及实现技术和相关挑战.CSDN对该文进行了编译,内容如下: 导航是Web网站中最重要的元素之一,大部分设计师都同意这一点.尽管如此,现在的导航并不总是容易使用.通常,用户必须滚动到网站的顶部才能访问 导航菜单.最近,我在研究"置

jquery实现div超过指定高度,把元素置顶滚动

二级导航距离顶部有一定的距离,当页面滚动超过二级导航时,把二级导航固定在顶部. 我们都知道,position:fixed的作用是绝对定位,把它的z-index值调一些就可以达到目的. 但是当滚动条往下多少距离的时候才能触发的事件需要JS来辅助完成. CSS代码如下:  代码如下 复制代码 .category{ border:#d45d3f 3px solid; height:56px; width:1142px; line-height:56px; margin:0 14px; backgrou

Web网站的设计、管理与维护

web|设计 如果你在因特网上发现一个对你的工作有帮助或有参考价值的网站,你一定会将其网址告诉你的同事:如果找到你的朋友需要的信息,你同样记下网址告诉你的朋友:要是在网上冲浪时偶然遇到特别有兴趣的网站,你肯定加入到自己浏览器的书签中,每一个上网者都会这样做的.有许多人员设计过网站和个人主页,这在技术实现上已十分容易,有许多几乎不用编程的所见即所得的工具软件可以利用.但是让人们从浩如烟海的站点中,访问浏览你的站点甚至为你宣传,就不是那么简单,因为鼠标和键盘是永远掌握在上网者手中的.设计者如何设计出

Web网站从Domino迁移到WebSphere Application Server上的优势

本文将分析 Web 网站从 Domino 迁移到 WebSphere Application Server 上的优势,结合一个示例展现整个迁移. IBM Lotus Domino 是功能强大的企业级协作服务器平台,用于电子邮件.日程安排和协作应用.它提供的服务包括邮件服务器,Notes/Domino 应用程序服务器,数据库服务器,目录服务器,以及 Web 服务器等.当 Domino 提供 Web 服务器功能时,它能够将 Notes/Domino 应用程序中的设计元素和文档数据转换成 HTML 代

移动web网站的设计师:如何设计移动应用程序

文章描述:WebApp最佳实践用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用. 身为一个移动web网站的设计师,除非你只是针对某种特定的设备设计,否则你应该会常常碰到这样的问题:如何清楚地了解网站运行设备的屏幕尺寸大小?这个问题一直困扰着移动设备上的设计师. 例如: iPhone的高度是480个像素,宽320像素. 许多Nokia N系列设备的宽度为240像素,高度为320像素. 许多更新款的设备支持宽度和高度颠倒的视图. 旧款的Nokia(目前仍然比较流行)设备屏幕的尺寸从176×208到

国外优秀的网站设计:创意大导航单页面网站设计

在国外优秀的设计网站中,开始流行一种这样的Web创意设计风格:整站由一个单一页面组成,通过设置锚点的方式,利用JavaScript技术,实现网站内容的滑动导航.这种创意十足的Web设计效果,可以很大程度上给人一种流畅华丽的动画震撼,沉醉于其美妙的操作设计的同时,更为网站设计者的构造灵感而折服,这里就为你搜集了10个创意大导航单页面网站设计. WeBleedDesign Gavin Castleton Two24Studios DesignSpam JP3Design MadeToKill Cla

构架高性能WEB网站的知识点

前言: 对于构架高性能的web网站大家都很感兴趣,本文从几点粗谈高性能web网站需要考虑的问题. HTML静态化 什么是html静态化? 说得简单点,就是把所有不是.htm或者.html的页面改为.htm或者.html 1.纯静态页面 当用户访问是,不需要经过服务器解析,直接就可以传送到客户端,此类型的页面,由于不需要解析就能直接访问,一般情况下,比动态页面的执行速度快. 2.静态化 页面静态化就是用动静结合的方式将动态网站生成静态网站来保存.这是实实在在的html文件,也就是静态页面. 3.

聊聊Web网站和移动App的6大差异

开发框架"> 做交互设计近4年,参与过Web网站和移动App的设计,前者依托于PC的浏览器,后者则是依托于手机/平板电脑.不同的设备/平台均有各自的特点,以至于在设计这两类产品时也有些许差异. 今天就从交互设计的角度,聊一聊Web网站和移动App有哪些不同之处.以及需要考虑的设计要点. 一.用户与界面交互/操作的方式不同 Web网站:以鼠标或触摸板为媒介,多采用左键点击的操作,也支持鼠标滑过.鼠标右键的操作方式. 移动App:直接用手指触控屏幕,除了最通用的点击操作之外,还支持滑动.捏合等

从交互设计角度聊聊WEB网站和移动APP的六大差异

  做交互设计近4年,参与过Web网站和移动App的设计,前者依托于PC的浏览器,后者则是依托于手机/平板电脑.不同的设备/平台均有各自的特点,以至于在设计这两类产品时也有些许差异. 今天就从交互设计的角度,聊一聊Web网站和移动App有哪些不同之处.以及需要考虑的设计要点. 一.用户与界面交互/操作的方式不同 Web网站:以鼠标或触摸板为媒介,多采用左键点击的操作,也支持鼠标滑过.鼠标右键的操作方式. 移动App:直接用手指触控屏幕,除了最通用的点击操作之外,还支持滑动.捏合等各种复杂的手势.