用戶體驗(yàn)體系之設(shè)計(jì)用戶界面(一)
界面是人和物、人和人、物和物之間感知和互動(dòng)的層面,感知的主體 Subject 可以是人,比如我們看到一輛汽車(視覺(jué)),聽(tīng)到一首歌(聽(tīng)覺(jué));也可以是物,比如客廳的燈感知到有人進(jìn)來(lái)。依據(jù)技術(shù)實(shí)現(xiàn)的軌跡,我們把用戶界面分為:物理用戶界面 Physical User Interface, 縮寫為PUI ;圖形用戶界面 Graphical User Interface,縮寫為GUI;自然用戶界面 Natural User Interface,縮寫為NUI。
用戶界面的功能實(shí)現(xiàn),依賴于兩個(gè)因素:一是技術(shù);二是設(shè)計(jì)。
技術(shù)進(jìn)步,讓人-機(jī)交互變得越來(lái)越便利,尤其是自然用戶界面技術(shù)的快速發(fā)展。而設(shè)計(jì),可以讓用戶更簡(jiǎn)單、愉悅地使用產(chǎn)品,完成任務(wù)。在動(dòng)機(jī)-目標(biāo)-任務(wù)-行動(dòng)的模型里,我們需要設(shè)計(jì)的內(nèi)容包括信息架構(gòu)、交互流程、視覺(jué)和聽(tīng)覺(jué)美學(xué)。用戶界面設(shè)計(jì)承繼用戶研究,是其結(jié)果的呈現(xiàn)方式之一。
信息架構(gòu) Information Architecture
信息架構(gòu)是用戶界面的骨架。我們從用戶研究得到產(chǎn)品功能的定義,很多信息碎片需要經(jīng)過(guò)系統(tǒng)地歸類后,進(jìn)行串聯(lián)和并聯(lián)。所以設(shè)計(jì)用戶界面的第一件事,就是要搭建產(chǎn)品的信息架構(gòu)。
卡片分類 Card Sorting 是我們做信息架構(gòu)設(shè)計(jì)常用的方法論,感興趣者可以查閱相關(guān)資料。分類對(duì)于厘定物體的隸屬關(guān)系非常重要,也是一件邏輯性極強(qiáng)的工作。比如動(dòng)物分類學(xué)從既定維度,統(tǒng)一把動(dòng)物逐級(jí)分類為界、門、綱、目、科、屬、種,并根據(jù)動(dòng)物的異同程度和親緣關(guān)系的遠(yuǎn)近,確立不同等級(jí)的特征。相較而下,產(chǎn)品的信息量多而雜,其分類的維度則呈現(xiàn)多重性。
這里我們依據(jù)形式邏輯和格式塔 Gestalt 心理學(xué)原理,歸納出分類的五個(gè)原則:
1)定義原則
指事物概念內(nèi)涵的一致性或相似性。內(nèi)涵是決定事物屬性的基本元素。宣紙、牛皮紙、彩紙皆被定義為紙。紙的屬性(植物纖維制作,供書畫、包裝用),成為串起這類物品的主要元素。同理,所有含有酒精的液體歸之為酒類(啤酒、白酒、米酒、葡萄酒、雞尾酒等)。
2)概念外延相同性原則
指某類物品具有相同的概念外延,從而形成一個(gè)類別。紅色作為顏色具有自己的內(nèi)涵屬性,同時(shí)也是其他物體的外延,比如紅色的紙,紅色的蘋果等。商場(chǎng)里,皮帶通常和錢包、皮包放在一起,歸類為皮具;我們稱呼空調(diào)、洗衣機(jī)和冰箱為白電。
3)功能原則
指事物概念,由于其功能屬性所導(dǎo)致結(jié)果的相同性和相似性。該原則以功能的結(jié)果作為串聯(lián)線索來(lái)進(jìn)行物品歸類,比如抹布、拖把、掃帚、洗滌劑等被稱為清潔用品;鍋碗瓢勺歸類為烹飪用品;油鹽醬醋為調(diào)味品;口紅、脂粉、香水為化妝品;鉛筆、橡皮、作業(yè)本統(tǒng)稱為文具。
4)空間原則
指在一個(gè)特定空間內(nèi)的所有物品是為一類。這里所說(shuō)的空間指三維空間。廚房用品、衛(wèi)生間用品、戶外用品等皆屬此分類原則。
5)主體從屬原則
指某一類物品,從屬于某一特定主體(人或物)。比如奶瓶、尿不濕等屬于嬰兒用品;貓砂、狗罐頭屬于寵物用品;輪胎、玻璃水屬于汽車用品。
物體的分類,并非固定依據(jù)某一原則,而是經(jīng)常呈現(xiàn)交叉狀態(tài)。洗碗的海綿,既屬于清潔用品(按照功能分類);又屬于廚房用品(按照空間分類)。我們?cè)趯?shí)際的分類過(guò)程中,往往是依據(jù)約定的習(xí)俗。比如水果,是根據(jù)概念外延原則(多汁、甜味和酸味,可使用的植物果實(shí),內(nèi)含維生素和膳食纖維),而蔬菜卻是按照功能原則(可以被烹飪成為食品的一類植物和菌類)。
相比之下,行動(dòng)的分類就簡(jiǎn)單些,基本就是設(shè)置Set類的,是對(duì)物體的操作 Action。比如時(shí)間設(shè)置,字體設(shè)置等。大屏?xí)r代,提供了深層次信息架構(gòu)視覺(jué)表層展示的可能。但是,對(duì)于聲音界面,超過(guò)三級(jí)的層深就有點(diǎn)令人暈頭轉(zhuǎn)向了。
快捷方式 Shortcut 是把信息架構(gòu)深層的任務(wù),提到最表層,便于操作,但是信息的邏輯架構(gòu)并沒(méi)有發(fā)生變化。快捷方式的設(shè)定基于兩個(gè)原則:頻率性和緊急性。比如常用的鬧鐘設(shè)置、SOS緊急呼叫等。
信息架構(gòu)設(shè)計(jì)輸出結(jié)果是目錄樹 Menu Tree,給之后的交互設(shè)計(jì)提供輸入 Input 。信息架構(gòu)設(shè)計(jì)目前重視的不夠,很多產(chǎn)品不好用,就是一開(kāi)始在任務(wù)分類時(shí)就不合理。大部分從業(yè)者缺少邏輯方面的訓(xùn)練,而中國(guó)傳統(tǒng)文化也是多抽象、籠統(tǒng)和定性;鮮少具象、推理和定量,結(jié)果就造成信息架構(gòu)設(shè)計(jì)的條理不清和邏輯紊亂。
交互設(shè)計(jì) Interaction Design
交互設(shè)計(jì)是研究任務(wù)特征并輸出操作流程的活動(dòng) Activity。這里所說(shuō)的交互包括人和人之間、人和機(jī)器之間、機(jī)器和機(jī)器之間的相互行動(dòng) Interacting。交互設(shè)計(jì)輸出的結(jié)果是任務(wù)流程,是用戶研究的輸出部分之一。交互設(shè)計(jì)是用戶界面設(shè)計(jì)的構(gòu)成部分,從這個(gè)角度講,其不足成為一個(gè)專業(yè),作為一門課程比較合適。
伊颯爾公司目前取消了交互設(shè)計(jì)這個(gè)崗位,要求用戶研究的同事必須有能力把研究結(jié)果以報(bào)告、信息架構(gòu)設(shè)計(jì)和交互設(shè)計(jì)的形式進(jìn)行表述。同時(shí)視覺(jué)設(shè)計(jì)人員也要有能力上延,承接用戶研究的結(jié)果,輸出交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)。
這樣既拓寬了人員的能力,又加強(qiáng)了項(xiàng)目不同階段的密切關(guān)聯(lián)。用戶界面的交互設(shè)計(jì)既包括物理用戶界面,也包括圖形和自然用戶界面。不同的用戶界面所適配的信息載體也不盡相同。
物理界面簡(jiǎn)單實(shí)用,圖形界面信息可以長(zhǎng)時(shí)間滯留,聲音界面可以進(jìn)行自然語(yǔ)言的交互,各有優(yōu)勢(shì)。無(wú)論選擇什么交互界面,其深層的信息架構(gòu)和邏輯都是一樣的,只是所呈現(xiàn)的方式有差異而已。
多通道用戶界面是依據(jù)使用情景 Context of Use 所構(gòu)建的立體的、全方位的人-機(jī)交互場(chǎng)域。我們可依據(jù)用戶完成任務(wù)的安全、效能、效率和滿意度,對(duì)任務(wù)的操作模式進(jìn)行不同界面的分配,比如行駛狀態(tài),聲音界面最為安全。當(dāng)然,多通道用戶界面不是非此即彼,而是提供多種可能性供用戶自由選擇。
圖形用戶界面是目前人-機(jī)交互的主要通道。相關(guān)書籍和設(shè)計(jì)原則林林總總,此處不復(fù)贅言。其中有兩個(gè)原則,“使用用戶的語(yǔ)言”和“容錯(cuò)性設(shè)計(jì)”,感受頗深。
現(xiàn)在銀行都在向自助化轉(zhuǎn)型,大堂多設(shè)置有自助柜員機(jī),但是每個(gè)柜員機(jī)旁邊都站有工作人員,因?yàn)榭蛻舨粫?huì)用。
我曾看到某行的柜員機(jī)上有一個(gè)似乎是放銀行卡的位置,旁邊文字提示:“請(qǐng)放置第二代非接觸式 IC卡”。
不知道顧客里面有幾個(gè)明白的,“使用用戶的語(yǔ)言”這個(gè)原則非常重要,即使是專業(yè)的術(shù)語(yǔ)(銀行、保險(xiǎn)等)也要轉(zhuǎn)換成用戶可以理解的語(yǔ)詞。
另一個(gè)原則是“容錯(cuò)性設(shè)計(jì)”。犯錯(cuò)誤是人類的一個(gè)本能屬性,因此讓用戶避免犯錯(cuò),犯錯(cuò)后可以糾正,阻止毀滅性結(jié)果的發(fā)生,非常重要。
疫情期間,我曾到多地出差,每到一地都要下載填寫健康碼,填寫過(guò)程中發(fā)現(xiàn)界面設(shè)計(jì)多沒(méi)有考慮容錯(cuò)性原則,表單信息填錯(cuò)一個(gè),就要清零重填,其麻煩可想而知。除此之外,我們還能看到很多的公共設(shè)施(產(chǎn)品)的界面設(shè)計(jì)非常糟糕,給民眾帶來(lái)極大的不便。
語(yǔ)言聲音界面的應(yīng)用越來(lái)越普及。語(yǔ)音界面的交互形式有三種:
1)按鍵輸入+語(yǔ)音輸出,比如 800、400 服務(wù)電話;
2)語(yǔ)音輸入+圖形界面輸出,比如地圖語(yǔ)音查詢;
3)語(yǔ)音輸入+語(yǔ)音輸出,人工智能的聊天等。
我們都有撥打某銀行某電信公司服務(wù)電話的經(jīng)歷,當(dāng)聽(tīng)到從撥1鍵到撥8鍵時(shí),差不多都要暈掉了。
心理學(xué)家認(rèn)為,短期記憶的時(shí)間一般不超過(guò)一分鐘,容量限于 7±2,而且要不斷重復(fù)方能記得住。
伊颯爾公司研究顯示,實(shí)際應(yīng)用中,每列4~6個(gè)信息模塊為佳,超過(guò)這個(gè)數(shù)字就很難記憶了?;诖耍覀兘ㄗh IVR的設(shè)計(jì)層深不宜超過(guò)三級(jí),設(shè)計(jì)時(shí)按照用戶目標(biāo)和任務(wù),從信息架構(gòu)上區(qū)分“查詢”和“辦理”。
標(biāo)準(zhǔn)電話的按鍵有12個(gè),10個(gè)數(shù)字鍵,2個(gè)符號(hào)鍵,規(guī)則如下:
- 數(shù)字1~8為任務(wù)鍵 Task key,建議不超過(guò)6個(gè)。
- *號(hào)鍵和#號(hào)鍵為操作鍵 Action key。按照用戶的認(rèn)知習(xí)慣,*號(hào)鍵定義為“返回上一級(jí)菜單”;#號(hào)鍵定義為“確認(rèn)”。
- 0號(hào)鍵轉(zhuǎn)人工服務(wù)。
- 9號(hào)鍵可以定義為外語(yǔ)服務(wù)。
這樣的設(shè)置會(huì)清晰很多,也符合用戶的使用習(xí)慣。
作者:袁小偉,德國(guó)圖賓根大學(xué)博士,曾工作于西門子慕尼黑和北京,2001年創(chuàng)辦伊颯爾界面設(shè)計(jì)公司。
本文由 @伊颯爾界面設(shè)計(jì) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!