B端產品設計如何做到「情懷」與「效率」兼備?
B端設計過程中,除了保證效率的工作,我們還可以做一些有情懷的功能。本文介紹了一個有關電子工卡的B端設計,不但解決了B端設計當中需要解決的效率問題,還在設計中加入了許多溫馨的細節,推薦關注B端設計的小伙伴閱讀。
對于B端產品,我們難免有一些刻板印象:千篇一律、重效率輕創意……的確,由于產品的復雜性和工具屬性,新功能的加入很容易導致牽一發而動全身,因此B端產品的改造通常要保持克制。
作為B端設計師,我們也一直想嘗試做一點有情懷的功能,來打破人們對于辦公產品的刻板印象。
一、設計理念
「美事」作為58內部協作辦公平臺,其手機端覆蓋員工辦公的各個場景,是日常辦公使用最高頻的APP,也是做情懷設計的最佳試驗田。與此同時,我們也非常理性地對待這次創新,兼顧「低成本」和「高感知」。最終,我們把目標鎖定在功能相對獨立,同時全方位覆蓋員工打卡、進出閘機、支付、打印等高頻場景的「電子工卡」功能上。
如何做才能算有情懷呢?我們首先想到的方向就是「懷舊」。這從社會心理學上來講,也有一個專門的概念,叫做:熟悉定律,即:熟悉的事物或人,會給人更多的好感。實體工卡,是打工人非常熟悉的辦公用品,尤其是大廠員工,即使是出了公司,也喜歡把工卡戴在脖子上。對他們而言,工卡不只是工具,還是個人身份和榮譽的載體。
近幾年來,很多公司在APP上增加了電子工卡的功能,用來替代實體工卡。這確實給員工帶來了便利,而在儀式感以及精神愉悅的層面上,電子工卡做得還遠遠不夠,如圖:
我們接下來要做的,就是填補電子工卡在情懷上的缺失。從「形似」和「神似」兩個維度,去還原實體工卡的精髓。
二、設計執行
1. 設計執行-「形似」
這個部分的設計要點,是建立電子工卡和實體工卡的認知關聯。
在外觀層面,我們找到了市面上各種各樣的實體工卡。同時挖掘到適合線上化的共性,包括:
- 適配性:豎版適配手機豎屏
- 承載性:雙面展示,兼顧信息展示與功能入口
- 易搭配/擴展性:素色卡套更易搭配復雜的卡片內容
如圖所示,我們從以下四個方面對細節進行了塑造:
- 質感:卡的外框呈現柔和硅膠感,還原親膚觸感;卡繩則與深度還原實體工卡。
- 細節:外框和卡繩連接處采用了旋扣式設計,可以保證卡片在翻轉的時候,卡繩不會扭作一團;卡套厚度,也盡可能與卡扣、卡片保持協調。
- 光感:統一的光源與細節呼應,更加逼真自然。
- 內容:正面(默認面)順應舊版電子工卡的認知和使用習慣,整合掃碼相關功能;背面則更加貼合實體工卡,展示個人信息。
同時,我們想讓它不僅看起來像,動起來也要像。于是在動效層面,我們做了以下嘗試:
遵循「熟悉自然」的原則,我們在工卡的上呼應了我們在現實中“甩”和 “翻轉”的動作,設計了入場和切換的動效。
很快,我們發現了直接照搬現實動效的問題。對角線甩入的入場動效,很難控制在100-500ms這個感知舒適區間,而加長時間會讓用戶失去耐心;同時,斜向角度的交互在操作時,極易與直向角度的操作沖突,造成誤操作。
于是,我們又引入了「簡單輕盈」的設計原則,出入場擯棄斜向的方案,改用上下直向進出的方式,不僅動效更簡單,交互手勢也更加清晰。增加彈性細節,細膩又真實。在關閉/退出工卡的操作上,既能通過與現實相呼應的下拉回彈,也可以通過點擊空白區域快捷關閉,以滿足不同的認知和使用偏好。
2. 設計執行-「神似」
因為有「形似」作為基礎,并且此前也預留了適配不同場景的空間,于是可以在情感層面呼應員工的心理訴求。對應司慶日、節日等重要的日子,以及表現優秀及貢獻突出的員工,我們都打造了專屬皮膚。
此外,我們將工卡應用的場景,如:上下班打卡、失敗打卡、打印等進行了全方位的梳理,并對應性地在掃碼反饋上進行了設計,希望借此給打工人的工作日常增添一些溫度和能量。
3. 設計執行-「辦公提效」
雖然改造的初衷是「情懷」,但效率才是辦公產品的內核。電子工卡,又能如何賦能辦公提效呢?我們分成基礎和擴展兩個層面,逐漸展開設計。
基礎層面,基于舊版電子工卡進行操作提效和路徑提效。以前刷完電子工卡,會進入左邊的反饋頁面,在操作上極為不便。于是我們把頁面改成了更加輕量化的彈層,想關閉的話,向下輕輕一劃,或是點擊空白區域即可,提高操作效率。
同時,美事歷經多個版本,存在入口過深和重復的問題,這在無形中增加了員工的認知和記憶成本。新版工卡將與掃碼這一場景下的高頻功能進行整合,在路徑上進一步提效。
擴展層面,我們充分發揮美事的辦公中臺能力,探索電子工卡的延展能力。在日常辦公場景中,我們經常沖進辦公樓急著開一個會,卻越急越找不到會議信息,或是待辦事項稍不留神就逾期的情況。將掃碼反饋整合臨期日程和待辦事項,能在很大程度上解決上述燃眉之急,而隨時隨地提醒,能有效降低我們的查找和記憶成本。
三、總結
這是一次「始于情懷,終于效率」的B端設計探索:運用熟悉定律進行情感化設計,提升美事這一辦公產品的感性值;而在場景、操作和路徑層面全方位提升辦公效率,同步拉高理性值。在B端產品設計中,感性和理性并不是完全對立的,二者可以互相融合與促進,讓體驗更加美好。
作者:58UXD
來源公眾號:58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗設計中心。
本文由人人都是產品經理合作媒體 @58UXD 授權發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
借鑒。學習。進步。
這頁面和如流一毛一樣,誰抄誰的
?求鏈接
還沒看正文,被標題吸引了。
試著講一下自己做B端產品的感受,我覺得效率優先吧,保證效率的基礎上還要考慮團隊資源,然后才能實現你的情懷。