互動設計的三個層次

互動設計是產品工作中的重要一節,一份優秀的互動設計文件可以高效地指導開發和測試展開工作,並減少不必要溝通,有利於提高產品的產出效率。

互動設計的三個層次

互動設計主要是將產品經理確定的需求進行細化,並以互動文件的方式呈現,指導開發和測試展開工作,也可以理解為開發使用的文件。下面我將從三個層面來探討下互動設計,即:產品層、概念層、行為層。

互動設計的三個層次

一、產品層

產品層,主要是從正常的產品設計角度,即產品鏈角度來分析互動設計。

在使用者體驗五要素中,我們知道產品經理負責戰略層和範圍層,互動設計師負責結構層和框架層,視覺設計師負責表現層。

其中產品經理主要是從一堆需求中,透過需求分析找到低成本高價值的需求,並確定好範圍以需求文件形式呈現,這裡有產品需求和使用者需求。

而互動設計師主要是分析已確定的需求,站在使用者體驗角度將其轉化為可開發的互動文件,也可以簡單理解為分析問題,解決問題。

1。 分析問題

我們可以對應互動模型和使用者體驗地圖。

互動模型應該是一開始就要分析的,即使用者、場景、目標;不同的使用者在不同的場景下的不同任務目標,可以衍生出多個任務流程。其中使用者分析,可以理解為使用者畫像,即模擬出幾種型別的使用者,並對其基本情況有個詳細描述,後面針對某型別使用者時便可以使用其虛擬名稱。

使用者體驗地圖,正常來說是需要找到一群真實使用者來體驗產品,並將真實的體驗過程給描述出來。實操上可能並沒有這麼完善的條件,我這邊的做法是利用同理心去模擬使用者,體驗透過互動模型分析梳理的任務流程,並將所思、所做、所感記錄下來。

所思,可以理解為每步操作前的思考,例如:看到登入頁時,頁面中的元素擺放會讓我有哪些思考或想法。

所做,可以理解為靜態的時候,我會怎麼操作,產品有所反饋後,我又會怎麼操作。

所感,可以理解為整個流程體驗下來,具體的一些心裡感受,好的或者不好的地方。

透過使用者體驗地圖可以很容易的找到產品的一些隱含痛點,並透過持續的改進讓產品的體驗越來越好。

2。 解決問題

我們可以對應任務流程、資訊架構、頁面原型。

透過互動模型可以很容易得到任務流程圖,我這邊不喜歡將很多流程畫到一張圖裡面,而是區分不同的使用者畫出在不同場景下的任務流程圖,將複雜的流程圖給拆分簡單化,這樣後面畫原型時,邏輯更清晰,也不會遺漏一些頁面。

資訊架構圖,主要是分析產品的需求文件,也可以先梳理出功能架構圖,在此基礎上對產品的資訊架構進行設計,原則就是脈絡要清晰。

有了任務流程圖和資訊架構圖後,再來畫頁面原型,感覺就清晰多了。頁面原型可以理解為需求視覺化,即將產品的概念透過實際的產品設計圖表達出來,需要互動設計師有一定的頁面排版能力和美感,原型在不影響效率的前提下應儘量美觀。個人感覺,這部分能力就需要一定的專案積累了。我之前由於有幾年的網頁設計經歷,所以需求視覺化的能力就直接轉嫁過來了。

3。 方案落地

我們可以對應互動文件。

互動設計師最終的輸出物就是互動文件了,我們一般畫好了原型後就會拉個會議,對互動方案進行討論。我這邊的做法是按照設計流程來講,依次按互動模型、使用者體驗地圖、任務流程圖、資訊架構圖的順序先過一邊,再針對具體的頁面原型進行講解。

這個地方需要根據公司的實際情況靈活安排了,我們的原則就是儘量讓互動方案順利透過,所以先講概念性的分析產物。而原型是透過前面分析而來,不容易被全盤否決,更多的是具體頁面元素內容或者擺放上的調整。我這邊的經驗是,開發也會將一些難點丟擲來進行討論。

互動評審通過後針對每頁原型都要附上一些說明,然後將所有這些輸出物集合打包,就成了一份詳細的互動文件,也可以理解為開發文件。後面會專門寫一篇文章來描述互動文件如何來寫。

我個人的想法是,產品經理輸出的需求文件就不用給開發看了,後面開發和測試都統一以互動文件為依據,有需求變更或者開發難點反饋等,互動文件需要跟進,並附上修改時間和記錄,作為詳細的查閱資料應用於整個產品組。

4。 最佳化

我們可以對應資料分析、使用者反饋、可用性測試。

資料分析,

主要是產品上線後,使用者的一些使用資料,我們拿到這些資料後,可以分析出一些真實的使用者行為。

使用者反饋,

就是使用者使用產品後的一些反饋,有好的也有不好的,例如:APP上線後,都會有一些使用者的吐槽等。我們需要從眾多反饋中提煉出可最佳化的使用者需求,此處有個原則:不要讓小機率事件影響大機率事件。

可用性測試,

主要是模擬真實使用者去體驗測試階段的產品,並將一些問題進行記錄。這裡可以請具有代表性的使用者或者公司同事來體驗,也可以自己去體驗。

二、概念層

從概念上來說,互動設計是指:幫助使用者更好地使用產品,達到使用者目標,並在這個過程中有愉悅的感受。我們可以提取出“更好地使用產品”、“有愉悅感受”。

1。 更好地使用產品

更好地使用產品,我們對應認知和反饋。

認知,

簡單說就是一看就明白,會用。一個複雜的介面,第一次使用時使用者可以很快上手,這樣我們就認為擁有好的認知屬性,可以節省很多使用者思考的時間或者說節省使用者的認知資源;一個產品如果複雜的介面都有這種認知屬性,整個產品就不會太難用,可以節省很多培訓使用者的時間。

反饋,

簡單說就是操作順暢,容錯。每次操作介面時,系統都能給出很友好的反饋,對於很複雜的流程,使用者也能很順利操作,最終達到自己的任務目標;使用者有一些錯誤的操作,產品透過合理反饋可以避免使用者去犯錯。

這樣的一款有好的認知和友好反饋的產品,對使用者而言,應該是用起來很舒服的。我們在產品設計時考慮更多點,做的更多點,使用者用起來就更簡單些,更舒服些。

2。 有愉悅感受

有愉悅感受,我們對應體驗過程,即操作簡單、介面美觀。

操作簡單,

一款使用者體驗好的產品,使用者在使用時,有愉悅的感受是必然的。這裡我們可以去關注互動層的情感化設計,一個複雜的流程,每一步的銜接,每一步的轉場動效,在使用者完成目標的前提下,有更愉悅的精神體驗。

例如:反饋時的方式,哪種體驗更好;介面切換時,需要使用哪種動效等。

介面美觀,

這裡主要是針對UI設計,視覺層的情感化設計。使用一款介面很漂亮的產品,在滿足好用的前提下,有更多的愉悅感受也是必然的。

例如:一些報錯頁面的情感化設計,可以撫慰使用者的焦慮;引導頁的情感化設計,可以降低使用者使用產品的難度等。

三、行為層

互動從廣義上來說,是設計人與物的互動、人與人的互動、人與環境的互動。從俠義上來說,就是人與物的互動,而且這個物指產品介面。我們希望設計使用者的行為,讓使用者按照我們的商業目標來使用產品。使用者是難伺候的,我們的實操是透過設計物的行為即介面的行為,來影響使用者的行為。

簡單說就是——設計物的行為,影響人的行為;收集使用者真實的使用行為,反過來決策產品行為應該如何設計,這樣形成了一個良好閉環,不斷的設計行為,達到更好的使用者體驗。

使用者有很多:潛在的、實際的等,對於低動機低能力的使用者,在此不考慮。

1。 引導,高動機低能力

對於高動機低能力的使用者,我們的關鍵是提升使用者的能力。

使用者對我們的產品有很高的使用動機,無奈缺乏使用能力,這個能力可以理解為使用者的負荷過重,理解能力不夠;我們要提高使用者的能力,自然就是降低使用者負荷,降低產品的理解難度。

這類使用者,我們只需要去引導他們,讓他們跟著產品設計好的行為,一步步走,例如引導頁,新功能的引導助手等。

在生活中,有個大家很熟悉的例子:貸款買房。

買房屬於大件消費了,一般人缺少全款買房的能力,銀行推出的個人貸款買房產品,就可以理解為是提高了購房者的購房能力,然後銀行可以獲得利息作為利潤。其他的產品,例如貸款買車,花唄,借唄等都是一類的,都是提高使用者的購買能力。

2。 提醒,高動機高能力

對於高動機高能力的使用者,我們的關鍵是提醒。

一個好的產品,知道的人太少,導致使用者量不高,其中很多高動機高能力的使用者也錯過了。生活中,常見的宣傳手段是廣告,提高曝光度,讓大家都知道這款產品,對於有高動機高能力的,一點點提醒後,自然就會成為產品使用者。

3。 激勵,低動機高能力

對於低動機高能力的使用者,我們的關鍵是激勵。

使用者缺少足夠的刺激,可能擁有很高的能力,但是不會去用你的產品,我們要做的就是激勵使用者,一些好的廣告也可以達到這個目的。

例如一些豪宅的廣告,可以吸引到一些富豪;一些高階的手機廣告,可以吸引到一些成功人士等。

四、總結

針對B端和C端的補充說明:

B端產品,我們必須以業務目標為前提,深挖不同使用者不同場景的任務流程,提高使用者的認知能力;提高產品的反饋能力;提高產品的智慧性,有良好的感知和預見。

C端產品,我們必須以好用好玩為宗旨,深挖使用者的愉悅感,然後透過設計產品的行為來影響使用者的行為。

作者:D。cheerful,微訊號:dcf8859,武漢地區野路子高階互動設計師,7年B端產品互動設計經驗。

本文由 @D。cheerful 原創釋出於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議