最佳化“商品規格選擇”面板,需要注意這幾點

導讀:現如今我們幾乎每天都會接觸到電商類產品,除了商品詳情、活動營銷會很大程度影響使用者購買心理之外,“商品規格選擇”面板(ACTION SHEET)(又或“彈窗”)則會直接影響使用者對心理行為所對應的互動操作。不同電商平臺的面板有何差異?怎樣的面板元件設計才是讓使用者覺得流暢且簡單的?本文從對面板的控制元件拆解分析及各大平臺的面板分析,梳理總結了一些商品規格選擇面板的控制元件互動規則,及當業務需求過多時,如何選擇控制元件。

最佳化“商品規格選擇”面板,需要注意這幾點

文中產品包括(都以鞋類為例):

小程式:李寧、NIKE、ECCO、特步、安踏

APP:淘寶、拼多多、京東、唯品會、得物

一、“商品規格選擇”面板

1.1 喚起面板

通常在商品詳情頁,可以透過“加入購物車”和“立即購買”按鈕控制元件喚起商品規格選擇面板,“淘寶”可以透過點選商品詳情處的規格選擇喚起;其中唯品會將規格選擇作為卡片直接設定在商品詳情頁中,無需喚醒面板即可完成購買。其餘則可以選擇顏色屬性,更多屬性仍需要點選按鈕控制元件喚起面板。

最佳化“商品規格選擇”面板,需要注意這幾點

值得一提得是,按鈕控制元件得功能屬性和產品本身定位有很大關係,“拼多多”和“得物”都是直接購買,直接促進使用者下單,前者在於其拼團屬性,後者在於營銷活動相關度不高且存在較多搶售產品。且按鈕控制元件的功能屬性也會影響規格選擇面板中的按鈕控制元件屬性。

1.2 面板高度和形式

面板的尺寸和麵板中承載的元件和資訊內容多少有關,大體包括兩種型別:

①可滑動面板(有進度條)

除了商品本身的規格選擇,“淘寶”“京東”綜合性電商平臺涵蓋更多活動資訊,諸如購買方式、分期付款、洗護保潔等服務;“李寧”增加了尺碼錶資訊。所以面板高度都較高,且能透過進度條上下滑動

②固定面板(無進度條)

其他活動等資訊承載內容少的情況下,通常則包括商品顏色、商品碼數、商品數量三大資訊,這時使用固定面板可減少誤操作,提高選擇效率。

最佳化“商品規格選擇”面板,需要注意這幾點

1.3 面板拆解

想要設計好用、高效的選擇面板,首先需要對面板中的內容、內容佈局、涉及控制元件有一個基本瞭解,透過對比競品,(這裡選擇淘寶為例,能涵蓋現有電商平臺較為全面的選擇面板資訊。)

1.3.1 面板佈局

選擇面板主要包含以下主要區域:

商品當前選擇資訊區:代表了使用者當下選擇好的商品資訊,包括商品圖片資訊、價格資訊、名稱、庫存、配送地址等,不同平臺對於商品展示的方式有多不同,也體現了不同平臺對商品展示的不同考慮。

配送地址選擇區:從本次競品對比來看,只有淘寶平臺會在面板進行地址選擇,其他平臺會在下一步進行操作,這也與淘寶平臺使用者量極大有關。包括當前位置、更改配送地址、預估配送時間

平臺主要服務區:一些平臺會把主要的服務設定在規格選擇上方,體現品牌的特色服務和調性,諸如購買方式、服務保障等。大部分鞋類垂類商城還會提供尺碼選擇幫助服務。

商品規格選擇區:以鞋類為例,商品規格屬性一般包括顏色、鞋碼、數量三大類別,大多會同步顯示庫存,“得物”還會單獨顯示不同鞋碼的價格。

平臺次要服務區:在使用者選擇好商品後平臺會激勵使用者選擇更多增值保障服務,如花唄分期購買,會員服務、養護清潔服務等

控制元件元素:包括蒙層、關閉按鈕、確定按鈕(下一步、加入購物車、立即購買)等功能屬性按鈕、進度條、選擇控制元件

最佳化“商品規格選擇”面板,需要注意這幾點

1.3.2 面板控制元件

進一步對選擇面板中的選擇控制元件進行梳理,大體包括以下幾種:

單選點選選擇器:在商品規格選擇中,顏色、尺碼都為單選且點選型別,選擇一個選項後,無法取消選中狀態

多聯點選選擇器:多聯選擇器是由兩個或兩個以上的中繼器製作而成,選擇某個中繼器後,會對第二個中繼器進行篩選,在鞋品的選擇中,顏色、尺碼遵循了多聯選擇器的規範,選擇顏色或尺碼某個選項,會篩選出還有庫存的選項。

步進選擇器:在數量選擇上各平臺都使用了步進選擇器

最佳化“商品規格選擇”面板,需要注意這幾點

1.3.3 不同使用場景面板差異

上節喚起面板說到,在商品詳情頁存在一或二個功能按鈕都可以喚起選擇面板,面板之間的差異在於使用者使用場景和功能的不同,想“加入購物車”的使用者通常選擇後不想再被中斷後續操作,因此面板上引導使用者進行“確定”,結束選擇流程;而對於立即購買的使用者則引導使用者進行“購買”,觸發後續購買流程。

無論是使用者在哪個場景,都應該引導和激勵使用者推進流程的繼續,如淘寶透過領券購買激勵使用者下單,唯品會券前券後不同功能按鈕和POPOVER的提示,多重方式鼓勵使用者加入購物車。

最佳化“商品規格選擇”面板,需要注意這幾點

二、選擇面板的控制元件規範解析

2.1 控制元件設計原則

透過競品的總結和尼克森的好用性原則,商品規格選擇器的基本原則有以下幾點:

易懂性:

文字說明易懂:在選擇器中,無論顏色和尺碼都要簡單易懂,有些商品的顏色具有晦澀的成語(如沙漠天空),導致使用者必須要點開大圖瀏覽才能明確商品顏色。選擇器中文字要短且準,非必要場景儘量不要使用ICON。

選擇狀態易懂:有清楚的顯示來表明顏色和尺碼的選中狀態、未選中狀態、不可用狀態,並且明確顯示此處可選擇。

選擇順序易懂:包括商品規格和平臺服務在內,使用者第一使用場景無法知曉具體內容和難以選擇的情況下,應為使用者提供易懂的選擇指南,讓使用者高效進行選擇。

選擇反饋易懂:每選擇一類屬性,都應有相應的選擇反饋,讓使用者感知選擇結果,輔助使用者進行抉擇

易用性:

某一屬性選擇時易用:要為使用者選擇標籤或步進器時,給予合適的觸控面積,元素和標籤之間間距相當,大小合適,減少誤觸。

不同屬性選擇時易用在選擇商品規格和選擇服務時,不應讓使用者有不同的選擇差異,元素和標籤視覺效果要統一,符合使用者的視覺習慣。

易抉擇:

商品規格選擇面板不僅為使用者提供屬性的選擇,更直接影響使用者是否加入購物車或下單,直接關係使用者的決策心理,因此不僅要易懂、易用,還要在各個選擇判斷下激勵使用者決策,

從文案層面,可以透過更接地氣的方式連線使用者

從視覺層面,用清晰可見且具有引導性的色彩和圖案,引導使用者決策,如同樣的尺碼助手,“得物”則採用和IP形象視覺化的手法,讓使用者更加願意新增尺碼。

從互動層面,可以增加選擇的趣味性等等

2.2 選擇面板使用者體驗影響因素

透過對面板的分析,易見得,使用者在商品選擇時,影響使用者選擇體驗的三大因素在於:商品吸引、選擇可知、情感激勵。把握好這三點則易有效提升使用者選擇體驗。

最佳化“商品規格選擇”面板,需要注意這幾點

2.3 選擇面板競品啟示

2.3.1 商品展示的多樣化

對於所選商品的展示,各平臺也各有差異,除了普遍採用的小圖片頭像+商品資訊以外,還包括使用大圖片形式展示,更能帶來沉浸感;以及圖片突出式展示,也能打破面板的界限,更動態化;“拼多多”和“唯品會”都取消了圖片展示小圖,而是結合到顏色選擇器中,能夠讓使用者在選擇顏色時反饋更即時。具體應用時應結合產品自身的定位和麵板具體內容來進行設計,總體來說,商品的展示會直觀影響使用者對商品選擇的慾望,也代表是否能即時的反饋選擇。

最佳化“商品規格選擇”面板,需要注意這幾點

2.3.2 顏色選擇器設計

在原則上,顏色選擇器應圖文結合,能夠清晰易懂的展示商品效果,且能在圖片資訊上即時反饋,顏色的選擇透過和商品主圖相關聯。

存在以下幾種情況:

主圖大小適當,顏色選擇器僅有文字內容,選擇顏色後主圖即時重新整理

沒有主圖,顏色選擇器文字加圖片結合,無需反饋,所見即所得

主圖大小稍小,顏色選擇器文字加圖片結合

三種方式各有優劣,第三種原則上充分考慮到使用者的需求,但也更加佔用面積。

最佳化“商品規格選擇”面板,需要注意這幾點

2.3.3 尺碼選擇器設計

除了主圖-顏色會進行關聯外,顏色-尺碼也通常會關聯,以顯示不同顏色或不同鞋碼下的庫存狀態。和服裝等物品不同,鞋品有時還會區分國內外鞋碼,ECCO的選擇了分段控制元件的方式進行選擇,唯品會則透過彈出層(popover)的形式顯示更多詳細資訊。通常鞋碼標籤一行不超過6個。

最佳化“商品規格選擇”面板,需要注意這幾點

三、“商品規格選擇”面板設計案例

根據以上分析,分享筆者實際一次專案中的應用,舒識定製商城是一個鞋品垂類購物和定製商城,由於其包含鞋品定製服務,因此商品選擇存在更多需求:

區分左右腳鞋碼

增加鞋寬規格的選擇

檢視和更改當前定製人腳型資料

主要需要考慮最佳化的方向是

最佳化主圖展示區:吸引和激勵使用者對商品進行定製和購買

最佳化規格選擇區:和其他電商平臺不同的是,該平臺在尺碼選擇方面不僅需要選擇鞋碼,還需要選擇鞋寬;並且使用者可以透過繫結自己的資料來匹配自己的具體尺碼。因此需要更多選擇器和不同的選擇狀態

賦予更多品牌感:透過控制元件元素和視覺色彩來建立品牌感

基於以上,針對主圖展示區和規格選擇區都輸出了AB版原型進行評審,從而形成最終方案。

最佳化“商品規格選擇”面板,需要注意這幾點

最佳化“商品規格選擇”面板,需要注意這幾點

最佳化“商品規格選擇”面板,需要注意這幾點

3.1 不可忽視的商品主圖區

在最佳化過程前期,始終採用比較傳統的主圖展示方式,最終評審一致認為在商品選擇時,面板後方的蒙層很大程度會影響使用者判斷,每個走查者都會碰到返回檢視商品主圖或檢視更多商品角度的情況。在主圖的商品視角上,普遍使用的都是正側檢視,這是由於鞋品側檢視大多對稱的情況,但隨著鞋品種類和款式的增多,也出現了很多側檢視好看,正檢視不好看的情況。

因此我們打破傳統,採用了主圖全屏顯示的形式,結合45°商品視角,呈現不一樣的商品展示效果。有效減少了使用者需要返回檢視商品詳情的次數,45°視角不僅可以展示更多商品資訊,也讓使用者有了新鮮感,吸引使用者在面板停留,從而做出選擇。

由於商品主圖區佔用尺寸較大,同時將原版的顏色選擇器等比例縮小從120px縮小為64px,一行最多展示4種顏色,更多顏色透過泳道滑動選擇,更加合理的使用面積。

3.2 根據實際需求選擇控制元件

為了能夠最大化的利用面板選擇多個資訊,拋棄了傳統的標籤點選選擇器,而是採用滑動選擇器,並區分不同選擇狀態。

系統推薦繫結尺碼

系統推薦的尺碼無庫存

還是堅持選擇自己慣用尺碼

無繫結尺碼推薦,使用者自己選擇

合理的規範和統一控制元件的不同狀態,大大提高使用者選擇效率,從而最佳化選擇體驗

3.3 使用者情感激勵

這次最佳化從文案和視覺效果上都增加了使用者的情感體驗,激勵使用者進行資料的繫結、提醒鞋寬的選擇,在色彩上重新規範和應用了品牌顏色:定製藍和活力橙。定製藍用來表明選中狀態和引導點選,活力橙代表強調提醒。

最佳化“商品規格選擇”面板,需要注意這幾點

本文由 @胡昀同學 原創釋出於人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基於 CC0 協議

頂部