用好這些可用性原則,你就能簡單做好交互設(shè)計(jì)!

6 評論 13790 瀏覽 103 收藏 8 分鐘

做產(chǎn)品經(jīng)理不懂交互設(shè)計(jì),那就是寸步難行。“交互原則多,體驗(yàn)出彩少”,既然要做好產(chǎn)品體驗(yàn),那么吃透基本的交互設(shè)計(jì)原則,就是必須且必然的事兒。今天給大家挖了很多可靠的栗子,直接給你提供干貨,拿走不謝。

1、系統(tǒng)狀態(tài)可見性 (Visibility of system status)

幫你理解:系統(tǒng)應(yīng)該總是在合理的時(shí)間內(nèi),通過適當(dāng)?shù)姆答佔(zhàn)層脩袅私庹诎l(fā)生什么。

Group 24

幫你總結(jié):提高產(chǎn)品狀態(tài)的可視化程度,從而提高用戶對自己在使用系統(tǒng)過程的情況的透明度。

2、系統(tǒng)與現(xiàn)實(shí)世界的匹配性( Match between system and the real world)

幫你理解:系統(tǒng)應(yīng)該講用戶的語言,用單詞,短語和概念讓用戶感覺到熟悉,而不是用面向系統(tǒng)的術(shù)語來面對用戶。同時(shí)按照現(xiàn)實(shí)世界的慣例,讓信息出現(xiàn)在自然和邏輯順序中。

屏幕快照 2016-08-27 下午11.02.34

屏幕快照 2016-08-27 下午11.02.44

幫你總結(jié):

  1. 從用戶的角度出發(fā),推薦Banner內(nèi)容,用戶可以花更好的時(shí)間明了這些滑動的Banner是“可能適合我的”課程。我們可以在產(chǎn)品的細(xì)節(jié)處繼續(xù)使用user’s language來提高用戶的UE。
  2. 根據(jù)用戶的日常行為,判斷用戶的偏好,做個(gè)性推薦也是這個(gè)原則的案例之一,這類案例用得最多的是在購物類、音樂類、閱讀類應(yīng)用。
  3. 用戶產(chǎn)品的名字代替“首頁”類的形容詞,解決從用戶角度體現(xiàn)內(nèi)容和意圖的問題,在細(xì)節(jié)處使用user’s language來提高用戶的體驗(yàn)感。

3、增加用戶操作感和自由度 (User control and freedom)

幫你理解:用戶往往會不經(jīng)意選擇錯誤的系統(tǒng)功能,那么產(chǎn)品設(shè)計(jì)就需要一個(gè)明確標(biāo)明“緊急出口”的狀態(tài)或者功能規(guī)避不必要的操作,譬如:支持撤銷和重做。

屏幕快照 2016-08-27 下午11.05.31
幫你總結(jié):從用戶體驗(yàn)的角度來看,自動切換的信息在“播放”時(shí)需要放慢速度,通過內(nèi)容本身或者配色去調(diào)亮引導(dǎo)dots,可以增加用戶的操作感。另外,對用戶可能出現(xiàn)反悔操作的功能,應(yīng)該提供撤銷和重做的入口,讓用戶能更加自如的使用你的產(chǎn)品。

4、一致性及標(biāo)準(zhǔn)化 (Consistency and standards)

幫你理解:在一個(gè)系統(tǒng)或者應(yīng)用中,用戶不應(yīng)該想知道不同的單詞,或者理解同一個(gè)功能的被展示出不同情況的原因。對于一致性,淺顯易懂,現(xiàn)在普遍都用的很好,那么對于標(biāo)準(zhǔn)化,很多網(wǎng)站或者app,特別是新的產(chǎn)品,開始通過衍生自己的LOGO、品牌,充分洗腦用戶,強(qiáng)化用戶對自己產(chǎn)品的記憶點(diǎn)。甚至可以根據(jù)自己的產(chǎn)品定位,創(chuàng)新一類icon等,通過圖形的表達(dá)讓用戶更加對你的產(chǎn)品記憶深刻。推薦一款個(gè)人非常喜歡的App:“想去”,它的設(shè)計(jì)就從App的icon到內(nèi)飾都一氣呵成,甚至連loading都是驚喜設(shè)計(jì)的,讓人用著非常舒服。

屏幕快照 2016-08-27 下午11.05.39

幫你總結(jié):適當(dāng)?shù)慕o自己的產(chǎn)品擬定標(biāo)準(zhǔn)化的記憶庫,不但讓用戶體驗(yàn)?zāi)愕漠a(chǎn)品時(shí),覺得走心,也會讓用戶在不經(jīng)意間把你的產(chǎn)品記得牢牢的。

5、預(yù)防錯誤(Error prevention)

幫你理解:在首次使用系統(tǒng)或者產(chǎn)品的時(shí)候,巧妙的設(shè)計(jì)比好的錯誤提示更加能彌補(bǔ)不足。最好能在用戶進(jìn)行下一步之前,避免掉低級的錯誤,讓用戶的使用過程是舒服順暢的。

屏幕快照 2016-08-27 下午11.10.38

幫你總結(jié):在可能出現(xiàn)錯誤、空白的情況之前,利用加載的可視化、再加上比較nice的動效、提示會讓用戶減輕失敗帶來的不爽。

6、美與簡單的設(shè)計(jì)(Aesthetic and minimalist design)

幫你理解:設(shè)計(jì)不應(yīng)該包含不相關(guān)或不常用的信息。重點(diǎn)的內(nèi)容和核心的元素應(yīng)該與其他的信息形成鮮明的區(qū)別。譬如在配色上,可以選擇1個(gè)主色,2個(gè)以內(nèi)的輔色,構(gòu)成整個(gè)設(shè)計(jì)的骨骼,用主色告知用戶目的與指示。

屏幕快照 2016-08-27 下午11.12.14

幫你總結(jié):

增加美感的同時(shí)也需要最小化設(shè)計(jì)元素,做減法。
以上6條可用性原則,是小M做產(chǎn)品過程中能無時(shí)無刻不記起的。每一次小細(xì)節(jié)的打磨都是一次回溯基本原理及原則的好機(jī)會,是否靈活運(yùn)用并爛熟于心,這是需要所有產(chǎn)品人er用心去感受的。加上小M前不久寫過的在做交互設(shè)計(jì)時(shí),你需要知道這幾大定律。希望能給你足夠的基本方法去做好自己的產(chǎn)品。

最后送給所有產(chǎn)品人er一句裝逼的話:“形式是跟隨功能的,功能是滿足用戶需求的。尊重你的用戶,讓每個(gè)產(chǎn)品的細(xì)節(jié)都是合情合理的,讓每一寸體驗(yàn)是‘走心’的!”

 

作者:權(quán)莉,微信昵稱:Mandy權(quán)。一名快樂的產(chǎn)品經(jīng)理!

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 另外說一點(diǎn)可能無關(guān)緊要的小事。關(guān)于進(jìn)度條有些時(shí)候沒有會比有體現(xiàn)出更好的用戶體驗(yàn)。 例如QQ或者微信,在用戶分享圖片的時(shí)候,就將進(jìn)度條去掉了。因?yàn)橛脩舴窒韴D片時(shí),心理急于速度,但這時(shí)由于網(wǎng)絡(luò)原因進(jìn)度很慢,用戶肯定不滿,所以QQ或者微信在分享圖片時(shí),直接在用戶面前出現(xiàn)的是成功后的界面,或許只是用戶自身可以看見,但成功的將因進(jìn)度過慢的問題化解

    回復(fù)
  2. 文字和配圖直接的關(guān)系,可否解釋的再詳盡一些。抱歉我只是一只小白,很想學(xué)習(xí)學(xué)習(xí),但看著有些費(fèi)勁。

    來自北京 回復(fù)
    1. 好的,我會持續(xù)寫文,咱們共同學(xué)習(xí)哈。

      來自四川 回復(fù)
  3. Enjoy在英文中的含義本來就是享受它吧,可以衍生為拿走吧,這個(gè)購買從場景上沒有什么不同,那么既然含義相似,能表現(xiàn)的體驗(yàn)感更好,也不妨是一種好的嘗試。回樓上同僚的寶貴意見。

    回復(fù)
  4. 你真的覺得 ENJOY NOW 比購買好么? 你這不是尊重用戶 這是把用戶當(dāng)智障啊….不能為了BIGER去做逼格 這樣的結(jié)果很可能就是 哇好棒 但是沒什么卵用…我說的話 雖然不那么中聽 但是我確定它是有用的

    來自北京 回復(fù)
    1. Enjoy在英文中的含義本來就是享受它吧,可以衍生為拿走吧,這個(gè)購買從場景上沒有什么不同,那么既然含義相似,能表現(xiàn)的體驗(yàn)感更好,也不妨是一種好的嘗試?;貥巧贤诺膶氋F意見。 ??

      來自四川 回復(fù)