我們常以“ 心有靈犀 ”來形容與合作伙伴的默契配合,若我們的產品能與用戶達到同樣的默契,將極大地提升用戶在任務旅程中的流暢體驗。

在B端體驗設計領域,我們深知用戶對我們產品的期待──快速完成任務、即用即走。
然而,隨著業務需求和產品功能的不斷擴展,流程復雜化、功能冗余、信息過載和引導不足等問題逐漸浮現,這不僅增加了新用戶的學習成本,也使得老用戶喪失了使用產品時的專注和效率。
并致力于通過設計手段減少用戶在使用產品時的學習成本和操作負擔,旨在打造一個流暢、愉悅的體驗環境,讓用戶每次使用都能保持輕松愉悅的工作狀態。
同時,我們也積極踐行集團倡導的 “ 簡單、順滑、激發 ” 產品設計理念,通過在交互設計、業務組件等多個層面進行來深入優化和改進,以達到產品與用戶之間的"心有靈犀",讓用戶在使用過程中更加的得心應手、更加快速高效的觸達并完成任務。
通常來說一個順滑的交互對產品的體驗提升的是非常大的,它允許用戶以直觀的方式理解產品的操作含義,在不依賴幫助文檔的情況下,也能輕松完成各項任務。
這種設計理念不僅提升了用戶體驗,也確保了產品的高效率和便捷性,能夠使用戶迅速投入并快速完成工作,實現了真正的“即用即走”。
相信很多產品設計人員都清楚選擇錄入的優勢遠大于手動錄入。
在此之前,我們的工時填報頁面,由于可輸入信息精確到小數點后兩位,所以我們常用的計步器、選擇器、滑動輸入等組件都無法在這里使用。對用戶而言,手動逐項錄入數據的操作成本非常高。
在業務改版時,我們的體驗設計師了解到舊版頁面信息錄入成本過高的問題,于是提出了數字鍵盤錄入數據的方案「用戶在原本手動錄入數據的基礎上,增加選擇錄入數據的能力,以此降低用戶錄入數據的操作負擔」。
-
作為數據錄入的組件,數字鍵盤適用于簡短且整數的特殊場景下,如:數字錄入、百分比錄入。備選的數據信息以宮格布局呈現,用戶可以快速點擊數字鍵盤中需要填入的數字。相比下拉菜單和上下箭頭數字輸入框相比,更直觀,易用性更強。
-
對于擅長鍵盤盲打的研發工程師類角色來說,仍然可以通過物理鍵盤錄入數據;而對于不太熟練操作鍵盤的大多數用戶來說,可以通過直觀的數字鍵盤點選錄入數據。數字鍵盤組件甚至還能幫助用戶自動計算已填數據,實現一鍵補全。
-
數字鍵盤作為一種兼具選擇錄入便捷性和手動輸入靈活性的數據錄入組件,為不同類型的用戶提供了高效、準確的數據錄入體驗,不僅提升了數據輸入的便捷性和準確性,而且通過適應不同用戶的操作習慣,增強了產品的普適性和用戶滿意度。
繼而我們也將數字鍵盤組件在其他使用場景進行了拓展,比如,其他場景下數字鍵盤上集成了手動錄入的輸入框,備選數據可以根據用戶設置的起止日期進行自動計算,不僅幫助用戶減輕了操作難度也極大節省了用戶的時間成本。
數字鍵盤經過不斷的拓展與優化,已經成為用戶在多種場景下進行數據錄入的利器。
在未來,我們將持續關注并探索數據錄入交互方式的優化與改進,致力于進一步優化信息錄入的體驗,如當下火爆的AI,來實現更加智能和自動化的輸入解決方案,從而最大程度上讓用戶與產品交互默契、事半功倍。
(2) 在關鍵節點設置任務提示卡,給予用戶即時指引
很多大型B端產品的詳情頁在成熟期后都會面臨信息內容多、分類復雜的問題,這導致用戶需要滾動多屏或者切換tab頁簽去查找信息,即便產品設計團隊已經花了不少心血將信息布局做了優化和重組,但也難以避免有些用戶查找關鍵信息費時費力,不清楚應該在頁面哪一塊進行哪些操作。
雖然IM、郵件等工具可以一定程度上解決信息的觸達,但用戶從其他平臺點擊網址鏈接跳轉到產品詳情頁后依然會面臨缺少明確的指引問題。
-
針對以上用戶使用中的痛點,我們在頁面中關鍵區域設置了一系列操作指引性的任務提示卡片,并在卡片上設置明確的引導文案及操作按鈕,以減少用戶因不熟悉產品功能或者頁面信息過多而找不到操作入口的問題;
引導用戶點擊“去完成”、“去操作”等操作按鈕直接跳轉至應該操作內容模塊或相應頁面去完成應該完成的操作,這樣就使得不同用戶在不同環節完成相應的任務,保證流程順暢的走下去。
-
任務提示卡作為一類高效的即時指引工具,已在多個用戶使用場景下發揮了關鍵作用,不僅幫助用戶提升了完成任務的效率,也在一定程度上緩解了用戶的焦慮。該組件的設計初衷是為了解決當用戶面對復雜或不熟悉的操作時,為了用戶提供即時的指引。
在不同系統平臺的適配過程中,我們特別注重交互模式的靈活性和適應性,以適應不同的適用場景。例如,我們將傳統的卡片視圖優化為列表視圖,并支持多個操作項,實現了用戶所見即所得的直觀體驗。
經過在多種場景下的實踐驗證,任務提示卡已成為緩解用戶焦慮的一種手段。我們也認識到,用戶焦慮直接影響到產品的可用性和用戶滿意度。
因此,我們會持續關注用戶焦慮產生的根源,不斷調整和優化我們的設計策略,有目的有效率的降低用戶焦慮水平。
提到「鏈路」,相信很設計師都能想到縮短流程、簡化操作步驟等手段。然而,隨著業務的復雜度提升,我們的很多使用流程變得越來越長,用戶僅僅查看或者編輯一個簡單的信息也需要打開新頁面,這無疑增加了用戶的操作成本。
在諸多項目實踐中,我們發現浮層卡片是一個非常靈活的組件,它可以在用戶需要時通過鼠標懸停即可展開,用戶可以不用跳轉或打開新頁面就可以在浮層卡片中完成一些關鍵信息的查看或者編輯。
這種交互模式不僅可以減少用戶的操作步驟,還減少了產品鏈路和開發成本,在提升體驗的同時也更好的效能業務。
在我們的平臺上,一些用戶雖然可以將自己經常使用的應用常駐到菜單欄上,但是受限于屏幕尺寸左側的菜單欄不能顯示太多常駐應用。
-
當用戶在切換一個常駐但因為屏幕尺寸而沒有展示在菜單欄上的應用時,需要先點擊更多【應用圖標】進入更多頁面。
-
再定位到需要切換的應用圖標上進行點擊才能完成整個【切換】的流程。
-
當我們洞察到用戶使用菜單欄的痛點后,在后續的迭代優化時。在更多應用的圖標上增加一個懸浮事件。
-
鼠標懸浮時,它就像一個傳送門一樣將用戶需要切換的應用呈現在浮層卡片上,用戶點擊所需的應用即可完成應用的切換。
【浮層卡片】作為一種靈活、高效的交互模式,在業務側得到能夠有效降低用戶重復操作的驗證后,我們把它拓展到了很多的相似場景里。
經過多場景的實踐,我們團隊已將浮層卡片精煉為一種有效縮短用戶使用流程的交互模式,顯著提升了用戶操作效率。也被我們拓展到更多場景,以實現在更廣泛的應用維度上為用戶提效。
二 創新業務組件設計,提升復雜場景下的數據可視化體驗
隨著業務的不斷下鉆,不免會遇到一些復雜的使用場景,基礎的交互和組件已不能有效的解決用戶在使用中的問題。
在一些既需要關注結構化的概覽數據又要方便查看詳細數據的場景中,以及在一些數據關聯、任務串聯等場景中,設計側通過可視化、結構化等設計手段探索出了一些新的業務組件,解決了數據概覽、數據關聯不清晰等問題,為用戶構建了直觀、易懂的使用體驗。
(1) 信息概覽與Tab標簽頁相遇,概覽&詳情均可兼得
在一些管理場景下會涉及到既需要查看各階段下不同狀態的概覽數據,又需要查看詳細數據的場景。
按照以往的交互,用戶可以用篩選器篩選出各階段下不同狀態數據再進行查看對比,雖然篩選器可以篩選出這些多階段、多狀態的數據,但存在著篩選步驟繁瑣、多階段&多狀態的數據呈現都是棘手問題。
我們最初使用了數據可視化的看板來呈現各階段下不同狀態的概覽信息,但這只解決了數據概覽的問題,用戶還是需要點擊“詳情”才能跳轉至相應的頁面。
-
體驗設計師在一些項目中嘗試了將數據可視化看板與Tab標簽頁的融合,這就形成了具有Tab切換功能的數據看板,用戶在查看概覽數據的同時也可以通過點擊切換查看各階段/狀態下的詳細數據。
-
在經過用戶反饋和不同業務場景下的適配后,我們又針對小屏增加了折疊功能、折疊后狀態數據隱藏、寬度不夠時狀態數據隱藏等優化。
-
以上數據看板與tab頁簽融合的方案,一方面解決了數據可視化的問題,另一方面也解決了切換查看詳情數據的繁瑣操作。在明確了以上組件的價值點后,將其進行延展并應用到了一些具有共性的使用場景中。
通過將數據結構化和tab標簽頁的結合的方式,巧妙的解決了用戶在進行數據概覽和查看詳細信息時可能遇到的繁瑣操作問題。
這種模式不僅讓頁面信息結構更加清晰,用戶無需跳轉,即可在當前頁面內,快速的查看概覽及詳情頁信息。
(2) 樹形連接線新范式,數據關系呈現簡單明了
針對CICD等技術類產品中的存在的諸多數據關聯、任務串聯等復雜數據關系的難點,設計側巧妙的使用樹形連接線的可視化手段解決數據關聯不清晰的問題,讓信息結構更易懂,方便用戶理解和操作。
在我們的版本管理模塊中,用戶在需求規劃階段需要將交付的需求和開發分支進行關聯,一個需求不僅可以與多個開發分支進行關聯、多個需求也可以與多個應用進行關聯。這里的不僅要解決復雜的關聯關系,還要解決需求與開發分支可增刪的操作難點。
樹形連接線作為一種解決數據可視化的手段有效解決了業務中的難點,同樣設計團隊也將其拓展到了更多適用場景,幫助用戶提升信息查看和操作效率。

通過以上創新應用,樹形連接線已成為提升數據可視化和用戶交互效率的重要設計元素。設計團隊將繼續探索其在不同業務場景下的應用潛力,以進一步優化用戶的信息讀取和決策過程。
以上兩組業務組件的設計思路充分體現了設計師對用戶訴求的深入洞察,并在設計上做出了突破。
設計師在對用戶場景深入分析后,巧妙地將現有組件的優勢與用戶場景相結合,創造出了一系列新的業務組件,這些業務組件不僅解決了一系列共性問題,也為未來的業務組件設計提供了新的可能性。
以上幾個是我們通過洞察用戶訴求,依靠設計手段改善用戶體驗的典型案例。
想要持續而又高效的提升產品的用戶體驗,僅憑零星的創意是不夠的,還需制定一套有效的設計策略,這套策略旨在培養設計團隊成員的創新意識和體驗思維能力,使設計團隊能夠持續產出高質量的用戶體驗解決方案。
設計師理解需求時需從全局視角審視業務需求、產品目標和用戶訴求,深入洞察產品體驗旅程中的所有關鍵觸點,避免陷入只見樹木不見森林的誤區。通過多元的視角輔助我們了解用戶行為背后的真實動機,從而提出更有效的解決方案。
(2) 鼓勵嘗試更多可能
在項目中,我們鼓勵設計師在滿足產品和業務需求的基礎上,打開思維的邊界去探索更多可能性。無論是對用戶的理解還是設計方向的探索,我們支持設計師不斷自問,給予他們嘗試更多可能性的資源支持,以促使設計師們產出無懈可擊的解決方案。
在B端產品中,用戶對比較大的變化會產生抵觸心理,從心理學上來講:大家更喜歡保持現有的、已熟悉的行為模式和習慣。如果出現一些改進比較大的優化方案上線后,用戶并不一定都是照單全收,極端情形下還會出現用戶要求代碼回滾的情況。
因此,我們在設計時不僅要解決業務需求,還要考慮用戶的學習成本和對變化的接受程度。必要時,需通過強化運營和落地最佳實踐,讓用戶意識到改變后的優勢和收益來提升心理上的接受度。
我們會定期復盤并將在項目實踐中已經被驗證的優秀、通用性高的方案(包括但不限于交互、視覺、業務組件等)定期匯總到設計組件庫以及模板庫中。通過評估這些方案的價值點和適用場景,設計師可以將這些經過驗證的方案作為備選,復用和延展到未來的項目中,為更多業務、更多產品賦能。
落地簡單、順滑、激發的產品設計理念,我們不求一蹴而就,而是有意識的去關注用戶的問題,持續不斷的優化和改進,用心對待每次微小的改進,積少成多,最終會實現產品與用戶之間的“心有靈犀”。
希望以上分享能給從事在B端體驗設計伙伴們帶來一些新思路、新思考。優化、改進的途徑有很多種,我們愿意將此次分享稱為拋磚引玉,更多還是需要我們深入到業務中,與產研同學協作一起產出更優秀的解決方案。