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

14 評論 16194 瀏覽 164 收藏 10 分鐘

文章以作者最近做的一個會員卡綁定激活的運營活動作為案例,總結了交互設計中的一些“套路”。

大家都知道,運營類app會經常做各式各樣的運營活動,面對不同的活動類型,會有不同的需求和用戶目標,怎樣能夠快速理解需求并做出邏輯清晰的交互方案,下面以最近做的一個會員卡綁定激活的運營活動作為案例來總結一下交互設計的那些“套路”:

首先,接到這個需求時,產品給了個簡單的原型:

這是什么鬼?

大概看一下原型,可以看到有三個承載頁面,第一步是要輸入手機號和驗證碼,第二步輸入卡密,最后一步驗證成功,進行下載。咋一看一頭霧水,這貌似是一個激活卡的流程,為了更加精準地了解產品需求,于是找到產品直接進行需求溝通(溝通前需要去思考用戶場景和每個細節):

我:這是什么個需求?

pm:一個會員卡激活綁定的流程頁。

我:會員卡是什么東西?

pm:這是一個實體卡,是我們平臺用戶升級為會員用的,上面有logo,卡號和密碼圖層

我:這卡是怎么來的?

pm:平臺通過線下運營活動給平臺老用戶進行的福利或者用戶進行購買獲得。

我:會員卡有什么用?

pm:激活后可以將帳號升級為會員(類似qq會員那種)

我:用戶要怎么才能激活?

pm:通過掃描會員卡后面的二維碼來進行激活。

我:激活后又會怎樣?

pm:激活后用戶升級為會員,能享受各種xxxxx牛逼的特權。

我:為什么要做這個需求?

pm:讓我們平臺用戶能夠升級為會員,然后就…….

我:額……

好了,現在已經大概了解了項目需求,先出個一版交互看看:

額,感覺就是把產品原型稍微優化重新排個版而已,如果這樣就算做交互了,那也太簡單了,這個時候需要更加深入地思考和分析:

  • 上面的步驟流程有沒有問題?第一步就要輸入手機號?
  • 頭部的廣告是什么?跟激活卡有什么關系?會不會影響用戶正常激活流程?
  • 按鈕的文案是不是有問題?提示文案是不是太簡單?用戶是否看的懂?

……

交互設計三要素重新梳理整個邏輯流程:

1、目標用戶:大部分平臺普通用戶(非會員用戶)和少量非平臺用戶,通過某些渠道活動營銷或自己花錢購買到實體會員卡。

2、用戶目標:希望用卡能夠快速進行升級會員,然后可以享受各種xxxxx牛逼的特權,然后可以買各種便宜的東西等等。

3、使用場景:用戶拿到會員卡后,看到卡背面有二維碼,用戶下意識地用微信去掃一掃,這個時候就要去思考,用戶掃完二維碼后出現的頁面的心理預期是什么?難道應該是像產品原型里面那樣直接出現輸入手機號和驗證碼嗎?仔細想想是不符合用戶心理預期的,其實用戶更希望看到關于卡詳細的信息,以及這個卡怎么樣一個激活流程,讓用戶提前看到激活的步驟和操作會讓用戶有更好的心理安全感,另外如果能讓用戶直接看到升級會員后能夠帶來哪些好處能夠享受哪些特權會更加促使用戶進行升級會員的操作。

分析了這么多,突然思路就清晰一些了,現在我們再重新優化一下交互,就當作第二個版本吧

嗯,現在看起來是不是頁面結構清晰多了,用戶通過掃描二維碼進入后可以看到大大的標題“特奢匯會員卡激活”以及副標題“升級超級會員,尊享會員8大特權”從標題上就告知用戶這確實是會員卡的激活流程,以及升級會員會享有8大特權,符合用戶的心理預期。標題下面一塊滑屏區,展示著升級會員后會享有的一些特權和好處,這個地方也是為了讓用戶更好地了解會員的好處并促使用戶進行升級的誘發劑。滑屏區下面的步驟拆分區域也是為了更好地讓用戶感知到整個流程和需要操作的步驟。

看到這里感覺這版應該沒有什么問題了,正當我要定稿的時候,為了確保沒有遺漏什么重要的細節,還是要再仔細思考一下:

  • 頁面流程是否有問題?是不是能夠更簡化?
  • 頁面是否清晰明白?用戶是否能夠看的懂?
  • 用戶當前的心理預期是什么樣的?需要引導用戶怎么操作?
  • 用戶為什么要進行這個操作?用戶的目標是什么?
  • 還有沒有更好的方案?

……

不停地問為什么,同理心的目的就是讓我們能夠站在用戶的角度去思考用戶的心理和其行為模式。

抱著一定有更好的方案的思路才能不斷突破:

優化后的思路是把特權滑屏區域去掉,將這里做成了實體卡樣式。

為什么要這么做?還是要回到用戶和場景本身,我們這里的主要用戶群體是非會員用戶,對我們的產品和平臺有一定的關注和了解,能夠接受花錢購買會員卡進行會員升級,說明該用戶已經提前詳細了解了平臺會員所有的特權,并且有足夠強的動力去完成會員卡激活等一系列流程,所以這個地方再次強調有哪些會員特權就顯得意義不大。

考慮到用戶是通過實體會員卡掃描二維碼而進入的頁面,所以在頁面形態上面通過高度還原實體卡樣式來展示,通過用戶手中的實體卡和界面里面的卡來形成會員卡帳號的互通。當用戶輸入密碼時,上面卡密區域也會同步進行密碼輸入的聯動。

這樣設計的好處就是能夠讓用戶快速地進行場景帶入,用戶第一眼看到就很清楚地知道需要做什么操作,模擬實體卡設計符合用戶當前的使用場景和心理預期,能夠與用戶產生情感上的共鳴。

最后再整理優化一下交互流程,添加細節描述和異常態:

好了,到目前為止交互的工作算是完成了,接下來就是視覺設計師的工作啦~

最后總結一下,在處理運營活動類交互設計時(其實適用于大部分交互設計類型)一般通過下面4個維度來分析:

  1. 用戶:是什么樣的人在用你的產品,這些人有哪些特點,有哪些訴求,用戶畫像越細越好;
  2. 目標:用戶的目標是什么,用戶想得到什么,能夠給用戶帶來什么樣的價值。
  3. 場景:場景化設計,考慮用戶真實的使用場景,這里分為內部使用場景和外部環境場景等,針對不同的場景才能做成符合用戶心理預期的設計。
  4. 流程:考慮用戶在使用過程中在各個場景下分別會產生哪些行為流程,怎樣優化用戶流程,怎樣避免用戶犯錯并給出友好的反饋等等。

總之,多問一些為什么,多思考這樣做的原因,可以通過交互設計七大定律、交互設計三要素以及5W1H規則等交互方法來進行實施和驗證。

 

本文由 @小米渣和大冬瓜 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 先拍個磚,感覺核心流程能先確定應該是更好的,畢竟一改核心流程,大部分時候很多層面的東西要連帶改動。
    文章里設計稿的迭代確實很棒,能站到用戶場景想出最后的那個方案我是覺得牛逼得不行,尤其是那個給用戶預告流程的部分,厲害厲害。
    馬上抄一下 ??

    來自上海 回復
  2. 第一是先畫核心流程,然后再優化

    回復
    1. 同意

      來自上海 回復
  3. 先要確認功能上掃碼能不能獲取激活碼,如果不能那么設計刮開涂層還有必要嗎?如果可以那么用戶輸入激活碼是不是屬于多余的操作? ??
    挺羨慕這個小項目都有交互和視覺,再看看我的 ??

    來自廣東 回復
    1. 這里輸入密碼是為了給用戶增加平臺安全的心理暗示,類似銀行卡密碼輸兩遍。大部門小團隊沒有配備交互是正常的,會慢慢重視起來的。

      來自廣東 回復
  4. 為什么激活時候需要輸入密碼?是因為這個密碼有用處么?

    回復
    1. 明白了,為了和實體卡驗證

      回復
  5. 謝謝,很棒的思考過程,個人感覺定稿錯誤提示不用使用彈框形式,打斷用戶操作流程,直接在輸入位置標紅提示即可

    來自重慶 回復
    1. 您說的沒錯,從體驗上來講及時報錯是最好的,這里做成彈窗的原因是考慮了交互方式統一性和技術開發成本的因素

      來自廣東 回復
  6. 學習了,引人思考

    來自廣東 回復
  7. 很有啟發!
    剛看到特權滑屏區設計的時候我還在想用戶估計看不出來那塊區域是可以滑動的,可以吐槽一番,沒想到后來改掉了哈哈

    來自浙江 回復
    1. 哈哈,我想吐槽一下交互定稿的第一頁,那個刮開涂層查看密碼的交互很易誤導用戶去嘗試刮開的。不過,還好被設計師給掰回來了。

      來自北京 回復
    2. 確實,也引導我去掛密碼了。設計師掰回來的很正確哈

      來自北京 回復
  8. 感覺視覺做的不行啊

    來自廣東 回復