交互細節!確定按鈕到底該放在左邊還是右邊?

仔細想想,我們做交互設計,講了那么多“高大上”的理念,竟然很多小細節都還沒有弄清楚——比如,確定和取消按鈕哪個該放左邊哪個該放右邊?今天這篇文章是作者在英國約克大學讀研時做的一個課題作業。想知道哪個更好,這篇或許能給你啟發。

提高用戶體驗的幾個細節:

  1. 《細節決定成敗!提高用戶登錄體驗的5個細節》
  2. 《13個提高「進度條」用戶體驗的設計技巧》

其實這個問題,連世界最大的IT公司都沒有確切的答案。

蘋果說,不論移動或電腦設備,行動按鈕(Action button)都放在右邊,也就是說*確定按鈕放在右邊*:

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 蘋果的移動設備

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 蘋果的電腦設備

微軟說,除了刪除之類的負向操作外,不論移動或電腦設備,*確定按鈕放在左邊*:

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 微軟的電腦設備

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 微軟的移動設備

為了弄清楚這個問題,我做了一個實驗:

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 試驗中A組和B組的區別只是交換了按鈕位置

我一共找了30人,先讓他們在九張圖中選擇最喜歡的一張,然后按確定按鈕提交。然后再讓他們在剩下的圖中選擇最不喜歡的,再按確定按鈕提交。這個實驗的關鍵是,在選擇不喜歡的圖時,*確定和重置按鈕的位置被悄悄替換了*。用來測試的是一個在iPad上展示的黑白簡易網站(真實截圖在文章最后):

然而,這30人被分成A和B兩組,A組先使用放在左邊的確定按鈕,再使用放在右邊的確定按鈕;B組先使用放在右邊的確定按鈕,再使用放在左邊的確定按鈕。

整個實驗過程中,唯一被記錄的只有*點擊重置按鈕的次數*。(當然,為了避免有人故意點重置按鈕,事后會問他們是不是故意點的,如果是,就不會把此人的數據計算在內。)

結果出乎意料地有趣:

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 兩組的錯誤率完全不同

人們在第一次選圖時,如果確定按鈕在左(A組),則有13.33% (2/15) 的錯誤率;如果確定按鈕在右邊(B組),則沒有人出錯。然而2個人未免有點少,不夠說服力,所以到這里還看不出什么證據。

真正意想不到的是,在第二次選圖時,如果按鈕從左換到右邊(A組),錯誤率稍有提升達到23.08%(3/13,注:減去了第一次出錯的人);如果確定按鈕從右換到左邊(B組),錯誤率竟然從第一步的0%沖到了*66.66%*(10/15)!如果不是親自做的這個實驗,我可能不會相信這個結果。

那么,為什么唯獨將確定按鈕從右換到左時,才有超過一半的人點錯呢?

我的推測如下:從兩組的第一步實驗就可看出端倪,人們是比較習慣確定按鈕在右邊的,所以B組的第一步才*沒有人出錯*。A組出錯的人不是很多可能是因為,像點按鈕這樣的簡單任務,即便不符合習慣,也很容易在最后一刻發現自己即將點錯,并及時糾正。所以15個人里也不過2個人點錯了。

所以A組的大部分測試者雖然在第一部中沒有犯錯,但因為差點按錯按鈕而提高了警覺,所以在第二步中,雖然按鈕的位置出現了意想不到的翻轉,但大部分人還是再次察覺到了按鈕位置的異常。

相對的,B組的被測試者因為在第一步走得很順利,所以在第二步中根本不會考慮按鈕位置的問題,猝不及防地改變了確定按鈕的位置后,他們中的大部分人都點錯了。估計那些沒點錯的少部分人中,不少人都是差點按錯,在最后時刻才發現并糾正的。

所以,得出結論,只有確定按鈕放在右邊時,使用體驗才是最順暢的嗎?

這個結論,無法輕易得出。因為影響人們使用習慣的因素很多,例如設備(本實驗使用平板)、系統(本實驗使用IOS)和載體(本實驗使用網頁)等。尤其是本實驗使用iPad,而包括iPad在內的蘋果設備都是把確定按鈕放在右邊的。因此無法判斷被測試者在右邊尋找確定按鈕的習慣是出于本能還是對IOS系統的適應。

個人認為,*系統規則*可能影響更大。舉一個例子,中國人用筷子,西方人用刀叉,要證明筷子和刀叉哪個更加適合人類本能,怎么設計實驗?恐怕唯一的實驗對象只能是還沒學會用餐的小孩,因為在每個人已經被環境同化的情況下,本能的影響已經微乎其微了。而就算真的證明了筷子和刀叉哪個更符合人類本能又怎樣呢?也不可能因為那一點微小的學習成本就讓全世界廢棄任何一種餐具。思考到這里,恐怕*順應大環境*才是最好的選擇。

最后附上該實驗的真實工具:

交互細節!確定按鈕到底該放在左邊還是右邊?

△ 我自己寫的測試網頁,包括問卷、說明、測試頁面和最后詢問 “ 點擊重置是否是失誤在內 ”

「本月最值得閱讀收藏的完美像素使用手冊」

  1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
  2. 《中文版來了!值得每個設計師收藏的《完美像素使用手冊》之細節篇》
  3. 《第三集!值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
  4. 《第四集!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
  5. 《最終版!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址:jianshu

交互細節!確定按鈕到底該放在左邊還是右邊?

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量150萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 41
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。