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

17 評論 50163 瀏覽 288 收藏 15 分鐘

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

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

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

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

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

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

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

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

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

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

第一步:選項最少化檢查

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

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

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

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

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

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

如果我們放的是“上課”、“筆記”、“我的”,那么辨識度就很高,而且符合使用的邏輯順序:先上課,再做筆記。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第一步:是否完整覆蓋

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

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

第二步:是否可理解

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

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

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

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

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

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

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

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

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

總結

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

 

本文由 @Alex 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 做個小小的課代表,樓主以確保產品易用性為目標提出APP產品設計的五個方法:
    將APP拆解為功能性頁面、內容性頁面、操作性頁面和空狀態頁面四個模塊,前四個方法是分別對這四個模塊設計要素的解讀,讓各個模塊做到有重點、可識別、可理解、有反饋。
    最后一個方法則是以產品的核心業務流程為出發點,檢驗由上述四個子模塊組成的APP操作是否順暢,反饋是否及時。

    整篇推文用“分-總”的結構行文,邏輯清楚,內容通暢,方法論可操作性強~

    來自上海 回復
  2. 寫的非常有用

    回復
  3. 不想一下VX,為什么不做分類,不加標題嗎?

    來自北京 回復
    1. 一切的產品設計都要以微信的設計為準繩來設計嗎?微信的設置頁面,做了分類,但是沒有加標題,不加標題的理由也顯而易見…動動腦子不好么?

      來自廣東 回復
    2. 白癡,所以說微信的例子是反例嗎?不想想為什么不加標題?加了能讓用戶識別更好嗎?

      來自北京 回復
  4. 寫得蠻好的 學習了

    來自四川 回復
  5. 小白產品 功力不夠 看得懵懵懂懂,多get幾下了

    來自廣東 回復
  6. 可以轉載至公眾號?會注明來源及作者

    來自廣東 回復
  7. 感覺很實用,也能引導讀者思考,非常感謝 ??

    來自廣東 回復
  8. 對于初級小白來說,老師可以配合更多圖文來解釋嗎?這樣更直觀和便于理解 ??

    來自浙江 回復
  9. 老師,我可以加你微信嗎 ??

    來自北京 回復
  10. 學過很多理論,在面對新鮮事物時往往無從下手,理論轉化為執行尤為重要。感謝作者分享自己的理解和思路。

    來自廣東 回復
  11. 作為希望運用產品思想到HR工作中的小白,希望可以私信交流溝通。 ??

    來自北京 回復
    1. 好的呀,互相學習

      來自廣東 回復
    2. 我可以加一下您微信或是其他聯系方式嗎?或者我的賬號就是我的手機號 您可以直接加我 ??

      來自北京 回復
    3. 只能看到你的昵稱,看不到你手機號呢 ??

      來自廣東 回復
    4. 嘻嘻 還真是呢 手機號碼13811060521 ??

      來自北京 回復