實例分析:運營活動項目中交互設(shè)計的4大維度

文章以作者最近做的一個會員卡綁定激活的運營活動作為案例,總結(jié)了交互設(shè)計中的一些“套路”。
大家都知道,運營類app會經(jīng)常做各式各樣的運營活動,面對不同的活動類型,會有不同的需求和用戶目標(biāo),怎樣能夠快速理解需求并做出邏輯清晰的交互方案,下面以最近做的一個會員卡綁定激活的運營活動作為案例來總結(jié)一下交互設(shè)計的那些“套路”:
首先,接到這個需求時,產(chǎn)品給了個簡單的原型:
這是什么鬼?
大概看一下原型,可以看到有三個承載頁面,第一步是要輸入手機號和驗證碼,第二步輸入卡密,最后一步驗證成功,進行下載。咋一看一頭霧水,這貌似是一個激活卡的流程,為了更加精準(zhǔn)地了解產(chǎn)品需求,于是找到產(chǎn)品直接進行需求溝通(溝通前需要去思考用戶場景和每個細(xì)節(jié)):
我:這是什么個需求?
pm:一個會員卡激活綁定的流程頁。
我:會員卡是什么東西?
pm:這是一個實體卡,是我們平臺用戶升級為會員用的,上面有l(wèi)ogo,卡號和密碼圖層
我:這卡是怎么來的?
pm:平臺通過線下運營活動給平臺老用戶進行的福利或者用戶進行購買獲得。
我:會員卡有什么用?
pm:激活后可以將帳號升級為會員(類似qq會員那種)
我:用戶要怎么才能激活?
pm:通過掃描會員卡后面的二維碼來進行激活。
我:激活后又會怎樣?
pm:激活后用戶升級為會員,能享受各種xxxxx牛逼的特權(quán)。
我:為什么要做這個需求?
pm:讓我們平臺用戶能夠升級為會員,然后就…….
我:額……
好了,現(xiàn)在已經(jīng)大概了解了項目需求,先出個一版交互看看:
額,感覺就是把產(chǎn)品原型稍微優(yōu)化重新排個版而已,如果這樣就算做交互了,那也太簡單了,這個時候需要更加深入地思考和分析:
- 上面的步驟流程有沒有問題?第一步就要輸入手機號?
- 頭部的廣告是什么?跟激活卡有什么關(guān)系?會不會影響用戶正常激活流程?
- 按鈕的文案是不是有問題?提示文案是不是太簡單?用戶是否看的懂?
……
從交互設(shè)計三要素重新梳理整個邏輯流程:
1、目標(biāo)用戶:大部分平臺普通用戶(非會員用戶)和少量非平臺用戶,通過某些渠道活動營銷或自己花錢購買到實體會員卡。
2、用戶目標(biāo):希望用卡能夠快速進行升級會員,然后可以享受各種xxxxx牛逼的特權(quán),然后可以買各種便宜的東西等等。
3、使用場景:用戶拿到會員卡后,看到卡背面有二維碼,用戶下意識地用微信去掃一掃,這個時候就要去思考,用戶掃完二維碼后出現(xiàn)的頁面的心理預(yù)期是什么?難道應(yīng)該是像產(chǎn)品原型里面那樣直接出現(xiàn)輸入手機號和驗證碼嗎?仔細(xì)想想是不符合用戶心理預(yù)期的,其實用戶更希望看到關(guān)于卡詳細(xì)的信息,以及這個卡怎么樣一個激活流程,讓用戶提前看到激活的步驟和操作會讓用戶有更好的心理安全感,另外如果能讓用戶直接看到升級會員后能夠帶來哪些好處能夠享受哪些特權(quán)會更加促使用戶進行升級會員的操作。
分析了這么多,突然思路就清晰一些了,現(xiàn)在我們再重新優(yōu)化一下交互,就當(dāng)作第二個版本吧
嗯,現(xiàn)在看起來是不是頁面結(jié)構(gòu)清晰多了,用戶通過掃描二維碼進入后可以看到大大的標(biāo)題“特奢匯會員卡激活”以及副標(biāo)題“升級超級會員,尊享會員8大特權(quán)”從標(biāo)題上就告知用戶這確實是會員卡的激活流程,以及升級會員會享有8大特權(quán),符合用戶的心理預(yù)期。標(biāo)題下面一塊滑屏區(qū),展示著升級會員后會享有的一些特權(quán)和好處,這個地方也是為了讓用戶更好地了解會員的好處并促使用戶進行升級的誘發(fā)劑。滑屏區(qū)下面的步驟拆分區(qū)域也是為了更好地讓用戶感知到整個流程和需要操作的步驟。
看到這里感覺這版應(yīng)該沒有什么問題了,正當(dāng)我要定稿的時候,為了確保沒有遺漏什么重要的細(xì)節(jié),還是要再仔細(xì)思考一下:
- 頁面流程是否有問題?是不是能夠更簡化?
- 頁面是否清晰明白?用戶是否能夠看的懂?
- 用戶當(dāng)前的心理預(yù)期是什么樣的?需要引導(dǎo)用戶怎么操作?
- 用戶為什么要進行這個操作?用戶的目標(biāo)是什么?
- 還有沒有更好的方案?
……
不停地問為什么,同理心的目的就是讓我們能夠站在用戶的角度去思考用戶的心理和其行為模式。
抱著一定有更好的方案的思路才能不斷突破:
優(yōu)化后的思路是把特權(quán)滑屏區(qū)域去掉,將這里做成了實體卡樣式。
為什么要這么做?還是要回到用戶和場景本身,我們這里的主要用戶群體是非會員用戶,對我們的產(chǎn)品和平臺有一定的關(guān)注和了解,能夠接受花錢購買會員卡進行會員升級,說明該用戶已經(jīng)提前詳細(xì)了解了平臺會員所有的特權(quán),并且有足夠強的動力去完成會員卡激活等一系列流程,所以這個地方再次強調(diào)有哪些會員特權(quán)就顯得意義不大。
考慮到用戶是通過實體會員卡掃描二維碼而進入的頁面,所以在頁面形態(tài)上面通過高度還原實體卡樣式來展示,通過用戶手中的實體卡和界面里面的卡來形成會員卡帳號的互通。當(dāng)用戶輸入密碼時,上面卡密區(qū)域也會同步進行密碼輸入的聯(lián)動。
這樣設(shè)計的好處就是能夠讓用戶快速地進行場景帶入,用戶第一眼看到就很清楚地知道需要做什么操作,模擬實體卡設(shè)計符合用戶當(dāng)前的使用場景和心理預(yù)期,能夠與用戶產(chǎn)生情感上的共鳴。
最后再整理優(yōu)化一下交互流程,添加細(xì)節(jié)描述和異常態(tài):
好了,到目前為止交互的工作算是完成了,接下來就是視覺設(shè)計師的工作啦~
最后總結(jié)一下,在處理運營活動類交互設(shè)計時(其實適用于大部分交互設(shè)計類型)一般通過下面4個維度來分析:
- 用戶:是什么樣的人在用你的產(chǎn)品,這些人有哪些特點,有哪些訴求,用戶畫像越細(xì)越好;
- 目標(biāo):用戶的目標(biāo)是什么,用戶想得到什么,能夠給用戶帶來什么樣的價值。
- 場景:場景化設(shè)計,考慮用戶真實的使用場景,這里分為內(nèi)部使用場景和外部環(huán)境場景等,針對不同的場景才能做成符合用戶心理預(yù)期的設(shè)計。
- 流程:考慮用戶在使用過程中在各個場景下分別會產(chǎn)生哪些行為流程,怎樣優(yōu)化用戶流程,怎樣避免用戶犯錯并給出友好的反饋等等。
總之,多問一些為什么,多思考這樣做的原因,可以通過交互設(shè)計七大定律、交互設(shè)計三要素以及5W1H規(guī)則等交互方法來進行實施和驗證。
本文由 @小米渣和大冬瓜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
先拍個磚,感覺核心流程能先確定應(yīng)該是更好的,畢竟一改核心流程,大部分時候很多層面的東西要連帶改動。
文章里設(shè)計稿的迭代確實很棒,能站到用戶場景想出最后的那個方案我是覺得牛逼得不行,尤其是那個給用戶預(yù)告流程的部分,厲害厲害。
馬上抄一下 ??
第一是先畫核心流程,然后再優(yōu)化
同意
先要確認(rèn)功能上掃碼能不能獲取激活碼,如果不能那么設(shè)計刮開涂層還有必要嗎?如果可以那么用戶輸入激活碼是不是屬于多余的操作? ??
挺羨慕這個小項目都有交互和視覺,再看看我的 ??
這里輸入密碼是為了給用戶增加平臺安全的心理暗示,類似銀行卡密碼輸兩遍。大部門小團隊沒有配備交互是正常的,會慢慢重視起來的。
為什么激活時候需要輸入密碼?是因為這個密碼有用處么?
明白了,為了和實體卡驗證
謝謝,很棒的思考過程,個人感覺定稿錯誤提示不用使用彈框形式,打斷用戶操作流程,直接在輸入位置標(biāo)紅提示即可
您說的沒錯,從體驗上來講及時報錯是最好的,這里做成彈窗的原因是考慮了交互方式統(tǒng)一性和技術(shù)開發(fā)成本的因素
學(xué)習(xí)了,引人思考
很有啟發(fā)!
剛看到特權(quán)滑屏區(qū)設(shè)計的時候我還在想用戶估計看不出來那塊區(qū)域是可以滑動的,可以吐槽一番,沒想到后來改掉了哈哈
哈哈,我想吐槽一下交互定稿的第一頁,那個刮開涂層查看密碼的交互很易誤導(dǎo)用戶去嘗試刮開的。不過,還好被設(shè)計師給掰回來了。
確實,也引導(dǎo)我去掛密碼了。設(shè)計師掰回來的很正確哈
感覺視覺做的不行啊