链接

    Collection

    原文引自 Nielsen Norman Group 上的一篇文章《Spatial Memory: Why It Matters for UX Design》为主核心以及其他文章的内容补充。该译文并非完整原文,内容已做删减和调整,并加入了部分译者观点。

    空间记忆,作为人类记录环境信息的重要因素,在交互设计中如何发挥作用,如何运用空间记忆提升用户的效率、提升用户体验。

    本期提纲:

    1. 定义什么是空间记忆

    2. 在界面构建空间记忆

    3. 帮助用户建立空间记忆

    4. 总结

    1

    空间记忆的定义

    空间记忆是指人类记忆中中负责记录环境信息和空间方位的部份。回忆事物在空间中的位置,这就是空间记忆的作用。

    例如:因为搬家了,我的新厨房里的东西和以前不一样了。前几天晚上,我在找我的压蒜器,我不记得打开包装时把它放在哪里了。我不得不搜索每个抽屉才能找到它。找到它我需要花费一段时间,并且需要我的大部分精力。虽然一个好的组织系统(第二个橱柜的第三个)有很大帮助,但仍然需要进行大量的翻找工作。但是,通过练习,我最终会记住压蒜器的位置,只要它不会从一个抽屉移到另一个抽屉;又或者是人们熟悉一座城市的地理位置;又或是熟悉这个迷宫,从中简单顺利走出等等。

    所以回忆事物位置的能力是人类记忆的一个重要方面。在图形用户界面中,此功能绝对必不可少。如用户对常用页面,可以自动识别出页面功能与元素的位置,帮助用户构建空间记忆可以帮助用户快速重新定位关键功能和内容,有效提高用户的操作效率。

    2

    在界面中构建空间记忆

    Jason Alexander 和 Amy Shelton 在认知科学和人机交互方面的研究表明,用户会根据「边界」和「地标」构建空间记忆。

    1. 边界

    首先,具有明显视觉边界的明确定义的控件区域(例如工具栏、导航栏)是用户构建空间记忆的关键。明确的边界一方面划分了不同功能区的位置,另一方面因为有相对位置固定位置的 UI 元素 (stable UIs),于是保留了用户的习惯。

    在界面中交互的布局方式会影响到视觉边界。如左右结构的导航与内容页面,如上下结构的分栏 Tab 与内容界面。

    其次的响应规则、适配方式也会影响到视觉边界。如当窗口大小发生变化时,对象相对于外部边界的位置应该尽可能稳定。用户经常更改窗口大小,那么过度的适配(例如整个布局的改变)会极大削弱用户定位元素的能力。例如工具栏、导航栏往往是定宽或不适配的,就是为了保证这些重要元素位置的稳定性。

    例子 A:Mac 微信

    有明确边界的导航栏/工具栏,有最小宽度的操作区,其实都是为了保证各页面元素相对位置的稳定性。

    了解和利用「空间记忆」,提升体验与效率 - 图1

    例子 B:MacOS

    响应式:缩放窗口时,应用程序会重新排列,避免了水平滚动,因为 app logo 的识别性高,所以用户还是可以定位到对应 logo,完成 app 的选择。

    了解和利用「空间记忆」,提升体验与效率 - 图2

    非响应式:缩放窗口时,文件夹不会重新排列,需要水平滚动,但因为文件夹 logo 不具有识别性,所以保持 UI 元素的稳定性更加重要。

    了解和利用「空间记忆」,提升体验与效率 - 图3

    2. 地标

    除了边界,用户还使用地标来记住对象的位置。地标是突出的物体,因此很容易找到——例如巴黎的埃菲尔铁塔或伦敦的伦敦眼。人们相对于这些容易找到的物体来定位自己。

    空间记忆不仅用于记住对象在屏幕上或现实生活中的位置,还用于在 2D 和 3D 环境中导航到这些对象。后一项任务涉及找到这些对象的能力,即使它们目前可能不在视野范围内。例如,当您在一个新城市并找到返回酒店的路(不使用移动应用程序)时,就会涉及空间记忆。在这种情况下,您可能会依靠地标和边界来规划您的路线并创建中间目标。您可能会想起离酒店最近的地铁站,并创建一个导航到达目标。到达那里后,您可以使用酒店旁边的高楼来定位自己并找到自己的路。

    Harry Hocheiser 和他的同事的一篇文章表明,人们在物理环境中导航和构建空间记忆的能力与他们在站点导航的各种用户界面(如顺序菜单)方面的成功之间存在关系。这个结果是有道理的,因为现实世界的导航能力和一次只显示一部分层次结构的顺序菜单都需要记住如何访问当前不可见的内容。

    在用户界面中,地标就是可以传达特殊含义的文字符号、图标等(例如,彩色圆点、颜色变化、标签等等)。虽然空间记忆的这一方面很大程度上超出了设计师的控制,但了解用户如何在视觉上处理 UI 非常重要。

    案例 A:MacOS 颜色标签「地标」

    了解和利用「空间记忆」,提升体验与效率 - 图4

    3

    帮助用户建立空间记忆

    除了最常访问的对象外,空间记忆往往是模糊的:用户不记得对象的确切位置,而是一个近似值。空间记忆能力也因用户而异,研究表明,更高级的用户更准确地回忆起物品的具体位置,但即使在这些情况下,空间记忆也往往是“邻域级”,而不是“街道地址级别。” 最终,通过足够的排练和重复,用户将对少数、最常访问的项目形成准确的空间记忆。

    1. 避免不合理的适配(过度改变空间位置)

    上文中说到边界与固定位置元素的重要性。适配会改变页面结构,改变用户习惯。

    案例 A:带有「最近使用」和「最近搜索」就是一个正向案例,它没有破坏原有该选择的选项位置,而是将其提前,在保持原有结构的同时,增加了这项功能。

    了解和利用「空间记忆」,提升体验与效率 - 图5

    2. 使用文本标签和缩略图增加显著性

    由于用户的空间记忆不显著,仅依靠它来查找 UI 中的项目效率不会很高。由于大多数用户记得对象的粗略邻域,因此他们必须在该邻域中执行视觉搜索以找到特定对象。

    为了加快这个过程,设计师需要提供其他补充的视觉或文字提示。如让文字与标签、icon、缩略图等一起使用,用具有视觉显著性的元素帮助用户定位其他元素,也可以叫作视觉引导。

    3. 使用广泛、浅层的层次结构

    如果将所有的信息位于可视区,这或许符合人们加强空间记忆。然而,这种方法除了在屏幕空间有限时不切实际外,还固有地减慢了视觉搜索的速度——用户必须考虑的:选项越多,他们花费的时间就越多。这种权衡的典型平衡点是使用内容或控件的分层组织——如下拉导航菜单、功能区或手风琴。

    因此,大而浅的信息结构,会好于窄而深的信息结构。也就是我们设计页面层级经常遇到的一件事情一个界面的原理相近,且降低交互成本,理解成本。并不是说所有都适用,但是对于建立空间记忆,“呼吸感”比“深层次”更好一些。所以:

    易发现性,层级越少,越容易被发现;

    深层次的结构易混淆,如果层级深,需要考虑是否有概念重叠。

    4. 复杂的信息,可以给空间的总览概述

    就像地图可以让我们快速知道自己在哪里一样,一个有效的总览可以让我们的空间记忆压力变小。例如代码编写器右侧的缩略图、文件预览的缩略图、如 PDF 查看器的左侧总览。

    案例 A:代码工具右侧的总览

    了解和利用「空间记忆」,提升体验与效率 - 图6

    动画的层级关系设计可以建立对整个信息空间的空间意识,也可以提高用户的空间理解能力。

    案例 B:使用 MacOS 的文档概览预览操作时,会作出放大和缩小返回概览详细信息页面的动画。

    了解和利用「空间记忆」,提升体验与效率 - 图7

    5. 为用户创建「地标」

    正如我们刚刚说的「地标」,例如小圆点、颜色改变等,都能给予用户直观等信息。

    了解和利用「空间记忆」,提升体验与效率 - 图8

    了解和利用「空间记忆」,提升体验与效率 - 图9

    4

    总结

    空间记忆对于提高重复用户的任务效率很重要。空间记忆通过重复使用空间稳定的界面来增强,并且可以减少寻找关键特征或内容所需的认知努力。然而,由于空间记忆往往不精确,因此利用稳定位置的视觉元素、文本标签 icon 等地标、层级浅的信息结构、复杂信息的总览等,可以帮助用户建立空间记忆。

    参考资料:

    《Working Memory and External Memory》by Raluca Budiu

    《How to use spatial memory to improve user experience and efficiency》by Yif

    Jason Alexander, Andy Cockburn, Stephen Fitchett, Carl Gutwin, and Saul Greenberg. “Revisiting read wear: analysis, design, and evaluation of a footprints scrollbar”. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ’09

    Benjamin B. Bederson and Angela Boltman. “Does animation help users build mental maps of spatial information?”, Information Visualization, 1999. (Info Vis ’99) Proceedings. 1999 IEEE Symposium

    Brian D. Ehret. “Learning where to look: location learning in graphical user interfaces.” In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ’02

    Carl Gutwin and Andy Cockburn. “Improving list revisitation with listmaps.” In Proceedings of the working conference on Advanced visual interfaces, AVI ’06

    Harry Hochheiser, Ben Shneiderman.Performance “Benefits of Simultaneous Over Sequential Menus as Task Complexity Increases.” International Journal of Human-Computer Interaction, 2009.

    Joey Scarr, Andy Cockburn, and Carl Gutwin. “Supporting and Exploiting Spatial Memory in User Interfaces,” Foundations and Trends in Human-Computer Interaction, 2012

    Joey Scarr, Andy Cockburn, Carl Gutwin, and Andrea Bunt. “Improving command selection with commandmaps.” In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ’12

    Amy L Shelton, Timothy P McNamara. “Systems of spatial reference in human memory.” Cognitive Psychology, 2001.

    — The end —

    如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。如需转载,请注明来自WeDesign。

    原文链接

    了解和利用「空间记忆」,提升体验与效率 - 图10