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

Alex
17 評論 50592 瀏覽 289 收藏 15 分鐘
🔗 产品经理专业技能指的是:需求分析、数据分析、竞品分析、商业分析、行业分析、产品设计、版本管理、用户调研等。

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

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

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

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

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

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

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

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

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

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

第一步:選項(xiàng)最少化檢查

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

功能性的頁面,常見的是需要完成若干輸入的表單頁面、詳情頁里的點(diǎn)擊按鈕操作、或選擇選項(xiàng)后進(jìn)行單個(gè)或多個(gè)操作等。

第一步:重點(diǎn)操作是否突出

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

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

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

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

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

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

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

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

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

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

第一步:是否完整覆蓋

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

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

第二步:是否可理解

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

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

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

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

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

這一項(xiàng),實(shí)際上是前面四項(xiàng)方法的匯總,之所以單獨(dú)列出來,是因?yàn)槲覀兠恳粋€(gè)定位合理的APP,實(shí)際上都有一個(gè)核心的目標(biāo),例如電商就是從查找商品到完成購物,學(xué)習(xí)類APP就是從課程匹配到完成課程學(xué)習(xí)。

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

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

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

總結(jié)

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

 

本文由 @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. 做個(gè)小小的課代表,樓主以確保產(chǎn)品易用性為目標(biāo)提出APP產(chǎn)品設(shè)計(jì)的五個(gè)方法:
    將APP拆解為功能性頁面、內(nèi)容性頁面、操作性頁面和空狀態(tài)頁面四個(gè)模塊,前四個(gè)方法是分別對這四個(gè)模塊設(shè)計(jì)要素的解讀,讓各個(gè)模塊做到有重點(diǎn)、可識別、可理解、有反饋。
    最后一個(gè)方法則是以產(chǎn)品的核心業(yè)務(wù)流程為出發(fā)點(diǎn),檢驗(yàn)由上述四個(gè)子模塊組成的APP操作是否順暢,反饋是否及時(shí)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      來自北京 回復(fù)