摘要:一個好的用戶界面設計應當是以用戶為中心,使產(chǎn)品達到簡單使用和愉悅使用的設計。人們的心智模型往往比現(xiàn)實簡單,這一點很容易理解,用戶總希望用了我們的軟件以后,業(yè)務流程能更簡單、更直觀、更高效,這當然也是我們所希望達到的目標。
在如今的IT時段,信息極其豐富,各種軟件令人眼花繚亂,隨之而來的是人—機之間的界面交互設計成為任何產(chǎn)品服務的重要方面。
大家通常的理解是,軟件是由程序員或者設計者創(chuàng)造的,軟件的外在表現(xiàn)或者說人機界面隱藏了軟件真正運行的細節(jié),二者可以迥然不同。我們把前者稱為軟件的表現(xiàn)模型,后者稱為軟件的實現(xiàn)模型,而把用戶預期的軟件使用方式稱為用戶心智模型。例如,操作系統(tǒng)能使網(wǎng)絡文件服務器看起來與本地文件一樣,但這種模型并沒有展現(xiàn)出實際的物理磁盤可能遠在千里之外的事實。經(jīng)典的人機交互理論認為,軟件的表現(xiàn)模型(UI)越接近于用戶的心智模型,用戶就越感覺到軟件容易理解、上手、使用,而如果軟件的表現(xiàn)模型遠離用戶心智模型、偏向于實現(xiàn)模型,則會嚴重影響用戶學習、上手和使用該軟件的能力。這一過程可以表示為如圖1。
一個好的用戶界面設計應當是以用戶為中心,使產(chǎn)品達到簡單使用和愉悅使用的設計。人們的心智模型往往比現(xiàn)實簡單,這一點很容易理解,用戶總希望用了我們的軟件以后,業(yè)務流程能更簡單、更直觀、更高效,這當然也是我們所希望達到的目標。因此,達成人機交互至高境界的一項重要任務就是深入研究用戶,包括用戶的知識水平、角色、權限關系、工作流程、異常處理、與外部環(huán)境的關系等,進行行業(yè)知識調查、用戶訪談、場景預演等,如有隱性需求、隱含制約(比如潛規(guī)則、不宜公開的數(shù)據(jù)),還需深入基層進一步調研,總之,需要掌握軟件使用者的方方面面,因為他們都關系到開發(fā)出來的軟件能否順利實施和深入人心,能否皆大歡喜。調研最后得出詳盡的需求調研報告、用例圖、業(yè)務流程圖、數(shù)據(jù)流圖、數(shù)據(jù)字典等書面文檔。
筆者在5年多的安防行業(yè)UI設計經(jīng)歷中,遇到過不少內(nèi)容簡潔、操作簡便的界面,也不乏外觀酷炫但操作繁雜的界面,這些設計都會在最終用戶那里得到不同的反饋。關于“交互設計”的書籍、雜志很多、內(nèi)容涵蓋也很廣,不分層次也不知道重點,??吹醚刍潄y。界面問題大部分都一眼能看出來并糾正掉,在此,筆者結合所在單位的界面類開發(fā)實踐總結出,最常被開發(fā)人員忽略、習以為常從而被用戶批評、投訴的問題主要集中于以下幾點。
功能的鏈接、跳轉與局部重復
當幾個功能模塊存在功能的交叉、調用、鏈接等關系時,操作復雜程度和出現(xiàn)理解錯誤的概率將成幾何級增加。例如,告警聯(lián)動的設置,如果按照聯(lián)動類型來分組,跟以設備列表為基礎設計出來的頁面操作方式就完全不同(圖2)。
然而兩種入口得到的頁面具有重疊設置,用戶是否知道隱藏的功能重疊?如果不能通過簡單聯(lián)想知道這一點,勢必產(chǎn)生疑惑,最后造成理解困難、操作失誤、反饋、投訴。這個就是單一入口的原則。提倡獨立頁面式的設置入口,盡量不跟其他功能產(chǎn)生交叉。
當需要從其他頁面入口操作這一功能時,最好的情況是改造后者,讓它可以遠程打開、跳轉并且定位到/選中所需的執(zhí)行位置,總之,給用戶的感覺一定是在同一個頁面操作(見圖3)。
耗時操作的處理
用戶在等待結果輸出的過程中隨意操作,導致程序異常反應。當然,我們無法徹底避免這種程序異常,然而常??梢砸龑в脩粼诤臅r操作進行中耐心等待。
比如,一個耗時達到10s~30s、中間過程不鎖死的登陸過程給用戶進度條反饋,每獲取到一些信息、一些進度都告知用戶,登陸的快慢和進度讓用戶一看便知(如圖4)。
一個耗時不確定、鎖定主程序和界面的查詢過程,提供給用戶的等待畫面僅包含一個進度條。
包含多個子查詢的執(zhí)行過程,如支持中斷操作,則等待畫面應提供中斷操作的入口,如關閉按鈕。每一個子查詢執(zhí)行完畢,應及時給用戶進行反饋,顯示實時的進度和查詢記錄。
執(zhí)行完畢,還可以告知用戶具體的執(zhí)行結果、匯總,如“查詢到xxx條記錄”、“無記錄”,“xxx條記錄保存成功,xxx條記錄保存失敗,失敗的原因是xxx”。
一般來說,耗時6s以內(nèi)用等待光標或動畫;耗時更多,則需要給出執(zhí)行進度,并提供終止操作的入口。但如果耗時特別長,超過30s,則有必要考慮進行后臺操作,并反饋執(zhí)行進度,避免界面長時間停留影響用戶體驗和工作效率,這種情況在類似文件下載時常常使用。執(zhí)行過程中有任何錯誤、警告,應立即告知用戶。
大量數(shù)據(jù)的呈現(xiàn)
當記錄集很大時,記錄的呈現(xiàn)方式對用戶的友好程度很關鍵,用戶如何從大堆無序、無規(guī)律的數(shù)據(jù)集中找到自己感興趣的一組?
當所有數(shù)據(jù)可以在1~2頁呈現(xiàn)完畢,可以簡單地使用數(shù)據(jù)列表加滾動條,如果想更加友好,需要設置按照若干列的分組和排序,以及特殊行、特殊字段的著色。
但以展示圖像為主要目的的記錄集應用,則適合用分頁加導航按鈕的方式,犧牲瀏覽速度、換取更大的單圖像視野,以及一些結合圖像/文字為一體的卡片式視圖(如圖5),具有文字信息和圖像信息折中的顯示效果,具體用到的時候需要權衡利弊,切不可照搬照抄。
此應用場景的首要考慮因素即是用戶更關心數(shù)據(jù)還是圖像,以及初次瀏覽時希望圖像的視野和清晰度多大,初次獲取的數(shù)據(jù)信息有多少、是否有結構性、數(shù)據(jù)跟圖像是否緊密相關,抑或是二者同樣重要。當用戶更關心圖像本身、希望獲得高清晰度、數(shù)據(jù)信息無結構時,用圖像列表式和圖像導航式呈現(xiàn)效果最佳;當用戶初次訪問只需要獲得圖像概貌、數(shù)據(jù)信息很重要且具有結構性時,用卡片列表式效果最好;而當用戶極其關系數(shù)據(jù)記錄、圖像可以后續(xù)呈現(xiàn)(一般僅作證據(jù))時,必須使用數(shù)據(jù)列表。
行業(yè)軟件的一大特點是配置項多、繁雜,然而隨時、隨處都可以進行配置會給用戶帶來極大的困擾:剛剛進行的配置項是否跟其他配置有關聯(lián)?什么時候配置生效?
如圖8紅色橢圓圈住的部分,用戶常常會問:拖動滾動條改變云臺控制速度后,能保存么?啥時候保存生效?上述問題的關鍵在于,此處是一個視頻瀏覽類業(yè)務頁面,本不該出現(xiàn)設置、配置入口,此處突然出現(xiàn)可以保存的設置,用戶就會感覺突兀。
重復的配置參數(shù)輸入常常來源于程序的智能化程度不夠,本能夠通過某種手段自動獲取參數(shù)、卻沒有設計并實現(xiàn),變成依賴用戶反復手工輸入,并容易出錯。如某公司的電視墻參數(shù)配置頁面需要輸入如圖9的參數(shù)。
如此眾多的輸入?yún)?shù),用戶拿到手后勢必一頭霧水,他得反復向其他人索要創(chuàng)建電視墻的參數(shù),盡管有時候因為安全性問題有必要用手工輸入,可大多數(shù)的情況下全手工輸入都不是必須的,可以改進的。上述配置頁面經(jīng)過后續(xù)的不斷改進,絕大多數(shù)參數(shù),如解碼器的名稱、ID、IP等不易理解的參數(shù)都已不再需要手工輸入,能通過選擇解碼器列表、獲取并自動填寫參數(shù),這些參數(shù)后來被證明無關系統(tǒng)安全性,用戶體驗的改進非常直觀、和諧(圖10)。
同一項配置出現(xiàn)在不同的地方、不同的入口,也需要給用戶足夠的提示和說明,包括保存配置后的效果、反向配置的入口等,如果本次配置后有“下次不再顯示”類似的效果,則必須提示、告訴用戶如何才能恢復此配置,否則,這樣的功能將是入門用戶的噩夢。
類似“下次不再提示”的設計,用戶一旦勾選,下次如何才能再出現(xiàn)這個提示對話框?事實證明,用戶對這種“不再提示”的疑惑是實實在在的,也確有如此反饋,而且次次需要提供咨詢,其實只需在程序里面稍加文字說明即可解決。
還有一個界面易用性問題與參數(shù)配置有關,即是:配置類頁面和業(yè)務類頁面一體化的設計。比如,地圖功能頁面,在同一個頁面中既能進行地圖的配置,如地圖元素的添加、圖層配置、換地圖文件,也能進行地圖實戰(zhàn)業(yè)務,如地圖中設備狀態(tài)呈現(xiàn)、畫軌跡、設備告警等??梢悦鞔_的一點是,配置/業(yè)務一體化設計的頁面,操作起來比二者獨立的頁面復雜性更高,更容易出現(xiàn)誤操作、不明確操作導致的程序異常現(xiàn)象:任何一個操作過后,用戶所在的操作模式到底是配置/編輯模式、還是瀏覽/業(yè)務模式?這就需要非常復雜、繁瑣和面面俱到的程序判斷/流程控制,要有信息提示及時告訴用戶處在哪種操作模式。處理稍有不慎,就會導致用戶處在一個不知所措的狀態(tài),或者操作了一個不屬于該模式、本無權限操作的功能,導致意想不到的結果和用戶不滿。
對此,提倡的做法是配置類頁面和業(yè)務類頁面分開設計,前者專門處理配置類操作,后者專門處理業(yè)務類操作,最終用戶就一目了然,不再糾結當前所處的操作模式、編輯/瀏覽狀態(tài)和操作權限,同時也給程序員帶來了功能模塊隔離、單一、容易控制的好處。
是否改變用戶操作習慣
首先,設計人員應盡可能多的保留用戶原有的業(yè)務模式和操作習慣,做好調研工作。需要設計創(chuàng)新性操作時,預估是否能給用戶帶來額外的益處,能否抵消用戶學習新操作帶來的成本開銷?
要了解這個問題,需要首先弄清楚目標用戶在沒有使用我們提供的系統(tǒng)時,到底是怎么工作的,存在什么問題,是怎么解決的?
圖11表示的是一個根據(jù)視頻抓拍圖片、然后進行信息錄入的頁面,本設計相對于用戶原有系統(tǒng)的改變在于視頻清晰度更高、幾個操作區(qū)域布局改變、抓取圖像的局部放大操作不同。之所以有兩個大小不同的圖片收集區(qū)域,是考慮到用戶會一次性連續(xù)抓取多張現(xiàn)場圖像,然后從中選取若干張效果好、清晰、位置符合預期的圖像作為證據(jù),移動到右邊的信息錄入?yún)^(qū)域。這其中就存在下方區(qū)域的小圖像需要做局部放大顯示的問題,原系統(tǒng)中局部放大的輸出圖像存放的控件顯示區(qū)域小,需要反復、多次進行局部放大才能看清楚目標車輛的全貌。
新軟件的改進,可以在屏幕左上部更大幅區(qū)域輸出局部放大后的圖像,達到一次放大就看到車輛全貌的目標,最終,得到用戶的滿意和認可,也改進了用戶的操作體驗和工作效率。這就是一個成功改變用戶舊有操作習慣的案例。
而不成功的改變用戶操作習慣常常是由于不符合用戶工作流/業(yè)務規(guī)則、降低工作效率等原因造成的,一個常見的開發(fā)弊病是一個新設計的流程需要跨越操作多個功能頁面,這在定制型業(yè)務設計中尤其突出。如,治安警情管理,包括警情的錄入、調度、指揮、預案等方面,可能同時需要兼顧實時視頻、錄像、圖像、警員、警車、地圖、機構、交通布控、預案、指揮調度等很多方面,如果把這些內(nèi)容簡單拼湊、堆疊,用戶操作起來不是更輕松了,而是繁瑣、無序、茫然,根本無法提高工作效率,甚至無法開始工作。一個功能復雜、綜合的良好系統(tǒng)一定是分角色、分權限、結合具體場景的設計,切合具體的用戶業(yè)務流程。
主要的方面講完了,作為建議和錦上添花的一點,如果讓用戶能在界面任何操作中立即獲取到針對性的幫助信息,則會大大提高用戶滿意度,這方面的典型案例當數(shù)Windows操作系統(tǒng),在任何功能按下F1都能得到解決問題的咨詢建議。
其中的“什么是…”鏈接就可以讓用戶隨時得到解決當前問題的幫助信息,按下F1、或者窗體右上角的“?”按鈕也可以彈出,十分貼心。如果無法做到針對性的幫助,也可以設計一套集中式的幫助系統(tǒng),至少要支持幫助目錄、按詞搜索,好用的幫助系統(tǒng)是一個優(yōu)秀軟件的必備要素。