提升ToB系統用戶體驗:頁面跳轉設計的藝術與實踐

0 評論 241 瀏覽 0 收藏 19 分鐘

在 ToB 系統中,跳轉場景的合理分類和設計對用戶體驗至關重要。不同的跳轉方式(如當前頁刷新或新開標簽頁)直接到影響用戶的操作效率和系統性能。本文將從分類、設計建議以及用戶體驗的角度,深入探討如何優化 B 端系統中的跳轉場景。

競品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

金蝶云·星辰聚焦小型企業在線經營和數字化管理,,提供財務云、稅務云、進銷存云、訂貨商城、費用報銷等SaaS服務,支持小型企業拓客開源、智能管理、實時決策,是一款適合小微型企業的云端財務進銷存管理軟件

1.1.1. 工作臺

1.1.2. 目錄頁

1.1.3. 列表頁

1.1.4. 新建頁

1.1.5. 詳情頁

1.1.6. 待辦待閱

1.1.7. 幫助系統

1.1.8. 系統后臺配置

1.2. 金蝶·云星空截圖

金蝶云星空是金蝶面向事業部制、多地點、多工廠等運營協同與管控型企業及集團公司,提供的一個通用ERP服務平臺

1.2.1. 工作臺

1.2.2. 列表頁

1.2.3. 新建頁

1.2.4. 詳情頁

1.2.5. 待辦帶閱

二、致遠

致遠的智能表單管理系統,因權限不夠,只有部分頁面;但依然可以看到其結構,也是系統內 Tab 頁簽跳轉

2.1. 工作臺

2.2. 后臺配置

三、MK·PaaS

四、泛微

4.1. 項目管理

4.1.1. 列表頁

4.1.2. 新建頁

4.1.3. 詳情頁

4.1.4. 待辦待閱

4.1.5. 幫助系統

4.1.6. 系統后臺配置

直接菜單切換,無跳轉(前臺應用配置,不需要跳轉頁面)

從用戶端進入后臺配置,新開頁簽

4.2. 公文管理

4.2.1. 列表頁

4.2.2. 新建頁

4.2.3. 詳情頁

五、TDesign騰訊企業設計體系

騰訊的企業設計體系中,也包含了這一層設計規則(功能)

六、總結

1. 頁面跳轉的場景

在 ToB 系統中,在不同場景下頁面的跳轉對于用戶體驗至關重要。不同的跳轉方式,直接影響到用戶的操作效率和系統性能。

從用戶操作角度,可以將頁面的跳轉分為三類「操作流程類」「信息查詢」「系統配置類」(端到端如 PC 端到移動端,不在此次討論范圍)

1.1 操作流程跳轉

用戶在系統中進行的具體操作,用戶執行某個任務或業務流程,如數據的創建、編輯、審批等。通常目標是推進某個操作流程的完成。

場景:如新建或編輯某數據,收到待辦審批某流程等

1.2 信息查詢與查看類跳轉

當用戶需要查詢、查看或分析系統內的數據和信息時,需要從一個頁面跳轉到另一個頁面,以獲取更多的詳細信息或進行更深入的分析。

場景:如打開某數據查看詳情,從工作臺查看詳細報表進行數據分析,查看操作歷史或日志記錄等

1.3 系統配置與管理跳轉

涉及系統設置、用戶權限管理、插件配置等功能的跳轉,通常由管理員或有權限的用戶執行,用于配置和管理系統的運行環境和用戶權限。如管理員需要從用戶管理頁面跳轉到權限設置頁面

場景:如打開后臺系統,配置系統參數或用戶權限

注:第三方系統跳轉、子域名跳轉屬于功能類特殊場景,已涵蓋在下方業務場景中

以上三種分類涵蓋了基本的頁面跳轉場景,但不夠具體,現按照以下具體場景,對競品的跳轉方式展開對比分析(注:彈窗屬于模態,不在此次范圍之內)

2. 頁面跳轉方式對比

跳轉方式名稱太長,簡稱為:

  1. 新開 Tab:新開瀏覽器 Tab 頁簽
  2. 系統 Tab:系統內置 Tab 頁簽
  3. 菜單跳轉:以菜單形式進行切換,如左側導航
  4. 當前頁刷新:在當前頁面,直接刷新內容

致遠的系統沒有體驗到完整的,只體驗到部分「智能表單管理系統」

3. 頁面跳轉對比總結

1)在同一個平臺或系統內的信息,沒有其他特殊情況時,最好不要新開瀏覽器 Tab 頁簽,這點泛微和金蝶保持了統一,都沒有新開瀏覽器 Tab 頁簽;

  • 泛微使用「抽屜」的形式;
  • 金蝶使用「系統內 Tab 頁簽」的形式;
  • 而 MK 以「****」為主,保持了自己的風格;

2)跳轉后臺系統、或其他子系統、子域名或第三方平臺時,這時可以新開「瀏覽器 Tab 頁簽」,展示其獨立完整信息結構

如幫助系統,有些幫助以文檔、視頻或論壇的形式存在,使用獨立頁簽可以很好的呈現其完整性;這點「MK」「金蝶」「泛微」都做到了統一;

4. 關于系統內/外跳轉的場景分析

4.1 適合系統外跳轉的場景

4.1.1. 跨系統跳轉

  • 跳轉目的與用戶意圖:用戶可能在不同業務系統之間切換,完成更復雜的業務操作。
  • 用戶角色與權限:跨系統的跳轉通常涉及不同權限的管理,需要保證用戶的訪問控制。
  • 適合新開標簽頁:跨系統跳轉時,為了避免用戶在回到原系統時迷失上下文,新開標簽頁是較為合理的選擇。

4.1.2. 二級域名跳轉

  • 跳轉目的與用戶意圖:用戶通常在同一組織的不同子系統之間切換,處理不同的業務需求。
  • 用戶角色與權限:每個二級域名子系統可能對應不同的用戶角色和權限管理,需要確保用戶身份和數據的一致性。
  • 適合新開標簽頁:二級域名跳轉建議新開標簽頁,以便用戶在處理完相關業務后能快速回到原系統。

4.1.3. 第三方集成跳轉

  • 跳轉目的與用戶意圖:用戶在系統中使用集成的第三方服務,通常涉及外部供應商或合作伙伴的系統。
  • 用戶角色與權限:第三方系統的操作可能需要特定的用戶角色或權限,確保這些權限在跳轉時無縫傳遞。
  • 適合新開標簽頁:跳轉到第三方系統時,新開標簽頁能夠使用戶在完成操作后輕松返回原系統。

4.2 適合系統內跳轉的場景

4.2.1. 頁面內跳轉

  • 跳轉目的與用戶意圖:通常用于細分任務,例如從概覽到詳細設置。用戶期望在同一頁面內快速找到所需內容。
  • 用戶角色與權限:所有用戶角色都適用,尤其是在配置或設置頁面中。
  • 適合當前頁系統內Tab頁簽:頁面內的內容切換適合使用當前頁來保持用戶的注意力。

4.2.2. 模塊間跳轉

  • 跳轉目的與用戶意圖:用于在不同功能模塊之間切換,用戶期望在不同模塊中完成不同的業務操作。
  • 用戶角色與權限:不同角色的用戶可能在不同模塊中有不同的權限。例如,管理員有訪問所有模塊的權限,而普通用戶可能僅限于特定模塊。
  • 適合當前系統內Tab頁簽:在模塊間跳轉時保持用戶上下文的一致性,有助于用戶在完成一個操作后快速進入下一個操作。

4.2.3. 流程間跳轉

  • 跳轉目的與用戶意圖:通常用于多步驟的業務流程,用戶期望順利完成每一步操作。
  • 用戶角色與權限:不同角色可能負責流程中的不同步驟,確保每個角色在合適的時機進入流程的對應步驟。
  • 適合當前頁系統內Tab頁簽:保持流程的連續性和用戶的操作連貫性。

1.2.4. 系統設置與管理跳轉

  • 跳轉目的與用戶意圖:用戶通常在此場景中調整系統的配置或管理系統用戶。
  • 用戶角色與權限:主要適用于管理員角色,需要明確區分不同角色的管理權限。
  • 適合當前頁系統內Tab頁簽:設置和管理類操作通常需要用戶集中注意力,在當前頁有助于用戶保持在特定任務上的聚焦。

5. 跳轉方式的優缺點

5.1 新開Tab頁簽

傳統的網頁瀏覽都是新開瀏覽器標簽頁的形式,實現內容的并行獨立展示,從而避免跳轉和返回的問題

優點:實現內容的并行、且獨立展示,從而避免跳轉和返回的問題;可以保證用戶并行操作,方便信息間的對比、參考;適合獨立子系統,完整呈現系統內容

缺點:打開頁簽太多時會很耗性能,造成卡頓;也會造成用戶迷路,找不到之前的內容

5.2 系統內 Tab 頁簽

在當前頁內,新增一行 tab,來承載內容

優點:系統內 Tab 頁,頁面是相互獨立的、互不干涉的,多窗口自由切換,并且信息保留在系統內部,用戶的視覺動線相對集中,交互操作成本更低

缺點:標簽頁欄屬于框架層級,會影響原有的頁面結構;且始終都會占據頁面位置,會進一步壓縮屏幕縱向有效空間;在整體的統一性上,也需要綜合考慮使用

5.3. 抽屜

一般從右側劃出抽屜浮層,來承載內容

優點:在當前頁面出現的抽屜浮層,可以避免頁面頻繁跳轉、以及頻繁返回帶來的頁面刷新導致用戶效率下降的問題

缺點:會遮擋一部分上文內容,無法會看;且抽屜寬度有限,無法承載更多內容信息(不過有些抽屜支持放大/縮小 可以避免這個問題)

最后補兩句

ToB 的頁面跳轉方式,應遵循完善的業務規則和使用邏輯,不能一刀切選擇一種方式(如一直新開瀏覽器 Tab 頁簽)。最好允許用戶自定義跳轉方式,如在系統設置中提供選項,讓用戶選擇某些操作是當前頁刷新還是新開標簽頁。這有助于滿足不同用戶的偏好,提高系統的靈活性和用戶滿意度。

在需要新開多個標簽頁的場景中,需要考慮瀏覽器的性能表現和用戶設備的資源消耗。可以通過優化加載速度、減少頁面資源占用等方式來提升用戶體驗。

清晰的跳轉反饋、完善的路徑和返回機制

而無論是當前頁刷新還是新開Tab頁簽、系統內 Tab 頁簽,系統都應在跳轉后給予用戶明確的反饋。比如加載進度條、操作成功提示等,讓用戶始終知道自己的操作狀態。在復雜的跳轉路徑中,設計面包屑導航、返回按鈕或快捷鍵,有助于用戶快速找到跳轉路徑并返回到之前的操作頁面,避免跳轉迷失。

通過完善的業務規則和使用邏輯,靈活地結合用戶行為分析和個性化設置,有助于提升系統的整體用戶體驗。在實際應用中,還需時刻關注系統性能,確保在多標簽頁和多終端跳轉的情況下,依然能保持流暢的用戶體驗。

作者:宇相 微信公眾號:設計謎

本文由 @宇相 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!