互動設計的價值是什麼?

語言: CN / TW / HK

工作中經常有人聊起互動跟產品的差別是什麼?互動跟UI的差別是什麼?似乎從入行至今,都一直有過這樣的聲音。網際網路紅利期的逐步消退,資本緊縮,壓縮人力成本似乎成了一件趨之若鶩的事,所以早年阿里提出了全棧設計師、全棧工程師的概念,但本質上各種細分崗位的工作一直都存在,從未消失過,只不過以不同的形式被平攤了,但效果卻難以說是好的。下面將去拋磚引玉的探討互動設計價值點,並聊聊能否被兼併或取代。

Part 1

情感昇華先談談互動在做什麼?

借用一句傳統設計行業的經典語錄,一個好的產品一定是“有用的、好用的、用過還想用的”,有用的主要由產品經理把控,而好用、用過是否還想用就是互動設計的職責和價值了。工作內容,互動大概可以總結為下面這幾點:

1、是針對行為的設計,讓原本的物理邏輯向用戶行為邏輯轉化;

2、平衡業務價值和使用者價值,腦海中永遠不要忘記“使用者價值”這幾個字;

3、以目標為導向,保證產品貼合用戶心智,使用者能更好的理解、使用產品,並獲得愉悅的使用體驗;

4、是通過功能架構向資訊架構的重組,提升產品框架的擴充套件性、穩定性等,互動更多的考慮到在不同場景下對可用性的要求,讓產品能長久持續的使用下去;

5、是對使用流程設計;

6、資料分析和使用者研究相關的工作,這兩者是互動展開工作的基礎支撐。

互動的價值是長期的和可持續的,沒有互動,短期內看似不會出現問題,長期來看,對使用者留存、使用者滿意度等會有重大影響,市場環境不同於壟斷環境,功能堆砌過多後甚至都無法再動搖產品“難用”這個印象,但凡有類似競品,放棄產品可能性較大。

Part 2

互動設計的產出物特點——互動稿與產品原型稿有什麼差別

這可能很多人關心、疑惑的問題了,本質上這個也是互動稿專業度的問題。 產品經理也可以去畫原型圖,那問題在哪兒? 下面會嘗試闡述幾點重要差別。 當然並不排除極少數優秀、能力全面的產品能內外兼修。

1. 從內到外的邏輯思維差異

行為邏輯是互動設計師思考的出發點,也是互動設計方式能否取得創新的關鍵點。 物理邏輯或者業務邏輯是產品經理更關注的要點,互動設計需要具備豐富的同理心,產品功能不同、使用者不同、場景不同都會影響到使用者使用時的感受和操作行為。 簡單來說,互動設計師更多的站在使用者角度去思考原型的價值,是否容易被理解、好用甚至轉化,而產品的角度不可避免的會更多考慮業務、技術實現等方面,一個人做到面面俱到,是極其難且思維是很容易固化的,長期形成的思維差異會直接在原型圖中表現,最終影響到產品可用性。

以QQ音樂幾年前的版本(2017)和現版本(2021)為例,左側過往版本在首頁的資訊組織形式上主要以分類的方式,而右側現版本中資訊的組織形式中首頁的分類方式已經很弱了,基本傾向於按使用者行為、需求去組織,比如根據使用者過往聽過的歌曲去推薦歌曲、歌單,每日30曲更是研究了使用者每日習慣、耐心做的資訊整合,30首怎麼得來的?根據什麼樣的歌曲去推薦?這些都是行為研究的範疇,需要對使用者深度瞭解後方有最好的解決方案。

2. 設計規範的積累與創新

設計正規化是互動設計師基本功的體現,包含設計規範和模組正規化兩個方面。設計規範是設計正規化中的基礎,對規範的理解和創新也是衡量專業度最基礎的方面,這對原型稿是否成熟有很大關係,現有的互動規範大多基於iOS、Material design、微軟設計規範的基礎上優化的,國內比較流行的設計規範還有Ant design等,本文不對此做過多討論,這裡重點談談設計正規化。

正規化,指使用者在長期對於網際網路產品使用過程中產生的使用者心智,比如使用者對設定模組的預期、對個人資訊模組的預期等。也可以理解為對於不同產品功能模組的記憶,設計時需要非常熟練的從腦海中呼叫,這樣做的好處是不容易太偏離使用者長期積累的心智,熟練應用正規化是創新的前提。

比如表格編輯器的設計正規化,不管是現在的飛書、谷歌文件、釘釘、石墨等協同辦公產品,都在20年前微軟office的ribbon設計模式中兜兜轉轉,尤其是表格編輯器,在長期的使用過程中記類的習慣是很難輕易被改變的,筆者親身經歷過一款表格編輯器產品的迭代,易用性(易操作、易學、易見)中易學性指標評分是最高的,現在想起來也跟行業正規化接近不無關係。另外關於一些編輯器右鍵操作、鍵盤操作快捷鍵是否滿足了使用者需求都是極其重要的。不過辦公類產品發展到現在已不再像20年前純工具類屬性了,協同屬性必將帶來編輯器再一次的創新。

設計正規化需要長期的積累,對正規化理解不夠深入,通常是要麼畫不出來可用的原型,要麼畫出來的原型會被問到一個問題——“這個...看起來有點說不出來的奇怪”。在理解了基礎正規化之後,我們才能做出真正的創新,雖然近兩年互動形式越來越穩定,但真正理解了正規化之後的創新也能幫助產品快速佔領使用者心智,形成特定印象,繼而佔領市場。設計正規化並非不可創新,而是在不必要的時候儘量遵循正規化能最大限度去降本增效,減少不必要的使用者誤解或開發成本。

3. 多端設計互動方式

如果不是潛心研究過多端設計差異,一般很容易出問題。 比如PC端和Mobile端、小程式與App等,在設計方法上都存在巨大差異,我親眼見過太多的產品原型稿中出現過Mobile的設計方法運用到PC,或者PC應用到了Mobile。

比如基本的差異點有:

  • Mobile的使用者行為多為單線任務,而PC是多線任務,比如pc可以多視窗很便捷的切換,使用者可以一邊聊天一邊收郵件;

  • Mobile端使用者操作時間更加碎片化,PC操作時間更加系統、專一;

  • PC的介面也遠大於Mobile,導致資訊結構差異較大;

  • 兩者互動事件也存在很大差別,PC可以針對物件進行hover,多上下滾動,少左右滑動(依據滑鼠特性)等;

  • 設計控制元件的規範差異較大。

本文並不詳細贅述差異點,總的來說,這些差異點在具體的原型稿設計中會體現的比較明顯,這些也是專業性的一個方面。下面將舉2個例子來說明:

1、樹狀結構

樹狀結構是一個PC端經常應用的控制元件,適用於層級結構的展示、選擇等互動操作,高效而清晰,但其在移動端展示時卻不能照搬,由於螢幕、移動端手指互動等限制,在移動端該控制元件既不高效也不清晰。比如常見的將檔案移動到資料夾的操作,桌面端的互動可以用樹狀結構,而移動端更適合層級結構。

2、麵包屑導航

麵包屑在桌面端是一個非常普遍的控制元件,可以有效的承載層級關係展示、快速導航定位的功能,比如不同層級的資料夾展示與導航等。但在移動端,因為螢幕大小、移動端使用者操作碎片化等原因,導致使用者對面包屑節點的記憶、層級操作上都遠不如桌面端,甚至會影響到資訊的展示效率,因此移動端在層級關係的展示與切換上通常不會用麵包屑,而是左上角返回按鈕或系統級別的返回。當然麵包屑在移動端也並非一無是處,如果麵包屑各節點承載的展示作用具備極強的參考意義,比如這些資料夾節點同時承載著組織關係的顯示,則麵包屑也還是可以用的。

總結下來:麵包屑在移動端儘量別用,但如果其各層級節點同時有極強的參考意義,則可用。

4. 方法論的掌握和運用

方法論在互動稿中的體現是比較隱晦的,準確來說,這一點是針對思維差異點的補充,如互動設計十原則、“F型”頁面設計理論(近幾年有爭議)等視覺動線,也包含發現問題的一些方法,比如KANO模型、使用者體驗地圖、卡片分類等方法論的應用,這些對於使用者行為維度的研究結果也會支撐著互動稿的科學性,這裡不做展開闡述。

比如使用者體驗模型示意圖如下,使用者體驗模型是建立在使用者角色模型之上的,前提是需要大量的使用者深度訪談資料為基礎,用以系統、全面、科學的研究使用者行為和探索使用者需求。

使用者體驗地圖

除了以上列舉出來的,還有一項重要的方法是資料分析,這一點是容易被輕視的,但確是最具備參考價值和衡量工作結果的,互動關注的資料和產品有很多差異,具體一點,比如對於一個專案中,產品更多關注的是衡量功能結果的資料,通常包含使用資料PV/UV、轉化率等,而設計師更多關注CTR、停留時長、轉化漏斗中跟操作行為相關的資料,行為是互動研究的物件,所以行為資料結果能為具體的方案設計提供衡量指標。

5. 互動稿中的UI考量

簡單來說,就是不能給UI挖坑,沒有互動的設計,UI上與產品之間的溝通會非常頻繁,也主要會出現以下幾個常見問題。

1、資訊結構與優先順序的落地

資訊佈局既需要考慮功能的業務優先順序,也需要考慮使用者行為優先順序,同時還需要考慮到UI排版的難度。這中間基本都會有矛盾存在,做好平衡是必備技能。有時候需要逼著產品給出功能優先順序,排版是有限的,也有一定審美要求的專業度,互動稿需要為UI規避一些明顯的坑,比如最典型的例子——功能都很重要、文案過長等,當產品同學也不確定自己所畫功能是否能被使用者理解、操作的時候,會喜歡用文案去進行解釋,比如button上寫10個字這種,互動需要給UI提前做避坑。

2、規範

設計是一個系統,任何需求在畫互動稿時都應考慮到對系統的適應或衝擊,這就要求互動設計師不僅要非常熟悉設計系統,而且必須是系統的製作人之一,設計系統是一項耗時耗力的工作,前期耐心打磨,後期適應、修改,如此才能把握住使用者體驗的一致性。

3、邊界情況

主要包含使用者互動中與前端、服務端的互動,比如操作事件的定義、反饋;載入的形式與技術方案;空狀態;弱網、斷網等等,這些邊界頁面的考慮都定義清楚,能有效避免UI的返工。

4、保真度與實現效果

互動稿如果保真度較低,會導致UI在實際設計的時候對互動稿修改較大,導致頁面架構、互動註釋等返工修改,造成不必要的時間資源浪費,也會對專案進度造成影響。一般來說,成熟的互動稿是比較接近UI稿而又不是UI稿的一種狀態,將UI中的坑避免之後,UI設計師需要做的就是更表現層的設計,比如與前端工程師的實現匹配、色彩、柵格、間距、字型字號等等。

6. 詳盡的Use Case考量

Use Case(用例)指功能、互動的定義和詳細描述,用例描述的細節程度決定開發時反覆溝通的頻率,具體包含的細節很多,大到功能流程的設計,小到某個互動事件的定義和列舉;從前端使用者與系統的互動事件,到服務端與前端的功能聯動等,都涉及到,總之,只要使用者看到的、點選/滑動/hover等互動行為涵蓋到的,都應該被定義,以期減少開發過程中遇到的問題和溝通成本,這裡不做過多闡述。

Part 3

互動稿背後的價值——互動設計只是畫稿子的嗎?

顯然不是!如果說一個專案互動階段持續了3天,那繪製互動稿最多能花費1天。

互動是一個橫向能力比較高的職業,很多互動設計師也改行去做了產品、用研或者UI,所以多多少少都會具備這幾者的一些技能。互動設計師通常會有多重隱藏的技能是必須掌握的。

1. 專案中堅守使用者價值

使用者價值在專案中很容易就讓步於業務價值、專案排期、技術方案等,互動就是在這中間說“不”的人,潤物細無聲,在每個專案中儘量減少使用者價值的損耗,最後匯聚而成的產品整體體驗還是有很大差別的。

2. 團隊中承擔使用者研究、 行為資料的部分工作

互動在組織架構上,一般是會歸屬於設計部門的,所以在部門中也承擔了一線跟使用者和資料接觸的人,即便有資料分析師、用研同學的幫助,也需要有主動跟蹤這些問題的意識,不然設計出來的互動稿很難不出問題。

3. 可用性測試等結果追蹤

可用性測試在一些稍大的專案中是體驗設計環節中的定性維度核驗步驟,需要結合使用者反饋對方案進行可用、好用測試,並不是指在流程上能跑通的技術測試,而是校驗使用者對於方案的接受程度、滿意程度,也順便發現一些問題,後續進行優化。

更多的結果追蹤形式,比如還有SUS可用性量表(B端產品可用阿里雲UES量表等)、使用者滿意度、NPS跟蹤等等,目的在於定量的給使用者體驗打分,確保使用者體驗的衡量是有章可循的。

易用性量表

4. 直接驅動業務增長

增長黑客和使用者增長設計的概念前幾年也已在業內為大家所熟知,AARRR增長模型(獲客、啟用、轉化、留存、推薦/傳播)中,互動可依賴對使用者的瞭解和使用者行為的洞察,通過比如文案、微動效、轉化漏斗優化、資訊梳理、佈局設計等,也可以幫助業務在各階段直接提升對應的業務指標,甚至將體驗設計師熟悉的體驗地圖轉化繪製為使用者增長地圖,在使用者使用的全鏈路行為節點做設計所擅長的增長賦能。

5. 專案流程管理

互動需要更早的參與到需求中,在需求出現之前的互動參與能讓需求更加合理,而在互動稿畫完之後,也需要實時的去跟進UI、開發,有一些技術難題需要跟開發密切合作,開發說“”實現不了”是經常碰到的一句話,那是否是真的實現不了,可能跟不同的團隊、人、專案排期有關了,有時候並不是真的實現不了,或許只是開發不想做或者他之前沒做過,這個就需要PK了,當然有的真的很難實現或者價效比很低的設計,就需要對互動稿進行調整了。 除此之外,有的公司還要求互動有整體管理能力,這就另說了。

Part 4

沒有互動會帶來什麼?

產品團隊或許不都有互動崗位,但不可以沒有好的互動設計!

1. 短期內產品使用體驗很奇怪

很多人畫出來的原型稿甚至是互動稿都遇到過“用起來很奇怪”這個問題,其實是因為設計者對使用者心智、使用者行為、控制元件規範、產品正規化等的不熟悉造成的這個問題,一個“夾生”的東西即便邏輯合理也必然會帶來“夾生”的體驗。 此外,正規化和規範的使用只是執行時的一個選擇而已,對某規範的使用未必真正解決當前場景下的問題,互動設計師更多的是通過對業務的梳理、使用者的洞察來做選互動正規化和規範的篩選,找到合適的,才能價值最大化。

2. 長期下產品“難用”印象的形成

任何行業,任何產品,產品研發者可能都不是實際使用者,術業有專攻,對使用者的理解是一項長期經驗積累的過程,合乎邏輯的,不一定是易用的,易用的不一定是好用的。 筆者的經驗來看,使用者的使用行為既是“傻”的,也是孕育著無窮無盡智慧的,尤其是B端產品,使用者使用的方式可能超乎想象。 因此對使用者行為理解的深度決定了產品與使用者之間的默契度,圍繞一個痛點市場上總不至於只有一個產品,如何讓你的產品成為使用者真正的朋友,需要有專業的人來研究使用者行為,互動這個專業便也是因此而生的。

如今網際網路紅利愈發消失殆盡,或許由於資金原因互動崗位並沒有存在於所有公司或團隊,但互動設計的專業度一定永遠存在,崗位的橫向兼併融合並不能磨滅互動的專業度, 因為互動堅守的是使用者體驗的底線,讓產品變得或好用、或高效,最終驅動業可持續增長,便是這最大的價值!

文章推薦

-

《由一個文案引發的系統改造

《對設計師說:"設計是道證明題"

《以不變應萬變-互動規範的製作與思考

入門互動設計的4個步驟

《細說“十大可用性原則”

為了活動快速上線,互動設計師是如何“排雷”的?

...

可以關注公眾號檢視更多哦~

撰文 ✎ 陳悅

圖片 ✎ 原創/網路

未 經 允 許 請 勿 轉 載 到 其 他 公 眾 號 

在 首 頁 輸 入 關 鍵 詞 轉 載 獲 得 授 權