產品診斷：到底「有沒有選中」？

原來不是我沒選中，而是頁面的選中效果太弱，導致我很難感知到已經選中套餐。

二、產品診斷分析 1. 分析套餐卡片

1）app 呈現的樣式

• 選中套餐前：卡片的邊緣線框顏色呈現淺灰色。
• 選中套餐後：卡片的邊緣線框顏色呈現綠色，與【豪華綠鑽】套餐頁面的主題色一致，線框粗細無變化。

2）用戶實操感知

當用戶的手機螢幕亮度較低，或者用戶所處的環境光線較弱時，很難察覺到選中後線框的顏色變化。除非用戶把手機亮度調至高亮，並且視線緊盯著套餐卡片，才可能感知到選中後的變化。

2. 分析支付按鈕

1）app 呈現的樣式

• 選中套餐前：app幫用戶做了選擇，默認選擇第一個【連續包月】套餐，價格顯示為 15 元。
• 選中套餐後：用戶主動選擇【3 個月】套餐，價格實時變化顯示為 45 元。

2）用戶實操感知

用戶在實際操作過程中，右手選擇左右居中的套餐時，確認支付按鈕被手擋住了右半部分，剛好遮住價格展示。所以用戶較難感知到套餐被選中後按鈕價格變化。

3. 診斷問題

從套餐卡片和支付按鈕兩個方面分析，app 中呈現的樣式與用戶實操感知是有差距的。設計師以為這樣可以讓用戶感知到，實際上用戶很難感知到。這樣的情況，在實際工作中不少見。

要避免該情況的發生，在需求前期需要多調研了解需求場景的根本問題。在開發過程中可以考慮通過A/B測試驗證效果，上線後對比哪種方式更利於用戶使用。產品是不斷疊代的過程，在產品發布到生產投入用戶使用後，多收集用戶的使用反饋，為後續疊代提升獲取更多有效、有幫助的信息。

如果條件可以，產品設計師可以在現場悄悄地觀察用戶的操作過程，觀察用戶有沒有遇到阻礙和疑惑點。或者，通過線上埋點數據分析用戶的使用。

分析思考🤔：用戶為什麼不在選擇套餐後直接支付呢？為什麼會多次來回切換套餐卡片？是因為找不到支付按鈕？還是因為選擇套餐的過程中遇到困惑？

三、產品改善建議

QQ音樂的會員套餐分為三種類型：【豪華綠鑽】、【超級會員】、【視聽會員】。下面，結合app現有的頁面交互方式，考慮如何提升用戶感知度。

1. 優化方案一

體驗發現在【超級會員】套餐頁選中套餐後的效果，相比【豪華綠鑽】套餐頁要更明顯。

1）對比【超級會員】與【豪華綠鑽】套餐被選中後的效果的不同點

a.套餐卡片邊框線條粗細不同，【超級會員】套餐線框寬度是【豪華綠鑽】套餐的兩到三倍，顏色變化明顯，選中後的效果突出。

b.支付按鈕展示的位置不同，【超級會員】支付按鈕在頁面底部，右手選擇套餐時不會被手擋住。而【豪華綠鑽】支付按鈕跟隨套餐卡片展示，右手選擇套餐時，會被手擋住。

2）優化方案

用戶在選擇套餐時，與頁面產生交互的過程中，眼隨心動，用戶此時內心想著選擇套餐，所以視線首先聚焦在選中後的卡片上面，其次會關注支付按鈕的變化。用戶的感知強度，在第一視覺衝擊中更能體現。

考慮在第一視覺上增強用戶感知，結合app 整體設計風格、視覺、交互效果的一致性考慮，【豪華綠鑽】套餐選中後的邊框線條的粗細，可以與超級會員保持一致，從而突出選中後的狀態，增強用戶感知。

該方案能增強用戶感知，能初步解決選中套餐後無法感知的問題，但第一視覺衝擊沒有特別明顯。

2. 優化方案二

為了更加凸顯套餐被選中後的效果，可以參考【視聽會員】頁選中視頻 VIP 後的交互效果。

• 選中前：視頻圖標樣式較小。
• 選中後：視頻圖標樣式被放大。

用戶在選擇套餐時，圖標被放大，給用戶帶來第一視覺衝擊。當某個事物的變化越明顯時，用戶更容易感知到。

參考該效果，在【豪華綠鑽】頁選中套餐後，可以放大套餐卡片，從而提升用戶感知度。

3. 對比兩個方案，擇優選擇

以上兩個優化方案，都是通過增強介面的視覺效果來提升用戶感知度。

對比兩個優化方案，從用戶感知強烈程度來看，方案二更能體現套餐被選中後的效果。

如果要採用方案二，那麼【豪華綠鑽】、【超級會員】頁套餐選中後的效果，需考慮會員套餐模塊整體設計風格的一致性，考慮選中後的效果統一按放大卡片樣式優化處理。

四、應用設計原理

這裡應用到尼爾森可用性原則中的「可見性原則」，可見性是指：將系統中的重要功能信息以及當前狀態和反饋顯示在頁面上，讓用戶能清晰地了解當前的系統狀態和可用選項，可以快速找到需要的信息並提供即時的反饋。

避免使用戶感到困惑和迷失。有助於贏得用戶信任，這對於產生良好的用戶體驗來說至關重要。

在案例場景中，是通過增強介面的視覺效果來提升用戶感知度，讓用戶清晰地了解會員套餐被選中的狀態。

五、總結：

本文由 @Nana 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。