案例解析,我是如何進行交互設計的

3 評論 6763 瀏覽 40 收藏 14 分鐘

有些時候,交互設計師在其他崗位的認知中,僅僅是一個只會產出黑白稿、低保真原型的工種。如何改變這種認知呢?本文通過對實際案例的解析,希望能帶大家了解,交互設計師在產出交互方案時,是如何進行思考與設計的,一起來看一下吧。

交互設計師往往在公司中處在一個尷尬的位置,甚至絕大部分公司都沒有交互設計師這個崗位,取而代之的是會畫原型的產品、會畫原型的運營以及會畫原型的UI設計師。所以交互設計師在其他崗位的認知中,僅僅是一個只會產出黑白稿、低保真原型的工種。如何改變這類認知?相比較去反駁,我認為倒不如通過自己的思考跟產出的方案,來證明自己的價值。

本次帶來的案例,是運營產出的一套交互原型。由于身后的視覺設計師在設計的時候一直怨聲載道,總是抱怨信息不完整、流程不完整導致的無盡的返工。所以想基于這個案例,帶大家一起來看看,作為一個交互設計師,在產出交互方案時,是如何進行思考與設計的。

ps:可能本文提到的交互形式與內容并不是最佳方案,思考維度有限,也希望大家指出一起交流進步。

一、項目背景

根據運營同事的介紹,知道本次項目的目標是提升產品信息的透出,最終完成轉化。
而用戶行為的設計是通過解鎖產品相關信息,了解產品相關內容,增加對產品的熟悉度與好感,最終購買產品。

為了便于了解,我們可以把它模擬成一個汽車銷售的案例,一般用戶的購買行為肯定是基于對汽車各個性能的充分了解的前提下進行的,通過“定位”與“解鎖”,讓用戶可以選擇自己感興趣的性能去了解。而解鎖的模塊越多,客戶對產品的性能越了解,客戶購買的可能性就越大。所以為了促進用戶解鎖,我們設置了積分獎勵,通過解鎖獲取積分的刺激來提升解鎖率,最終達到產品銷售轉化的目的。

以下是運營提供的交互原型(原型做了一些脫敏處理):

我們分別從信息層級、交互形式、操作鏈路三個方面來解析當前的原型所存在的問題,同時結合對于運營目標以及用戶行為的思考,給出一些優化建議。

二、明確頁面信息層級

大部分非交互人員在制作原型時,對于信息的布局是沒有過多思考的,往往都是哪里順眼就放在哪,或者別人怎么放就怎么放,而信息布局對于交互設計師而言,是非常重要的一環,需要考慮信息的結構、信息的關聯性、信息的重要程度等。所以針對當前的原型,我們來看看都有哪些信息布局的問題。

1. 信息關聯性

《設計師要懂心理學》這本書中有提到一個用戶心理,人們往往認為相鄰物體必然相關。我們可以看到當前原型中,“您當前獲得0積分”這個信息在兩個按鈕中間,按照信息關聯性他似乎是跟兩個按鈕都有關聯性,但其實她跟“立即購買”按鈕沒有任何關系,因此放在這個地方無疑違背了大家對于信息關聯性的認知與理解。

2. 信息重要程度

我們一般在對按鈕進行布局的時候,會將重要性相當的按鈕擺放在一起,同時將直接促成轉化的按鈕突出顯示,如視覺加強,放在右側方便用戶點擊等。比如電商平臺經常將“加入購物車”跟“購買”按鈕并排擺放。當前的原型中,雖然強調了“立即購買”按鈕,但是由于“使用積分”的重要程度要弱,所以兩個按鈕放在一起就顯得不是很合適,那該如何來進行布局呢?

在進行布局之前,我們可以分析一下業務跟用戶在該頁面的動機分別是什么。對于業務而言,無論采取積分刺激或者別的方式,最終的目標肯定是轉化,所以轉化按鈕一定是最重要的觸點,重點突出;而對于用戶而言,積分所帶來的利益點是來到頁面的目的之一,所以積分的展示與使用才是重點突出的。

所以用戶來到頁面的視線應該是先看到積分情況,促使用戶解鎖內容獲得積分,最后才是根據解鎖內容的了解完成最終的購買產品的轉化。

三、選擇頁面交互形式

我們將主要頁面進行信息層級的梳理與布局后,接下來我們就需要選擇合適的交互形式來承載。當前頁面主要發生用戶交互的地方在解鎖內容獲取積分上,我們拆分用戶行為,分析在解鎖前、中、后三個階段,當前原型存在的問題以及優化的思路。

1. 解鎖前

當前原型中,解鎖前是通過圖形“鎖”來標識狀態,但是鎖也有禁止的意思,所以當用戶進入頁面時可能會面臨兩點疑惑:能不能點擊以及要不要點擊。那么該如何解決用戶的疑惑呢?

針對能不能點擊,除了告知視覺做出可點擊的樣式,我們還需要給與引導,一方面告知用戶次此處是可以進行交互的,另一方面,也是促進用戶點擊,從而完成內容對用戶的轉化。

而關于要不要點擊,就需要采取手段刺激用戶發生交互。當前僅僅是展示待解鎖的內容,顯然缺乏刺激點,而原型中把獲取積分放到解鎖后才透出,可能解鎖操作前就流失了一部分用戶,那我們就需要把利益點前置,告知用戶解鎖能獲取什么,刺激用戶點擊,增強用戶解鎖的意愿。

2. 解鎖中

解鎖中即用戶點擊進入次級頁面閱讀相關內容進行解鎖,運營人員設置的業務規則是用戶必須滑到最底部閱讀全文才能解鎖成功,彈出解鎖獎勵彈窗。但是頁面上并沒有展示任何跟該規則相關的信息,客戶按照過往認知,可能會覺得進入頁面返回就會獲得積分獎勵,但是當用戶返回并沒有解鎖成功時,用戶會感到挫敗與疑惑,可能會直接退出該頁面。那該如何解決呢?

從跟運營的溝通中我們得知其業務目的是希望用戶多停留在該頁面,讓內容盡可能多的展示給用戶。那我們是不是可以換種思路,不需要用戶滑到最底部,而是設置用戶在該頁面的停留時間,是不是也能滿足?

我們可以進一步優化時間的設置,當前解鎖是跳出到新的頁面,但是溝通后發現,該頁面的內容不會很多,那我們是否可以用彈窗的形式來呈現呢?這樣不僅減少用戶的頻繁跳出,同時也可以增強內容與主頁面的關聯性。因為用戶發生交互的行為是解鎖,為了保持跟用戶預期一致,是不是可以加一個解鎖的操作,這樣就能讓整個邏輯形成閉環。那么時間的設置就可以結合解鎖按鈕來進行交互呈現。

那如果業務或者客戶就要求用戶必須滑到最底部,我們該如何進行交互呢?我們可以通過“顯性”跟“隱性”兩種方式來展開。

顯性,顧名思義就是直白的告訴用戶業務規則,比如用戶首次進入頁面,通過彈窗的形式告訴用戶滑到底部即可解鎖,但是帶來的問題就是過于直白的指引可能導致用戶為了獲得獎勵直接滑到底部而忽略內容本身;

而隱性就是讓用戶自己明白這個業務規則,我們可以通過定位用戶在該頁面的位置,結合進度來呈現,用戶向上滑動則進度條前進,反之則保持不變,通過這種形式不僅增加了用戶在該頁面的停留時間,同時也增加了解鎖的趣味性,但是需要考量的就是該交互形式的開發成本。

3. 解鎖后

解鎖后也就是用戶返回主頁面時候的交互,此時頁面發生變化的主要是解鎖按鈕的狀態(已解鎖)以及積分數量的變化(增加積分),其中積分的增加可以滿足用戶的獲得感并且激勵用戶繼續完成解鎖任務,那么該選擇何種交互形式呢?

首先想到的是進度條的形式,通過積分獲得進度來告知用戶已經獲得的積分以及還可以完成的解鎖任務,用戶解鎖成功返回首頁,進度條前進一格展示該節點成功解鎖狀態。但是由于積分跟最終的購買轉化并沒有強關聯,這樣的交互形式會過多的突出積分的價值,導致用戶將過多的注意力放在解鎖獲取積分上,所以此種交互形式在該場景下就不是很合適。

那么選擇何種形式,既要增強用戶的獲得感,同時降低積分的權重?我們可以嘗試用計數器來展示,用戶解鎖成功返回首頁,積分數字動態增加,由于是過性的交互,所以并沒有過多的搶占用戶的注意力,同時數字的增長又很好地展示解鎖成功所帶來的收獲,滿足此場景下的業務目標。

四、優化用戶操作鏈路

交互設計師的主要職責,就是站在用戶的角度優化操作鏈路,提升用戶在產品中的用戶體驗。在當前的鏈路中,用戶解鎖成功獲得積分后,如果需要使用積分,需要返回首頁進行操作,那么該如何優化這個鏈路呢?我們可以很容易想到在用戶獲得積分的彈窗加上使用積分的按鈕,這樣用戶可以“所得即所用”,就不用再返回首頁進行操作了。

五、總結

以上,就是筆者根據過往的工作經驗,分享的一篇關于日常交互設計思考的文章。后續也會繼續分享自己在實際工作中,關于產品交互的心得與感想。經驗有限,歡迎大家批評指正與交流。

本文由@背包流浪 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 使用積分這個,如果做成單選按鈕,放在去購買按鈕上方,如果積分可用則可選擇,如果積分不可用,則置灰不可用,這樣的交互如何?
    目前京東的購物體驗個人感受下來,應該是最好的。購買商品下單時,如果有可用優惠券,系統會自動領取,并提示已自動領取并使用優惠券。會給用戶好感,減少了領取、選擇使用優惠券的操作。

    來自廣東 回復
    1. 當前業務場景中,積分跟購買行為是沒有關鍵性的,并不是電商產品中的優惠券的概念,個人感覺不適合放在購買按鈕旁邊

      回復
  2. 交互設計師的主要職責,是站在用戶的角度優化操作鏈路,提升用戶在產品中的用戶體驗。以用戶體驗導向為核心目標,才能做出更好的交互設計產品。

    來自山西 回復