以YouTube產品為例:為你解讀交互7大定律
本文以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 協議
不過這種情況下,用戶更傾向于給差評。之前在滴滴的實習中,有一次設計評審,之前對司機的評價就是好壞兩個選擇,后來改版以后,就把評價體系改為了五星制,后來司機的評價就高了很多。
格式塔、尼爾森
有一些疑問。第二點鐘提到的Youtube的拇指向上和拇指向下,個人覺得用在視頻網站中是合理的,畢竟大部分人對于視頻好壞的定義不會那么嚴謹。有搞笑、有意思、好玩的內容說不定就直接點贊了。但是放在Netflix這樣的電影/電視劇在線直播平臺,個人覺得并不是很合適。大家對于電影/電視劇好壞的評價往往不會那么直觀,很多時候也沒辦法直接用好或者不好來形容。是否可以理解,Netflix采用這樣的交互方式,更多是從運營從精準推送的角度來考慮,而非從用戶實際的需求來考慮的呢?
嗯,運營和精準推送一定是一個重要原因,另外改成拇指后,愿意評價的用戶比以前多了。這應該是一個兩全的策略。
很棒,對產品設計很有啟發
受教了 ??
總結一下:
1,費茨定律:獲取目標的時間是目標距離和大小的函數。
用戶的任務關注區域與任務相關按鈕之間的距離應盡可能短
2,希克定律
指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。在設計中如果給用戶的選擇更多,那么用戶所需要做出決定的時間就越長。
3,特斯勒定律
產品/系統固有的復雜性存在一個臨界點,超過了這個點過程就不能再簡化了。只能將復雜性轉移。比如:如果發現頁面功能是必須的,但當前的頁面信息過載,就需要將次要的功能收起或者轉移。
4,親密法則
是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。
5,奧卡姆的剃刀定律-簡約法則
最簡單的解決方案往往是正確的解決方案。當提出相互競爭的假設來解決問題時,應該選擇具有最少假設的解決方案。
6,米勒定律(又稱7±2定律)
如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在七個左右,移動端底部標簽通常情況下最多也是5個。
7,防錯法則
大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。
?? 點贊??
棒棒噠
給你點贊
陳獨秀都沒有你優秀??
3Q
收藏——>點贊——>訂閱
thank you
首先,沒有廣告90s,可以跳過,簡直是業界良心!
那你們是不是也可以良心一下?
有這類內容的專業推薦書籍么
我就得 ,認知與設計, 交互設計精髓,超越人機交互,還有諾曼的設計心理學,都是好書,可以拿來仔細研讀
666,謝謝分享
贊
學習了
可以讓平時說說的設計高大上了。然后跟某些角色你還是講不明白 ?? 他們將就啥叫交互,交互有啥用,這還是行內人。
我們面對不同用戶他們不懂啥時交互但是豈不知按鈕擺放,大小,顏色突出,操作層級,甚至文字大小,行距都屬于交互設計。潛移默化中讓用戶無感體驗。當遇到不講究交互和設計的產品是時高下立見。
很不錯,學習了學習了
謝謝,一起進步
能不能先分享一下怎么翻墻
說了估計要被和諧了 ?
系統性學習,做筆記做筆記實踐
一起加油
謝謝
請問可否轉載?
可以。
好了,又可以理直氣壯的和開發吹牛逼了
力挺你????
感謝大神的干貨,我有個小小的不同看法,
7±2原則在我們平時的菜單欄分布數量,標簽數量上的作用其實不明顯,因為這些分布實際是給用戶以位置的識別,就是保證這些選項的位置固定不變動,用戶在使用的過程中會識別位置而使用,而不是記住他的位置。7±2原則實際上是記憶原則,7±2適用于需要用戶記憶的界面設計,當需要用戶記憶時,保證其數量在7個左右比較符合用戶的記憶模式,在《超越人機交互》一書中也有過介紹。
還是感謝大神的文章,謝謝謝謝
感謝你的互動,我認同你的觀點??
謝謝大神 ??
nice,學到了
很棒,感覺把一些虛無的設計突然就說的有依有據了
媽媽再也不怕你不會撕X了