增强现实(AR)随着越来越多的公司将AR功能整合到自己的网站和应用程序中,AR正在慢慢地成为主流。一旦你决定AR tool would be useful,you must thoughtfully design it to ensure that it can be used successfully.

To uncover usability issues surrounding augmented-reality shopping features, we conducted a mobile远程审核研究有10名参与者。对于这项研究,我们专门针对电子商务AR的功能,旨在告知购买决定。The study included a variety of mobile websites and apps, including virtual try-on AR tools that augment the user’s appearance (typically using the device’s forward-facing camera or a webcam) and ‘view in room’ AR tools that augment the user’s surroundings to place items within their environment. While these features are slightly different use cases, the majority of our findings apply to both types of AR tools.


因为AR是一种相对较新的技术(最初用于游戏),大多数用户都不认为积极寻找它when they browse products online. Thus, if an AR tool exists, it must be very可发现用户注意到;它也应该清楚地传达它是什么以及用户应该与之交互的原因。


当第一次登陆网站或应用程序的主页时,许多用户扫描页面以检查促销和精选新项目,或者如果是首次访问,则会更好地了解该网站所提供的内容。大多数网站都没有在主页上推广AR功能。Warby Parker’s website was one of the exceptions and displayed a floating banner at the bottom of the screen promoting the ability to virtually try on frames using its app. This banner appeared on all pages until dismissed by the user.

Warby Parker移动网站主页的屏幕截图,在屏幕底部显示一个白色横幅元素,说明“几乎尝试框架”并“检查出来”
Warby Parker mobile website: A floating banner promoting the AR tool on the corresponding app was displayed on the bottom of each page.

包括来自App的主页或主登陆屏幕的链接,只有当users can browse multiple productswithout leaving the tool. For instance, the Ulta mobile app promoted several virtual try-on tools on the main page, all of which allowed users to browse and try on multiple products without leaving the AR experience. Furthermore, the call-to-action to launch the tool should be descriptive enough so当用户随后被要求允许访问他们设备的摄像头时,他们不会感到惊讶。Showing images of people’s faces and the wordstry-onwere usually sufficiently strong cues. In contrast, higher on the page of the Ulta app, the link to the基金会遮阳架在ly showed a graphic of color swatches on a phone, and participants were surprised when the app asked for camera permissions.

2屏幕截图相同的Ulta Mobile App主屏幕,显示链接到AR工具的各种按钮
Ulta mobile app: Links to various product-browsing AR tools were available on the home screen. Showing images of people’s faces helped participants understand that the feature would need camera or photo access.

我们研究中只有一个网站KENDRA SCOTT,在产品上市页面上推动了珠宝试验AR功能。显示为产品列表之上的横幅,我完全预期的参与者忽略了它横幅失明。However, I was pleasantly surprised to find that it was noticed and made users excited. One participant saw the banner immediately and stated, “New virtual try-on, that’s actually interesting. I’ve never seen a virtual try-on with earrings.” Sadly, the AR feature wasn’t available for many items, which quickly led to disappointment. “This website says try them on, but I picked the third most popular earrings on the whole web page [and it wasn’t available]. So, I get it if they’re not for every single item, but you would think their top 20 or 50 items, you would be able to have that option for.” So, use this tactic only if your AR tool works with many of your items — or, at least, with the most popular ones.

Screenshot showing a pink banner at the top of product listings stating
Kendra Scott mobile website: Product-listing pages displayed a banner promoting the ability to virtually try-on the jewelry.

当参与者意识到AR选项的存在时,他们想在产品列表页面上看到的主要内容是visual indicator为了哪些物品可以在AR中查看。参与者很快注意到,并非所有的the items were available in AR, and yet there was no way for them to know that without visiting each product-detail page. For example, one participant on the Etsy mobile app complained, “It said items with this icon — you can view it virtually, but you have to click each item to know if it does that. It doesn’t tell you when you’re scrolling through the list. That’s kind of annoying.”


在产品 - 细节页面本身上,AR功能在出现时最可被发现靠近产品图像并使用clear text labels例如在ar中看到它,预览您的空间,在房间里看,或实时尝试。尽管the AR 3D box icon was recognized by some participants as being associated with using the camera to view items in their surroundings, a camera icon seemed to work just as well. Note that several participants didn’t recognize the AR cube icon at all, so it is definitely not a通用图标! When asked what that icon was, one participant said, “I assume it looks like a cube, like a 3D cube … but … if I hadn’t just used it, I wouldn’t have known.” As always, icons worked best when paired with ameaningful text label

2个产品详细信息页面的截图和AR链接的各种演示。1带有立方体图标,并在产品图像的左下角显示“在AR中查看”。中间的图片使用了一个蓝色的横幅下面的项目收视率,上面的价格与立方体图标和“这台电视的大小合适吗?”第三个图像在产品图像区域的左上角显示了一个标有Live Try On的相机图标。

按钮的显着放置和有意义的标签比要使用的图标更重要。例如,仅限文本Try It Onbutton on product-detail pages of the Ray-Ban mobile website worked well and was noticed and understood by users. Do not create a completely custom icon, as these are likely to be confusing and misunderstood by users (and don’t contribute toward the adoption of a standard AR icon). Unfortunately, after using the AR feature, the Ray-Ban website replaced its straightforward text button with an uncleartoggle。Participants in the study weren’t sure what the unlabeled icons represented and had to toggle back-and-forth a few times to realize its meaning.

Ray-Ban移动网站:仅限文本按钮Try It Onwas straightforward and understood by users. Unfortunately, this button was replaced by a confusing toggle switch once the user interacted with the AR tool.

呈现提示或教学覆盖当用户在移动应用程序上第一次到达产品详细信息页面时,促销AR功能很常见。尽管弹出窗口往往是有问题的,因为AR是一个新的和意想不到的特性,参与者接受中断,并愿意了解它。另外,在产品详细信息页面显示提示之前的等待是contextually appropriate,因为用户可以立即试用该工具。

Keep in mind, however, that users may be quick to dismiss modals without reading the text inside; if they do so, there is no easy way for them to access that information again. For example, a participant on Etsy’s mobile app was disappointed that the hint only appeared once and that the icon alone was easy to overlook because it blended into the background. She commented, “They should prompt you more because people like me that think they know everything, they’re going to miss out. … I think that’s a really cool feature, I just wouldn’t have known to find it or look for it.” An alternative to relying on a hint popup is to make the button itself more prominent (as already discussed) or to consider a有目的的动画如果劫持的特性是值得关注。For instance, Warby Parker’s mobile app displayed a brief animation promoting theVirtual Try-On第一次到达产品详细信息页面时功能,请指示页面的内容可以按下以访问AR工具。

Hints (like Etsy’s, left) and animations (like in the Warby Parker app, right) alerting users to the existence of an AR tool were generally well-received because these were presented in the right context and gave users helpful information they wouldn’t have known to look for.

Seamless Transitions Between Channels

Incorporating AR features into the primary browsing website or app made these tools readily available during the shopping process, increasing the likelihood that a user would discover and use them. Perhaps due to technical limitations, only three of the websites in our study allowed users to use AR features directly from the mobile website — all others merely advertised that AR was available but required them to download a mobile app. However, thisprocess of switching channels was far from无缝- 通过下载和将应用程序在应用程序上的同一产品页面上,只有一个网站从移动网站上的产品详细信息页面正确导航用户。

从移动网站转换到App Store到App产品页面的屏幕截图
Best Buy: Clicking the AR button on the website’s product-detail page led users to the app store to download the app, then directly to that product’s page on the app, so users did not have to find the item again.

相比之下,一些移动网站仅介绍了一般链接告诉用户下载移动应用程序以便能够使用AR功能。启动后,应用程序仅打开主登陆屏幕。此外,通用应用程序促销领导了多个用户完全跳过链接并直接转到App Store以找到应用程序,从而消除了无缝导航到特定产品的可能性。(Though, perhaps these general links were less misleading than those that appeared to be specific to a product, but weren’t.) For example, product-detail pages on Interior Define’s mobile website presented a promotion — missed entirely by some participants because it was located very low on the page — tovisualize this piece in your home使用AR应用程序;促销是误导性的,因为它强迫人们在应用程序内重新安置产品。


雪上加霜的是,几位参与者随后沮丧地发现,他们在网站上看到的沙发甚至在应用程序中都找不到!在浏览了这个应用程序,重新访问了移动网站,找到了这个项目的名字,并返回到该应用程序直接搜索它,一位参与者放弃了,并说:“所以很明显,我找不到我感兴趣的那个。不幸的是,这个问题不仅限于内部定义,而且似乎在专用AR应用程序中很常见,这些应用程序的主要功能是查看项目in situ— as opposed to apps which incorporate AR features into the primary shopping app.

Using the AR tool



当启动一个基于“增大化现实”技术的第一个障碍需要克服tool is calibration. This process tended to be difficult for users, partially because it is so new and unfamiliar (and partially because the technology needs improvement). People通过重复学习因此,因为他们没有多少过去的经验来吸引,他们不知道校准应该如何工作,以及如何最好地完成它。因此,calibration requires helpful, clear instructions教人们做什么,并指导他们完成这个过程。

逐步说明上下步适用于用户的环境,最适合通过校准引导用户。etsy的移动应用程序AR功能在校准时提供了清晰的帮助内容,指示用户“扫描整个墙壁,包括符合地板和天花板的地方。”Specifying what to include in the camera view was immensely helpful,因为用户否则不知道要展示什么。一旦校准成功,指令就会进展告诉用户挖掘以使项目出现。

ETSY AR工具中的说明

一般帮助指令,不反映用户当前问题并没有有用,并且可以使情况变得更糟。几位参与者努力校准最佳购买AR工具,并在提示继续之前放弃。主要问题是一个突出的指导Move Closer,which led some to eventually touch the wall with their phone in an effort to follow this direction.

“It’s taking so much [more] time than I expected. So, I don’t know what I have to do. It says move closer. I am doing that, but, okay. That was actually a little confusing.”

“That was a very unsatisfying experience. I’m not sure what it was needing me to do. It kept saying move closer, move closer, to the point where I was almost touching the wall. In which case, you can’t really see how it looks in the space if you’re that close.”

指令Move Closer这也直接反驳了后来的一个提示,即相机视图需要在墙上包括一个焦点(从更远的地方可能更容易获得)。此外,一些参与者认为这一技巧意味着他们需要在摄像机的视野中举起一些东西,这是很难处理的,也是无效的。

Poor hints to calibrate within the Best Buy AR tool
最佳购买移动应用程序:(左)通用指令Move Closerwas confusing and misleading, as it most often made calibration more difficult. (Right) These instructions were slightly more helpful and correctly presented only after several failed calibration efforts, but were still too general to effectively guide the user through the process.

这些校准困境的例外是虚拟试用工具。校准技术不仅更准确,因为面部的轮廓比空白墙更容易检测到,但由于Snapchat和Instagr等社交媒体平台上的各种自拍镜头和过滤器,用户也更熟悉。一位参与者对Warby Parker的应用程序的校准速度印象深刻,陈述,“哦,哇,很容易做到。它自动发现了我的眼睛。而且我期待需要定位它,但它自动发现我的眼睛和鼻梁桥的地方,这是哇,非常容易乐于助人。“

Warby Parker App:参与者对工作有多速度和轻松的虚拟试用功能感到惊喜,因为他们的脸部被快速检测到没有广泛的校准工作。


与AR工具进行交互a complex task, which required users’ focused attention。人们spent most of their attentional resources looking at the AR view and at anychromepresented at the bottom of the screen. Because this bottom area is where people expected to find details about the product they were viewing, interact with UI elements to change the item’s color or size, select a new product, or find other related tools, users tended to有选择地焦点在上面,然后missed additional functions presented at the topar视图。(一般而言,与复杂的东西互动使用户更有可能错过屏幕周边的潜在有用的工具 - 我们的研究也支持的发现store locators与互动地图。)

例如,Warby Parker移动应用程序上的一名参与者在被问及如何获得对她感兴趣的一副眼镜的第二个意见时,用相机按钮而不是AR工具右上角的拍照功能截图。她后来解释说,“我不知道它有这个功能;它已经有了截图功能。我只是没注意。它在右上角。……我想I’m looking more down than up and those things were on the topand maybe I just didn’t notice it. … Because the first thing I would do is put the frames on and then I would look down, I’m looking at the description.”

Similarly, a participant using the Ulta mobile app’s virtual try-on tool had been looking for a way to remove a type of makeup entirely, rather than selecting a different color. She had almost given up when she finally found a listing function presented at the top of the screen that allowed her to view all the products she had selected, plus the ability to remove specific items. She said, “Oh you know what? I just noticed up at the top …all this time I never even looked at the top here。So now I see there’s more at the top.现在穿, 好的。......你可以玩的事实屏幕的底部绘制了眼睛,即我并没有真正注意到顶部的图标太多了。”

Screenshot from usability test session, showing participant trying on virtual makeup. Right image shows screenshot of the Now Wearing screen, which she had initially overlooked.

Sometimes, this focus on the bottom chrome of the AR tool meant that participantsoverlooked changes在主相机视图中也是如此。For example, several participants shopping for a television on Best Buy’s mobile app noticed the ruler icon within the AR tool and clicked it expecting to view measurements, but were disappointed that it seemed to only add pricing information to the screen — they didn’t look up at the AR view to see that is where the measurements were shown! One participant stated, “So that’s not what I was expecting … I expected that ruler to come up. … Some sort of dimensions to show up, like length and width, and instead just the price came up underneath the picture.”


In this case, a better solution may have been to only add the measurements to the main AR view (along with the visual feedback showing that the button was selected), so users would continue to look at the screen to find what had changed. Adding the unrelated information of price and anAdd to Cartbutton distracted users and made them believe that was the main function of that button.