以YouTube產品為例:為你解讀交互7大定律

37 評論 43650 瀏覽 356 收藏 13 分鐘

本文以YouTube這個產品為例,為你解讀交互設計7大定律在YouTube的應用。

一、費茨定律(Fitts’Law)

Fitts定律提供了一種人體運動模型,由Paul Fitts于1954年建立,可以準確預測移動和選擇目標所需的時間。

簡而言之,Fitts定律指出:獲取目標的時間是目標距離和大小的函數。

光標到達一個目標的時間,與當前光標所在的位置和目標位置的距離(D)和目標大小(S)有關。它的數學公式是:時間 T = a + b log2(D/S+1)。 隨著距離的增加,運動需要更長時間,隨著尺寸減小,選擇再次需要更長時間。

——Interactoin Design Foundation

Fitts定律廣泛應用于UX和UI設計。例如:該定律影響了交互式按鈕變大的慣例(特別是在手指操作的移動設備上), 因為較小的按鈕不容易被點擊。同樣,用戶的任務關注區域與任務相關按鈕之間的距離應盡可能短。

在YouTube的首頁和視頻播放頁,頻道的【訂閱】按鈕以非常明顯的紅色展示給用戶,同時按鈕大小在頁面中的權重還是比較大的。這種表現方式,能夠在最短時間內,吸引用戶的注意力,激起用戶產生訂閱的欲望,使用戶的鼠標更容易達到目標位置。

此外,像搜索框、菜單欄、個人中心、設置等一些高頻功能的入口,它們的位置出現在瀏覽器窗口的邊緣。因為,從費茨定律的角度來看,窗口或屏幕邊緣區域理論上無限高或無線寬,是一個巨大的目標,用戶無法用鼠標超出它們,而且容易達到目標。

為提高用戶點擊準確率,一些按鈕的實際點擊區域比你看到的要大,比如:視頻播放窗口下的拇指、分享、添加、更多按鈕組合。

二、??硕桑℉ick’s Law)

以英國和美國心理學家威廉·埃德蒙·希克和雷·海曼命名的??硕苫蛘呦??海曼定律。

指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長,它的數學公式是:反應時間 T=a+b log2(n)。在我們的設計中如果給用戶的選擇更多,那么用戶所需要做出決定的時間就越長。

——《維基百科》

對于一個以視頻內容為核心的產品來說,視頻質量會直接影響用戶興趣、頻道質量、算法推薦結果。因此,視頻評價體系在設計時,YouTube以最少的選項完成了視頻評價體系的基礎數據收集工作,既向上的拇指和向下的拇指,兩個按鈕。

仔細再看,在兩個按鈕的下方,有一個類似進度的狀態條。筆者認為:這是一種精簡&弱化版的評星,而且這種按鈕和評級條的組合,既為用戶提供了非??旖莸脑u價交互,也實時直觀地顯示出了視頻的整體評價結果:藍色占比越大,說明視頻越被喜歡。

筆者下面要分享的一件事情,雖然與YouTube無關,但與視頻評價和希克定律關系很大。

OK,我來為你分享一下全球流媒體巨頭Netflix的一次改版經歷。在去年,Netflix用“拇指向上和向下”的形式代替了“5星打分制”,據說今年夏天Netflix還將關閉用戶評論區。

Netflix的產品經理認為,這種改變有兩個好處:

  • 第一個好處是去掉了用戶評價的模糊區,讓算法學習更高效。比如:如果有個用戶喜歡一個電影,但又不想給太高分,就打了“三顆星”,這種喜歡程度不僅讓人很難理解,機器學習起來效率也很低。所以,點贊這種“是否”的評判系統,可以消滅模糊的灰色地帶。
  • 第二個好處是,和5顆星的選擇相比,二選一更容易選,降低了用戶的反饋門檻,這樣一來,不僅用戶更喜歡反饋,反饋的人也增加了,機器學習結果更準確。也就是說,點贊能給出明確的信號,讓Netflix知道用戶對這個內容感興趣,從而給用戶推薦更多類似的內容,而拇指向下則會讓類似的內容不再出現在用戶的主頁上。

三、特斯勒定律(Tesler’s Law)

特斯勒定律,又稱復雜性守恒定律,指出每一個應用程序具有無法被轉移或者隱匿的復雜固有量。相反,它必須在產品開發或用戶交互中處理。這就提出了誰應該解決復雜性的問題。

例如:軟件開發人員是否應該增加軟件代碼的復雜性,以使用戶更簡單,或者用戶應該處理復雜的界面,以便軟件代碼可以簡單。

——《維基百科》

這個定律是說產品/系統固有的復雜性存在一個臨界點,超過了這個點過程就不能再簡化了,我們只能將這種復雜性轉移。比如:我們如果發現頁面的功能是必須的,但當前的頁面信息過載,那么就需要將次要的功能收起或者轉移。

YouTube右上角的更多按鈕,里面包含YouTube品牌下的其他產品,視頻下方的按鈕也有一個更多按鈕,同樣在視頻介紹和評論區,設計了展開和更多按鈕。

四、親密法則(Law of Proximity)

親密法則是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。換句話說,我們的大腦可以很容易地將物體彼此靠近地關聯起來,比分開很遠的物體更好,這種聚類的發生是因為人類具有組織和組合事物的自然傾向。

從另一個角度說,此相關的物體應當靠近,歸組到一起。這種同類相吸的親密法則在Robin P Williams的《寫給大家看的設計書》中也被提及。

YouTube將功能入口和按鈕按照一定的規則進行了區域、位置、視覺上的劃分。

五、奧卡姆的剃刀定律(Occam’s Razor)

Occam的剃刀( 拉丁文:lex parsimoniae “ 簡約法則 ”)是一種解決問題的原則,最簡單的解決方案往往是正確的解決方案。當提出相互競爭的假設來解決問題時,應該選擇具有最少假設的解決方案。這個想法歸功于奧克漢姆的威廉(約1287-1347),他是英國方濟各會修士,學者哲學家和神學家。

————《維基百科》

回憶自己的繪畫、攝影還有設計經歷,筆者認為:繪畫是做加法,而攝影和設計是做減法。

奧卡姆的剃須刀法則主要就是說我們做產品/系統時功能上不可以太繁瑣,應該保證簡潔和工具化。

為什么要將復雜變簡單呢?

因為復雜容易使人迷失,只有簡單化后才利于人們理解和操作。隨著社會、經濟的發展,時間和精力成為人們的稀缺資源。從這個意義上講,簡化才意味著對事物真正的掌控,正所謂“大道至簡”。比如:iPhone和iPad只有一個圓形的物理按鈕,簡單到連三歲的小孩都會使用。

YouTube移動端的載入頁僅一個Logo,在收件箱頁,當用戶沒有好友時,系統通過一個明顯的按鈕引導用戶操作。

六、米勒定律(又稱7±2定律)

1956年美國科學家米勒對人類短時記憶能力進行了研究,他注意到年輕人的記憶廣度大約為5到9個單位之間,就是7±2法則。這個法則對我們做界面設計的啟迪就是,如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在七個左右,移動端底部標簽通常情況下最多也是5個。

七、防錯法則

防錯法則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用于工業管理的,但在交互設計也十分適用。

一個走心、友好的放錯設計通常表現在:

  • 及時地告訴用戶哪里操作錯了。比如:在填寫表單時,系統給出及時地報錯提示;
  • 重要、謹慎的操作,系統通常會有二次確認;
  • 為用戶提供撤銷的機會;
  • 為用戶提供糾錯的機會。

總結

Unless you have a better choice, you will follow the standard.
除非有更好的選擇,否則就遵從標準。
——Alan Cooper

本文遵循7±2定律,就為你分享7大定律在YouTube的應用。其實還有很多經典的設計法則,比如:格式塔等,筆者以后還會找一個款產品,為你詳細分享。

感謝你的閱讀,我們下期再見~

 

作者:王晗陵,微信公眾號:設計意志(ID:D-Minder)

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

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不過這種情況下,用戶更傾向于給差評。之前在滴滴的實習中,有一次設計評審,之前對司機的評價就是好壞兩個選擇,后來改版以后,就把評價體系改為了五星制,后來司機的評價就高了很多。

    來自北京 回復
  2. 格式塔、尼爾森

    來自四川 回復
  3. 有一些疑問。第二點鐘提到的Youtube的拇指向上和拇指向下,個人覺得用在視頻網站中是合理的,畢竟大部分人對于視頻好壞的定義不會那么嚴謹。有搞笑、有意思、好玩的內容說不定就直接點贊了。但是放在Netflix這樣的電影/電視劇在線直播平臺,個人覺得并不是很合適。大家對于電影/電視劇好壞的評價往往不會那么直觀,很多時候也沒辦法直接用好或者不好來形容。是否可以理解,Netflix采用這樣的交互方式,更多是從運營從精準推送的角度來考慮,而非從用戶實際的需求來考慮的呢?

    來自浙江 回復
    1. 嗯,運營和精準推送一定是一個重要原因,另外改成拇指后,愿意評價的用戶比以前多了。這應該是一個兩全的策略。

      回復
  4. 很棒,對產品設計很有啟發

    來自廣東 回復
  5. 受教了 ??
    總結一下:
    1,費茨定律:獲取目標的時間是目標距離和大小的函數。
    用戶的任務關注區域與任務相關按鈕之間的距離應盡可能短
    2,希克定律
    指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。在設計中如果給用戶的選擇更多,那么用戶所需要做出決定的時間就越長。
    3,特斯勒定律
    產品/系統固有的復雜性存在一個臨界點,超過了這個點過程就不能再簡化了。只能將復雜性轉移。比如:如果發現頁面功能是必須的,但當前的頁面信息過載,就需要將次要的功能收起或者轉移。
    4,親密法則
    是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。
    5,奧卡姆的剃刀定律-簡約法則
    最簡單的解決方案往往是正確的解決方案。當提出相互競爭的假設來解決問題時,應該選擇具有最少假設的解決方案。
    6,米勒定律(又稱7±2定律)
    如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在七個左右,移動端底部標簽通常情況下最多也是5個。
    7,防錯法則
    大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。

    來自北京 回復
    1. ?? 點贊??

      來自北京 回復
    2. 棒棒噠

      來自江蘇 回復
    3. 給你點贊

      來自黑龍江 回復
    4. 陳獨秀都沒有你優秀??

      來自北京 回復
  6. 3Q
    收藏——>點贊——>訂閱

    來自廣東 回復
    1. thank you

      來自江蘇 回復
  7. 首先,沒有廣告90s,可以跳過,簡直是業界良心!

    回復
    1. 那你們是不是也可以良心一下?

      來自廣東 回復
  8. 有這類內容的專業推薦書籍么

    回復
    1. 我就得 ,認知與設計, 交互設計精髓,超越人機交互,還有諾曼的設計心理學,都是好書,可以拿來仔細研讀

      來自廣東 回復
    2. 666,謝謝分享

      來自廣東 回復
    3. 來自江蘇 回復
  9. 學習了

    回復
  10. 可以讓平時說說的設計高大上了。然后跟某些角色你還是講不明白 ?? 他們將就啥叫交互,交互有啥用,這還是行內人。
    我們面對不同用戶他們不懂啥時交互但是豈不知按鈕擺放,大小,顏色突出,操作層級,甚至文字大小,行距都屬于交互設計。潛移默化中讓用戶無感體驗。當遇到不講究交互和設計的產品是時高下立見。

    來自北京 回復
  11. 很不錯,學習了學習了

    來自廣東 回復
    1. 謝謝,一起進步

      來自江蘇 回復
  12. 能不能先分享一下怎么翻墻 :mrgreen:

    來自廣東 回復
    1. 說了估計要被和諧了 ?

      來自江蘇 回復
  13. 系統性學習,做筆記做筆記實踐

    回復
    1. 一起加油

      回復
  14. 謝謝

    回復
  15. 請問可否轉載?

    回復
    1. 可以。

      來自江蘇 回復
  16. 好了,又可以理直氣壯的和開發吹牛逼了

    來自安徽 回復
    1. 力挺你????

      回復
  17. 感謝大神的干貨,我有個小小的不同看法,
    7±2原則在我們平時的菜單欄分布數量,標簽數量上的作用其實不明顯,因為這些分布實際是給用戶以位置的識別,就是保證這些選項的位置固定不變動,用戶在使用的過程中會識別位置而使用,而不是記住他的位置。7±2原則實際上是記憶原則,7±2適用于需要用戶記憶的界面設計,當需要用戶記憶時,保證其數量在7個左右比較符合用戶的記憶模式,在《超越人機交互》一書中也有過介紹。
    還是感謝大神的文章,謝謝謝謝

    來自廣東 回復
    1. 感謝你的互動,我認同你的觀點??

      回復
    2. 謝謝大神 ??

      來自廣東 回復
  18. nice,學到了

    來自重慶 回復
  19. 很棒,感覺把一些虛無的設計突然就說的有依有據了

    來自上海 回復
    1. 媽媽再也不怕你不會撕X了

      來自江蘇 回復