Augmented reality (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特性,这些特性旨在告知购买决策。研究包括各种移动网站和应用程序,包括虚拟试用AR工具,以增强用户的外观(通常使用设备的正面摄像头或网络摄像头)和“室内查看”AR工具,这些工具可增强用户的环境,将物品放置在其环境中。虽然这些特性与用例略有不同,但我们的大多数发现都适用于这两种类型的AR工具。

可发现

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

Where and How to Promote AR

当第一次登陆网站或应用程序的主页时,许多用户扫描页面以查看促销情况,并推出新项目,或者更好地了解如果网站是首次访问,该网站必须提供什么。大多数网站没有推广主页上的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.

包括从应用程序主页或主登录屏幕链接到AR工具的链接,只有在以下情况下才最有效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 thefoundation shade matcher在ly showed a graphic of color swatches on a phone, and participants were surprised when the app asked for camera permissions.

2个Ulta移动应用主屏幕的截图,显示与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.

Only one website in our study, Kendra Scott, promoted a jewelry try-on AR feature on product-listing pages. Displayed as a banner above the product listings, I fully expected participants to overlook it due to广告盲点。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 indicatorfor哪些项目可以在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.”

Screenshot showing product-listing page grid of items, with no visual indicators marking items with AR
etsy移动应用程序:虽然AR适用于许多墙壁艺术品,但产品列表页面不包括该信息,强制迫使用户对该功能感兴趣以导航到每个细节页面,以查看它们是否可以在AR中查看它。

在产品详细信息页面上,AR功能出现时最为清晰产品图像附近使用clear text labels在AR中查看Preview in your spaceView in Room, 或者Live Try-On。While 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中查看产品”图像图像的左下角。中间图像使用了项目评级下方的蓝色横幅,高于多维数据集图标的价格和“这款电视对您的正确尺寸?”第三种图像显示了在产品图像区域的左上角标记的相机图标。
主要产品图像附近的AR图标比产品详细信息页面更远的功能促销更加明显。所有这些设计都被用户注意到,并包括一个有意义的文本标签,以帮助用户了解他们的含义。(需要定量研究以确定哪种演示最有效。)

突出的按钮和有意义的标签的位置比使用哪个图标更重要。例如,仅文本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 mobile website: The text-only buttonTry 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.

提出A.hint or instructional overlaypromoting the AR feature was common when users reached a product-detail page for the first time on a mobile app. While弹出窗口通常会有问题,因为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-Onfeature when the user reached a product-detail page for the first time, signaling that the page’s content could be pulled down to access the AR tool.

Left screenshot displayed a blue popup tip pointing to the AR icon and stating: Items with this icon can be previewed in your space, using your camera. Right screenshot shows a freeze-frame of an animation, where the page was pulled down to reveal the message: Want to try these on right now? Pull down for Virtual Try-On.
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无缝的— only one website correctly navigated users from a product-detail page on the mobile website through downloading and installing the app to the same product page on the app.

Screenshots of transition from mobile website to app store to app product page
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.

In contrast, some mobile websites only presented a general link telling users to download the mobile app to be able to use the AR feature. Upon launch, the app merely opened the main landing screen. Additionally, generic app promotions led several users to skip the link altogether and go directly to the app store to locate the app, thus eliminating the possibility of seamlessly navigating to a specific product. (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 homeusing the AR app; the promotion was misleading because it forced people to relocate the product once within the app.

详细介绍的促销报告:在您的空间中看到它。下载我们的增强现实应用程序的iOS可视化您家中的这件作品。
内部定义移动网站:产品 - 细节页面包括页面底部的相应AR应用程序的促销,低于所有产品信息。此链接没有保留当前的产品页面,强制人员从应用程序中开始搜索。

为了增加伤害的侮辱,几个参与者被挫败了,发现他们在网站上观看的沙发甚至没有在该应用程序中获得!After browsing the app, revisiting the mobile website to locate the item’s name, and returning to the app to search for it directly, one participant gave up and said, “So apparently, I’m not able to find the one I was interested in. That’s a bit disappointing.” This issue unfortunately was not limited to Interior Define, but seems to be common among dedicated AR apps — apps whose primary function is to view itemsin situ— as opposed to apps which incorporate AR features into the primary shopping app.

Using the AR tool

让人们使用这个工具只是AR功能的一半。一旦用户意识到它存在并有动力尝试它,他们就需要能够使用它来实现在其未来环境中设想项目的目标。

校准不熟悉且困难

当启动一个基于“增大化现实”技术的第一个障碍需要克服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重复学习那so because they don’t have many past experiences to draw on, they don’t know how calibration should work and how to best complete it. Thus,calibration requires helpful, clear instructions教人们通过该过程做些什么并引导他们。

一步一步的说明,在环境中适合用户的环境,最有效地指导用户通过校准。Etsy的移动应用AR功能在校准时提供了清晰的帮助内容,指示用户“扫描整个墙,包括它与地板和天花板的接触处”Specifying what to include in the camera view was immensely helpful那as users would otherwise not know what to show. Once calibration was successful, the instructions progressed to telling users to tap to make the item appear.

Etsy AR工具中的说明
Etsy暴徒ile app: Clear, stepped instructions guided users through interacting with this unfamiliar tool.

General help instructions that don’t reflect the user’s current issue aren’t helpful and can make a bad situation even worse. Several participants struggled to calibrate the Best Buy AR tool and gave up before being prompted to continue. The primary issue was a prominent instruction toMove 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、Instagram等社交媒体平台上的各种自拍镜头和过滤器,它们也更为用户所熟悉。一位参与者对Warby Parker应用程序的校准速度印象深刻,他说:“哦,哇,这很容易做到。它自动找到了我的眼睛。我本来想把它放在位置上,但它会自动找到我的眼睛和鼻梁在哪里,哇,非常简单,很有帮助。”

Screenshot from usability test session, showing participant trying on virtual glasses
Warby Parker应用程序:参与者对功能的快速和简单虚拟测试的速度感到惊喜,因为他们的脸很快被检测出来,而没有进行广泛的校准工作。

Requires Focused Attention

Interacting with the AR tool wasa complex task, which required users’ focused attention。People 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 toselectively focus在它和missed additional functions presented at the topAR视图的。(一般来说,与复杂事物交互会使用户更容易错过屏幕外围潜在的有用工具——这一发现也得到了我们对以下方面的研究的支持)store locators使用交互式地图。)

For example, a participant on Warby Parker’s mobile app took a screenshot using her camera buttons rather than the photo function present in the top-right corner of the AR tool when she was asked how she might get a second opinion on a pair of glasses she was interested in. She later explained, “I didn’t realize it had that; it already had a screenshot function. I just didn’t pay attention. It was on the upper right-hand corner. … I guessI’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.现在穿,好的。你可以玩……的事实the bottom part of the screen draws the eyes so much that I didn’t really notice the icons 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.
Ulta移动应用程序:屏幕的底部是用户可以选择各种产品尝试的地方,因此该区域消耗了大部分用户的注意。这意味着屏幕顶部的功能大多忽略了。

Sometimes, this focus on the bottom chrome of the AR tool meant that participantsoverlooked changeswithin the main camera view as well. 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.”

使用Best Buy AR功能中的标尺工具的截图。
最佳购买移动应用程序:用户如此专注于与AR工具的底部相互作用,并在选择标尺图标后查看在那里发生的信息变化,它们被盲目变为AR项目本身上所示的测量值。

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.

结论

Augmented reality is an exciting new technology that has the potential to become a useful tool for ecommerce. As more sites and apps begin take advantage of it, it will slowly become more expected and users will learn how to use it. Until then, great care must be taken to ensure that an AR feature is highly discoverable, clearly explained, simple to calibrate, and easy to interact with.