通过合理的指示元素引导用户发现隐藏内容

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 10:05 点击:

  天气甚好,不冷不热,微困。搞掉这篇就上房顶子发发呆。如果哪位觉得今次的图标有些许惊悚的话,欢迎在评论中吐槽,或者直接在微博上跟我念叨。

  之前连续更新了两章iOS Wow体验,分别是关于应用上下文环境以及iOS技术特性这两方面的话题。今天换换脑子吧,放下移动应用这摊子事,回到Web端,遛一篇图文并茂篇幅简短的小译文,关于隐藏内容及相应的提示元素使用方式blah blah的。走着。

  标签(Tab)、下拉菜单、手风琴风格的折叠控件...渐进呈现(progressive disclosure)的交互方式可以有效的帮助我们降低界面的视觉复杂度,同时尽可能多的向用户展示内容。

  不过凡事有利亦有弊,在视觉上不可见的东西确实很有可能被用户所忽略掉。因此,把界面元素隐藏起来还不算完,我们必须通过一些恰当的方式向用户进行提示,让他们意识到隐藏元素的存在。

  用户的预期

  这里所说的预期,是指用户对自己能否在站点中找到隐藏元素所做出的假设和预判。如果用户认为某些内容一定是藏在什么地方的,他们就会主动的进行寻找;反之,他们也有可能受到一些因素的影响,过早的认定那些内容根本不存在。

  在购物网站中,多数用户认为自己能够并且应该获取到商品详情、退换政策、运费等方面的信息。在这种预期的作用下,即使那些内容并没有直截了当的呈现出来,他们也会主动寻找。

  另一方面,诸如用户点评、额外的商品图片集、视频演示等附加内容并非是所有购物网站的标配,如果它们在默认状态下是不可见的,那么对于那些不熟悉该站点的用户来说,通常不会花费太多时间进行寻找,因为在他们的预期中,这些内容可能就是不存在的。

  用户的预期取决于他们长久以来的认知和行为习惯。作为设计师,如果不能确保用户会从主观上积极主动的寻找隐藏元素,我们就要借助可视化的触发指示,引导他们获取更多的内容。

  触发指示

  任何一种对隐藏内容的存在起到提示作用的界面元素都可以被称为触发指示。它们大致分为五类:

  1.方向与空间

  具有指向性的界面元素通常可以用于对隐藏内容的指示。方向指示(directional indicator)的视觉表现形式能够很准确的描绘出虚拟空间当中位置及移动的概念,符合用户直觉。

  

ui-Hidden-Elements-trigger-indicators-2-itunes-disclosure-arrows

 

  此外,方向指示本身通常会以图标的形式存在,这也使得后面的文字标题在用户看来具有更强的可点击性,进一步增强了隐藏内容被发现的可能性。

  

ui-Hidden-Elements-trigger-indicators-3-fox-menu.png

 

  在Fox的主导航当中,前两个菜单项会各自触发一个“大数据量菜单”的展开(mega menu,赶上这种已然约定俗成的词儿我是真心不想翻成中文——译者C7210注),其中作为触发指示的正是标题文字后面的下三角图标。这类元素从视觉上来看是很微小的,但它们对于用户能否正确领会页面的交互方式却是至关重要的。

  空间指示(spatial indicators)与方向指示具有比较密切的相关性。在这种模式中,通常会有一个“高亮”的界面元素向用户提示当前所处的位置或是已做过的选择,而其他那些处于普通状态的同级别导航元素则暗示着当前区域当中有更多内容可以被发现。

  

ui-Hidden-Elements-trigger-indicators-4-spatial-indicators

 

  分页控件是一个比较典型的例子,这种模式可以很直白的让用户知道自己看过多少内容、现在正处于怎样的位置、接下来还有多少东西可看。另外,导航菜单中的“当前”状态标识,以及浏览器的滚动条等等,从本质上讲都属于空间指示。

  2.隐喻

  隐喻是一种非常有效的引导方式。例如,将用户界面设计成为书籍或杂志的样式,在交互方式上也模拟真实的物理效果。通过这种高度隐喻化的表现形式来承载在线内容,可以让用户会很自然的去浏览那些在当前可视区域“后面”的东西,就像在现实中看书那样。

  

ui-Hidden-Elements-trigger-indicators-5-metaphor

 

  隐喻的方式确实非常符合用户的直觉及预期;作为设计师,我们必须确保拟真界面的外观和交互方式能够准确的体现出

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1