結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

2 評論 5588 瀏覽 23 收藏 11 分鐘

編輯導語:交互設計需要滿足不同場景與不同用戶的需求,那么交互設計的價值是怎樣的呢?本文作者結合實際案例,分享了交互設計在不同場景下的應用與價值所在,感興趣的一起來看看吧。

交互設計,真的只是畫原型嗎?

當然不是,單從【體驗】這個維度來看,交互的任務之一就是讓用戶快速、順暢地完成任務,以保障用戶體驗和產品口碑不會收到影響。

這里面就包括了【觸發邏輯的分析、用戶行為的預判、使用場景的分析】等等。

下面作者就結合個人感受+實際案例,來表達對交互在日常設計中的發力點或存在價值看。

一、思考不同場景下的用戶需要

原型里的某個頁面、組件并不是畫好了就萬事大吉、一成不變的,交互側需要分析:在不同場景下用戶是否存在不同的訴求?

如順豐速運,在工作日里是默認【派送到豐巢柜】,而到了休息日則自動勾選了【上門派件】。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

正是充分考慮到了【工作日與休息日】這2個不同的場景與用戶需要:

  1. 工作日:上班不在家,下班可以順路去站點拿快遞;
  2. 休息日:有時間在家里等、不想/懶得出門去拿快遞。

通過分析和預判用戶的行為,可以有效地減少操作成本、保障產品的使用體驗。

二、盡量別讓用戶離開當前頁面

我們在給用戶設計一個新的、分支流程時,往往都會選擇【新跳一個頁面】的方式去處理。

而對于交互需要注意的是:

但并不是所有的新的、分支流程,都需要脫離掉當前頁面。有些場景下,新跳頁面容易斷掉用戶的當前任務,再切回來時的操作成本、鏈路會特別復雜。

比如你在刷朋友圈,此時收到一條消息,此時退出朋友圈回去看消息后,再切回來繼續看朋友圈,這個鏈路得多長。

而對比QQ空間你就知道多香了:

查看QQ動態時有新的消息通知,可以用小窗口的方式進行快速查看與回復,用戶處理完可以繼續瀏覽動態,當前流程不受任何影響。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

再如Edge瀏覽器,選中某段信息后可以在【右側邊欄】中加載結果。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

這樣既不用覆蓋當前頁面 來加載新的結果,又不用新建一個窗口去處理(用戶還得切回來),用戶可以邊看邊搜。

三、別忘了特殊人群的訴求

和上面的要點有點類似,同樣是需要分析產品里不同的【用戶群】,是否需要兼容不同的交互方式。

比如左撇子用戶,【右邊更容易操作的概念】就不能用在他們身上了。對于那些重要、高頻的功能就需要思考:如何更好兼容【左/右手】的操作習慣。

比如UC瀏覽器的【刷新】按鈕,默認是放在右邊(順應最主流的操作習慣),也可以長按它拖拽到左邊的位置,這樣都能兼顧到不同用戶的使用習慣。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

當然以上的預判、分析不一定都在畫原型/出方案的時候能想到的,還得借助【用戶反饋、訪談、后臺數據等】等逐步發現和完善用戶訴求,這也是交互和產品的工作之一。

四、用更直接的方式告知用戶

當采用了某種方式、組件來設計方案后,交互都可以靜下來心想一想:是否能更簡單、明顯一點?

畢竟設計者的理想視角,和使用者的使用視角,有時真的不是同一回事。不同的用戶因為【年齡、經歷、學歷、身體條件】等原因,對同一個事物有著不同的理解。

比如上滑引導,傳統的做法可能就是蓋一個蒙層引導,跟你說上下滑動可切換視頻。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

而為了更好地幫助用戶理解、減少認知漏斗,交互側可以考慮直接展示上滑的動作,讓用戶明顯看到下面還有視頻。

比如抖音的新手引導:

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

支付寶的這個例子就更加明顯了,直接將我們習慣表達的術語,直接轉換成最易懂的語言。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

五、盡量擺脫組件的束縛

大部分設計者在設計某個頁面或功能時,都會優先調取團隊已有的設計組件,在大廠里更看重這點。

畢竟能用已有組件解決的,就絕不新增一個樣式和代碼,對整個產品的調性、交互方式、用戶心智等都能保持統一。

實際上是:對設計和開發來說能減少很多工作量。

比如在【日期選擇】上,我們的常規思路往往會選擇系統組件,讓用戶在里面選擇某一年的1-12個月份。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

有條件的話交互也可以考慮:是否有更合適的表達形式?不一定要依靠組件的限制。

比如QQ團隊在這點上就有新的突破:用側邊欄的方式里展示日期。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

這樣做的處理有以下優勢:

  1. 首屏內容可以展示更多月份,選擇效率更快;
  2. 用戶可以一邊選擇月份,一邊看QQ動態;
  3. 更方便快速退出日期;
  4. 維持用戶已有的心智。

每個人使用APP都存在著一定的【固有理解】,比如下拉=刷新。

在設計交互方案時同樣需要注意這點,尤其是那些容易被我們忽略的地方。

舉個栗子:iOS在日歷里添加日程時,原本設置了「30分鐘」的日程時間。

而當你在【開始時間】里修改了日期或時間點后,【結束日期】會自動設置「30分鐘」后的時間點。

依然保持著原有「只有30分鐘」的心智模型。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

當然如果存在【信息變化】需要讓用戶知道的話,則需要進行一定程度的提示設計了。(推薦一個產品與設計師的學習網站:有蛋案例 youdananli.com 近千個互聯網創意案例、產品/設計知識模型)

六、用易懂的方式處理復雜事物

交互設計的工作核心,就在于將復雜的產品/用戶需求,轉換成易懂、易操作的處理方式。特別是那些對用戶來說【不知道怎么操作的】。

比如一些疊字(如“淼”字),用戶不知道怎么打出時。除了進行手寫外,搜狗輸入法中還提供了一個【打出N個組成詞的拼音】的處理方法。

如輸入3個【水】的拼音,就能得出【淼】字。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

對于習慣打拼音的用戶,這無疑也是一個不錯的處理方法。

再比如:想打出一些不懂的生僻字(如“卞”字),個人所得稅APP里就提供一個【選擇筆畫數】的方式來幫助用戶尋找。

結合案例 | 思考交互設計的價值!別再說我們只會畫原型了!

#專欄作家#

和出此嚴,微信公眾號:和出此嚴,人人都是產品經理專欄作家。一枚在鵝廠成長中的“90后老干部”,主產各種接地氣的交互/產品干貨。以做產品的方式,寫好每一篇文章。

本文原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺有蛋案例里面的左側邊欄展開和收起的圖標有點怪,感覺和大多數是反著來的

    來自上海 回復
  2. 推薦一個我做的學習網站:
    有蛋案例 youdananli.com
    有多個大廠、各個行業里有意思的設計案例,還有近百條產品/設計知識方法、理論模型
    感興趣的可以看看

    來自廣東 回復