數據告訴你真相！漢堡圖標并非最佳菜單方案

3 評論 7343 瀏覽 17 收藏 10 分鐘

今天，我們的菜單通常都會使用漢堡圖標來表現，他們在APP中無處不在，但是漢堡圖標真的是無往不利的么？今天讓我們通過3個A/B測試來了解一下漢堡圖標在移動端網頁設計中存在的問題，以及給我們帶來的啟示。

用戶體驗設計不是忽悠，也許5分鐘口水攻勢能讓前臺小妹覺得你的設計非常高大上，但是要讓每一個用戶對著屏幕上的UI欲罷不能以身相許還需要數據支撐。

難道不是么？用戶體驗設計和可用性研究上，就存在著相當的不確定性?；ㄉ弦簧衔绲臅r間跟同事爭論甜豆漿好喝還是咸豆漿好喝，都不如5分鐘做個統計，決定未來公司外賣的豆漿配送標準。同樣的，我們的主觀臆測并不一定準確，只有當我們真正開始測試并觀察用戶行為的時候，才知道這個真實世界里的用戶擁有著怎樣的習慣，網站和APP在設計菜單圖標的時候，怎樣才符合“大部分”用戶的需求。

菜單圖標要怎樣設計才好？讓我們通過測試和分析來尋求答案。我曾經針對漢堡圖標做過一個A/B測試，來搜集用戶對于不同的菜單圖標的反饋信息。

第一個A/B測試

作為菜單圖標，三個漢堡圖標各不相同，但是都保留了漢堡標識，這符合控制變量法的基本規律。測試結果表明，右邊的圖標點擊率高于前兩者。

這個階段的測試目的很明確，我們想了解怎樣的漢堡圖標更吸引用戶。作為一個目前認知度最高的圖標，將漢堡圖標作為基準是一個不錯的選擇。但是就目前的數據來看，漢堡圖標+邊框的設計比起其他的兩種而言更吸引用戶的點擊，但是轉化率也就提高了22.4%，這可能是邊框的存在，更吸引用戶的注意力。

由于測試網站用的是一個博客類的站點，我們可以明顯地觀察到僅有2%左右的用戶會打開菜單欄，這也反映了網站類型與菜單打開率之間的關系。像Facebook這樣的社交網站，菜單欄的打開率會比2%高太多。這次的測試的主體還是在移動端網頁上，我們必須時刻記住這一測試設定。

于是，我接下來打算測試一下純粹的漢堡圖標和“MENU”菜單標識之間的點擊率差異，也就是第二階段的A/B測試。

第二個A/B測試

這次測試是針對所有移動瀏覽器上的網頁進行的；測試時間設定為5天，所參與的用戶數量約為50000人；統計數據表明，被測試人群中，25~24歲的用戶占據主體；

訪問網頁的終端類型比例如下：

  • iOS：64%
  • Android：34%
  • WP、黑莓和其他移動操作系統：2%

那么，我們可以把第一階段的測試結果作為第二階段測試的基準。所以，我們將第一階段測試的帶框的漢堡圖標的測試數據作為這一A/B測試的基礎。

變種1：MENU+邊框

變種2：MENU+漢堡圖標+邊框

變種3：MENU

其實從邏輯上來說，這一變種并不在測試設計的考慮范疇以內，僅僅是用來做為參考使用，用來驗證我的猜想。

第二階段測試結果：

正如同預測的結果那樣，單純的文本“MENU”表現不佳，點擊量和轉化率無可辯駁地存在于基準線以下。而有意思的是，變種1，也就是加上邊框的MENU轉化率居然比帶邊框的漢堡圖標還要高！

基于第一階段A/B測試的結果，我們可以明顯注意到，在網頁上放一個簡單的扁平的漢堡圖標并不是最佳的方案（注意，是移動端網頁而非APP），在按鈕上寫上“菜單”二字然后加上邊框（盡量使它看起來接近于按鈕）是用戶點擊率和轉化率最高的方案。

當然，這不是意味著用戶不明白漢堡圖標的含義，有可能是文字和語言會更能吸引用戶的注意力。

其實測試到這里，就可以看出一個很有意思的現象了：用戶需要明確而直接的標識（只放MENU或者漢堡圖標），同時也需要一個邊界提醒他們：“看到這個框了嘛，這就是一個圖標！”

最后，我們不妨再針對“MENU+邊框和漢堡圖標+邊框”進行一個對比測試。

第三個A/B測試

測試對象僅為帶邊框的漢堡圖標和MENU:

測試結果如下：

form2 form1

其實，如果看總體的結果數據的話，和第二階段的測試并沒有大的差異。不過在今天iOS和Android壁壘分明的今天，我們還需要深入分析一下平臺差異帶來的影響。我針對不同平臺的用戶進行了跟蹤分析，這也是第三階段好玩兒的地方，iOS平臺和Andorid平臺上的數據很不一樣：

從數據可以看出，iOS平臺上的用戶點擊菜單的比例大概是Android平臺用戶的2~3倍。這種結果的原因何在？我們恐怕無法完全分析出來。但是可以揣測，這種影響是系統本身的差異影響而得來的。iOS用戶和Android用戶對于菜單的使用習慣是截然不同的，在過去很長的時間里，Android平臺的用戶習慣了存在于手機底部的菜單欄（觸控，甚至實體按鍵），而iOS用戶的菜單通常直接呈現在屏幕的右上角或者其他的地方，這種使用習慣上的差異可能會影響他們在網頁瀏覽的時候對于菜單的態度。

結論

細節見真章。在移動端網頁設計的時候，我們要如何設計網頁菜單的細節？通過這一系列的測試，我們應該窺得一二。雖然漢堡菜單按鈕絕大多數的年輕用戶已經很了解了，但是在瀏覽過程中，夠不夠明顯，要如何吸引用戶的目光而又不違和，是UI設計師需要考慮的事情。

這次的三個測試都是基于英文語境之下，iOS和Android用戶的比例相差也不是很大，但是在中國卻截然不同——絕大多數的移動端用戶都是Android用戶?。纱笃脚_用戶在使用習慣上的差異，通過用戶基數的差異，最終會產生明顯的差異，而這也是參與UI設計的UI/UE/UX同學們需要思考的事情。

UI設計的每一個細節都需要你全情投入！

 

原文地址：exisweb

翻譯：陳子木

譯文地址：http://www.uisdc.com/mobile-menu-abtest

版權：人人都是產品經理遵循行業規范，任何轉載的稿件都會明確標注作者和來源，若標注有誤，請聯系主編QQ：419297645

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
我是芝士
大王叫我來巡山
631篇作品 7671943總閱讀量
10-103189 瀏覽
小紅書終于妥協，買手電商能搞來錢嗎？
08-143324 瀏覽
抖快紅甄背刺OTA，能分走攜程們多少蛋糕？
10-166873 瀏覽
我眼中的PMO
03-076389 瀏覽
5分鐘給你整明白銀行怎么玩企業架構
12-145675 瀏覽
三福百貨數據分析：新時代背景下新零售百貨的一般銷售模式
評論
評論請登錄

  1. 有意思~

    來自香港 回復

  2. A/B測試 應該是不同的兩組用戶同時測試吧？一組用戶測試A方案，一組用戶測試B方案

    來自上海 回復

  3. 小處，不隨便！

    來自安徽 回復