【UX】用戶體驗( UX )設計中的一些法則

Fitts Law

The time to acquire a target is a function of the distance to and size of the target.

What is Fitts』 Law??

www.interaction-design.org圖標

Fitts Law 預測了快速移動到目標區域(多指:指、點這樣的操作)所需要的時間是目標區域距離和目標區域的大小的函數。距離越大,尺寸越小,所需要的時間就越長。

1954年,心理學家Paul Fitts給出Fitts Law。他的研究同時指出了由於速度和準確率之間的權衡,「快速的移動」加上「小目標區域」會導致更多的錯誤。Fitts Law在UI/UX設計中有廣泛的應用,比如:用戶的主要action的button會大一些方便使用(尤其是在有觸摸屏的設備中),滑鼠點了右鍵之後的pop-up菜單就出現在滑鼠點擊的地方,等等。這些已經習以為常的UI element中都融入了Fitts Law。

當然,Fitts Law也不是說越大越好,凡事都有個度,UX法則也不例外。最重要的還是usability。如果一個button小到不好找到當然不好,大到佔了滿屏也是太誇張了(笑。 怎樣找到一個平衡來給用戶最好的體驗需要不斷的iteration和testing。

Hicks Law

The time it takes to make a decision increases with the number and complexity of choices.

Hick』s Law: Making the choice easier for users?

www.interaction-design.org圖標

心理學家William Edmund Hick和Ray Hyman在1952年提出這個法則。通常來講,Hicks Law的應用很簡單,減少內容從而幫助用戶更快做決定。簡單來說就是 「KISS」 - 「Keep it Simple and Short」。

在各種網站應用的導航中,最長看到Hicks Law的使用。只顯示最重要的內容或者如果你一定需要保留所有的link不能進行刪減的話可以通過把它們進行歸類來達到簡化的目的。其他場景中也經常看到Hicks Law的使用,比如表格內容一次不宜太多讓人覺得overwhelming;較長的process可以通過指引分布進行,等等。

在設計活動過程中,如果有很多的選項、功能……可以通過使用 Card sorting等 user research方法來幫助你理解什麼對於用戶來說才是最重要的,什麼可以略去,什麼可以通過合理的歸類簡化……

Jakobs Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.

https://www.nngroup.com/videos/jakobs-law-internet-ux/?

www.nngroup.com

Jakobs Law of Internet User Experience (Video)

https://www.nngroup.com/videos/jakobs-law-internet-ux/?

www.nngroup.com

如果你的website(尤其是一些功能性的網站,比如online shopping,registration…… )和其他的website執行同樣的功能,那麼最好跟大家一樣~不要特意為了創新而搞一些非常不一樣的東西從而讓用戶覺得迷茫困擾。比如,大家默認會有一個shopping cart/bag在購物網站的右上角somewhere…… 如果在你的網站或者應用中,用戶不能很方便地找到他們想找的東西,完成他們想做的事情,他們就會離開去到別處~

Law of Pragnanz

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

Design Principles: Visual Perception And The Principles Of Gestalt?

www.smashingmagazine.com圖標http://cct370-w07.wikispaces.com/Gestalt+%28Properties+and+Laws%29?

cct370-w07.wikispaces.com

? Law of Closure - Our mind adds missing elements to complete a figure. 俗話說的腦補,我們傾向於把不完整的圖片或者內容自動在腦中不全來讓它們有意義。Gestalt (Properties and Laws)? Law of Closure - Our mind adds missing elements to complete a figure. 俗話說的腦補,我們傾向於把不完整的圖片或者內容自動在腦中不全來讓它們有意義。

? Law of Similarity - Our mind groups similar elements to an entity. The similarity depends on relationships constructed about form, color, size and brightness of the elements. 我們的大腦會自動把相似的東西(形狀大小顏色……)化到一個group裡面去,在視覺上行程一個個的區塊。

? Law of Proximity - Regional or chronological closeness of elements are grouped by our mind and seen as belonging together. 位置上靠近的東西我們會自動把它們歸為一類。

「物以類聚「的感覺~

https://study.com/academy/lesson/law-of-proximity-examples-lesson-quiz.html?

study.com圖標

Law of Proximity: Examples & Overview - Video & Lesson Transcript | Study.com

Law of Proximity: Examples & Overview - Video & Lesson Transcript | Study.com?

study.com圖標

? Law of Symmetry - Symmetrical images are seen as belonging together regardless of their distance. 對稱的東西距離就算很遠人們也經常會覺得他們在一起。

? Law of Continuity - The mind continues a pattern, even after it stops.

? Law of Common Fate - Elements with the same moving direction are seen as a unit.

Millers Law

The average person can only keep 7 (plus / minus 2) items in their working memory. This is not so much a 「law」 as a suggestion to be mindful of reducing the number of things people actually need to remember.

https://www.khanacademy.org/test-prep/mcat/social-sciences-practice/social-science-practice-tut/e/miller-s-law--chunking--and-the-capacity-of-working-memory?

www.khanacademy.org圖標

Khan Academy

Khan Academy?

www.khanacademy.org圖標

Miller『s Law於1956年由George Miller通過研究提出。應用時,與其說是一個Law不如說是一個建議,跟Hicks Law的核心類似而不同,主要還是要想辦法在interface里減少用戶的cognitive load,選擇重要的信息並讓信息用一種更容易的方式呈現出來。

Serial Position Effect

The Serial Position Effect is the propensity of a user to best remember the first and last items in a series. 在一堆內容裡面,人們往往容易記住第一個和最後一個。

What is Serial Position Effect??

www.interaction-design.org圖標Serial Position Effect: How to Create Better User Interfaces?

www.interaction-design.org圖標

這個就很straight forward了,包含兩個對應的現象:

1.Primacy Effect: Items that are presented at the beginning of a list are recalled with greater accuracy than items in the middle of a list.

2.Recency Effect: Items that appear at the end of a list are also more likely to elicit better recall than items presented in the middle of a list.

有常用的四種方法來在UI中使用Serial Position Effect:

1.Maintain Task-relevant Information within the User Interface. 把一些與用戶想要完成的task相關的信息簡單直接地呈現在UI中,讓用戶可以減少他們需要自己來記住或者figure out的信息,從而減少他們的cognitive load。

2. Include Cues in the User Interface 在交互界面里提供應該有的暗示/提示讓用戶可以方便地找到自己所需的信息,或者把不同的信息聯繫起來。可以通過靜態的UI或者一些motion design的element來實現。

3.Limit the Amount of Recall Required 告訴用戶他們從哪裡來,他們都做了什麼從而看到現在所在的頁面,這樣用戶就不需要自己bother to remember了。

4. Emphasize Key Information in the Beginning and End 在最開始和結束時候分別重複重要的信息。常用的例子可以看一些product page,最開始往往是「快來click buy button來買吧」然後向下滑動就會看到中間很多很多的介紹,而到了最後的時候又會有「快來click buy button來買吧」~ :-)

Other References:

Cover Photo by Yousef Espanioly on Unsplash Home | Laws of UX Von Restorff effect

推薦閱讀:

設計原則day1
一個好 App 應有的氣質—交互設計的細節設計
BAT 設計師帶你10周做好作品集 - UI/UX 設計師訓練營
移動端交互動效設計你怎麼看?
從設計角度做競品分析

TAG:用戶體驗設計 | UI設計師 | 交互設計 |