B端系統(tǒng)交互設(shè)計(jì)的細(xì)節(jié)
本文主要介紹了一些筆者在日常B端系統(tǒng)設(shè)計(jì)工作中總結(jié)的交互設(shè)計(jì)要點(diǎn),多關(guān)注交互設(shè)計(jì)的細(xì)節(jié),可讓系統(tǒng)功能實(shí)現(xiàn)更大價(jià)值。
在B端系統(tǒng)的功能設(shè)計(jì)中,往往會(huì)把“業(yè)務(wù)場(chǎng)景覆蓋齊全”、“功能邏輯完善”、“投入產(chǎn)出成正比”放在優(yōu)先考慮梯隊(duì),而“交互設(shè)計(jì)”往往會(huì)因?yàn)橥度氤杀靖?、影響面較小等問(wèn)題被忽略。因?yàn)閷?duì)業(yè)務(wù)系統(tǒng)而言,“讓業(yè)務(wù)跑通”似乎理應(yīng)優(yōu)先于“讓業(yè)務(wù)跑得更快”。另一方面,有時(shí)候在技術(shù)設(shè)計(jì)上也會(huì)為了更好的系統(tǒng)性能,從而犧牲一些良好的交互體驗(yàn)。
但是,良好的交互設(shè)計(jì)不僅能提升用戶的使用體驗(yàn),還可以提高用戶的工作效率,甚至可以節(jié)約IT的運(yùn)維成本,同樣可帶來(lái)較高的價(jià)值。
再者,有許多交互設(shè)計(jì)的細(xì)節(jié)實(shí)則耗費(fèi)極少的開發(fā)成本即可實(shí)現(xiàn),所以在功能設(shè)計(jì)初期或優(yōu)化階段,我們都應(yīng)該多關(guān)注如何利用交互設(shè)計(jì)的細(xì)節(jié),讓系統(tǒng)功能實(shí)現(xiàn)更大價(jià)值。
下面,從三大方面闡述了一些B端系統(tǒng)交互設(shè)計(jì)的細(xì)節(jié)要點(diǎn):
一、更流暢的“輸入”體驗(yàn)
1. 智能默認(rèn)
為表單字段設(shè)置默認(rèn)值是減少用戶工作量的有效措施,我們可以想象當(dāng)用戶輸入填寫一張幾十個(gè)字段的表單,若每個(gè)字段都需要用戶逐個(gè)輸入,那將是一件很消耗耐心的事情。
設(shè)置默認(rèn)值的要點(diǎn)有以下兩點(diǎn):
- 支持靈活配置:因?yàn)椴煌臉I(yè)務(wù)可能會(huì)需要不同的默認(rèn)值,所以為了使該功能更具擴(kuò)展性,在設(shè)計(jì)之初要考慮將其設(shè)計(jì)為可配置模式
- 默認(rèn)值出現(xiàn)的觸發(fā)點(diǎn):顯示默認(rèn)值的時(shí)機(jī)一般可分為兩類,一是進(jìn)入界面即立刻展示;二是根據(jù)A帶出B,即填寫了某個(gè)字段,可以帶出其他字段的值
2. 業(yè)務(wù)規(guī)則卡控提醒
“卡控校驗(yàn)”雖說(shuō)會(huì)阻斷用戶的后續(xù)步驟,但卻是提前識(shí)別異常數(shù)據(jù)、規(guī)范用戶輸入的有效管理手段,也可以說(shuō)是保存單據(jù)時(shí)必不可少的一環(huán)。
但是我們可以思考:如何讓”卡控校驗(yàn)“發(fā)揮本職作用的同時(shí),又可以讓用戶感到”智能“而非”阻斷“呢?
下面列出了兩種卡控提醒的常見形式,可根據(jù)使用場(chǎng)景選擇合適的方式:
輸入前文本提醒:適用于文字較少的通用規(guī)則
輸入后彈窗確認(rèn):適用于用戶較難自行判斷的問(wèn)題,需要系統(tǒng)提供詳細(xì)提示信息以指引用戶修改
3. 智能推薦
智能推薦在C端產(chǎn)品的應(yīng)用十分廣泛,不過(guò)目前在B端系統(tǒng)的應(yīng)用相對(duì)較少,但該技術(shù)其實(shí)可以有效地節(jié)約用戶輸入/搜索時(shí)間。
例如,當(dāng)用戶在訂單系統(tǒng)錄入銷售產(chǎn)品時(shí),若將能將該用戶常選產(chǎn)品or近期銷量較高產(chǎn)品展示在前排,則能幫助用戶更快速完成這一步驟。
4. 自動(dòng)識(shí)別文本
用戶粘貼一段長(zhǎng)文本,系統(tǒng)自動(dòng)將其識(shí)別拆分填入對(duì)應(yīng)的字段,該場(chǎng)景在單據(jù)輸入環(huán)節(jié)十分常見,例如地址信息的識(shí)別、聯(lián)系人姓名電話的識(shí)別、產(chǎn)品信息的識(shí)別等。所以,對(duì)于一些組合信息需被拆分成多個(gè)格式化字段的表單,在需求調(diào)研時(shí),需充分了解用戶獲取信息來(lái)源的習(xí)慣,若用戶收到的信息常是一段文本并可通過(guò)一定規(guī)則實(shí)現(xiàn)自動(dòng)識(shí)別,則可考慮添加該功能。
5. 批量導(dǎo)入
對(duì)于一些以“行”為結(jié)構(gòu)的表單信息,常常需要支持“導(dǎo)入”功能??梢酝ㄟ^(guò)了解用戶獲取信息的來(lái)源,以及編輯信息的習(xí)慣,了解其是否需要該功能。
在訂單系統(tǒng)中,企業(yè)客戶常常通過(guò)EXCEL表格傳遞訂單的產(chǎn)品行信息,例如:產(chǎn)品型號(hào)、數(shù)量、價(jià)格、發(fā)運(yùn)日期等,所以對(duì)錄入訂單的用戶來(lái)說(shuō),支持直接導(dǎo)入EXCEL表格錄入單據(jù)信息無(wú)疑是十分提效的功能。
同時(shí),做導(dǎo)入功能有以下兩個(gè)值得注意的點(diǎn):
- 清晰展示導(dǎo)入結(jié)果:當(dāng)導(dǎo)入成功時(shí),可直接在輸入界面展示已導(dǎo)入的內(nèi)容,以便用戶直接確認(rèn)內(nèi)容準(zhǔn)確性以及操作后續(xù)步驟;當(dāng)導(dǎo)入失敗時(shí),需詳細(xì)指出哪個(gè)單元格的數(shù)據(jù)不符合哪一點(diǎn)要求,以便用戶能快速定位問(wèn)題修改數(shù)據(jù)。
- 導(dǎo)入性能:當(dāng)用戶使用導(dǎo)入功能時(shí),一般都是有較多數(shù)量的信息,所以導(dǎo)入的速度非常影響用戶的使用體驗(yàn)。
6. 批量填充
對(duì)于表單信息,還有一種提效的舉措,就是“批量填充”,也就是將某列的所有行一次性填充同樣的值。填充操作的交互上可以是右擊某個(gè)單元格,又或者是一鍵填充等等。而填充方式上也可以有多種選擇,例如:
- 全部填充:即該列的所有單元格,都填充該值
- 空值填充:即將該列所有為空的單元格,都填充該值
- 選擇值填充:將該列已被勾選的行,填充該值
二、有效減少運(yùn)維的“指引提示”
1. 消息提醒及消息盒子
對(duì)于用戶操作的消息提醒大致可以分為以下幾類:
第一類:用戶輸入內(nèi)容后,“消息提醒”立即固定展示在界面,直到用戶輸入正確的內(nèi)容才消失。
此類交互一般適用于文本較短且內(nèi)容比較固定的提示,例如:請(qǐng)輸入正確的電話格式,XX比例不能超過(guò)10%等等
第二類:用戶提交單據(jù)后,“消息提醒”必須等用戶確定后,才允許用戶進(jìn)行下一步操作。
此類交互一般適用于對(duì)后續(xù)流程影響較大的內(nèi)容且必須有用戶做決定
第三類:用戶提交單據(jù)后,“消息提醒”會(huì)閃現(xiàn)幾秒,接著會(huì)自動(dòng)消失。
此類交互一般適用于偶發(fā)性的系統(tǒng)報(bào)錯(cuò)
下面,我們來(lái)看看什么是“消息盒子”。對(duì)于上述第三類“消息提醒”,用戶在享受到無(wú)需手工關(guān)閉“消息提醒”的便利之余,可能會(huì)有一個(gè)困擾,那就是來(lái)不及看完提醒或復(fù)制提醒,“消息提醒”就自動(dòng)消失了。這時(shí)候如果有一個(gè)地方可以查看歷史的消息提醒那將更便于用戶追溯歷史提醒。所以,才有了下圖的“消息盒子”,它的主要作用就是讓用戶可以查看/復(fù)制歷史的消息提醒。
2. 界面操作指引
上述的“消息提醒”是針對(duì)用戶“輸入后”的提示,而“界面操作指引”則是針對(duì)用戶“輸入前”的提示。
界面操作指引對(duì)新用戶尤其有幫助,因?yàn)楫?dāng)用戶進(jìn)入到一個(gè)從未操作過(guò)且較為復(fù)雜的界面,會(huì)無(wú)從下手,不知道先從哪一步開始。
常見的界面操作指引一般有“靜態(tài)文本”和“動(dòng)態(tài)指引”:
- 靜態(tài)文本:例如在輸入框旁提示“請(qǐng)?zhí)顚慩XX”、在界面頂部或底部提示“請(qǐng)先xxx”
- 動(dòng)態(tài)指引:將需要填寫的信息逐步展示,當(dāng)用戶完成step1,再展示step2
3. 加載提示
當(dāng)界面數(shù)據(jù)量較大或者系統(tǒng)性能不穩(wěn)定時(shí),容易出現(xiàn)界面加載較慢的問(wèn)題,這時(shí)候如果在界面出現(xiàn)進(jìn)度條、loading圖標(biāo)等加載提示,可以避免用戶誤以為是功能失靈。
當(dāng)然,如果加載提示的方式可以更有趣一些,相信用戶的煩躁度也會(huì)降低一些。
三、提升工作效率的“界面展示”
1. 簡(jiǎn)化界面
B端系統(tǒng)的單據(jù)往往需要錄入數(shù)十個(gè)字段信息,所以容易導(dǎo)致界面冗余,影響界面美觀性的同時(shí)也會(huì)影響用戶的操作效率。下面列舉了一些常用的簡(jiǎn)化界面的方法:
伸縮展示:
為了讓用戶可在一個(gè)界面查看更多信息,同時(shí)不讓界面顯得擁擠,可以將部分信息“選擇性隱藏”,即觸發(fā)某個(gè)地方再展示這部分信息。
例如,下圖是訂單系統(tǒng)的訂單列表,我們將訂單信息區(qū)分為“訂單頭信息”和“訂單行明細(xì)信息”,由于明細(xì)信息較多,所以我們可默認(rèn)不展示該部分信息,當(dāng)雙擊訂單頭信息時(shí),再在下方展示出其對(duì)應(yīng)的明細(xì)信息。
智能顯示/隱藏:
首先,針對(duì)部分存在依賴關(guān)系的字段,可利用它們的綁定關(guān)系設(shè)計(jì)智能帶出或隱藏邏輯。例如若“遞送發(fā)票地址”為“線上“,那么“遞送發(fā)票地址(省市區(qū))”則無(wú)需填寫,但是“遞送發(fā)票郵箱”必須填寫。所以,我們可設(shè)計(jì)為當(dāng)填寫了“遞送發(fā)票地址”,再智能帶出其余需補(bǔ)充的字段。
其次,針對(duì)不同業(yè)務(wù)的需求,對(duì)部分字段做”顯示范圍“的限制。因?yàn)槎鄠€(gè)業(yè)務(wù)可能是共用一個(gè)表單,但是不同業(yè)務(wù)需要填寫的內(nèi)容會(huì)存在一些差異。假設(shè)A業(yè)務(wù),無(wú)需收集b字段信息,那么A業(yè)務(wù)填寫表單時(shí),界面可隱藏b字段。
3. 個(gè)性化支持
考慮到每個(gè)用戶的操作習(xí)慣不同,所以系統(tǒng)設(shè)計(jì)少不了個(gè)性化支持功能。
例如列表視圖,用戶常常會(huì)希望根據(jù)工作習(xí)慣自定義列表的字段排序,所以我們可以提供對(duì)應(yīng)的自定義視圖功能。
滿足用戶的個(gè)性化需求,便能助力用戶更高效地操作系統(tǒng)。
4. 快速定位
用戶想快速定位某個(gè)信息時(shí),必須用到“搜索”相關(guān)的功能,那么除了最常見的搜索欄,還有以下幾個(gè)能幫助用戶快速定位的實(shí)用功能:
- 標(biāo)簽:標(biāo)簽不但可以幫助用戶快速歸類信息,它還具有較高的“可視化”,能讓用戶更快捷識(shí)別出當(dāng)前信息的相關(guān)內(nèi)容。
- 快速定位列:該功能適用于表單設(shè)計(jì),例如某個(gè)表單有A-Z列,如果用戶想查看第一行第Z列的信息,一般就只能往后滑動(dòng),但是我們可以通過(guò)設(shè)計(jì)“快速定位列”功能,支持用戶輸入列名后,自動(dòng)定位到該列,便可幫助用戶節(jié)約查找時(shí)間。
- 默認(rèn)查詢:該功能指用戶進(jìn)入某個(gè)界面后,自動(dòng)根據(jù)默認(rèn)條件搜索出界面數(shù)據(jù)。
本文由 @天天向上的海豹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
平時(shí)產(chǎn)品設(shè)計(jì)中,大都會(huì)運(yùn)用到文中的規(guī)則,但是卻沒(méi)有形成文檔歸納總結(jié)出來(lái)。感謝你的分享。