產品診斷:到底“有沒有選中”?

0 評論 3047 瀏覽 4 收藏 10 分鐘

產品的好壞體驗,只有用了才知道效果如何,下面是筆者以開通QQ音樂會員為例子進行分析,一起往下看,筆者分享的內容了解更多吧!

在使用不同的產品時,會有不同的體驗,好的產品設計能讓用戶覺得愉快,不好的產品設計會給用戶帶來糟糕的感受。

我就是來改善這些不好的體驗的,一起來看看吧~

一、用戶操作場景

在開通QQ音樂會員時,選擇 3 個月套餐后,沒感覺到頁面的變化,以為自己沒有選中套餐,于是重復操作選擇 3 個月套餐。

經過多次來回切換選擇套餐后,才發現頁面的確認支付按鈕會隨著選中的套餐不同,價格也會呈現不同。

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

二、產品診斷分析

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. 對比兩個方案,擇優選擇

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

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

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

四、應用設計原理

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

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

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

五、總結:

  1. 在產品設計時,若想要提升用戶的感知度,可以通過增強界面的視覺效果來提升。在進行產品體驗優化時,先“向內看”,優先考慮產品內的同類型事件,交互樣式和效果的呈現是否一致。如果 A 模塊比 B 模塊呈現的效果更好,更貼合用戶的使用場景,那么可以優化 B 模塊,向 A 模塊的效果靠齊。
  2. 產品設計需考慮整體設計風格一致,便于用戶辨別同類型的事件,這是保障用戶體驗的重要前提。讓絕大多數約定俗成的規則和流程都被用戶不自覺地印在大腦中,約定俗成的慣例讓用戶不需要重新學習某個平臺上新的東西,降低學習成本。

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

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!