交互設計心理學之古騰堡原則

9 評論 8826 瀏覽 81 收藏 10 分鐘

編輯導語:在平時的設計過程中,我們會發(fā)現(xiàn)大部分的APP,會存在單個按鈕和多個按鈕的情況,在這種情況下,重要的按鈕一般位于頁面右側(cè)。這其實是源于交互設計心理學的古騰堡設計原則。什么是古騰堡原則呢?我們一起來看看吧。

在平時的設計過程當中,你可能會有這樣的疑惑,為什么在大部分APP中,當單個按鈕和多個按鈕同時存在時,最重要的按鈕一般都會放置在頁面的右側(cè)呢?

如果最重要的按鈕放在左側(cè)又有什么問題呢?按鈕放在右側(cè)的原因是什么呢?它又有什么理論依據(jù)呢?接下來帶著這些疑問,開始我們今天所要介紹的內(nèi)容:交互心理學之古騰堡原則。

一、古騰堡原則的起源

古騰堡原則是由14世紀西方活字印刷術的發(fā)明人約翰·古騰堡提出,早在20世紀50年代,他在設計報紙的過程中,提出了一項原則,認為人的閱讀方式應該是遵循某種習慣進行的,就像讀書一樣,由左到右,從上到下。這其中蘊含著什么信息呢?

經(jīng)過研究最終得出被后人所熟知的結論:古騰堡原則,并附上了一張圖,名為「古騰堡圖」。古騰堡圖將畫面所呈現(xiàn)的內(nèi)容分成四個象限:

  1. 第一視覺區(qū)(POA):左上方,用戶首先注意到的地方
  2. 強休息區(qū)(SFA):右上方,較少被注意到
  3. 弱休息區(qū)(WFA):左下方,最少被注意到
  4. 終端視覺區(qū)(TA):右下方,視覺流終點

從圖中可以看出,用戶視線很自然的會從第一視覺區(qū)開始,逐漸移動到終端休息區(qū)。整個閱讀過程視線都會沿著一條方向軸開始從左到右瀏覽。

用戶會更容易關注到頁面的開始與結束區(qū)域,而中間的段落則很少被關注到。古騰堡揭示了一個實用的視覺軌跡規(guī)律:閱讀引力是從上到下,從左到右。

遵循古騰堡原則把關鍵信息放在左上角、中間和右下角,能夠更好的體現(xiàn)元素的重要性。例如:我們平時所看到的頁面彈窗、各種證明文件和合同文件等等。

古騰堡圖通過對設計元素的重量與元素布局和組成方式進行調(diào)和,指導眼睛的運動軌跡。讓用戶迅速獲取有價值的信息,同時用戶對信息的熟悉程度也是影響眼睛運動軌跡的因素之一。

而隨著互聯(lián)網(wǎng)的興起,古騰堡原則也逐漸被應用到APP設計和網(wǎng)頁設計當中。接下來讓我們來看看他在界面中的實際應用。

二、在設計中的應用

1. 底部單個按鈕

這種形式在引導用戶操作的頁面中最為常見,為了能夠保證用戶對內(nèi)容進行閱讀,所以將按鈕擺放在頁面底部,內(nèi)容放在頂部,這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產(chǎn)品預期的目標。

2. 底部垂直雙按鈕

上面我們提到了單個按鈕的擺放思路,接下來看一下垂直雙按鈕的擺放思路是怎么樣的。

如果一個界面上同時存在兩個優(yōu)先級不同的按鈕,并且產(chǎn)品希望用戶對每一個按鈕都有足夠的關注度,那么垂直擺放是最佳選擇,雖然垂直雙按鈕在樣式上做了區(qū)分,但用戶同樣會停留一段時間將按鈕的內(nèi)容進行對比思考。

那么,按照古騰堡原則,重要的按鈕應該放在頁面最底部,原則上它應該是這樣的:

仔細觀察上圖,有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉,這樣就違背了產(chǎn)品要保證每一個按鈕都要有足夠關注度的初衷,所以我們要違背古騰堡原則來滿足業(yè)務需求,正如我們所看到的微信授權頁面一樣。

為了保證「同意」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視,并且其中的任意一個按鈕不會被輕易的忽略掉,這里將「同意」按鈕顏色加重,并且放在「拒絕」按鈕之上,讓眼睛原本垂直向下的運動軌跡產(chǎn)生回流的變化。

小結:原則是設計的基礎,并非一成不變,要合理權衡設計原則與產(chǎn)品目標之間的關系。

3. 頂部按鈕分析

由于頂部導航欄空間有限,導致按鈕相對較小,并且不便于點擊操作,所以這類頂部按鈕適用于修改內(nèi)容的編輯頁面,即可以避免誤觸,又可以讓用戶關注內(nèi)容本身。

關鍵按鈕至于頂部,還可以縮短用戶眼睛的運動路徑,讓用戶更容易注意到其狀態(tài)的變化狀態(tài)。

小結:頂部按鈕更關注可編輯的內(nèi)容區(qū)域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內(nèi)容。

4. 水平按鈕分析

除了上面提到的頂部按鈕和底部按鈕,還有水平擺放的按鈕,比如淘寶詳情頁、京東詳情頁、網(wǎng)易嚴選詳情頁的「加入購物車」和「立即購買」按鈕,界面中的「立即購買」按鈕都放在了右下角,結合古騰堡原則的視覺終點說明,右下角為視覺終端區(qū)域,即視覺最終停留的位置,所以他們都將與轉(zhuǎn)化率密切相關的「立即購買」按鈕放在了界面的右下角,讓用戶更容易關注到。

再比如比較常見的「取消」和「確認」彈窗樣式,通常是在需要讓用戶確認某種操作行為時出現(xiàn),有可能是提交表單、協(xié)議授權、獲取用戶信息等等,為了防止用戶誤操作,這也是提升產(chǎn)品體驗的小細節(jié)。

平常我們所看到的彈窗,推薦按鈕都是在右側(cè),那么將推薦按鈕放在左側(cè)會怎么樣?如下圖所示:

不難看出推薦按鈕放在右側(cè)后,視覺在水平方向軸上產(chǎn)生了回流。

彈窗的目的是想讓用戶點擊「確認」按鈕,如果將「確認」放在左側(cè),根據(jù)古騰堡原則,用戶的視線會不由自主的向右側(cè)移動,也就是「取消」按鈕的位置,想要回到左側(cè)「確認」按鈕位置就需要移動視線,并且眼睛的運動軌跡會在水平方向軸上來回的往復運動,無形中增加了用戶選擇時長。

如果將「確認」放在右側(cè),「取消」放在左側(cè)則可以為用戶提高操作效率。

在實際產(chǎn)品中的應用案例:

小結:當產(chǎn)品想要讓用戶進行某種操作時,主要按鈕放在右邊。

三、總結

  1. 古騰堡圖第一視覺區(qū),強休息區(qū),弱休息區(qū),終端視覺區(qū)
  2. 原則是設計的基礎,并非一成不變,要合理權衡設計原則與產(chǎn)品目標之間的關系
  3. 頂部按鈕更關注可編輯的內(nèi)容區(qū)域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內(nèi)容
  4. 當產(chǎn)品想要讓用戶進行某種操作時,主要按鈕放在右邊

 

作者:王雨_Vision,公眾號:RVDesign

本文由 @王雨_Vision 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. PC端的確定按鈕一般在左邊吧

    來自香港 回復
  2. 垂直和水平雙按鈕的分析邏輯是相反的,視覺回流和節(jié)約用戶時間是矛盾的,而且按鈕的位置和用戶手操作的熱區(qū)也有很大關系

    來自遼寧 回復
  3. B端確定按鈕一般在前怎么說

    來自浙江 回復
  4. 之所以標題放在上方,按鈕放下下方或者右下角,并不全都是古騰堡法則
    首先用戶在進入到一個頁面或容器中時,第一時間要做的就是需要了解信息,信息包含圖片和文字,拿文字來說,常識來說用戶肯定是要先了解信息,才能產(chǎn)生進一步確定/購買等操作行為。即使逆向思維,把按鈕放在頂部,用戶也不會直接點擊按鈕(除非用戶從上一個頁面進入時有強烈的按鈕點擊需求,并不需要在當前頁面了解信息)

    來自北京 回復
  5. 垂直和水平雙按鈕的分析邏輯是相反的

    來自上海 回復
  6. 微信的帳號授權頁面,是故意讓用戶視線回流么?這里看完后還是有點疑惑

    來自廣東 回復
    1. 是的 達到讓用戶進行反復確認的目的

      來自北京 回復
  7. 終于知道為什么橫向排列時要把重要的按鈕放在右邊了,視線回流,以后就知道了,謝謝分享

    來自北京 回復
  8. 原來我們?nèi)粘J褂玫降腶pp產(chǎn)品在后面背后是這樣子的原理,將心理學領域的專業(yè)知識運用到產(chǎn)品設計中,學到了!

    來自廣東 回復