編輯導語:我們都知道,在設計過程中要滿足一定的互動設計原則,這直接決定了使用者使用你的產品過程中的體驗,其重要性不言而喻。那麼在我們設計互動行為方式的時候,應該遵循什麼原則呢?本文作者為大家總結出來了7條互動設計原則,歡迎大家討論交流。
產品互動設計在大廠會有專門崗位的同學完成,但是對於職責分工還沒有那麼明確的公司來說,這部分的工作可能就是產品經理來兼職完成了,甚至也有研發來兼職完成的。
這裡往往會出現一些問題,非互動專業的人設計完產品之後,我們想要實現的功能是可以滿足的,但是使用者體驗可能會大打折扣。如果設計者沒有刻意地去學習一些這方面的知識,設計出的原型可能免不了被一頓吐槽。
在閒暇時,看了一些UX的書籍,這邊總結出幾點原則和大家討論一下。
一、不要讓使用者思考在之前寫過的一篇文章說到一個觀點,意志力是易耗品,思考本身就會消耗人的能量,那麼使用者在用你的產品過程中,需要經歷複雜的思考的話,一定體驗不怎麼樣。
這裡要排除一些特殊情況,比如券商的產品,使用者開啟APP考慮要不要滿倉買入,這種情況的思考不屬於產品層面帶來的思考。同樣的case,以券商的產品舉例,如果使用者下定決心今天滿倉,但是發現使用的券商App找不到買入入口,花了很長時間思考、摸索才完成買入,那這個產品一定會讓使用者非常嫌棄,甚至換一個券商。
我翻了翻手機裡的App,選了幾個大家可以感受一下使用起來是否需要思考。
微信讀書,下廚房。啟動App,首頁就是搜尋欄,要看什麼書,想做什麼菜,透過搜尋直接滿足使用者需求,整個環節不超過三步,幾乎不需要使用者去思考;抖音,更加簡單粗暴的例子。毫無學習成本的App,點開就開始刷,一步到位。這種互動是非常容易觸達到使用者爽點的。
仔細想一下,這些和讓使用者即時滿足有一點類似。上述舉例的產品功能相對簡單單一,可以從功能上就做到不讓使用者思考,對於複雜一些的產品,會從按鈕設計,UI設計上減少使用者思考的情況。
比如SaaS產品的註冊頁面,是不是可以做到讓使用者儘量少填寫內容,提前錄入好企業使用者的資訊,企業員工註冊時候,輸入工號就可以彈出員工的資訊;比如頁面按鈕擺放的位置,關鍵按鈕的形狀和樣式是否突出,按鈕的提示是否明確。
按鈕設計對比
給一個平時工作的例子,上面是產品的設計,下面是UX同學改過之後的。第一個設計,從使用者視角來看,開關控制元件關閉代表的是隱藏還是不隱藏,需要使用者思考揣摩。而在第二個設計,加上了文字說明,就可以瞬間消除使用者的疑惑,避免了使用者思考。
二、萬不得已,讓使用者線性思考我們剛聊到的一些產品功能相對簡單,如果提升一些產品複雜度,可能就沒法做到不讓使用者思考了,那可以考慮讓使用者線性思考。線性思考,是指思考過程有一根主線,產品做到讓使用者線性思考,使用者能夠更容易理解產品。
其實這和我們平時用思維導圖的初衷一樣,如果是一個“蜘蛛網導圖”,相信你肯定腦子很混亂。而我們常用的思維導圖,基於一個點去蔓延到一條線,再蔓延到多條線,這符合人腦的思考方式,也更容易記住。我們下面看一下線性思考和網狀思考。
思維導圖的線性思考
蜘蛛網圖的網狀思考
上面兩張圖是說一樣的內容,但是當你腦海裡是網狀的認知,你是沒辦法掌握全域性的。而如果用思維導圖輔助思考,將網狀的內容變成線性,由一個點去發散,我們就會更好的理解現狀,這也是思維導圖的作用。
回到產品設計,比如電商產品的設計,淘寶、拼多多、京東。產品本身的功能是相對複雜的,商城裡的單品也非常多。
京東首頁,選單欄
大家可以設想一下,假設電商產品選單欄不分類也沒有搜素會怎樣?使用者體驗一定只有兩個字,極差。所以產品裡的分類引導,其實就是在給使用者提供用於思考的那根線。
三、無法做到前兩條的情況,設計教程輔助使用者思考產品根據自身的屬性不同,上手難易程度也天差地別。對於上手難度很高的產品,免不了出現要使用者深度思考的情況。為了應對這類情況,產品的互動上也有解決方案。
大家第一次開啟墨刀的時候,一定會注意到有很多Tips告訴你這一步的功能是什麼,下一步應該做什麼。像墨刀這類產品有比較強的工具屬性。這類產品的產品設計過程中,除了要提供產品給使用者,一定要附帶提供的就是產品說明書了。
outsystems啟動引導
上面是國際低程式碼工具龍頭公司outSystems的產品,坦白說,這個產品真的上手難度很高,所以可以看到他們提供了非常細緻的操作引導,同時提供了很多公開課教使用者如何用outSystems搭建應用。這部分很值得國內的一些同類產品學習。
對於複雜的產品,使用者開啟產品的一刻,就像處於一個完全陌生的空間,完全失去了方向感,這種使用者體驗本身是非常糟糕的。所以提供引導就像虛擬空間裡的指路牌,幫助使用者逐漸清晰的找回新產品空間裡的所在位置。
四、為掃描設計,不為閱讀設計產品設計的時候也要考慮到,使用者通常非常忙。不會有時間和耐心去閱讀有大量文字的頁面。而且使用者們也預設知道,不看完頁面所有內容並不會有嚴重的影響,大家都學會了跳躍式的閱讀。
就像一篇論文會有標題、小標題、引言、摘要、正文、結尾這些組成,我們透過標題,引言,摘要,結尾論斷就能大概知道,這篇文章所寫的內容是不是我需要的,應不應該花時間仔細閱讀。
在產品設計的時候也是一樣,你見過產品開啟就是滿頁的免責宣告的設計麼?必要的大段文字是不是大部分都是很小的入口。
使用者通常是點開頁面飛快的掃描關鍵資訊,你可以回想一下,你刷知乎的姿勢是怎樣的?
一種方式是:目標明確的進去搜索。找到自己想要的答案;另一種方式是:在推薦欄裡不停的滑動,滑到有意思的標題停下來,點進去。
所以,一旦知道這個原則,再回過頭看知乎的設計。知乎的回答內容是摺疊一部分,並把標題和回答者簡介突出。在一個頁面上,你快速掃描的時候,也就能看清4到 5個標題回答,以及各個回答的作者。
五、設計搜尋框很重要我們在知乎的例子裡說到,使用者刷知乎的時候兩種姿勢。一種是搜尋,一種是無目的滑頁面。這個對映到現實世界裡,刷知乎就像逛商場。無目的滑頁面就像在商場裡閒逛,而在知乎裡搜尋,就像在商場裡找服務人員直接詢問某個店在哪個位置。
那麼如果商場一個服務人員都沒有的話,是不是很可能會流失一些客戶。同樣,在產品裡,沒有搜尋的話,使用者帶著明確目的開啟產品,會花很長時間也不見得達到他目的。消磨使用者的時間和耐心可不是個好現象。
六、在已有的使用者習慣上謹慎創新在產品的使用過程中,會有非常多的習慣用法。比如搜尋欄的標誌是一個放大鏡,比如微軟Office的撤銷快捷鍵是Ctrl+Z,比如關閉按鈕一般在頁面右上角等等。
習慣能夠成為習慣,一定有背後的邏輯。不好用的習慣可能在演進的過程中就已經消失了。而要改變一個積累了很久才形成的習慣,一定是要付出非常大的能量。就像衛星在既定軌道繞地球運轉,他是不怎麼耗能的,但是如果需要他換一個對地軌道,那需要的能量可就非常大了。
你可以試想一下,一款產品,搜尋欄標誌是一顆衛星,撤銷的快捷鍵是Ctrl+V,頁面關閉的按鈕在左下角。是不是用起來會想摔電腦。
七、體系的思考增刪改查這一點B端產品會接觸的多一些,在對錶單進行設計的時候,需要有整體考慮的思維。我們在說麥肯錫的互相獨立,完全窮盡的時候,會談到把功能儘可能細分,達到功能和功能之間完全獨立。
但是有拆分的能力也要有統一的能力,否則就會出現,設計了增加按鈕,但是沒設計刪除按鈕,設計了刪除按鈕,沒設計修改按鈕等等。表單裡的增刪改查,在設計上其實是統一考慮的。
這一點是從研發小夥伴身上學習的,他們的視角里所有的功能都會變成一行一行的程式碼實現,當發現有一個地方程式碼實現起來有漏洞了,他們會反推功能是不是夠完整,不夠全面。經常會提很多Corner Case給到產品。
久而久之,對於一個模組,體系地思考其功能再進行設計,就成為了一種習慣。設計增加的時候,是不是一定會想到刪除應該怎麼刪,刪除之後現有表單的資料應該怎麼處理,修改資料允許改動哪些,是改欄位型別,還是改表裡的值?
產品互動確實是一個非常難的學問,可能涉及到心理學,傳播學等等知識。現在市場上產品設計的時候可以參考的依據是非常多的,那麼在對優秀產品的學習中,我們借鑑他們設計的同時,也應該能夠知道他們設計背後的邏輯。
也許背後邏輯會對映到今天總結的一些原則裡,也許有那些優秀產品經理自身更獨特的思考。但是我們要知道的是,在設計產品互動的時候,是能夠有一套方法論去指導我們設計的。這套方法論也不會違背創新。
斯坦福大學最受歡迎的創意課裡提到,創新是可以由一套規則批次創造的。那在我們日常設計產品的之後,熟悉互動設計的方法論,相信也會在其中找到屬於自己的創新。
本文由 @格林不童話 原創釋出於人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議