好的UI設計,能提升使用者體驗,也能為作品加分!

語言: CN / TW / HK

01、導語

體驗設計的本質是 服務設計 ,服務於使用者與企業。幾乎所有的產品與功能,都是通過 使用者場景業務發展 的結合而產生的。想要做好產品體驗設計,我們繞不開「使用者場景」。而使用者場景的核心是使用者即人性,一切產品功能的設計都是圍繞“人”展開。人性的呈現是多種多樣的,想要設計一個體驗良好的產品,設計者需要深刻洞察使用者不同層次、不同維度的需求,理解人群的生理、心理差異以及場景的特殊性,精準的提供設計服務以滿足使用者。

02、案例分享

1.  反悔機制設計-讓使用者有後悔的機會

反悔機制屬於 容錯設計 ,容錯性設計主要分3個階段: 引導 – 報錯 – 解決 。反悔設計對應容錯裡的“解決”。主要為了解決免使用者因錯誤操作造成的不良後果,讓使用者有彌補誤操作的機會。使用者在產品使用中體驗重新開始,這會增強使用者的 滿足感、掌控感

:chestnut: 叮咚買菜的「追加商品」:

大家應該都體會過買完菜之後才發現漏買了某件商品,遇到這種情況,要麼是整單取消再重新下單,要麼就放棄漏買的商品。「追加商品」功能,讓使用者對於自己的粗心,有了彌補的機會:只要在規定時間內追加漏買的商品即可。

2.   適老化設計不只放大字型-走心才能更貼心

大部分老年人都存在一定程度的 視覺、聽覺、行動 以及 認知 等多方面的障礙。在適老化設計中,放大字型是最基礎體驗。

2021年10月,國家工信部發布《移動網際網路應用(APP)適老化改造調研報告》顯示,調大字型的APP改造只是對老人需求的表層理解。想要真正幫助老年人使用APP需要從多方面改進: 資訊多感官觸達、降低資訊理解成本、提升產品易用性 等。

:chestnut:美團助老打車的語音提醒:

美團助老打車的頁面中,不只是對文字進行了放大處理,還增加了語音朗讀。通過視覺、聽覺多感官觸達幫助老年人更準確得接收資訊,完成產品功能使用。

3.  預判使用者所需 -功能前置

在產品的典型場景中,主流使用者的行為路徑是可預判的。一個好的預判設計可以給使用者在使用產品時起到引導作用、提升產品易用性。通過對場景中使用者行為的預判,將使用者高頻操作的功能前置,可以有效縮短使用者行為路徑,進而提升使用者體驗。

:chestnut:餓了麼首頁卡片:

當用戶有外賣訂單時,最高頻檢視的資訊應該就是外賣的配送情況。該場景中,首頁前置展示配送資訊,讓使用者 高效獲得即時資訊 ,避免焦慮,也省去前往訂單頁檢視配送狀態的繁瑣操作。

4.  視聽觸協同-對映現實場景

人是多感官生物,通過多個感官協作來接收外界資訊。自然的聲音、觸感可以反映出人與物體之間複雜的互動關係。通過 視聽觸的協同 ,能讓使用者更加真實的感受到產品對 物理世界的對映 。將產品功能設計成熟悉的物品,這樣做可以使使用者更容易接受、易於學習。當然也豐富了使用者與產品互動過程中的 趣味性

:chestnut:網易雲播客頻道:

在滑動切換播客頻道時,可以同時感受到3個緯度的反饋:顏色變化、震動觸感、播客音訊變化。三者協同作用,給使用者模擬出現實世界中調頻的體感,使得互動過程更加生動自然且有趣。

5.  場景化文案-傳遞關懷

當用戶的基本需求被滿足,情緒價值的提供就變得尤為重要。文字一直以來都是是我們傳遞資訊、 表達情感 的重要媒介。 結合產品功能與使用者所處場景 ,可以通過溫暖且有趣的文案向用戶表達情感、傳遞關懷。如果運用得當還能達到意想不到的效果。

:chestnut:騰訊視訊App:

在騰訊APP追劇時,零點過後時間顯示文案會從原來的「凌晨XX:XX」變為「夜深了XX:XX」。後者顯得更有溫度,讓使用者感受到關懷:夜深了,要早點休息。這一功能還引發了很多網友在微博截圖分享,達到了不錯傳播效果。

6.   巧用互動動效-讓使用者對功能更聚焦

巧妙運用動效可以更清晰地向用戶傳遞介面元素之間的 層級關係 。通過動效,設計師有了更多的設計空間去 簡化複雜功能 ,以更合理的方式展現功能。相較於靜態展示,動態互動使使用者能 更及時的感受到當前狀態變化 ,進一步加強使用者對操作行為的感知。同時通過手勢與產品進行動態交流,也能提升使用者在產品使用中的 參與感

:chestnut:美團商家列表:

美團商家列表中的推薦商家,會展示選單。使用者可以通過滑動互動快速檢視推薦菜。使用者在跟手操作的實時動效中,可以明顯感知當前模組內容的層級關係。實時的動效反饋也讓使用者對當前模組內容更聚焦。

7.  縮短互動路徑 -為使用者“減負”

我們處於資訊爆炸的時代,產品資訊越來越龐雜。不僅是文字、視覺資訊要進行降噪,使用者在產品中的 互動也需要“減負” 。結合不同的需求與場景,減少冗餘步驟,簡化操作流程,緩解使用者在產品使用過程中的操作負擔,進一步提升平臺轉化率和使用者體驗。

:chestnut:智行汽車票新增乘客:

在新使用者下單場景中,使用者點選“新增乘客“後,會在當前模組直接展示新增乘客的資訊填寫區域,以幫助使用者快速完成新增乘客,降低使用者下單過程中的操作成本,提升下單轉化率。

8.   國際化設計方案

越是成熟的產品,越需要設計師思考國際化設計和本地化設計差異點。由於宗教、語言、文化等差異,即使是使用同一款產品,本土使用者與海外使用者的使用體驗也存在著較大差異。其中,不同國家之間的語言差異就是每一個出海產品繞不開的問題之一。

:chestnut:微信公眾號全文翻譯:

當手機系統語言處於英文環境,閱讀中文公眾號時,在頁面頂部會提供“全文翻譯”的功能,讓海外使用者也能夠閱讀文章。不僅如此,在中文翻譯成英文過程中,文字的字號和間距同時進行了微調,進一步提升了閱讀舒適性。