08.27 簡單易用的產品設計方法論:以APP設計為例

本文作者試圖總結一些簡單易懂、方便操作的方法和步驟,能將人機交互學的理論快速貫徹到具體的產品設計上。enjoy~

“簡單易用”,無論是每本和產品設計有關的經典書籍,或是產品大拿的經驗總結裡,毫無疑問都是一個核心的關鍵詞。

Giles Colborne的《簡約至上-交互設計四策略》直接將簡約放在標題上,書中提到的刪除、組織、隱藏、轉移四個策略,都可以認為是為了實現“簡單易用”目標的高度提煉的方法論。

而唐納德·A·諾曼的《設計心理學》裡,最後一章也提出了化繁為簡的七個原則,這七個原則也是通用於各類人機交互場景的概括性原則:

應用儲存於外部世界和頭腦中的知識。簡化任務的結構。注重可視性,消除執行階段和評估階段的鴻溝。建立正確的匹配關係。利用自然和人為的限制性因素。考慮可能出現的人為差錯。最後選擇,採用標準化。

更為大家所熟知的,應該是微信之父張小龍經典的“瞬間把自己變成白痴”,這應該是提煉最為精闢、堪稱產品設計的第一性原理了。

我們系統學習理論,當然是希望應用這些高度抽象和提煉出來知識,但在實際工作中,在產品原型設計階段的操作上,如何將這些高屋建瓴的理論運用到實際工作中,卻存在一定的門檻。本質上,如果我們把產品經理看做是這些理論的用戶,那對於產品經理來說,這些講“簡單易用”的理論,在實踐經驗還有所欠缺的產品經理看來,要把這些理論紮實落實到實踐中,避免犯一些基本的錯誤,反而不是那麼“簡單易用”了,而是需要每一個產品經理在不斷的實踐中去摸索的。

本文的目標,就是試圖總結一些簡單易懂、方便操作的方法和步驟,能將上述人機交互學的理論快速貫徹到具體的產品設計上。我在這裡以APP的設計為例,列舉出對APP進行設計時,確保產品易用性的五個系統化的方法,每一個方法包含2-3個步驟,以期對大家的實際操作有所幫助。

1. 對每一個層級的選項,進行數量最少化、可辨識和可理解的檢查。

廣義的選項,包含了各層級導航,以及各類菜單列表等。

第一步:選項最少化檢查

這個方法對應的是交互設計原則裡的“刪除”和“隱藏”。

首先應當斟酌每一個選項是否有必要出現在這一個層級?例如一個APP的“我的”裡,如果只有個人資料和簡單的設置,且個人資料對產品核心功能並無重要影響,那麼“我的”這個入口,就可以考慮從一級導航移除,而收納到左右角上去。

其次要對每一個層級的選項數量進行嚴格控制,對於導航來說,5個就是極限了;對於設置之類的菜單列表來說,很可能要超過5個,那麼就必須對菜單選項進行歸類,通過視覺設計上的分塊,給予分塊標題,每個塊再包含若干選項,從而降低用戶的選擇壓力。對於多選項的視覺上的歸納劃分,實際上踐行的也是認知心理學裡的“相近即相關”的原則。以下舉幾個歸類的例子:

第二步:可辨識和可理解檢查

經過了第一步之後,我們已經確保每一層級的選項數量是在貼合產品業務邏輯上的最少化了,也就是剩下的選項就是本層級所必須的了。那麼對用戶來說,這時候易用性的體現,就是這些存在下來的選項,是否能夠一眼就看出區別,並迅速理解其含義。這一步基本是“瞬間把自己變成白痴”的具體實現之一。我舉幾個例子:

如果我們把“發現”“動態”放在一起,或是把“服務”“生活”放在一起,或是同時又有“關注”又有“訂閱”,那麼它們的辨識度就是不高的。

如果我們放的是“上課”“筆記”“我的”

,那麼辨識度就很高,而且符合使用的邏輯順序:先上課,再做筆記。

可理解的意思,還包括我們使用的文字和概念,要儘可能是用戶熟悉的、常見的、含義明確的,或者已經被主流產品教育、通用了的文案,而儘量不要是自己杜撰出來的新概念。舉例來說:

“訂單”“課程表”“選車”“消息”等就都是含義明確的名詞或動賓結構,是非常好理解的文案。

“動態”“發現”這一類雖然含義模糊,但由於在各類APP裡比較常見,用戶習慣性就知道這裡面大概會有什麼內容,所以也是沒有太大問題的用詞。

而類似“連線”“有料”“幫幫”

之類,除非你已經是一個影響力很大的APP,有資本去教育用戶,否則使用不常見的詞語還不如使用表意明確而不花哨的詞語來得好理解。

2. 對每一個內容性的頁面,進行重點內容是否突出、是否可理解和可辨識的檢查

內容性的頁面,常見的包括列表頁、詳情頁等。

第一步:重點內容是否突出

頁面經常不可避免要出現多個內容,例如一段說明文字+一個列表,或者理財產品詳情的多項要素等,我們要確保這些內容放在一起時,只突出一項重點內容,以便讓用戶第一眼就感知到頁面的核心傳達。

突出重點內容有很多方法,例如位置處於第一屏視覺焦點、文字放大、高亮、周圍多留白等。下面舉兩個例子:

第二步:可理解和可辨識的檢查

這一步和方法1裡的第二步類似,主要還是在文本選擇上,一定要符合表意明確且常見或習慣的詞語這兩個原則,且在APP裡的實際含義要完全符合用戶自然的理解。

3. 對每一個功能性頁面,進行重點操作是否突出、操作結果是否明確、操作門檻是否足夠低的檢查

功能性的頁面,常見的是需要完成若干輸入的表單頁面、詳情頁裡的點擊按鈕操作、或選擇選項後進行單個或多個操作等。

第一步:重點操作是否突出

我們說每個功能性的頁面,一般應該只有一個重點操作。例如酒店詳情頁,預定就是重點操作,絕不能把關注和分享之類的操作放得和它一樣突出。

第二步:操作結果是否明確

按鈕如果用圖標,那必須是含義非常明確的常見圖標,例如分享、收藏等,切記自己創造新圖標;重點操作的按鈕上最好用文字(圖標按鈕難以做得足夠突出),且在文字長度和表意是否明確出現衝突時,必須以表意明確為優先(當然,物極必反,文字過長的話理解的障礙也會隨之提高)。

反面的例子:按鈕文字明明為“下一步”,但點擊後卻完成了全部操作。之所以不明確,是用戶在這裡的預期一般來說是操作未完成,還有要補充的動作,“下一步”後卻突然結束,對心理預期有突兀的衝擊。

第三步:操作門檻是否足夠低

操作門檻常見的錯誤是一個頁面的輸入表單過多,令用戶倍感壓力;或者每個步驟的操作選擇過多,令用戶困惑。理想的低操作門檻,並非一定是步驟最少化,而是每個步驟可理解、輸入壓力小、引導性強。

例如Keep這個APP,在你首次使用時,需要完成大量的選擇和輸入,但由於拆分合理,整個過程雖然較長,但用戶壓力小,跟隨引導一步步完成即可。

還有就是涉及到輸入的,儘可能用預置選項或掃描識別等手段,降低輸入門檻。

4. 對各處反饋進行檢查:是否完整覆蓋、是否可理解、是否告知用戶如何應對

最容易讓用戶焦慮的就是未知。當頁面或操作出現了異常情況,或者操作沒有及時、合理響應時,用戶不僅焦慮,更有可能憤怒,對用戶的傷害非常大。

第一步:是否完整覆蓋

對於通用的內容加載異常,應該在設計之初就指定好統一的反饋規範,切忌語焉不詳,也切忌長篇大論,語氣態度上應該平和偏軟,不要太過生硬,最好也不要太過俏皮:有可能過猶不及。

反饋的方式,如果有進度儘量要顯示出進度,如果沒有,則應該保持反饋的動態展示,必要時可給予提示:例如因網速等原因加載時間超過5秒還沒有結果,可適時給出“還在全力加載中,請稍候”等緩解用戶焦慮的手段。

第二步:是否可理解

切忌在反饋內容上出現“數據錯誤”、“系統異常”等不可理解的技術術語,如果真實的原因用戶可理解,那就如實簡要描述,如果不可理解,那就用常規的“加載失敗,請刷新重試”等習慣用語即可。

第三步:是否告知用戶如何應對

很多場景光一個原因說明還不夠,還應該告知或引導用戶如何進行下一步操作,或者直接提供下一步操作的按鈕。尤其是接下來第5點總結的,在產品的核心流程上,為了保證儘可能高的轉化率,還應該特別關注告知用戶如何應對非技術原因的中斷。

非技術原因的中斷是指的是由於業務邏輯上的規則,導致用戶暫時無法進行某一項操作,這種情況,儘可能要引導用戶進行補償性操作,從而降低用戶流失。例如,如果用戶由於時間未到而無法進行某項操作,那最優方案不只是提示用戶什麼時候可以操作,還應該讓用戶預約一個提醒時間,到時間後提醒用戶進行操作,如下示例所示,就是好的方案:

5. 對APP的核心流程,進行操作順暢性和反饋情況檢查

這一項,實際上是前面四項方法的彙總,之所以單獨列出來,是因為我們每一個定位合理的APP,實際上都有一個核心的目標,例如電商就是從查找商品到完成購物,學習類APP就是從課程匹配到完成課程學習。

對於任何一個產品,我們都應該重點關注核心業務流程的順暢性和反饋的及時性。我這裡以預約-認購流程為核心的產品《多彩投APP》為例說明:

這個產品要實現的是先預約(支付預約金)、再專享認購(預約用戶可支付尾款完成認購)、再開放認購(非預約用戶可認購)的流程。從用戶預約開始,我們就應該考慮到流程的以下各個環節:

支付預約金的流程是否順暢支付結果是否反饋及時預約金支付完成後如何提示用戶留意後續的認購臨近專享認購時如何提醒預約用戶非預約用戶在專享認購時點擊認購,如何提示並引導專享認購期臨近結束時如何提醒未支付尾款的預約用戶臨近開放認購時如何提醒那些感興趣的用戶(專享認購時點擊過的非預約用戶)

總結

以上,就是將抽象化的理論落實為容易執行的具體操作步驟,本質還是要讓理論轉化為在我們手上“簡單易用”的、操作性強的工具。在實際工作中,每個人都可以對這些步驟不斷迭代和完善,形成符合自己習慣的行之有效的方法論。

題圖來自 Pexels,基於 CC0 協議