「確定/執行」按鈕應該設計在左邊還是右邊?

16 評論 14607 瀏覽 75 收藏 8 分鐘

一次做設計對時候,一個同事很好奇的問了下確定按鈕是在左側還是右側!我這段時間正好有空閑,也很好奇想去了解,所以就有了這篇文章,與大家分享。

一、調研主流規范和主流應用

1. OS系統規范

我先去IOS設計規范的官方網站查閱,發現蘋果規范沒有提到取消和執行按鈕的位置要求!只說到彈出框可以包含最多3個按鈕,其中一個必須要是不執行按鈕,用于取消執行操作。

但我們可以看到展示的demo上,取消按鈕是在左側的,執行按鈕是在右側。

同時我也查詢了按鈕的相關規范,也沒做出相關的說明。但展示的demo,也是取消在左側,右側為執行按鈕。

以上截圖取自:macOS Design Themes/Human Interface Guidelines/windows and Views 章節 Alerts 內容

2.?安卓Material Design規范Dialogs章節

后來我去查閱了安卓端的規范,也沒有給出詳細的文字說明,但展示的demo顯示取消在左側,執行在右側和IOS的規范是一樣的。截圖來自Material Design Dialogs 章節

3.?螞蟻金服移動端設計規范

截圖來自螞蟻金服Ant Design移動端設計規范https://mobile.ant.design/index-cn

4. 主流應用

我們隨機選擇了一些app下載量比較大的應用,分別查看了安卓和蘋果的應用,發現也是取消在左側,執行在右側。

二、分析原因

我們知道了絕大部分主流app都是這樣設計,這個是表現,深層的原因是什么呢?

我先在網上查詢相關文章,有的同學做了如下解釋:

1. 閱讀視線的順序造成視線無意識回跳

我們可以看到當消息提示我們進行下一步操作的時候,我們會下意識的尋找動作(action)按鈕,上圖左側是WP的彈窗,確定/取消。

我們需要點確定的時候會先進行掃視,確定按鈕放置在左邊的時候,往往會從左往右看一遍再無意識回跳到左邊。而不是說我先看到左邊有確定就停止往下瀏覽了。

2. 古騰堡法則

古騰堡法則指人們在瀏覽頁面的時候,視覺都趨向于從上到下,從左到右的眼動規律。左上角是視覺的第一落點區,而右下角是視覺最終落點區。

用戶的視覺中心往往在頁面的左上方,而結束瀏覽時視線往往落在右下角,所以合理利用這個法則可以幫助用戶更好地獲取內容并采取行動。

文章來自https://www.jianshu.com/p/1c5d26e07604

2. 古騰堡法則的弱項

特意去查詢了《設計的原則》一書,里面講到了古登堡圖的介紹,里面有一條關于這個理論似乎只適合于大量同質信息平衡分布的情況。設計的元素的也會影響視線的變動。

圖來自:《設計的原則》第102頁

三、定量分析

也有人做了定量研究,這30人被分成A和B兩組,A組先使用放在左邊的確定按鈕,再使用放在右邊的確定按鈕;B組先使用放在右邊的確定按鈕,再使用放在左邊的確定按鈕。

有感興趣的同學可以去看看此篇文章,文章來自??https://www.jianshu.com/p/f176bd63c027

這個實驗的觀點:確定/執行按鈕在右側,出錯率會更低。

我個人覺得有幾個方面的疑問:

  1. 測試者來自哪個國家,因為國外版本的產品體驗和國內的產品體驗有很多的不同,使用產品的方式也有不一樣的地方。
  2. 第二次操作操作者可能會帶有“第一次操作的記憶”,因為測試的人更想早點結束獲得一定的傭金,所以不一定會認真去看按鈕文字,所以第一次的測試錯誤率更有價值,真實反應了用戶的習慣操作。

結論

從理論、實驗來看也只是推敲這個情況的深層原因,但無不例外的說明一點,就是確定/執行按鈕在右側,更符合人們的使用習慣。

這個習慣是從大量的產品使用當中,逐漸養成的習慣。我們做產品設計的時候,更多要依靠這種習慣,才可以讓產品使用更加順手。

如果產品想讓用戶更多執行確定操作,更應該把按鈕放置在右側。但如果你想讓用戶不執行相關操作,反其道而行之或許是一個辦法,但這樣也會引起用戶的反感。

 

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 可以,煩請注明出處

    來自上海 回復
  2. 請問《設計的原則》是哪一本書?網絡上好像找不到。

    來自廣東 回復
  3. 感覺更多是因為PC時代的習慣吧,大部分人都是右手用鼠標,指針會更習慣放在右側,因此執行按鈕放在右側更容易讓用戶點擊。這個規則沿用至了手機端

    來自江蘇 回復
    1. 這個好像有點道理,或者說強側手是右手的人比較多

      來自上海 回復
  4. 請問您有沒有研究過pc端的,我看pc有一些按鈕是執行操作設計在左側。

    來自廣東 回復
    1. 不是一些,是極其多

      來自廣東 回復
    2. 確實是極其多,PC端非常多的“確定”在左

      來自浙江 回復
  5. 如果執行操作在右側,取消操作在左側,那就一直保持這種一致的體驗。
    有一種情況,就是用戶在詳情頁點擊左上角返回,出現挽留彈窗,有兩個選項:在看看、確認返回。筆者認為左側應該放什么?右側應該放什么呢?

    來自北京 回復
    1. 剛好看了一下這種頁面:挽留類的再看看在右側、確認返回在左側,以及美團搶票中的要取消訂單時彈框出現我要放棄(左側)、堅持一下(右側),應該是在選擇中想要讓用戶繼續操作或者繼續停留在平臺時,這種操作大都在右側位置。(自我小見解,錯誤請指正 ?? )

      來自浙江 回復
    2. 我有一個觀點,感覺這種“堅持一下”放右側的情況有些不符合彈窗的一致性,用戶主動觸發返回,證明用戶是想要返回的,所以把“確認返回”放在右側是否更合理呢(雖然“確認返回”放在右側沒有放在左側挽留效果好,但是總覺得返回是用戶主觀操作的,可不可以這么理解,用戶主觀的操作應該放右側,取消操作的放在左側呢),比如退出登錄的彈窗,驗證了這一點,“確認退出”在右側,“取消”在左側 ??

      來自北京 回復
    3. 純產品體驗來說,用戶主動觸發,執行操作在右側更好一些,符合用戶使用習慣和認知。但是如果涉及運營策略,業務層面更希望引導用戶留在當前頁面的話,就會利用用戶習慣,將取消操作放在右側。

      來自北京 回復
    4. 沒錯,現狀是這樣的

      來自北京 回復
    5. 同意

      來自廣東 回復
    6. 我們以前也討論過這個問題,今天看到這篇文章也是相同的觀點,“正常情況”下都應該在右側,“利用”習慣的話,就會放置左側。

      來自上海 回復
    7. ??

      來自北京 回復
  6. “第二次操作操作者可能會帶有“第一次操作的記憶”,因為測試的人更想早點結束獲得一定的傭金,所以不一定會認真去看按鈕文字,所以第一次的測試錯誤率更有價值,真實反應了用戶的習慣操作。”這反而讓我覺得更應該在右邊了,因為按你的第一次操作記憶,不是記憶的是在左邊么,那么點錯的概率更大,結果是更小。

    來自浙江 回復