幫你提升表單使用效率的四個介面設計技巧

發表於2015-11-05

編者按:作為世界最著名的客戶關係管理軟體巨頭,Salesforce 在CRM軟體設計上有著深入的瞭解和過硬的設計和開發經驗。諸如CRM這類企業級的軟體中,表單類的介面非常多,這也促成了今天的這篇文章。一個優秀的表單到底要具備怎樣的素質?如何提高表單的使用者體驗和使用效率?看看Salesforce 的團隊是怎麼做的。

Salesforce 使用者每天都在和表單打交道,無論他是銷售人員、主管還是經理。所以,對於Salesforce而言,能否無縫地新增、編輯、刪除資訊就是確保企業生產力的核心因素和驅動力所在。這也是為什麼Salesforce的UX團隊將表單設計和編輯作為新產品 Lightning Experience的核心。

1、標籤&欄位的對齊

在Lightning 中,表單裡的標籤和它所對應的輸入欄位是一起左對齊的,並且標籤處於輸入框的上方。這種設計方式可以讓使用者操作更加省心高效,和之前的版本相比,使用者在瀏覽和操作的時候,只需要進行上下眼動就可以搞定一切,無需左右掃視。

一切都是左對齊的

雖然新的設計會在垂直方向上佔用更多的空間,但是標籤和欄位的匹配會讓整個介面在視覺上更加易用清晰。為了讓使用者在輸入的時候看得更清楚,成對的欄位和標籤會更加靠近,兩個不同的組之間的間隙會更大。無需左右掃視之後,使用者可以更加順暢地填寫表單。

在檢視模式之下,我們採用了相同的原理來設計,這樣使得資訊的層次結構更優秀,同時確保了整體的可讀性。

2、設定預設值

如果你是一名銷售人員,你的工作內容可能涉及到同潛在使用者進行溝通(也就是“Leads”)。如果你想在Salesforce中跟蹤這些潛在使用者的資訊,那麼通常你得先建立一個相應的檔案。如果要這麼做的話,可能會建立下面的這種Lead 表單:

在Salesforce中建立一個新的Lead 表單

看起來很簡單,是吧?但是如果我們仔細看看,就能逐漸找出這種表單在設計上的門道。第一個可編輯的欄位是“Lead 狀態”,它包含了以下選項:無聯絡、有聯絡、開放狀態、合格、不合格。

研究表明,設定一個預設值會引導許多人在多種不同的語境和環境下選擇預設選項。好了,回到最初的問題,如果你是一個銷售人員,在同新的潛在使用者的溝通的時候,第一次填寫這個表單的時候,你可能會更傾向於選擇“開放狀態”而非空著不填寫。

好了,在絕大多數的情況下,新建一個Lead 表單的時候銷售人員會選擇“開放狀態”。而在之後每次新建這類表單的時候,在這個欄位上耗費一兩秒來進行選擇。但是如果這種表單的數量非常多,比如有幾百份,那麼這個修改成本就非常之高昂了。這就是為何要為一些欄位設計預設值。

3、預填寫相關欄位

許多記錄的相關頁面會根據“釋出者”來執行一些預製的操作,比如建立新的任務和事件(我們在淘寶下單的時候,系統會幫你填寫預製的預設收件地址、收件人和聯絡電話,這種機制與之類似)。那麼我們看看下面的頁面:

釋出者登入之後觸發的操作

系統會自動填寫釋出者資訊

在理想的狀態下,使用者會認真填寫每一個欄位的詳細資訊,然而事實上使用者並沒有這麼做。

在這個案例中,這個Lead 表單是關於一個名叫Walter Junior的人,並且這是執行一次呼叫之後顯示的介面。這個使用者相關的資訊包含了四個欄位,而其中“姓名”和“專案”兩個欄位都被預先填寫,由於這是一個呼叫資訊的介面,所以專案中預設填寫的是“Call”,而相關使用者的名字也無需填寫,直接填寫進去了。

在理想的狀態下,使用者會“勤勉”地填寫所有欄位,並且詳細地描述每一個細節和相關的資訊。然而實際上,人是有惰性的,操作者總會詳盡辦法偷懶。每一個新增加的欄位,都是使用者完成表單的巨大屏障。為了解決這個問題,我們作出了一個妥協方案:系統預先填充一些相關的關鍵內容。當使用者填寫的表單涵蓋這些預製資訊的時候,系統會幫使用者填寫預製的資訊,這樣一來,這個有四個欄位的表單中,使用者需要填寫的僅僅只有2個欄位(請繼續腦補淘寶下單的時候,自動新增收件人資訊的機制)。

4、讓表單擁有更好的可訪問性

在設計新的Lightning Experience 的時候,我們對於它的可訪問性設計就有一個基本的構想。由於鍵盤輸入還是目前我們使用者的主要輸入方式(考慮到我們這是一個企業級軟體),所以一定要對鍵盤有良好的相容和適配,必須確保使用者僅用鍵盤就可以執行全部的操作。為此,我們為每個表單元件建立了特定的鍵盤互動模式,而且這些模式的構建是遵循W3C的規則來設計的,這也確保了這套互動的準確和廣泛的適配性。

這是一個日期選擇器元件,旁邊是W3C中推薦的設計模式

然而上述的全部規則並不是剛好合適的,真正的重度使用者傾向於更高頻度地使用鍵盤,而他們也會從真正高度一致的鍵盤輸入體驗中收益。如何評判整套鍵盤互動的易用和可靠性呢?一個真正為核心使用者設計的日期選擇器可以讓他們完成全部的日期選取、必要的編輯,而雙手無需離開鍵盤。

結語:更多的問題

對於Salesforce的UX團隊而言,Lightning Experience 是一個里程碑,不過要做的事情還有很多。比如我們需要提升輸入體驗,引入行內編輯功能。

不管你在團隊中處於什麼樣的地位,是設計介面還是編寫程式碼,無論是要設計核取方塊還是要製作更為複雜的CRM程式,表單的設計至關重要。在許多情形下,使用者需要同這些表單進行長時間、大範圍的互動和操作,任何效率上的提升都會帶來體驗的極大優化。請務必記住,精心設計的介面不止是要保證形式上的漂亮,方便和高效的設計也是造福使用者的重要手段。

相關文章