用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

一、費茨定律(Fitts’Law)

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

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

——Interactoin Design Foundation

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

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

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

二、希克定律(Hick’s Law)

以英國和美國心理學家威廉·埃德蒙·希克和雷·海曼命名的希克定律或者希克 - 海曼定律,指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。它的數學公式是:反應時間 T=a+b log2(n)。在我們的設計中如果給用戶的選擇更多,那么用戶所需要做出決定的時間就越長。

——《維基百科》

對于一個以視頻內容為核心的產品來說,視頻質量會直接影響用戶興趣、頻道質量、算法推薦結果。因此,視頻評價體系在設計時,YouTube 以最少的選項完成了視頻評價體系的基礎數據收集工作,即向上的拇指和向下的拇指,兩個按鈕。仔細再看,在兩個按鈕的下方,有一個類似進度的狀態條,筆者認為這是一種精簡&弱化版的評星,而且這種按鈕和評級條的組合,既為用戶提供了非常快捷的評價交互,也實時直觀地顯示出了視頻的整體評價結果:藍色占比越大,說明視頻越被喜歡。

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

OK,我來為你分享一下全球流媒體巨頭 Netflix 的一次改版經歷。在去年,Netflix 用「拇指向上和向下」的形式代替了「5星打分制」,據說今年夏天 Netflix 還將關閉用戶評論區。Netflix 的產品經理認為,這種改變有兩個好處:

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

特斯勒定律,又稱復雜性守恒定律,指出每一個應用程序具有無法被轉移或者隱匿的復雜固有量。相反,它必須在產品開發或用戶交互中處理。這就提出了誰應該解決復雜性的問題。例如,軟件開發人員是否應該增加軟件代碼的復雜性,以使用戶更簡單,或者用戶應該處理復雜的界面,以便軟件代碼可以簡單。——《維基百科》

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

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

四、親密法則(Law of Proximity)

親密法則是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。換句話說,我們的大腦可以很容易地將物體彼此靠近地關聯起來,比分開很遠的物體更好。這種聚類的發生是因為人類具有組織和組合事物的自然傾向。 從另一個角度說,此相關的物體應當靠近,歸組到一起。這種同類相吸的親密法則在 Robin P Williams 的《寫給大家看的設計書》中也被提及。

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

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

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

奧卡姆的剃須刀法則主要就是說我們做產品/系統時功能上不可以太繁瑣,應該保證簡潔和工具化。為什么要將復雜變簡單呢?因為復雜容易使人迷失,只有簡單化后才利于人們理解和操作。隨著社會、經濟的發展,時間和精力成為人們的稀缺資源。從這個意義上講,簡化才意味著對事物真正的掌控,正所謂「大道至簡」。比如 iPhone 和 iPad 只有一個圓形的物理按鈕,簡單到連三歲的小孩都會使用。

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

七、防錯法則

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

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

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

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

總結

Unless you have a better choice, you will follow the standard.

除非有更好的選擇,否則就遵從標準。

——Alan Cooper

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

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

歡迎關注作者的微信公眾號:「設計意志」

用YouTube 為例,讓你輕松讀懂交互設計7大定律!

「更多交互設計七大定律好文」

收藏 152
點贊 10

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