連接虛擬介面與實體世界的3個秘訣

Stephanie Kuo
AAPD — As A Product Designer
6 min readOct 27, 2018

學生時代接連做了兩個導航的介面,畢業後又在公司做server安裝教學手冊。意外的發現這些介面的共通性就是利用平面的介面和實際的場景做對照,像是任天堂Switch Labo也是屬於這類的介面。平常很少有機會設計這樣虛實交錯的介面,想和大家分享一下設計的心得。歸納出以下三個原則:

提供介面和實體對照的線索

第一個重點就是必須要建立起虛擬介面和實體世界可以互相對照的線索,讓使用者可以將介面對應到現實當中,並透過介面的引導做出下一個步驟。

例如在家具組裝說明書上會標著木板的號碼,而在木板上也會貼著相對應的號碼,讓使用者可以透過木板的形狀加上號碼和說明書對照起來,接著根據指示進行組裝。

from: https://www.youtube.com/watch?v=GdlrzRBZp08

又或者像是在設計導航系統的時候,使用者手上的介面必須要能和現實中的標示對照起來,才能讓使用者相信這個介面是可靠的,是可以真的反應現實環境的。例如在使用Google Map導航的時候,系統會提示:「在XX路右轉。」而駕駛就會開始找XX路的標示,確定自己看到的是對的。或是透過現實中縮短的距離和介面上的距離相對應,以做出和指示相應的行動。

測試室內導航系統時所貼的標示,以利和使用者手上的介面相互對照

最後一個例子是叫車App,提供車子的型號、顏色和車牌號碼方便乘客找到司機。最近Lyft還有一個新功能,為了解決在晚上看不清楚車子的型號和車牌的問題,車子上會加裝一個燈,會依據不同的乘客顯示不同的顏色。像是下圖的例子,加裝的燈就會顯示綠色。如果是共乘的話,接到了這個乘客要去接下一個人的時候,就會顯示另外的顏色。

注重細節,盡可能還原現實

這點在設計安裝說明書的時候尤其重要,你永遠不知道使用者會在哪裡感到挫折,找不到說明書上所畫的那塊木板,或是一個螺孔,因此每個細節都會成為使用者的線索。

這裡拿IKEA的組裝說明書做個例子,IKEA試著把說明書簡化再簡化,不帶任何文字說明。因此有時候就會發生這種情況,好不容易把櫃子都快要裝完了,卻發現其中一片板子裝反了,最後一片板子裝不上去。最後只好把整個櫃子拆開,把那片裝反的板子擺正,相當於又重新組裝一次。這種狀況大概我每次買新家具都會發生 Orz

為了要避免錯誤,這才開始觀察圖片上的各種細節,像是軌道的輪軸的相對位置或是螺孔的相對位置來判斷方向,利用螺絲的相對大小和形狀來判斷正確的螺絲是哪一個。

當然有很多更好的設計可以避免這樣的錯誤,像是上面範例的利用貼紙編號來分辨零件,或是在零件上標示前後左右等等,以提供更明顯的提示以連接介面和現實。這實在是IKEA應該要改進的地方。

from: https://i.stack.imgur.com/xSepQ.jpg

在工作上的例子雖然無法提供圖片作參考,但簡單和大家提一下。公司的新產品是四個連在一起的主機,工程師在安裝的時候必須從最下面開始安裝軌道,最後再把四個主機由下往上放進軌道裡完成安裝。可是在手冊上只提供了安裝一個的範例,只簡單說明:「重複步驟1–4完成安裝」,這就造成了困擾。因為圖上只畫了其中一個主機,工程師不確定是要從下、從上、還是從中間開始安裝。即便有文字說明,但大多數人還是直接看圖,並且從圖中找線索。最後還是改了圖,依照現實安裝的情形還原圖片,避免有任何誤會的空間。

再用Lyft當例子,上面同時提供:車型名稱、車子圖片、車牌號碼、燈的顏色、目前位置等五種訊息,對於對車型不熟的人可以用車子的圖片做對照,當其中一個條件吻合但還不能確定的時候,使用者就可以使用其他的線索作為判斷的依據,以確認介面是可以和現實作對照的,相信這個介面是可以信賴的。

你永遠不知道使用者觀察的重點在哪裡,每個人所依賴作為連結介面和現實的線索都不一樣,每個人觀察到的地方也都不盡相同。因此只能夠盡可能提供所有細節,讓使用者作對照,並且透過多個細節來重複確認。

考量使用情境

和一般的介面不同,在使用這類介面的時候,通常使用者不會只專注在介面上,而是同時參照頁面和實際情況做出判斷,因此在設計的時候也要考量到周遭的環境。

例如我們公司設計的安裝手冊,之前的版本會設計成隨身的小卡,附上搭扣和伸縮繩,讓工程師可以把本子帶在身上隨時查看。新的簡易版本只有一張紙,就附上磁鐵讓工程師可以把說明書吸在放主機的黑色鐵架子上,可以輕易的移動,並且隨時參照說明書內容。目前正在開發的手機版本,則考慮附上紙摺的手機架,讓使用者可以空出兩隻手來,一邊看手機上的說明影片,一邊操作。尤其手機有光,在部分照明不足的資料中心裡就可以不需額外照明閱讀內容。

上次介紹了Nintendo Labo的互動式組裝說明書,使用者必須要一直按著Forward才會繼續播放說明影片。若非以遊戲而是以實用性來說,其實不是個好設計。這個設計強迫使用者必須要騰出一隻手來,暫停組裝,關看完影片之後才能夠繼續操作,其實非常不方便。

Nintendo Labo組裝說明介面

導航app更是必須考量周遭的環境,尤其使用者一邊看導航一邊開車,更需要考量安全性。我們在測試一個carpool app的時候,使用了賽車遊戲的方向盤和煞車做測試,有些使用者一聽到提示的鈴聲就慌了,甚至直接踩下煞車,想停下來看到底發生了什麼事。因此在提供只是的時候,不能只提供單一的機械音,而是完整的句子指示下個步驟,指示也不能太過複雜。如果指示太過複雜讓使用者必須要分神思考,判斷什麼是必要的資訊,在開車的時候分心則會造成危險。

在設計連接虛擬介面和實體互動的這類介面的時候,要考量的是如何提供適當的線索讓使用者迅速將介面和實體連接起來。並且盡可能提供細節,提供多個線索讓使用者做對照,確認介面所提供的資訊的準確性。最後是必須考慮使用當下的情境,提供額外的協助和適當的提醒,讓使用者可以順利的一心多用。

雖然這類虛實互動的介面並不多見,但是在設計的時候可以多考慮要如何結合現實的環境對應虛擬的介面,以及介面的使用情境。希望大家也覺得很有趣 :)

--

--

Stephanie Kuo
AAPD — As A Product Designer

從冰天雪地的密西根畢業之後,來到天天都是大太陽的矽谷。意外從科技業踏進金融業做UX Design,天天為交易員做設計。希望能用中文和更多台灣人分享UX。http://www.stephkuo.com/