深入研究GUI和VUI
GUI和VUI的差異來自信息維度、信息量大小、交互方式、內容驅動、任務類型等等,今天我們一起探討一下GUI和VUI的差異,最后重點聊一下如何將GUI轉化為VUI。
今天我們深入探討一下GUI和VUI。
GUI是60年代“人機交互”的奇才道格·恩格爾巴特提出的概念,它使計算機更容易被用戶接受,自從80年代蘋果推出第一款搭載GUI的電腦后,至今為止GUI一直是人機交互的代表。VUI并不是全新的概念,它的前身是IVR(Interactive Voice Response,交互式語音應答),它誕生于70年代普及于2000年。電話用戶只要撥打移動運營商所指定號碼,就可根據語音操作提示收聽、點播或發送所需的語音信息以及參與聊天、交友等互動式服務。新一代的VUI更多指的是人通過自然語言與計算機進行交互,所以可以認為VUI是人工智能時代下的人機交互代表。
在聊GUI和VUI之前,我們先聊一下視覺和聽覺,因為使用感官的不同會直接導致GUI和VUI設計的不同。
維度
如果問GUI和VUI最本質的區別是什么,我認為是傳遞信息的維度不同。眼睛接收的信息由時間和空間XZY軸四個維度決定;耳朵接收的信息只能由時間維度決定。
雖然耳朵能覺察聲音的方向和頻率,但不是決定性因素。
時間決定了接收信息的多少,它是單向的、線性的以及不能停止的。耳朵在很短時間內接收的信息是非常有限的,舉一個極限的例子:假設人可以停止時間,在靜止的時間內聲音是無法傳播的,這時候是不存在信息的;還有一個說法是在靜止的時間內聲音總保持在一個當前狀態例如“滴~~~”,這時候聲音對人類來說就是一種噪音。耳朵接收的信息只能由時間決定。
眼睛卻很不一樣,即使它在很短時間內也可以從空間獲取大量信息??臻g的信息由兩個因素決定:1.動態還是靜態;2.三維空間還是二維平面。在沒有其他參照物的對比下,事物的靜止不動可以模擬時間上的靜止,這時候人是可以在靜止的事物上獲取信息的。時間和空間的結合決定了信息的大小,好比如花一分鐘看周圍的動態事物遠比一年看同一個靜態頁面獲取的信息多得多。
還有一個重要的區別,眼睛可以來回觀察空間獲取信息;耳朵只能單向獲取信息,在沒有其他功能的幫助下如果想重聽前幾秒的信息是不可能的。
接收信息量的對比
視覺接收的信息量遠比聽覺高。在知乎上有神經科學和腦科學話題的優秀回答者指出大腦每秒通過眼睛接收的信息上限為100Mbps,通過耳蝸接收的信息上限為1Mbps。簡單點說,視覺接收的信息量可以達到聽覺接收信息的100倍。
以上數據來自知乎問題“耳朵和眼睛哪個接收信息的速度更快?”
雖然以上結論沒有官方證實,但我們可以用簡單的方法進行對比。在不考慮超出理解范圍外,人閱讀文字的速度可以達到500~1000字每分鐘,說話時語速可以達到200~300字每分鐘,所以視覺閱讀的文字信息可以達到聽覺的2-5倍。
超出理解范圍時會花時間思考,這導致了接受信息量驟降。以上兩個數據來自知乎問題“普通人的閱讀速度是每小時多少字?”和“為他人撰寫中文演講稿,平均每分鐘多少字比較合適?”
如果將圖像作為信息載體,視覺閱讀的信息遠超聽覺的5倍。眼睛還有一個特別之處,通過掃視的方式一秒內可以看到三個不同的地方(圖)。
以上數據來自《人工智能的未來》一書。
GUI和VUI的差異
維度加上視覺聽覺各自的特點導致了GUI和VUI在信息展現、交互等方面的不同。以下我們討論一下GUI和VUI的差異。
內容與數據驅動
GUI的內容主要為圖形和文字;VUI的內容主要為文字,圖形和文字都屬于非結構化數據。目前的GUI展示的內容是由結構化數據驅動的;VUI展示的內容是由非結構化數據驅動的。
信息交互
如何理解GUI和VUI由不同的數據類型驅動?人主要通過點擊和手勢的方式與GUI進行交互,至于人在做什么其實計算機是不知道的,它只是將點擊和手勢轉化為坐標和操作兩種數據,再給予相應的響應事件,例如打開鏈接、獲取數據庫的信息。
人通過對話的方式與VUI進行交互,對話過程中使用的自然語言屬于非結構化數據,VUI要給出正確的響應事件必須要先理解人類在說什么,更重要的是在想什么。
情境感知
要知道用戶在想什么做什么,必須要有出色的情境感知(Context Awareness)能力,也就是上下文理解能力,它能根據用戶是誰、用戶情感、當前環境、之前的記憶給出下一步的預測。目前的人工智能技術還沒很好地掌握以上幾點技術,所以GUI和VUI的情境感知能力相對初級,只能人為設計來彌補。
任務類型
由于眼睛比耳朵可以接收更多信息,所以GUI更適合展示內容。在指令面前,GUI和VUI各有優勢,到底誰是最佳只能具體問題具體分析了,取決于各自的步驟長短。但可以肯定的是,目前的VUI不適合復雜的任務,因為它在多輪任務中表現并不是很出色。
信息架構:
GUI的信息架構包含了頁面和流程,頁面里包含了各種布局和結構;而VUI的信息架構只有流程,所以GUI的信息架構要比VUI復雜。由于頁面操作的限制使GUI無法隨意切換毫無相關的流程,而通過對話交流的VUI可以做到這一點,在導航的便捷性上,VUI更勝一籌。
GUI to VUI
為什么要將GUI轉換為VUI?
- 現有互聯網的絕大部分內容和數據都與GUI的信息架構和代碼有關,所以我們沒有必要為兩個界面做兩套內容。
- 這有助于人工智能助手的發展。如果我們要將GUI的內容轉換為VUI內容,我們必須簡化當前信息,使信息壓縮為200-300字每分鐘或者3-5字每秒。
目前的人工智能還做不到圖片理解、情境感知等技術,要將大部分GUI內容自動壓縮并轉換成自然語言絕非易事,所以需要人為制定一些轉換策略。
在轉換策略上我們可以借鑒成熟的無障礙規范指南——a11y,部分內容是為失明人士提供幫助的,可以將界面內容轉換為聲音內容,我們借鑒以下三個準則:
- 可感知性:信息和用戶界面組件必須以可感知的方式呈現給用戶。
- 適應性:創建可用不同方式呈現的內容(例如簡單的布局),而不會丟失信息或結構。
- 可導航性:提供幫助用戶導航、查找內容、并確定其位置的方法。
解釋:
(1)在可感知性里下面有一條非常重要的準則:為所有非文本內容例如圖片、按鈕等等提供替代文本,使其可以轉化為人們需要的其他形式。現在的通用做法是為圖片、按鈕等非文本內容增加描述性內容,例如在img標簽上增加alt屬性,在input button標簽上增加name屬性。開啟無障礙設置后,失明人士通過觸摸相關位置,系統會將屬性里的文字朗讀出來。
舉個例子:
以京東的廣告為例,應該在alt屬性上加上簡潔的內容“12月14日360手機N6最高減600”,當VUI閱讀該內容時可以將廣告重點朗讀出來。
在這里我有新的想法,以下圖為例:粉紅色區域為一個小模塊,圖片、副標題、時間和作者等信息對于必須簡化信息的VUI來說都不是必要信息。是不是可以在div標簽上增加一個“標題”屬性,當VUI閱讀到該div時可以直接閱讀該屬性的內容,例如標題內容;如果用戶對作者感興趣,可以通過對話的形式獲取作者信息。
(2)以淘寶為例,以下內容普通人花幾秒就可以看完;如果以VUI的形式進行交互,首先VUI不知道從哪開始讀起,其次是用戶沒有耐心聽完全部內容。為什么?因為GUI的結構有橫縱向兩個維度,VUI結構只有一個維度,用戶在GUI上的閱讀順序無法直接遷移到VUI上,所以a11y希望頁面設計時可以采用簡單的布局,GUI和VUI采用相同的結構,避免丟失信息或結構。
(3)在可導航性上,a11y希望網頁提供一種機制可以跳過在多個網頁中重復出現的內容模塊。在這里我有新的想法:可以直接跳過無需朗讀的內容模塊,例如淘寶的導航、主題市場、登錄模塊,因為用戶使用淘寶VUI主要需求為搜索物品和獲取優惠信息。同理,是不是可以在div標簽上增加一個“跳過”屬性,當VUI閱讀到該div時可以直接跳過div,當用戶有需求時,可以通過對話的形式對該div里的內容進行交互。
最后我還有另外一個想法:是不是可以為大段內容如新聞、介紹等增加“文本摘要”屬性,當VUI閱讀到該標簽式,自動使用文本摘要功能。
結合以上三點思考,GUI在轉換為VUI時以“概括”、“跳過”的方式可以大大地簡化信息,使VUI擁有一個良好的體驗。
以上三個屬性需要W3C、Google、蘋果等組織統一制定標準。
VUI and GUI
VUI和GUI的結合已經不是新鮮事,例如Siri、Google Assistant、Cortana、Bixby,以及最近推出的Alexa屏幕版。在GUI的基礎上增加VUI有助于簡化整個導航的交互,可以做到無直接關系頁面的跳轉,例如以命令的形式導航去其他應用的某個頁面。在VUI的基礎上增加GUI可以使選擇、確認等操作得以簡化,尤其是用Alexa進行購物時。
結語
人工智能時代下GUI和VUI的發展會越來越快,研究和探索它們是一件非常有趣的事情。我認為在未來幾年里,個人智能助手的成熟會使VUI和GUI的結合會越來越緊密,它直接影響到未來幾年移動交互的發展。
如果你也有相關想法歡迎和我交流:-)
作者:薛志榮(微信公眾號:薛志榮),百度交互設計師,二年級生
本文由 @薛志榮 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
- 目前還沒評論,等你發揮!