AR在電商設計中的應用

AR在電商設計中的應用

AR在電商設計中的應用,觀點,拾柒醬,翻譯文章站酷網,中國設計師互動平台。

隨著越來越多的公司將AR(增強現實Augmented reality)功能集成到其網站和App中,AR正在慢慢地變成主流。一旦確定AR工具很有用,就必須進行周密的設計以確保可以成功使用它。

 

為了揭示AR功能在網購中的可用性問題,我們進行了一項有10名參與者的移動遠程主持的研究。在這項研究中,我們專門研究了電商中的AR功能,旨在了解購物決策。這項研究包含了各種移動網站、App、可增強用戶外觀的虛擬試穿的AR工具(通常使用設備的前置攝像頭或網絡攝像頭)和通過將物品放在用戶環境中來增強用戶的周圍環境的“在房間內觀看” 的AR工具。儘管這些功能在用例上稍有不同,但我們的大部分發現都適用於兩種類型的AR工具。

 

PART1. AR的可發現性

因為AR是一項相對較新的技術(最初用於遊戲),所以大多數用戶在瀏覽產品時都不會主動尋找它。由此,如果存在AR工具,那它就必須非常容易被用戶發現。它還應該清楚地傳達它是什麼,以及用為什麼用戶應該與它交互。

1.1 在何處以及如何推廣AR

 

當第一次登陸網站或App首頁時,許多用戶會瀏覽該頁面,查看促銷和精選新商品,或者好好了解該網站是提供什麼的。大多數網站並未在主頁上推廣AR功能。 Warby Parker的網站是個例外,它在屏幕底部顯示了一個浮層,以便推廣App中虛擬試戴鏡框的功能。這個浮層會出現在所有頁面上,直到被用戶關閉為止。

只有當用戶無需離開AR工具的情況下瀏覽多個產品時,在App的主頁或主界面添加到AR工具的鏈接才能發揮最佳效果。例如,Ulta App在主頁上推廣了幾個虛擬的試穿工具,所有這些工具都允許用戶瀏覽並嘗試多種商品,而無需離開AR體驗。

此外,啟動AR工具的召喚用語應具有足夠的描述性,這樣當用戶隨後被要求獲得訪問其設備的相機的權限時,就不會感到意外。顯示人臉圖像和“試穿”一詞通常是有足夠強烈的暗示。相反,在Ulta App頁面的上方,指向粉底色塊匹配器的鏈接只在手機上顯示了一個色塊的圖形,當該應用程序請求相機權限時,參與者感到很驚訝。

在我們研究中,只有一個網站Kendra Scott,在商品列表頁面上推廣了珠寶試戴AR功能。在商品列表上方顯示為banner,我完全希望參與者由於廣告盲區而忽略它。但是,令我驚訝的是,它被發現並引起用戶興奮。一位參與者立即看到banner,並說:“新的虛擬試戴,實際上很有趣。我從未見過戴耳環的虛擬試戴。” 遺憾的是,許多商品無法使用AR功能,這很快讓人失望。 “這個網站說可以試戴,但是我在整個網頁上選擇了第三受歡迎的耳環,AR功能並不可用。”因此,我明白,如果他們不是每個商品都能使用AR功能,但你會認為他們的前20或50個商品,你可以有這樣的選擇。 ” 因此,只有當你的AR工具可用於許多商品,或者至少適用於最受歡迎的商品時,才可以使用這一策略。

一旦參與者意識到存在AR選項時,他們最希望在商品列表頁面上看到的是那些可以在AR中查看商品的視覺標識。參與者很快注意到AR中並非所有項目都可用,但是如果不訪問每個商品的詳情頁,他們將無法知道哪些可用。例如,使用Etsy App的參與者抱怨說:“上面說帶有這個圖標的項目你可以虛擬地查看,但是你必須點擊每個項目才能知道它是否這樣做。當你滾動列表時,它不會告訴您。那有點煩人。”

在商品詳情頁,當AR功能出現在商品圖片附近並使用清晰的文本標籤(例如在AR中查看它,在您的空間中預覽,在房間中查看或實時試用)時,AR功能最容易被發現。儘管一些參與者將AR 3D框圖標識別為與使用相機查看周圍的項目相關聯,但相機圖標似乎也可以啟動作用。請注意,一些參與者根本無法識別AR立方體圖標,因此它絕對不是通用圖標!當被問及那個圖標是什麼時,一位參與者說:“我認為它看起來像一個立方體,就像一個3D立方體……但是……如果我不去使用它,我就不會知道。”與往常一樣,將圖標與有意義的文本標籤配對時效果最佳。

相較於使用哪個圖標,AR按鈕的突出位置和有意義的標籤更為重要。例如,雷朋移動網站產品詳情頁上的純文本“試用”按鈕效果很好,並且受到用戶的注意和理解。不要創建一個完全自定義的圖標,因為它們可能會引起用戶的困惑和誤解(並且不會對採用標準的AR圖標有所幫助)。不幸的是,在使用增強現實功能之後,雷朋網站將其直觀的文本按鈕替換為不清楚的切換按鈕。這項研究的參與者不確定未標記的圖標代表什麼,並且不得不來回切換幾次才能意識到其含義。

當用戶首次在App上訪問商品詳情頁時,通常會提供提示或新手指引層來凸顯R功能。儘管彈出式窗口經常是有問題的,但由於AR是一項新的意想不到的功能,因此參與者很樂於接受中斷並願意了解它。另外,在切換頁面等待直到出現商品詳情頁顯示提示是適當的,因為用戶隨後可以立即嘗試該工具。

 

但是請記住,用戶可能會在沒有閱讀裡面的文本的情況下迅速關閉彈窗;如果他們這樣做,就沒有簡單的方法讓他們再次訪問該信息。例如,令Etsy App的參與者感到失望的是,該提示只出現一次,並且由於AR圖標與背景融為一體很容易被忽略。她評論說:“他們應該給出更多提示,因為像我這樣的人認為他們知道一切,他們會錯過機會。……我認為這是一個非常酷的功能,我只是不知道要去發現它。 ” 另一種依賴提示彈出窗口的方法是讓按鈕本身更突出(如前所述),或者考慮有目的的動畫(如果功能值得吸引註意力的話)。例如,當用戶第一次進入產品詳細信息頁面時,Warby Parker App顯示了一個簡短的動畫,介紹了虛擬試穿功能,標示了頁面內容可通過下拉打開AR工具。

 

1.2 平台之間的無縫過渡

將AR功能集成到主要的瀏覽網站或應用程序中,使AR功能在購物過程中隨時可用,同時也能增加用戶發現和使用它們的可能性。也許由於技術限制,我們研究中只有三個網站允許用戶直接在網站上使用AR功能——而其他網站只是廣告宣傳AR可用,但需要下載App。不管怎樣,切換平台的過程遠非無縫的——只有一家網站通過下載並安裝該App,正確地將用戶從網站的商品詳情頁導航到APP的同一個商品頁面。

相比之下,某些網站僅提供了一個通用鏈接,告訴用戶需要下載該App才能夠使用AR功能。啟動後,該應用程序僅打開了首頁。此外,通用應用促銷活動導致一些用戶直接跳過鏈接,直接到應用商店尋找應用,從而消除了無縫導航到特定產品的可能性。 (儘管如此,這些一般性的鏈接可能比那些似乎是某一產品的特定鏈接更具有誤導性,但事實並非如此。)例如,Interior Define移動網站上的商品詳情頁上展示了一個促銷活動(一些參與者完全忽略了這個活動,因為它位於頁面的非常低的位置),讓你在家裡使用AR應用就能看見這件作品;這種推廣具有誤導性,因為它迫使人們在應用中重新定位產品。

更糟糕的是,一些參與者隨後沮喪地發現,他們在網站上看到的沙發甚至無法在app中使用!瀏覽app後,重新訪問手機網站查找商品名稱,返回app直接搜索商品名稱,一位參與者放棄了,並說:“顯然,我找不到我感興趣的那個項目,這有點令人失望。”不幸的是,該問題不僅限於Interior Define,似乎在專用AR應用程序(其主要功能是就地查看商品的應用程序)中很常見,而不是將AR功能集成到主要購物應用程序中的應用程序。

 

 

 

 

PART2. 使用AR工具

讓人們使用這個工具只是AR功能戰役的一半。一旦用戶意識到它的存在並有動力去嘗試它,他們就需要能夠使用它來完成他們在其預期環境中設想物品的目標。

2.1 校準是陌生且困難

啟動AR工具時要克服的第一個障礙是校準。這個過程往往很困難,對於用戶來說,部分原因是它太新、太陌生了(部分原因是技術需要改進)。

人們通過重複來學習,是由於他們沒有很多過去的經驗可以藉鑑,他們不知道校準應該如何工作,以及如何最好地完成校準。如此,校準需要有幫助的、清晰的指導來教人們該做什麼,並在整個過程中指導他們。

 

與用戶場景相適應的分步說明,最適合指導用戶進行校準。 Etsy Appz中的AR功能在校準時提供了清晰的幫助內容,指示用戶“掃描整面牆,包括其與地板和天花板相交的位置”。指定相機視圖中包含的內容非常有用,否則用戶將不知道要顯示什麼。一旦校準成功,說明將繼續告訴用戶點擊以顯示該條目。

一般的幫助說明沒有反映用戶當前的問題,這是沒有幫助的,而且可能會使糟糕的情況變得更糟。幾名參與者努力校準Best Buy AR工具,並在提示繼續之前放棄了。最主要問題是對“移動更近”的重要指示,這導致一些人最終用手機觸碰牆壁,試圖沿著這個方向移動。

 

“這比我預期的花費了更多的時間。所以,我不知道該怎麼辦。上面寫著靠近。我正在這樣做,但是,好的。這實際上有點令人困惑。”

 

“那是一次非常不愉快的經歷。我不確定需要我做什麼。它一直說靠近,靠近,直到我幾乎要碰到牆。在那種情況下,如果你那麼近,你將無法真正看到它在空間中的樣子。”

 

“移動更近”指令也直接與後面的提示矛盾,後者提示攝像機視圖需要在牆上包括焦點(從更遠的地方可能更容易獲得焦點)。此外,一些參與者將此提示解釋為意味著他們需要在相機的視野中舉起一些東西,這是很難平衡的,也是無效的。

 

這些校準難題的例外是虛擬試戴工具。這不僅是因為臉部輪廓比空白牆更容易探測,而且由於Snapchat和Instagram等社交媒體平台上的各種自拍鏡頭和濾鏡,用戶更熟悉人臉。

一位參與者對Warby Parker應用程序的校準速度印象深刻,並指出:“哦,哇,這很容易做到。它自動找到了我的眼睛。我還以為需要給它定位,但它會自動找到我的眼睛和鼻樑的位置,哇,非常容易,非常有用。”

 

 

 

2.2 需要集中註意力

與AR工具進行交互是一項複雜的任務,需要用戶集中註意力。人們把大部分注意力都花在AR視圖和屏幕底部的任何chrome瀏覽器上。因為人們希望在此底部區域找到有關他們正在查看的產品的詳細信息,與UI元素進行交互以更改商品的顏色或尺寸,選擇新商品或找到其他相關工具,所以用戶傾向於選擇性地專注於該商品而錯過了AR視圖頂部提供了其他功能。 (通常,與復雜事物進行交互使用戶更有可能錯過屏幕外圍可能有用的工具,這一發現也得到了我們對以下問題的研究的支持:使用交互式地圖存儲定位器。)

例如,當詢問Warby Parker的移動應用程序的參與者如何對她感興趣的一副眼鏡產生第二意見時,她使用相機按鈕進行了屏幕截圖,而不是AR工具右上角的照片功能。她後來解釋說:“我不知道它有這個;它已經具有截圖功能。我只是沒有註意。它在右上角。……我想我看起來比向下更多,而那些東西在頂部,也許我只是沒有註意到。……因為我要做的第一件事就是戴上畫框,然後往下看,我在看描述。”

 

同樣,一名使用Ulta手機應用虛擬試用工具的參與者一直在尋找一種完全卸妝的方法,而不是選擇不同的顏色。當她幾乎放棄時,她終於發現屏幕頂部出現了一個列表功能,允許她查看她所選擇的所有產品,以及刪除特定項目的功能。她說:“哦,你知道嗎?我只是注意到頂部……一直以來,我都沒看這裡的頂部。現在我看到上面還有更多。現在穿著,好。……你可以在屏幕的底部一直玩,這一事實吸引了太多的眼球,以至於我並沒有真正注意到頂部的圖標。”

有時,這種對AR工具底部區域的關注,意味著參與者也忽略了主相機視圖內的更改。例如,幾名參與者在Best Buy上購買電視時,注意到AR工具中的標尺圖標,並單擊它以查看測量結果,但對它似乎僅在屏幕上添加定價信息感到失望,他們沒有抬頭,在AR視圖中可以看到測量結果!一位與參與者說:“這不是我所期望的,我期望尺子出現。可以顯示一些尺寸,比如長度和寬度,而圖片下面只顯示了價格。”

 

在這種情況下,更好的解決方案可能是,只將測量值添加到AR主視圖(以及顯示按鈕被選中的視覺反饋),這樣用戶就可以繼續查看屏幕,以發現發生了什麼變化。添加不相關的價格信息和“添加到購物車”按鈕會分散用戶的注意力,讓他們認為這是該按鈕的主要功能。

 

結論

AR是一項令人興奮的新技術,有潛力成為電商的有用工具。隨著越來越多的網站和APP開始利用它,它將逐漸變得越來越令人期待,並且用戶將學習如何使用它。在此之前,必須非常謹慎地確保AR功能具有高度可發現性、清晰的解釋、簡單的校準和易於交互。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。