The ability to recall the location of things is an important aspect ofhuman memory。In graphical user interfaces (GUIs), this capability is absolutely essential, as it allows users to quickly locate controls without undergoing laborious visual search each time.可视化搜索界面对于特定对象本质上是一种缓慢而艰苦的过程,并减少了对用户效率的巨大福音。

例如,我最近搬家了,新厨房里的东西跟以前不一样了。前几天晚上,我在找我的大蒜压榨机,我不记得我打开包装时把它放在哪里了。为了找到它,我不得不目测地搜索每个抽屉。找到媒体花了我一段时间,需要我的精力。而一个好的组织体系(比如信息体系结构) helps quite a bit, there is still a lot of scouring through drawers that needs to happen. But, with practice, I’ll eventually remember where the garlic press lives, so long as it doesn’t move from drawer to drawer!

定义:空间记忆是学习能力的对象的位置在哪里吗interest by interacting with them repeatedly. In GUIs, spatial memory allows users to develop a level of自动化访问常用功能或数据时。

为了让用户能够发展空间记忆,有两件事是必要的:

  • Stable UIs where things don’t move around (much)
  • 访问对象的重复练习

Research in both cognitive science and human–computer interaction (such as that carried out by Jason Alexander and his colleagues in 2009 Amy Shelton and her colleagues in 2001) reveals that users develop spatial memory in参考toboundarieslandmarks

例如,假设您正在搜索一个城镇的纸质地图,您在地图右下角的某个地方找到了它。你把地图放下一会儿,当你再次拿起它时,你对城镇的空间记忆与地图的边界有关。所以,首先从右下角开始。

拿着巴黎纸地图的人
地图上的空间存储器是在引用边界的边界创建的,例如通过河流河流的边缘或通过巴黎中间运行的河流创建的边界(这是作为该示例中的地标和边界的函数)。(拍摄者大卫塔皮亚圣马丁uns)

The UX takeaway from this example is two-fold. First, clearly defined areas of controls with obviousvisual boundaries(such as toolbars) are key for users to build spatial memory. Second, when the viewport size changes (e.g., because the browser windows is resized), objects should be as positionally stable relative to the outside borders as possible. In other words, scaling the interface, rather than reflowing it, is a good strategy for supporting users’ spatial memory and should be used if you have evidence that your audience changes the window size frequently. Reflowing the whole layout (as is common with masonry-based layouts of card UIs, for example) causes a major disruption in users’ ability to relocate objects.

(但如果您的用户倾向于不经常使用您的网站或应用程序或者它们始终使用单个视口大小,则重新回收可能正好。)

Two images of the MacOS Finder's Applications folder: on the left a version of the folder that is wide, and on the left, a resized view of the same folder shrunk in horizontal size)
The MacOS Finder reflows theApplications调整浏览器窗口大小时,将图标向下按到其他行,这样就不会出现水平滚动。由于没有保留空间定位,因此很难重新定位特定图标。
麦斯科斯查找器的文档文件夹的两个图像:在左侧的文件夹中,左侧,左侧的左侧视图,在水平大小上缩小相同的文件夹的大小视图)
However, not all folders in the MacOS Finder are reflowed. In this example, the spatial positioning is preserved when the window is resized, and the user needs to scroll horizontally in order to access the items outside the current viewport. Another approach would be to shrink all the icons so that they preserve relative position to each other. That approach, of course, would have visibility and legibility limits and downsides.

Besides boundaries, users also use landmarks to remember where objects are. Landmarks are prominent objects that stand out and are thus easy to locate — such as the Eiffel Tower in Paris or the London Eye in London. People orient themselves relative to these easily findable objects.

在用户界面中,用户可能会记住,靠近搜索栏或在主页上的英雄转盘上的对象。虽然空间记忆的这一方面在很大程度上摆脱了设计师的控制,但重要的是要了解用户如何在视觉上处理UI。

请注意,空间内存不仅用于记住对象在屏幕上或实际生活中的位置,而且还用于在2D和3D环境中导航到这些对象。后一项任务涉及找到这些物品的能力,即使他们目前可能不视图。例如,当您在新城市时,空间内存涉及,并找到回到酒店的路(不使用移动应用程序)。在这种情况下,您可能依靠地标和边界来规划您的路线并创建中级目标。您可以回忆起最接近酒店的地铁站,并创建一个导航到它的目标。一旦你在那里,你可以使用酒店旁边的高层建筑来定位自己并找到你的方式。这与您的冰箱一起看,记住您将蔬菜放在右下方。

哈利Hocheiser和他的同事的一篇文章表明,人们能够在物理环境中导航和建造空间内存与他们的各种用户界面的成功之间存在关系,例如顺序菜单。这一结果是真实世界的导航能力,以及序列菜单一次只显示一个部分的层次结构,需要记住如何访问目前不可见的东西。

空间记忆是不精确的

Except for the most-accessed objects, spatial memory tends to be fuzzy: users don’t remember the exact location of an object, but rather an approximation. Spatial-memory ability varies from user to user, as studies have shown that users withhigher spatial abilitiesmore accurately recall the specific location of items, but even in these cases, the spatial memory tends to be “neighborhood-level”, rather than “street-address–level.” Eventually, withenough rehearsal and repetition,用户将开发出精确的空间记忆,- 组合的物品。

An intentionally blurry image of the AutoCAD ribbon UI
空间记忆是不精确的:对控件位置的回忆相对不准确。AutoCad ribbon UI的这一故意模糊的图像旨在近似空间内存的“模糊”特性,用户可以回忆控件所在的“邻居”,而不是特定的“街道地址”。

Helping Users Build Spatial Memory

The following guidelines come with a caveat: all need to bebalanced against other UX considerations为用户在特定环境和任务中确定最佳总体设计选择。与任何用户体验设计一样,有tradeoffs之间learnability, efficiency,甚至总体用户满意度)。

这些指导方针支持spatial memory和are tailored for users who work with an interface repeatedly. In such scenarios, relocating key features and content quickly is important. The calculus might change for consumer-facing websites that users may visit only occasionally.

避免自适应接口

自适应接口以响应预期用户需求而重新排列UI元素。多年来已经有各种各样的实验自适应界面,但大多数都没有运作良好,因为他们打破了用户建立空间记忆的能力。

一种不断破坏空间存储器的自适应UI是具有频繁或最近使用的项目的特殊区域的接口。最常见的例子是基于频率的下拉:最多使用的物品通常被放置在顶部dropdown。(If you use this approach, duplicate the items both in their normal place and in the经常用过的area.)

MS Word字体下拉列表,为最近使用的字体为具有一个区域
MS Office的字体下拉有一个Recently Used Fontssection at the top. Fonts that show up in the recent section are duplicated in their normal position in the dropdown.

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

As spatial memory is rather imprecise, relying only on it to find items in the UI won’t be very efficient. Since most users remember the coarse neighborhood of an object, they have to perform a visual search in that neighborhood to find the specific object. To speed up that process, designers need to supply other supplementary visual or textual cues. This means, for example,pairing up icons with text labels或者在文档中包含页面缩略图以帮助用户查找特定页面。Visually salient features例如颜色高亮显示或徽章,可以区分密集列表中的对象,但要注意防止不必要的视觉混乱(这会减慢视觉搜索速度)。

使用宽而浅的层次结构

Designing for spatial memory often means making the entire information space visible at the same time, so users are repeatedly exposed to all the items and their locations. However, this approach, besides being unrealistic when screen real estate is limited, inherently slows down visual search —越多的选择that users must consider, the more time they will spend. The typical balance point of this tradeoff is to use a hierarchical organization of content or controls — as in dropdown navigation menus, ribbons, or accordions.

Unfortunately, hierarchies cause two inefficiencies for relocating items of interest: (1) they typically involve slow mechanical interactions such as dropdown menus and (2) they hide a significant part of the information space, and thus, according toHCI研究如Joey Scarr,他的同事们对空间记忆产生了负面影响。因此,为了快速检索已遇到的项目,a广阔,浅层等级is more efficient than a narrow, deep structure as it is both faster for spatially recalling the locations of key links and also reduces interaction cost. That’s not to say thatbroad and shallow hierarchies are inherently superior在所有情况下,对于建造空间记忆,呼吸比深度更好。

显示信息空间概述

大量数据很少适合屏幕并强制用户滚动。这种类型的信息显示,其中数据被划分为多个页面或屏幕,阻碍了信息空间的空间存储器。

考虑添加可视化技术,例如minimaps(在视频游戏和软件开发人员的ide中很常见)、大型文档的缩略图视图,甚至focus+context显示,以帮助用户建立信息空间的空间感。当用户需要来回浏览大量信息时,这些可视化也会有所帮助,例如,在一个大文档中创建短期空间记忆地标。

一个IDE代码编辑器,带有一个小的小地图,显示缩小后的整个信息空间的微小概览
io:右边的小地图显示了整个信息空间,还有一个绿色的高亮显示标记用户当前正在查看的部分。

When using techniques such as the document overview, an动画片zooming into the detail pages (or back out to the overview) can build a spatial awareness of the overall information space. In fact, a study by B. Bederson and A. Boltman showed that this technique improves spatial comprehension for users.

Apple的预览PDF查看器显示文档中所有页面的一系列缩略图
Apple在MacoS上的预览应用程序提供了一个大型文档的空间稳定概述,在转换到特定页面时,显示放大或缩小动画。

为用户创建地标

Especially in data-rich,高复杂性应用,用户通常需要梳理大量数据,然后回顾几个选项。为了支持重访,您可以创建名为拜访(or sometimes readwear)— small marks (e.g., colored dots, color changes) on either the content itself or in overview areas such as the scrollbar or the list of page thumbnails. These marks are like dog-eared pages in a book. Much like marking访问的链接在websites, visit wear helps users located already accessed content.

概括

空间内存对于构建重复用户的任务效率非常重要。通过重复使用空间稳定的接口,可以减少空间内存,并且可以减少找到关键特征或内容所需的认知努力量。然而,由于空间记忆往往是不精确的,通过包括其他突出的视觉提示和人工地标,辅助用户,概述整个信息空间,以及使用广泛的浅层的层次进行信息。

As a separate point, from a user perspective, because spatial memory (and implicitly task performance) improves when you can see more items at a time, it’s worth getting the largest monitor you can afford if you want to maximize productivity.

参考

杰森·亚历山大、安迪·考伯恩、斯蒂芬·菲切特、卡尔·古特温和索尔·格林伯格。”重温阅读磨损:分析,设计和评估的足迹滚动条。在Proceedings of the SIGCHI Conference on Human Factors in Computing Systems,池'09

本杰明B。贝德森和安吉拉·博尔特曼。”动画能帮助用户建立空间信息的心理地图吗?”, Information Visualization, 1999。(INFO VIS '99)诉讼。1999年IEEE研讨会

布莱恩·d·Ehret。“学习去哪里看:位置learning in graphical user interfaces.” InProceedings of the SIGCHI Conference on Human Factors in Computing Systems,池'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.” InChi'12在计算系统中的人类因素会议诉讼程序

Amy L Shelton,Timothy P McNamara。“人类记忆中的空间参考系统。”Cognitive Psychology,2001年。