簡單易用的產(chǎn)品設(shè)計方法論:以APP設(shè)計為例

17 評論 50421 瀏覽 289 收藏 15 分鐘

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

“簡單易用”,無論是每本和產(chǎn)品設(shè)計有關(guān)的經(jīng)典書籍,或是產(chǎn)品大拿的經(jīng)驗總結(jié)里,毫無疑問都是一個核心的關(guān)鍵詞。

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

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

  • 應(yīng)用儲存于外部世界和頭腦中的知識。
  • 簡化任務(wù)的結(jié)構(gòu)。
  • 注重可視性,消除執(zhí)行階段和評估階段的鴻溝。
  • 建立正確的匹配關(guān)系。
  • 利用自然和人為的限制性因素。
  • 考慮可能出現(xiàn)的人為差錯。
  • 最后選擇,采用標準化。

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

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

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

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

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

第一步:選項最少化檢查

這個方法對應(yīng)的是交互設(shè)計原則里的“刪除”和“隱藏”。

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

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

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

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

如果我們把“發(fā)現(xiàn)”“動態(tài)”放在一起,或是把“服務(wù)”“生活”放在一起,或是同時又有“關(guān)注”又有“訂閱”,那么它們的辨識度就是不高的。

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

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

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

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

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

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

內(nèi)容性的頁面,常見的包括列表頁、詳情頁等。

第一步:重點內(nèi)容是否突出

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

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

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

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

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

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

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

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

第二步:操作結(jié)果是否明確

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

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

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

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

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

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

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

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

第一步:是否完整覆蓋

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

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

第二步:是否可理解

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

第三步:是否告知用戶如何應(yīng)對

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

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

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

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

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

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

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

總結(jié)

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

 

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

題圖來自 Pexels,基于 CC0 協(xié)議

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

    整篇推文用“分-總”的結(jié)構(gòu)行文,邏輯清楚,內(nèi)容通暢,方法論可操作性強~

    來自上海 回復(fù)
  2. 寫的非常有用

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

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

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

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

    來自四川 回復(fù)
  5. 小白產(chǎn)品 功力不夠 看得懵懵懂懂,多get幾下了

    來自廣東 回復(fù)
  6. 可以轉(zhuǎn)載至公眾號?會注明來源及作者

    來自廣東 回復(fù)
  7. 感覺很實用,也能引導(dǎo)讀者思考,非常感謝 ??

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

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

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

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

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

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

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

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

      來自北京 回復(fù)