案例分析:如何結(jié)合場景設(shè)計頁面?

1 評論 11424 瀏覽 86 收藏 11 分鐘

作者結(jié)合自身經(jīng)驗并根據(jù)實例,總結(jié)了頁面設(shè)計的一些方法與要點,一起來學(xué)習(xí)吧~

上一篇文章中講到在用戶資金交易的過程中,設(shè)計師需要向用戶展示資金不同節(jié)點的明確狀態(tài)及資金去向,讓用戶時刻有掌控感。還要借用上篇文章中我使用競品的案例:

案例一:在某平臺購買了一筆定期產(chǎn)品。購買成功后出現(xiàn)下圖的第一個頁面:

1、頁面顯示認購成功,但是具體起息日待定,待整個項目投滿后的下一天起息。那么,什么時候項目才能募集滿呢?不知道??梢韵胂筮@樣的提示會給用戶帶來多大的疑慮。

2、回到“我的賬戶”頁面(中間的頁面),2天內(nèi)這筆錢一直在“當(dāng)前資產(chǎn)價值”里面,沒有顯示在認購項目中。用戶一定會有疑慮,因為用戶不清楚該筆資金什么時候才算投資到項目中開始計息,如果用戶當(dāng)時在投資成功時沒有看到那一行“預(yù)計計息日項目投滿日+1”的灰字,根本查不到關(guān)于該筆資產(chǎn)的認購詳情,甚至懷疑自己有沒有做過投資的操作。在這個過程中,用戶沒有掌控感,對未來要發(fā)生的有疑慮,甚至產(chǎn)生恐懼。

3、再看第三個頁面,產(chǎn)品生息過程中,待回款項目中顯示“遇節(jié)假日,順延還款”,可是當(dāng)時支付成功的頁面(第一頁)明明高亮顯示的是“遇節(jié)假日正常還款”。這樣嚴(yán)重的錯誤是致命的,文案提示的一致性、產(chǎn)品規(guī)則的明確統(tǒng)一,都是用戶體驗非常重要的一部分,交互設(shè)計師的工作絕不僅僅是考慮文案應(yīng)該如何顯眼。

案例二:在某平臺上購買產(chǎn)品時,需要充值到賬戶,用交通銀行卡連續(xù)充值3次,都是跳轉(zhuǎn)至下圖的頁面:

為什么會失敗呢?這時我首先想到的是聯(lián)系客服。從在線客服那里了解到,平臺app端不支持交通銀行充值了,需要去PC端完成充值。于是我去PC端充值,出現(xiàn)以下頁面信息:

這時作為用戶就會懷疑,這個平臺怎么了,充值渠道都出問題了,客服回答的也不對。

無奈,只能繼續(xù)聯(lián)系客服,客服回復(fù)說,PC端充值時,交通銀行單筆只能充值3000元。于是我追問:“還有什么其他的限制條件沒有說清楚的嗎?”最后終于重新提交了一筆3000的充值訂單后才充值成功。

這是我比較喜歡的一家理財平臺,遇到像我這樣類似的問題的用戶應(yīng)該有很多。用戶在資金交易的過程遇到問題時,會很恐慌,尤其是一些不符合用戶預(yù)期的問題。其實以上這些問題都是可以通過設(shè)計的技巧來避免的。

為什么案例一中交互設(shè)計師有時候會遺漏展示頁面的狀態(tài)呢?我認為是設(shè)計師在設(shè)計的過程中,沒有真正置身真實的場景中,沒有仔細打磨用戶任務(wù)流中的每一個環(huán)節(jié)可能出現(xiàn)的問題并及時給出相應(yīng)反饋。設(shè)計順暢的標(biāo)準(zhǔn)流程,對交互設(shè)計師來講并不難,難就難在置身真實使用場景,發(fā)現(xiàn)和處理異常的情況。比如用戶購買成功后,不是設(shè)計一個認購結(jié)束頁面就可以了。再進一步想,接下來用戶會去哪里,最關(guān)心的是什么。

《交互設(shè)計精髓》一書中提到,在從需求到明確的設(shè)計方案過程要經(jīng)過以下步驟:

其中設(shè)計師可能需要在步驟3和步驟5之間重復(fù)多次,直至需求穩(wěn)定,產(chǎn)出明確的設(shè)計方案。

我們以用戶購買定期產(chǎn)品后的持有資產(chǎn)詳情頁為例,討論如何來設(shè)計一個頁面。

如何設(shè)計一個頁面?

當(dāng)設(shè)計一個頁面時,我們需要考慮什么:

  1. 頁面的目標(biāo)
  2. 用戶角色,用戶進入頁面的場景
  3. 用戶詳細的任務(wù)流程
  4. 用戶進入當(dāng)前頁面的預(yù)期
  5. 所有的功能,所有的信息字段,所有按鈕狀態(tài)及所有交互效果

針對持有資產(chǎn)詳情頁面的,需要考慮如下:

頁面目標(biāo):

向用戶提供明確的資產(chǎn)當(dāng)前狀態(tài)及資金將來的去向

用戶角色:

完成投資支付的用戶

用戶進入頁面的場景:

  • 場景一:用戶投資申請?zhí)峤怀晒?,但還在審核中
  • 場景二:用戶投資成功,等待計息,但未開始計息
  • 場景三:產(chǎn)品計息中
  • 場景四:產(chǎn)品即將到期
  • 場景五:產(chǎn)品正在還款中
  • 場景六:產(chǎn)品已還款成功

任務(wù)流程和當(dāng)前頁面預(yù)期:

  • 投資申請?zhí)峤弧顿Y成功:查看項目是否投資成立,計息規(guī)則(查看產(chǎn)品詳情頁)
  • 投資成功,等待計息——開始計息:確認投資金額,預(yù)期收益,產(chǎn)品計息時間
  • 計息中——即將到期:投資剩余天數(shù),產(chǎn)品到期日
  • 即將到期——待還款:產(chǎn)品到期日,還款日,還款規(guī)則
  • 待回款——還款成功:還款規(guī)則,是否還款成功

所有的功能和信息字段:

  • 項目產(chǎn)品名稱及詳情
  • 投資金額
  • 預(yù)期(或到賬)收益
  • 起息時間
  • 到期時間
  • 資產(chǎn)基本信息:年化收益率、投資期限、投資日期、起息日期、到期日期、還款日期、還款規(guī)則

所有的狀態(tài)及所有交互效果

投資當(dāng)前狀態(tài)包括:待起息、起息中、即將到期、到期還款中、已還款。

對于起息中和即將到期,考慮到用戶真正在意的還是產(chǎn)品剩余多少天到期,我們同意顯示為剩余X天。

  • 未到期還款時,收益狀態(tài)為預(yù)期收益
  • 到期還款后,收益狀態(tài)為到賬收益

這一過程體現(xiàn)在頁面設(shè)計中如下:

案例一中的問題就是出在投資成功,等待計息——開始計息這一階段。即使用戶的投資項目沒有募集滿,還不能計息,也應(yīng)該向用戶展示出資金處理中的狀態(tài),否則用戶會產(chǎn)生焦慮。

下圖為資產(chǎn)詳情頁在四個場景下的不同狀態(tài)(場景一目前我們平臺沒有這種情況,沒有做相應(yīng)設(shè)計)

運用上面的方法,那么案例二中的問題也很容易解決了。

充值頁面設(shè)計:

頁面目標(biāo):引導(dǎo)用戶充值符合銀行卡限額及個人充值上下限額的金額

用戶角色:完成實名認證及綁卡的用戶

用戶進入頁面的場景:

  • 場景一:主動點擊充值入口充值
  • 場景二:投資時賬戶余額不足被動充值

任務(wù)流程和當(dāng)前頁面預(yù)期:

主動充值:用哪張銀行卡充值;限額多少;

投資時被動充值:當(dāng)前賬戶余額有多少、用哪張卡充值、限額多少

所有的功能和信息字段:

  • 認證綁卡信息
  • 充值金額
  • 平臺充值上下限額
  • 銀行卡充值限額
  • 充值按鈕

根據(jù)以往的經(jīng)驗,采用認證支付支持多家銀行時,很容易出現(xiàn)某一家或者幾家銀行充值服務(wù)暫停的情況,并且是隨時都有可能發(fā)生的。因此可以在前端頁面增加公告欄功能,當(dāng)有支付渠道問題或是節(jié)假日銀行不支持交易時,后臺人員可以直接配消息內(nèi)容直接顯示在前端頁面,而不需要遇到時緊急發(fā)版或客服電話被打爆了。所以,還應(yīng)增加消息公告功能,由后臺配置。沒有公告時,該區(qū)域可以隱藏不顯示。

所有的狀態(tài)及所有交互效果 :

羅列出的所有信息字段不一定都要以文字的形式展示在前端,有些信息需要在用戶操作前就展示出來,有些信息可以隱藏,在用戶操作犯錯誤時及時進行提示,如下圖的上限金額。

總結(jié)

交互設(shè)計是一個細活,需要反復(fù)的推敲和挖掘用戶在使用過程中可能遇到的問題和當(dāng)下最想了解的信息,而不是想當(dāng)然的去設(shè)計一個順暢的交易流程就結(jié)束了。如果你的平臺很安全,請不要因為你的設(shè)計而讓用戶感受到不安全感。

謝謝:)

 

作者:高廣淦,交互設(shè)計師。?微信公眾號:交互視角

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. :mrgreen:

    來自北京 回復(fù)