0

0
0

文字

分享

0
0
0

按鈕要多大?費茲定律告訴你

Desiring Clicks
・2012/11/19 ・1308字 ・閱讀時間約 2 分鐘 ・SR值 501 ・六年級

-----廣告,請繼續往下閱讀-----

你知道為什麼 Microsoft Windows 的選單列放置在視窗上,而 Apple Mac OS X 的選單列放在螢幕的最上方嗎?你知道為什麼 Mozilla Firefox 瀏覽器左上角的「回到上一頁」和「到下一頁」兩個按鈕的大小不一樣嗎?其實費茲定律(Fitts’ Law)都已經在許多使用者介面裡面偷偷運作了!

費茲定律(Fitts’ Law)是心理學家 Paul Fitts 所提出的人機介面設計法則,主要定義了游標移動到目標之間的距離、目標物的大小和所花費的時間之間的關係。費茲定律目前廣泛應用在許多使用者介面設計上,以提高介面的使用性、操作度和效能。費茲定律長得就像下面這個公式:

其中 T 代表所花費的時間,a 是系統一定會花費的時間,b 是系統速率,D 代表啟始點到目標之間的距離,而 W 則是目標物平行於運動軌跡的長度。看起來一點都不討喜,對吧?我們可以用下圖來簡化一下費茲定律的意思:

用圖來解釋,就是當 D(啟始點到目標之間的距離)越長,使用者所花費的時間越多,而當 W(目標物平行於運動軌跡的長度)越長,則花費的時間越少,使用效能也比較好。

-----廣告,請繼續往下閱讀-----

這跟 Mozilla Firefox 的「回到上一頁」按鈕的大小有什麼關係呢?這要從「回到上一頁」和「到下一頁」兩個按鈕的行為有什麼不同來進行分析。

一般而言,我們在點選回到上一頁按鈕的時候,都是正在瀏覽網站而想要回到剛剛看過的頁面,這時滑鼠位置通常都在瀏覽器的頁面內容上,要把滑鼠從頁面上移動到「回到上一頁」的按鈕的距離很長,而且我們不能確定使用者會從哪個位置開始移動。因此 Firefox 將「回到上一頁」的按鈕加大並設計成圓形,以因應來自不同角度的滑鼠操作。而「到下一頁」的按鈕,通常都是因為點選了「回到上一頁」而感到反悔,希望可以回到上一個頁面,此時滑鼠是從左往右移動一個小段的距離,角度和距離都可以控制,所以 Firefox 就設計了比較寬的按鈕了!

至於 Windows 和 Mac OS X 的選單位置的差別呢?Windows 將選單位置放置在視窗標題的下方,如果滑鼠要從視窗內移動到選單上,這個選單的上下間距是非常狹窄,所以比較不容易點選到正確的按鈕。而 Mac OS X 則將選單放到螢幕的正上方,由於滑鼠移動到螢幕邊界的時候,會被螢幕邊界限制而停下,因此可以將選單的高度(也就是費茲法則中的 W)視為無限大,所以使用者所花費的時間減少,效率也就提昇了。

果然惡魔住在細節裡,對吧!

-----廣告,請繼續往下閱讀-----

 

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

延伸閱讀:

Image via webtreats, CC License.

文章難易度
Desiring Clicks
14 篇文章 ・ 1 位粉絲
Desiring Clicks(http://dclick.cc)是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈,讓世界更美好!

0

1
0

文字

分享

0
1
0
講話太難語音助理聽不懂?利用互動設計讓人講「機器話」
人機共生你我它_96
・2020/07/27 ・2309字 ・閱讀時間約 4 分鐘 ・SR值 536 ・七年級

-----廣告,請繼續往下閱讀-----

「這段時間,我們一直納悶控制的方法在哪裡……」
「沒想到就是我們自己。」

——《人生複本》 Blake Crouch

有沒有注意自己的日常用語會跟自己經常接觸的朋友們越趨接近?像是辦公室有人開始講:「是在哈囉?」身旁會也越來越多人在不經意間說出:「是在哈囉?」我們跟某個朋友聊天時,如果對方原本都沒有在用貼圖,但是突然有一天他/她開始用了貼圖,我們也開始跟著用貼圖來回應對方。

用語上的一致性 (lexical alignment / lexical entrainment)能夠讓人跟人之間距離更靠近,增加彼此的信任感。不僅在語言上,行為上一致性(姿勢、動作等)也能在兩個溝通越來越順暢的人們身上觀察到,而且人們在沒有察覺的情況下,對於那些語言與行為跟自己一致的人也展現較多好感。

大家下次在外面吃飯時,不妨觀察隔壁桌的兩人是否會輪流用手托腮。圖/Unsplash

語言一致性的涵蓋範圍廣泛,包含用詞選擇、腔調、語速,甚至是修辭結構。

舉例來說,當我們在跟朋友描述自己所在的位置時:「我在地下室一樓」此時,對方比較有可能回應「我在地下室二樓」,而不是「我在 B2」。

-----廣告,請繼續往下閱讀-----

但人與人之間對話時的用語一致性跟語音助理設計有什麼關係呢?

無論與人或電腦對話,我們都會配合對方的用語

我們可以透過瞭解人跟電腦對話的時候,是否也會出現這樣的用語一致性。在這個實驗當中,研究者們會讓使用者分別跟三個不同的角色語音對話對話,分別是:

  • 真人
  • 較舊版本的電腦
  • 較新版本的電腦

而且使用者們會明確地被告知即將對話者的身分。如果是舊版電腦,就會看到一個螢幕開機畫面上寫著是 1987 年的作業系統版本;如果對話的是新版電腦,就會在螢幕上看到 2003 年的作業系統版本。

圖/pickpik

接著,請使用者在實驗過程中分別跟三個不同的角色互相看著圖片描述一個物品,例如:看一張電燈的圖片。不過「電燈」的另一個稱呼也可以是「檯燈」,這時候研究者就讓他們輪流向對方說出照片裡的物品,進而讓研究者們分析使用者會不會因為對方用了某個詞彙,後續再看到同樣的圖片時也用同樣的詞彙。

-----廣告,請繼續往下閱讀-----

結果發現,是的!使用者不但會配合另一個人的用詞方式,也會配合電腦的用詞。

即便使用者知道自己在跟電腦對話,當電腦一直用固定的詞彙描述圖中物品時,使用者的描述用詞也會配合電腦,就如同配合人一樣,用同樣的詞彙來描述物品。

但是這種用同樣詞彙的配合程度不同,當使用者知道自己在跟一個舊版本的電腦對話時,配合的程度就高於最新版本的電腦或是人類。也就是說,當我們知道電腦可能「比較笨」的時候,我們就更容易去配合它的用語。而這個效果透過很表面的知覺操弄就可以做到,就像實驗中讓使用者看到不同版本作業系統就會達到配合程度不同的效果。

不只用詞,在句子結構上也會配合語音助理

除了看字彙選擇是不是會有一致性,研究者們也發現當請使用者分別跟另一個真人、另一個發出機器音的語音助理、另一個擬人聲的語音助理對話,無論和誰對話,使用者自己的句子結構都會有配合對方的傾向。

圖/Unsplash

研究者們邀請使用者向三個不同的角色互相描述圖片中的畫面,從中我們可以發現兩個不同的描述方式:

-----廣告,請繼續往下閱讀-----
  • 左圖:「大明給小王一張卡片」=「大明把卡片給小王」;
  • 右圖:「一個藍色的圓圈」=「一個圓圈是藍色的」。

接著讓使用者分別跟三個角色輪流描述多長不同的圖片給對方聽。結果發現,如果對方一直用「A 把(物品)給 B」或是「形容詞 + 名詞」這種結構來描述圖片的話,自己後續描述圖片的方式也會趨向這個方式。

所以,無論跟自己對話的是人,或是機器音的語音助理,還是擬人聲的語音助理都有同樣的效果。

利用人們「一致性」本能,互動設計讓語音助理更好用

從我們與語音助理的互動經驗中可以發現,只要語音助理無法辨識我們說出來的內容,就無法給出符合期待的回應,所以自然語言處理(Natural language processing, NLP)的專家們持續發展語音辨識的技術。然而在新技術尚未推出之前,我們其實可以從人機互動的角度來修正語音助理的設計。

以本次回顧的系列研究的結論來說,人會隨著溝通對象而改變語言使用習慣,包含用語、句構。尤其當人認為電腦越不聰明時,配合程度越強。因此,設計師們不妨根據現有技術,先讓語音助理講出一些簡單的句子結構來開啟對話,再引導使用者也使用相似的簡單結構來回覆,而不是一定要專注在設計出能夠進行複雜對話的語音助理。

-----廣告,請繼續往下閱讀-----

例如:當我們透過 Hey, bot 喚醒語音助理後,先讓語音助理說出:「嗨,下指令」這個簡單的句子結構,進而引導使用者說出:「好,播音樂」。

從系統設計角度來看,這麼做能在一開始就讓使用者在不知不覺中說出系統比較容易辨識的指令。就像我們在跟小小孩對話的時候,當他對我們說:「我要車車~」的時候,自己也會很自然的回應:「車車給你~」。

如此一來,使用者就不會因語音助理辨識錯誤而太失望了,不是嗎?

圖/unsplash

延伸閱讀

感謝沈奕超、張元嘉提供編輯建議

參考資料

  1. Cowan, B. R., Branigan, H. P., Obregón, M., Bugis, E., & Beale, R. (2015). Voice anthropomorphism, interlocutor modeling and alignment effects on syntactic choices in human-computer dialogue. International Journal of Human-Computer Studies, 83, 27-42.
  2. Branigan, H. P., Pickering, M. J., Pearson, J., McLean, J. F., & Brown, A. (2011). The role of beliefs in lexical alignment: Evidence from dialogs with humans and computers. Cognition, 121(1), 41-57.
人機共生你我它_96
12 篇文章 ・ 3 位粉絲
由致力於人機互動研究(HCI, Human-Computer Interaction)的研究者與實務工作者所創立,我們定期發表人機互動相關文章,與讀者一起思考科技對社會生活帶來的好處與限制。

0

0
0

文字

分享

0
0
0
大腦的偷懶小撇步:注意力瞬盲
Desiring Clicks
・2013/02/07 ・1427字 ・閱讀時間約 2 分鐘 ・SR值 470 ・五年級

-----廣告,請繼續往下閱讀-----

attention-blindness-with-user-interface
Image via zigazou76, CC License.

大家有從厚重的報名資料裡面找到一個報名者的經驗嗎?或是從厚厚一疊文件裡面找出一筆想要的資訊?是不是想要快速的找到資訊,但是看了兩三遍都找不到東西,結果放慢速度,最後卻在已經瀏覽了好幾遍的地方找到想找的東西呢?

大腦的偷懶小撇步:注意力瞬盲

其實這也是一種大腦的限制,我們的注意力其實十分有限,一次只能專注在一兩種我們覺得重要的事物上。還記得我們在不注意盲視:如同保護色般的視覺效應中所提到的大猩猩實驗與自己可以嘗試的尋找紅色實驗嗎?這些都是大腦注意力限制的好例子。但是這些都只能解釋我們的看不到我們沒有在注意的東西,為什麼我們不能從大量的文件與資料中找到我們「明明就很想要」的東西呢?

這是因為我們的注意力其實有非常短暫的注意力盲視效應。所謂的注意力盲視,就是當我們從許多的資料裡面看到一個我們認識的東西的時候,大腦會突然的消耗大量的資源處理這個我們所熟識的東西,然後在後面短暫的半秒間,注意力都被剛剛那個東西所吸引了。因此,雖然我們的眼睛好像依然在掃視畫面上的資料,但其實在這短暫的時間裡面,大腦根本還沒有機會處理他們。

我們的腦袋很愛偷懶,有好多「小撇步」來減輕他工作的負擔。但這個效應也很有趣,也許大家可以自己隨便找個有很多資料的文件試試看,先決定個目標,然後快速的掃視幾遍看看能不能找到自己想找的東西。如果找不到,那麼放慢速度再找看看,當你發現了想要找的目標的時候,看看目標的前後左右,是不是有你其實很熟悉的文字或圖形比目標先搶走了你的注意力呢?

大海撈針

注意力瞬盲有許多研究被應用在文字、 閱讀與介面上。一般來說我們在放置導覽或其他資料的時候,如果資料量很大,就會很容易讓使用者找不到他們所真正要尋找的目標。舉例來說,在購物網站的導覽列上面,一次呈現大量的分類標籤,可能反而讓使用者要來回找更多次才能找到他想要找的東西:

-----廣告,請繼續往下閱讀-----

因此這個問題最近也出現了許多解決方法,其中一種就是把希望使用者第一個看到的東西用不同的顏色或背景特顯出來,這種方法的交換條件就是雖然你希望使用者看到的東西他看到了,但是他可能更容易忽略這些東西旁邊的事物

或是也可以嘗試透過分類的方法把導覽選項「摺疊」起來,除了可以大量減少需要使用者尋找的項目以外,也可以透過介面分類來幫助使用者記憶他們所尋找過的東西。

小心的使用注意力瞬盲效應所產生的結果,千萬不要不小心把重要的東西反而隱藏在瞬盲的陷阱裡。既然我們的大腦這麼愛偷懶,那麼就得由我們來幫忙他做個體貼的設計啦!

 

-----廣告,請繼續往下閱讀-----

延伸閱讀:

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

Desiring Clicks
14 篇文章 ・ 1 位粉絲
Desiring Clicks(http://dclick.cc)是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈,讓世界更美好!

0

0
0

文字

分享

0
0
0
現代生活才會出現的感動:慈母手中 LINE
Desiring Clicks
・2013/01/11 ・1341字 ・閱讀時間約 2 分鐘 ・SR值 462 ・五年級

-----廣告,請繼續往下閱讀-----

我們從沒看過自己坐小火車的樣子

有一天我去全聯買東西,先是看到門外有個看起來 60 幾歲的先生小心翼翼地端著手機,對著一個方向;好奇心驅使我順著他對著的方向瞧去,有個 4 歲的小女孩坐在投幣式小火車上,手握著方向盤,笑咪咪地看著「她的阿公」

這時正好一個十塊錢的時間到了,阿公一邊走近拿十元硬幣給她一邊說:「還沒唷還沒唷,阿公還沒準備好喔!」他站回我第一時間看到他的位子,端起手機,穩穩地把心愛孫女放到畫面的正中央,按下開始的按鍵並同時說:「好了!」,小女孩嫩嫩的小手投下硬幣,咚一聲後,投幣式小火車發出那熟悉的童謠聲響 ……。

 

阿嬤的 Skype,Status:上線

這是 12/10 那天,在 Facebook 的最新動態上看到朋友分享的照片:

按讚數不停地增加,下方的討論串更是熱絡,大家又驚又喜、七嘴八舌:我可以跟你阿嬤聊天嗎?是阿嬤自己申請的嗎?你的阿嬤好像比她的孫子聰明 XDD?我想跟阿嬤視訊!後來朋友回應說:「叔叔幫她申請帳號的,現在家裡有一支電話是專門 FOR SKYPE,打過去我阿嬤就會接,超邱的!!!」我這個台客朋友難得溫馨可愛的一面,我還真沒看過。

-----廣告,請繼續往下閱讀-----

如果上下班搭車無聊時就能跟阿嬤 Skype 一下,是多麼幸福的事呀。

 

慈母手中 LINE

「吃飯了沒」、「今天會下雨,出門帶傘」、「幫你和弟弟買了外套」、「我和你們老爸下週六跟社區要去旅遊,你們晚一週週末才回家」

我有一位從高雄來到臺北工作的朋友,他說他們一家人感情不差,聚在一起很熱鬧但就是不知道為什麼:講電話時特別容易話不投機,感到尷尬。去年農曆過完年後,他開始收到媽媽的簡訊,都是字數不多的簡短關心。他知道平常都講閩南語的媽媽,不太熟悉注音拼音,再加上手機按鍵上的符號字很小,要寫任何一小則訊息都是很吃力的。自從母親節他們兄弟合送一臺智慧型手機給媽媽後,母子們的情感有了含蓄溫暖的改變。

手機裡的手寫輸入功能完全減輕了媽媽辛苦ㄅㄆㄇ的困擾,她不但可以在晚餐準備好正等先生一起開飯時的空檔 LINE 一下,也很方便在看到新聞氣象預報時就給在外地工作及讀書的兒子們叮嚀一聲要帶雨具或外套。除此之外,我朋友覺得他媽媽最有趣的舉動是很愛用表情符號,總是讓他會心一笑,心想我怎麼從來都不知道我老媽這麼可愛。聽到這裡,在場的我們這群朋友都很羨慕,甚至嚷嚷也要幫爸媽換手機了。

比起一千三百前的母親只能一針一線地為遊子縫上滿滿的愛與不捨,生活在現代的我們真的很幸運,有好多種方式可以給予或得到關心。換句話說,現代的媽咪不必再挑燈密密縫了,取而代之的是手指在手機上比劃比劃就能透露出,母愛。

-----廣告,請繼續往下閱讀-----

 

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

延伸閱讀:

Image via Kheel Center, Cornell University, CC license.

Desiring Clicks
14 篇文章 ・ 1 位粉絲
Desiring Clicks(http://dclick.cc)是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈,讓世界更美好!