首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

网站设计中不可忽视的可用性原则(2)

网站设计中不可忽视的可用性原则(2)

固定元素保持惯例设计师容易在设计中让自己的创意占据上风,期望界面脱离传统,具有创意无可厚非,但人们已经根深蒂固的元素,保持惯例会更为稳妥。比如
  • 网站标题(header)往往会在网站左上方显示。
  • LOGO 通常可以点击,以回到首页
  • 退出登录一般会在网站右上方显示
  • 版权信息总是位于最下方 footer
  • 网站搜索框经常会出现在网站右上方或中部上方
  • 切换网站语言版本的功能经常出现在网站 header 右端并配有国旗显示更直观
  • 搜索框必需是一个框
  • 注册通常在页面的右上角
让搜索更容易为了精确搜索或在特定范围内搜索,网站往往提供各种不同的搜索参数。但多数用户更为青睐不需要思考就知道该如何搜索的界面。针对搜索功能最常见的设计就是一个相对显得宽大的输入框,加上“搜索”按钮组成,以提供最为方便的快捷搜索。
这里需要注重的一个原则是,虽然我们有时必需提供高级搜索功能,但较好的用户体验是,即使用户没有提供额外信息的情况下,搜索功能也应该是正常能够工作的。比如:
图 4.当用户未选择任意一个 within 下拉列表内容时,搜索照常工作巨型菜单(Mega menu)的优劣势我们提倡仅在必要时使用下拉菜单,虽然下拉菜单占较少的屏幕空间,但其缺点也是明显的,例如选项可见性较低,下拉菜单所包含的内容项太多时将造成困扰。然而根据 Jacob Nielsen 对下拉菜单的研究,他认为下拉菜单并不一定要很小,“巨型”导航下拉菜单效果也不错。近年来,mega menu 成为在网页设计中成为一种趋势,尤其是在电子商务网站,如果运用得当,它确实能有效帮助到用户快速获取信息,大的二维下拉面板可以对导航选项进行清晰,组织良好的导航分组,将用户从不得不进行的滚动中解脱出来。运用是否得当成了设计的关键。
巨型菜单的优势:
  • 所有选项一目了然
  • 可通过分隔线、富文本、图标、图片修饰等视觉上手段更加清晰地组织菜单结构
图 5.利用图标,分隔线,文字加粗等手段使 mega menu 更易读巨型菜单的劣势:
  • 未展开前的 mega menu 不易被用户发觉
  • 大量的菜单选项占据了屏幕空间,遮住了一部分内容
  • 缩小浏览器尺寸或在小屏幕手持设备上不易看到全部菜单内容
  • Load 巨型菜单速度有影响
  • Accessibility 方面,fly-out 菜单很容易导致可访问性问题,代码书写需要更小心谨慎
图 6.缩小窗口后 mega menu 显示不完整,滚动条出现图 7.窗口高度缩小后 mega menu 显示不完整需要注意的是:
  • 不能无节制地堆放过量菜单选项,降低友好度
  • 激活 Mega menu 较好的作法是加一个倒三角小图标,暗示用户鼠标经过可展开更多内容。因为 Mega menu 本身不象一个按钮能更直观能告诉用户此处可点击
  • 避免菜单太难使用,鼠标指针轻微失去焦点,就得从头开始。
  • 避免使用多个下拉级别,多个层级的导航必须进行水平滚动,不够友好
  • 避免在 Mega menu 内加“搜索”功能
  • 避免在 Mega menu 区域内右上角加“关闭”按钮,这本身并不是必需的,关闭菜单较好的设计方案是将鼠标移开一定的距离才能关闭它,Jacob Nielsen 的另一个建议是鼠标移开 0.5 秒后,菜单在 0.1 秒内消失
返回列表