特斯拉的觸摸屏界面:汽車儀表板界面的案例研究
在現(xiàn)代社會,汽車已經(jīng)成為出行必備交通工具之一,汽車設(shè)計對駕駛員的駕駛體驗有很重要的影響。本文以特斯拉的觸摸屏界面為例,對汽車儀表板界面進(jìn)行研究分析,希望對你有幫助。
簡介:車輛控制裝置應(yīng)易于使用,并要求駕駛員盡量少注意,同時與駕駛相關(guān)的信息應(yīng)清晰易懂。
對于我們中一些幾十年前學(xué)會駕駛的人來說,駕駛一輛現(xiàn)代汽車是完全不同的體驗?,F(xiàn)代汽車配備了后視攝像頭、障礙物傳感器、泊車輔助、換道輔助、自適應(yīng)巡航控制、自動駕駛儀駕駛,甚至還有網(wǎng)絡(luò)瀏覽器。
這些功能應(yīng)該使駕駛更安全、更舒適。但前提是汽車設(shè)計師了解人類注意力的最基本事實(shí):人類的注意力是有限度的。如果他們設(shè)計了這些復(fù)雜的汽車功能,那么他們就會缺乏對駕駛這一基本任務(wù)的認(rèn)知。
一、需要注意的“軟按鈕”
特斯拉的Model S幾乎沒有物理控件 — 物理控件全部都放在方向盤上或非常靠近方向盤的位置。與駕駛相關(guān)的功能,例如巡航控制,自動駕駛,刮水器和燈光,都可以通過這些控件來控制。
但是大多數(shù)“輔助”功能(包括后視攝像頭,電話,媒體播放器和氣候控制)沒有專用的物理控件。 相反,選擇它們的主要方法是通過位于駕駛員和乘客座椅之間的儀表板上的17英寸觸摸屏顯示器。 盡管這個屏幕很大(是iPad面積的三倍),卻無法顯示所有內(nèi)容 — 因此,事情變得更加復(fù)雜,在特斯拉操作系統(tǒng)的版本9中,某些功能還位于可擴(kuò)展菜單中。
特斯拉Model S觸摸屏:可從汽車17英寸觸摸屏顯示屏底部的菜單欄中訪問輔助汽車控制功能(例如汽車氣候,媒體播放器或后視攝像頭等應(yīng)用程序)。
點(diǎn)擊箭頭圖標(biāo)(主菜單中左起第三;頂部)打開一個帶有其他控件的子菜單(底部)。要關(guān)閉此菜單,用戶必須輕觸出現(xiàn)在原始菜單中用來代替箭頭圖標(biāo)的“ X”圖標(biāo)。
盡管觸摸屏儀表板比真實(shí)儀表板具有更大的靈活性,但它們有一個很大的缺點(diǎn):沒有觸覺反饋。為了可靠地觸摸這些按鈕,人們必須看著它們。而使用物理按鈕,我們可以學(xué)習(xí)并獲取它的位置,而無需過多關(guān)注(如果有的話)。例如:我們可以在讀取樂譜的同時彈鋼琴,也可以在真實(shí)的鍵盤上進(jìn)行觸摸打字,而找到一個觸碰軟按鈕需要我們以視覺的方式確認(rèn)其位置。
如果軟按鈕隱藏在菜單下,則選擇軟按鈕會涉及多個觸摸屏交互,會花費(fèi)更多時間和精力。而且,在汽車中,花費(fèi)在UI上的這些時間將是我們忽略道路狀況的時間。
二、不良的目標(biāo)設(shè)計
1. 目標(biāo)位置導(dǎo)致更長的交互時間
Fitts定律認(rèn)為手指到達(dá)目標(biāo)的時間取決于目標(biāo)的大小和距離。因此,放置在遠(yuǎn)離初始手部位置的控件將比放置在較近位置的控件花費(fèi)更長的時間來獲取。
老一輩的那代人學(xué)會駕駛時,標(biāo)準(zhǔn)的手的位置是“2-10”(對應(yīng)于時鐘上的數(shù)字2和10)。隨著安全氣囊和更小的方向盤變得越來越普及,美國國家公路交通安全管理局(NHTSA)改變了這一建議,現(xiàn)在“3-9”已經(jīng)成為最安全的位置。
對于這兩種手的位置,最佳的控制位置將在屏幕的左中邊緣,靠近駕駛員的右手。然而,Model S的控制裝置被放置在17英寸屏幕的最底部,這一區(qū)域可能是倒數(shù)第二個最差的區(qū)域(倒數(shù)第一個在屏幕的右邊緣)。
Tesla操作系統(tǒng)的版本9將控制菜單置于遠(yuǎn)離駕駛中正常手位置的位置。紅線表示正常右手位置(3點(diǎn)鐘)和控制區(qū)域之間的距離。
將控件放在觸摸屏的底部還意味著眼睛從擋風(fēng)玻璃移到菜單區(qū)域的時間更多,同時也意味著人們在忙于與觸摸屏交互(和觀看)時,將很少有機(jī)會利用余光來處理道路上出現(xiàn)的意外事件。
在給定的菜單中,最常用的選項應(yīng)該最容易訪問。但是,特斯拉關(guān)于菜單中控件順序的決定是令人質(zhì)疑的。
第一個選項是訪問汽車的所有設(shè)置和自定義設(shè)置 — 在開車時不太可能經(jīng)常使用這種設(shè)置。后視攝像頭(后擋風(fēng)玻璃視圖被后座頭枕部分遮擋的汽車中的一個基本功能)和電話點(diǎn)擊箭頭菜單可用。
還有一些被認(rèn)為經(jīng)常使用的選項在該菜單中也沒有得到優(yōu)先處理:日歷,能源和Web(用于Web瀏覽器)不是列在箭頭圖標(biāo)的上方(以最小化手指的移動時間),而是緊隨其后 (后視攝像頭和電話相比,您在開車時會多久使用一次這些功能)。
2. 目標(biāo)尺寸大小
另一個影響抵達(dá)目標(biāo)時間的因素是目標(biāo)大?。喊粹o越大,到達(dá)按鈕的速度就越快。
然而,在版本9中,特斯拉決定縮小目標(biāo)范圍(大概是為了在可見的菜單欄中添加更多選項 — 版本8中為7,而版本9中為10或11)。許多移動端設(shè)計師都屈服于這種誘惑,但不幸的是,這并不是可用的設(shè)計。
用于控制媒體播放器的圖標(biāo)(播放/暫停,Like,Next)小于推薦的1cm X 1cm觸摸目標(biāo)尺寸。但是,媒體播放器顯示屏底部的標(biāo)簽(廣播,流媒體,電話等)要大得多(它們還包括標(biāo)簽和圖標(biāo),我們強(qiáng)烈建議這樣做)。
3. 意外碰觸
由于控制面板中的目標(biāo)彼此之間距離太近,因此太容易觸摸到錯誤的目標(biāo)。
例如,在很多情況下,會在嘗試更改溫度或點(diǎn)擊氣候圖標(biāo)時觸發(fā)了座椅加熱裝置。當(dāng)駕駛員嘗試通過向上滑動箭頭圖標(biāo)(手勢快捷方式受iOS啟發(fā))來嘗試訪問其他的應(yīng)用程序時,座椅圖標(biāo)也很容易被意外觸摸。
當(dāng)用戶在應(yīng)用程序圖標(biāo)上垂直滑動以啟動最新的應(yīng)用程序時,座椅加熱裝置可能會意外觸發(fā)(如此屏幕截圖所示 — 紅色虛線表示手指的軌跡)。當(dāng)用戶嘗試調(diào)整駕駛員側(cè)溫度時,可能會誤操作相同的座位圖標(biāo)。
4. 地圖始終顯示在屏幕上
為了讓人們從屏幕上快速獲取所需的信息,然后繼續(xù)前進(jìn),汽車儀表板上的文字應(yīng)在各種光線條件下都易于閱讀。文本太小,出現(xiàn)在內(nèi)容很多的背景上,或與背景對比度低,通常不能滿足這些要求。
然而,特斯拉的地圖應(yīng)用程序總是顯示在所有應(yīng)用程序的背景中。因此,屏幕頂部的狀態(tài)欄可能很難讀取,因為它與地圖文本融合在一起。
此外,在兩個應(yīng)用程序窗口之間出現(xiàn)一條顏色鮮艷的分割線(如下面的屏幕截圖所示)可能是完全不相關(guān)的(而且可能會分散注意力)。另外,打開的應(yīng)用程序不能從屏幕的最頂端顯示,這不僅剝奪了用戶的可操控權(quán)(也違背了尼爾森的十大可用性原則之一),而且也是浪費(fèi),迫使用戶在最頂端必須看到地圖的一小部分,而且其中包含的信息還非常少。
背景中的地圖還容易引起與其他應(yīng)用程序的交互出錯:如果要增加應(yīng)用程序窗口的大小,則必須從應(yīng)用程序視圖的頂部邊緣拖動。但如果你不小心,把手指放在窗口手柄上,什么也不會發(fā)生,因為操作系統(tǒng)會假設(shè)你在滑動地圖,而不是最大化地圖窗口。
該地圖出現(xiàn)在所有應(yīng)用程序的背景中,可能會干擾其上方顯示的內(nèi)容,或者可能會滑動以關(guān)閉或最大化應(yīng)用程序。紅色交通標(biāo)志在日歷和媒體播放器應(yīng)用之間的區(qū)域中可見,可能使無關(guān)的信息分散駕駛員的注意力(還要注意,日歷應(yīng)用程序是通過點(diǎn)擊左上角的“ X”關(guān)閉的,而媒體播放器應(yīng)用程序是通過從其窗口頂部邊緣的手柄向下滑動而關(guān)閉的)。
5. 理解所顯示的信息對用戶來說是一項挑戰(zhàn)
如果您想在駕駛特斯拉時改變車道,可能會用到以下信息源:
- 老式后視鏡加上側(cè)視鏡,左右轉(zhuǎn)動頭部檢查車道的可用性。
- 后視攝像頭(在以前的特斯拉操作系統(tǒng)中,你可以把它固定在主觸摸屏的頂部?,F(xiàn)在,它永遠(yuǎn)不會在最上面,所以,想要看一眼,你的眼睛需要從馬路向下移動到觸摸屏)。
- 輔助屏幕上的車道輔助功能,在您接通轉(zhuǎn)向信號燈但車道不可用時顯示紅線。
儀表板顯示汽車是否可以安全地改變車道(頂部)或(底部),僅顯示緊鄰車輛的車道。
問題是這些信息源都不完整(例如,后視鏡視圖被頭枕部分遮擋),當(dāng)您檢查完所有信息源時,您可能已經(jīng)實(shí)現(xiàn)你的目的了。
所以,大多數(shù)人最終所做的是走捷徑來節(jié)省交互成本,并且僅僅依賴其中一個信息源。你認(rèn)為他們最有可能選哪一個?
交互成本最低的一個:顯示在輔助儀表板上的車道輔助,當(dāng)轉(zhuǎn)向燈接通時,輔助儀表板始終顯示。
這實(shí)際上是一個成功地摒棄老套、精心排練的行為的例子——那些努力教用戶如何變得更有效率的應(yīng)用程序設(shè)計師應(yīng)該從特斯拉的案例中吸取教訓(xùn):如果你讓它變得比以前更容易,而且總是在最需要的時間向用戶展示,那么用戶最終會信賴并依賴它。
所以,如果用戶能夠以更快的速度完成同樣的任務(wù),那是好事,對吧?當(dāng)然,前提條件是如果這個解決方案在任何情況下都能正常工作。
事實(shí)上,特斯拉警告用戶不要僅僅依靠車道輔助來改變車道。即使排除傳感器錯誤(比預(yù)期的更常見),正確解釋顯示的信息也是一項挑戰(zhàn)。
問題是用戶可能無法識別車道輔助提示適用于哪個車道。
請想象您在三車道道路上行駛,并希望將車道從最右邊的車道切換到中間車道。當(dāng)你打開轉(zhuǎn)向燈時,汽車可能會顯示車道是空閑的。但是,當(dāng)你到達(dá)中間車道時,由于你的轉(zhuǎn)向燈仍在工作,汽車將顯示有關(guān)轉(zhuǎn)入左側(cè)車道的信息。
然而,用戶并不總是完全知道他們的車所在的位置 — 因此,他們可能會檢查車道輔助顯示,進(jìn)行車道切換,然后再次檢查顯示,注意紅色警報(這一次將涉及切換到下一個車道),將其誤解為指代他們當(dāng)前的目標(biāo),并驚慌失措,使汽車掉頭返回進(jìn)入原來的車道。
這個例子指出了汽車設(shè)計師和制造商今天面臨的一個重要困境。新功能,如自動駕駛、車道輔助、碰撞檢測等,有可能取代我們過去依賴的傳統(tǒng)駕駛行為,如回頭看或檢查后視鏡。如果這些功能是功能性的,并且使用它們比執(zhí)行我們在駕校學(xué)到的手勢和動作更容易,那么它們將取代那些動作(我們是最小努力的生物:我們總是采取需要最少工作的解決方案——不是因為我們懶惰,而是因為我們高效)。
這就是為什么我們在新聞中會聽到有人在化妝,玩游戲,甚至睡在方向盤上 — 因為他們覺得這樣做很安全。然而,作為設(shè)計師,我們有責(zé)任創(chuàng)建正確的心理模型,讓人們正確理解我們的系統(tǒng)是如何工作的,以確保如果我們?nèi)〈@些老式行為,不會使駕駛變得更危險。
三、好的設(shè)計點(diǎn)
如上所述,可以對特斯拉的UI進(jìn)行很多改進(jìn)。但是,也有幾個很好的設(shè)計點(diǎn):
1. 大屏幕是其中一個優(yōu)點(diǎn):它可以并排查看多個應(yīng)用程序窗口。盡管切換應(yīng)用程序可能會很痛苦(因為它確實(shí)涉及多次輕擊并看著屏幕),但是能夠同時查看其中的幾個(例如,后視攝像頭和地圖或媒體播放器)使操作起來更容易司機(jī)。
駕駛時用戶確實(shí)需要同時訪問多個信息源(例如地圖和后視攝像頭),并且同時看到所有這些窗口的情況會大大降低用戶的記憶負(fù)擔(dān)。相比之下,即使在最大的平板電腦上,人們也很少拆分屏幕用來同時顯示多個窗口,盡管分屏功能已經(jīng)存在了一段時間。
2. 該地圖應(yīng)用程序包含特斯拉特有的信息。
例如,即使該應(yīng)用基于Google Maps,它也確實(shí)具有一些特斯拉車主專有的選項:
- 增壓器的位置會自動顯示在地圖上
- 導(dǎo)航到目的地時,地圖會顯示到達(dá)目的地時電池中會剩余多少電量
- 導(dǎo)航應(yīng)用程序允許用戶根據(jù)拼車車道的使用來接收路線
地圖應(yīng)用程序顯示到達(dá)目的地后將收取多少費(fèi)用。
3. 自動駕駛和自動導(dǎo)航系統(tǒng)承認(rèn)存在故障的可能性,并要求駕駛員在運(yùn)行時將手保持放在方向盤上。
4.?特斯拉始終與網(wǎng)絡(luò)相連,可以通過空中接收更新信息。此功能既可以視為是正向的也可以視為負(fù)向的。
好處是可以快速修復(fù)錯誤,就像網(wǎng)站一樣每天可以更新不同的顏色。特斯拉以相同的方式將其部署到汽車上,可以輕松連接有關(guān)驅(qū)動程序的分析數(shù)據(jù),報告錯誤并修復(fù)問題。
不幸的是,如果突然違反了以前版本中用戶的期望,那么不斷變化的界面也可能會造成潛在的致命問題(此外,必須相信汽車制造商只會部署安全且經(jīng)過良好測試的操作系統(tǒng))。
四、總結(jié)
現(xiàn)代汽車就是一臺功能強(qiáng)大的計算機(jī)。它們可以通過從各種傳感器收集的信息來增強(qiáng)駕駛員的認(rèn)知和身體能力;它們還可以通過一次點(diǎn)擊即可獲得的大量便利功能來增強(qiáng)駕駛體驗。
當(dāng)然,只有在汽車設(shè)計師梳理了數(shù)十年來設(shè)計計算機(jī)界面的經(jīng)驗,并遵循眾所周知的可用性和人類心理模型之后,這些事情才能真正發(fā)生。
原文地址:https://www.nngroup.com/articles/tesla-big-touchscreen/
原文作者: 拉魯卡(Raluca Budiu)
本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
藏起來慢慢看
寫得很詳細(xì),建議樓主再開開其他品牌的大屏幕車,特別是國內(nèi)新勢力的
OK呀,??