B端產品資訊設計的3個原則

▲點選 “

子牧UXD

” 關注,回覆 “

設計圈

” 加入我們

2021年 原創總第 30 篇

距離年度目標36篇    還有 6 篇

(全文2068字,預計閱讀時間:6分鐘)

最近在12306網站購票時,彈窗中展示了大段的文字資訊,我只是匆匆掃了兩眼就果斷關閉了,實在沒有耐心逐字讀完。特別是節日搶票的場景,使用者更不會有心情去看這些提示資訊。

B端產品資訊設計的3個原則

所以在做產品設計時,需要注重資訊的傳遞效率。B端產品通常用在PC端,螢幕顯示區域大,在做設計時會不自覺的新增較多的資訊,反而影響了使用者的使用體驗。今天我們就來討論下如何做好資訊傳遞?

我總結了以下3個原則:

B端產品資訊設計的3個原則

01

匹配使用者心智模型

心智模型指的是人們心中根深蒂固存在的,影響人們認識世界、解釋世界、面對世界以及如何採取行動的許多假設、陳見和印象。是一個決定使用者資訊獲取行為的內在的、可預測的認知模型。簡單來講就是人類基於經驗的總結,去認知世界。

《About Face4:互動設計精髓》中提出了3種模型,實現模型、表現模型、使用者的心智模型。好的產品的設計要儘可能匹配使用者的心智模型,越符合使用者心智模型的設計,產品越容易理解。

B端產品資訊設計的3個原則

B端產品頁面內容變化較少,更強調一致性。主要由表格、表單、按鈕等各種資訊元素構成。在長期的使用過程中,使用者對某些資訊元素已經形成了特定的心智模型。例如使用者看到輸入框,就知道需要填寫內容;看到步驟條引導,就知道多步操作;看到Radio Button,就知道是單選。

因此方案設計時,設計師的一個重要目標就是讓表現模型儘可能的匹配使用者心理模型,避免因為元件使用不當,造成使用者產生錯誤認知。

例如考慮到使用者的視覺動線,“新建”等主要、高頻按鈕通常放在左上角,方便使用者瀏覽和操作,而輔助功能按鈕會放置在右側,使用者也逐漸形成了這樣的心智模型。

如果主操作按鈕放置在右上角則違背了使用者的心智模型,使用者使用產品時,需要建立新的心智模型,改變已有的行為習慣。並且這種設計並不能帶來其他層面的體驗提升,個人認為有些得不償失。

B端產品資訊設計的3個原則

02

資訊的層次性

B端產品業務比較複雜,頁面內容也會較多,資訊的有效組織尤其重要。資訊設計不是簡單的內容堆砌,需要根據使用者場景和需求做出最佳化處理,構建有效的資訊的層級幫助使用者去理解業務內容。

資訊層級包括2個方面:

1、系統空間分層

在一個系統中存在著空間分層,當頁面較為複雜時,需要透過合理的內容分層,有序的展現內在邏輯關係。

B端核心互動就是“增、刪、改、查”,其中”查“就是資訊的檢索和瀏覽。所以頁面主要是由搜尋條件和表格構成的。而“增、改”等操作行為主要是在臨時的系統空間中完成,例如彈窗、側邊浮窗、跳轉頁面等形式。

不同的資訊在不同系統層級中相對獨立的展示出來,保證了資訊的層次感和秩序性。

B端產品資訊設計的3個原則

2、頁面資訊結構

複雜業務場景下,單個頁面會承載大量的資訊內容,需要透過合理有序地呈現給使用者。主要有2種方式進行資訊拆解。

B端產品資訊設計的3個原則

1)高效組織——卡片化設計

在B端產品中,為了保證功能的完整性,必須要一個頁面中展示給使用者。逐條平鋪,散點式的資訊展示會造成資訊密度過高,缺少層次性。

而卡片方式可以很好的聚類相似資訊,分割差異化資訊,有助於降低資訊的複雜性,幫助使用者快速定位資訊、瀏覽內容。

B端產品資訊設計的3個原則

2)化整為零——步驟化設計

面對複雜的資訊內容,使用者容易產生畏難情緒。將複雜內容分步拆解,把使用者的關注點從頁面內容轉移到步驟進度上,可以減少使用者的心理壓力。另外節點資訊頁也可以幫助使用者更好的理解業務流程。

B端產品資訊設計的3個原則

另外步驟化設計還可以將散點內容歸集到一個任務流程中,引導使用者快速完成工作任務。例如Win11系統安裝後的設定引導,可以方便使用者快速完成系統基本配置,避免使用者操作的行為成本。

B端產品資訊設計的3個原則

3、頁面元素設計

不同於C端產品,B端產品更強調效率。正如奧卡姆剃刀原則所說“如無必要,勿增實體”。頁面內容需要以簡潔為主,避免無關要素形成資訊干擾。而設計師更加感性,擔心設計過於平淡,會在介面中新增各種視覺元素,反而會增加使用者的認知成本。

03

資訊的可理解性

B端產品通常業務具有一定的專業性,使用者門檻較高。在複雜業務場景下,必須讓使用者能夠較為清晰的理解產品及功能,才能保證資訊的傳達效率。

1、幫助資訊

B端產品需要儘可能地降低使用者學習成本,但是本身業務層面的難度是無法避免的。因此需要為使用者提供及時有效的幫助資訊。

在阿里雲、騰訊雲介面中包含了大量的解釋說明、Tips等資訊,解決使用者在使用過程中的疑問,幫助使用者更好的理解業務內容,減少使用者的記憶量。

同時幫助資訊還需要具有拓展性,當提示資訊無法完全解決使用者疑問時,還需要能夠引導使用者,檢視完整的幫助文件,減少使用者翻查資料的成本。

B端產品資訊設計的3個原則

2、視覺化設計

資料視覺化設計在B端產品中應用較多,例如概覽頁面,透過圖形化的方式將資料的內在關係更直觀的表達出來。

在某些特定的場景下,內容頁面也可以透過視覺化展示幫助使用者理解資訊,例如常見的身份證圖片上傳等,很多使用者無法分清楚正面反面,藉助圖片視覺化提示,便於使用者更好的理解資訊。

B端產品資訊設計的3個原則

寫在最後

體驗設計行業需要創新,但是B端產品設計需要更加謹慎。尊重使用者的習慣,完整表達業務邏輯性、保證內容的可理解性,是設計師必須去關注的。

TAG: 使用者資訊頁面模型心智