2012年7月25日 星期三

眼球追蹤+熱點圖研究,Windows 8 的觸控鍵盤是這樣設計出來的!

source: T客邦 L.I.S.G 發表於 2012年7月24日 20:51
http://www.techbang.com/posts/10162-how-to-design-a-windows-8-touch-virtual-keyboard-user-experience-map

Af44dbc05aa14c7b88887549226affc6

隨著 Windows 8 正式版上市時間愈來愈近,微軟也陸續公佈了一些 Windows 8 的設計想法,其中怎麼在觸控裝置上(例如平板電腦)也能有效率的打字,會是很重要的課題。使用者在 Windows 8 觸控裝置上也能有不錯的打字速度,才會讓人們覺得該產品是生活上或是工作上的好伙伴。

在平板電腦或其他觸控電腦上的打字體驗和使用實體鍵盤有很大的不同。從 Windows XP SP1 開始,Windows 提供了螢幕上的可觸控鍵盤,但只不過是實體鍵盤的延伸而已,老實說很難用。而在 Windows 8 上面必須有全新的思考與設計,以符合使用者的需求。
為什麼 Windows 8 的虛擬觸控鍵盤會是這個樣子?其中經過什麼樣的使用者研究?有什麼考量?微軟的 Kip Knox 寫了一篇文章跟大家介紹了一些有趣的過程,而且該文章正是用 Windows 8 觸控鍵盤來寫的。
Kip Knox 表示,當設計團隊開始進行文字輸入的設計前,並沒有先入為主的想法,只不過遵循了一些原則,希望使用者可以:
  • 快速的輸入文字,並且能合理的接近他們使用實體鍵盤的速度。
  • 避免打錯字,而且有錯時可以迅速修正。
  • 能夠以舒服的姿勢來打字。
這些原則並沒有明確提到「鍵盤」這件事,只是很廣泛的想想可能的文字輸入方式,後來發現了在能想到的可能性裡面,包括手寫和語音,「鍵盤」還是最能符合上面的原則,所以設計團隊以「最佳的」觸控鍵盤為目標,開始進行研究和實作。

舒適度和姿勢的最佳化

平板電腦上的觸控鍵盤有許多形式,所以設計團隊先從研究使用者與觸控螢幕如何互動開始,發現有3種最常見的姿勢,下圖從左到右分別為:
  • 一隻手拿平板,用另一隻手輸入。
  • 把平板放在大腿上或桌上,用兩隻手輸入。
  • 用兩隻手拿著平板電腦,而兩隻姆指來負責打字。
Windows 8 的虛擬鍵盤考慮到這些使用方式並進行優化,標準的鍵盤佈局主要是為了多指輸入而設計,不過用一隻手來輸入也很好用。另外也有所謂的「姆指鍵盤」佈局,就是為了喜歡用姆指輸入的使用者而做的,而且鍵盤可以調整大小,以符合不同的手指長度。為什麼需要至少兩種鍵盤佈局?在研究姿勢的過程中,設計團隊發現使用者是會改變姿勢的,所以要提供不同的鍵盤佈局來因應這樣的變化。
關於使用姆指來打字也做了進一步的研究,設計團隊找來手指長短不同的一群人做研究,姆指的使用在什麼距離內比較舒服、最遠可以伸到什麼地方、伸到什麼區域會不舒服。這些使用者所操作的平板電腦裝上了感測器,可以記錄按鍵位置,最後形了一份熱點圖如下:
綠色區域表示舒服、黃色區域是要稍微伸一下姆指,而最遠的紅色區域表示不舒服,這些資訊可以用來協助觸控鍵盤的佈局如何最佳化。

在玻璃上打字的偏誤問題,怎麼解決?

在了解了一般的打字姿勢或手指的運用後,接下來的挑戰是,觸控螢幕是玻璃材質,會有一些跟實體鍵盤不同的特性。以實體鍵盤來說,鍵盤的 F、J 有突起點,讓雙手可以很快地放到正確位置(以練過英打的人來說);按鍵顆顆分明,如果按到了兩顆按鍵之間會有感覺;打字時會有回饋感或是聲音,使用者能知道確實按了某個鍵。
這樣的回饋是很重要的使用體驗,所以設計團隊覺得也要讓觸控鍵盤能提供回饋,另外也得解決虛擬按鍵並非顆顆分明的狀況。不過,觸控鍵盤也有實體鍵盤所沒有的特色,所以要把這些特性突顯出來。
  • 觸控鍵盤的回饋包括:按鍵會變色、也能發出按鍵音。像是振動也算是回饋,但經過使用者研究後,發現一直振動令人困擾,讓打字變成活受罪,所以沒有採用。
  • 在輸入密碼時按鍵會變色反而不太安全,在旁邊偷看的人會知道使用者按了那些鍵。
  • 在經過使用者測試後,發現聲音的回饋是個讓使用者有信任感的方式。
在進一步做眼球追蹤後,形成一份熱點圖(如下),發現當使用者愈來愈熟悉在觸控鍵盤上打字,花在看編輯區的時間會變多(紅色部份表示眼球關注的時間比較長),看虛擬鍵盤的時間變少,這些是使用者發展出來的第三種回饋:看著自己打出來的字。
雖然回饋的需求獲得某種程度的滿足,在玻璃上打字還有一個明顯問題是,沒有辦法像實體按鍵一樣,你按到 S 的邊緣,系統會知道你要按的是 S 而不是隔壁的 A,但同樣的狀況發生在虛擬按鍵的邊緣,到底是想按那個鍵就很難判斷了,如下圖所示,使用者想按的鍵跟實際按的位置經常有落差。
所以在 Windows 8 裡面有所謂的「touch model」來解決這個問題:
  1. 實際收集了許多人的打字習慣來累積位置「偏差」資訊。當使用者心裡想按 A,但實際按在 A S 中間,在某個距離以內,系統還是會知道使用者想按的是 A 鍵。
  2. 運用詞彙表來自動修正你按錯的按鍵,例如你先打了 t、h 兩個字母,第3個字母應該是 e,但使用者按到 e、w 中間,而且比較靠近 w,但系統還是會輸出 e 字母。
▲ 正在進行眼球追蹤的受測人員。
▲ 從這兩張熱點圖來看,左圖表示剛開始打字的前幾分鐘還會看一下鍵盤,所以鍵盤區還有代表時間比較長的黃色或紅色;右圖表示隨著打字時間拉長,使用者看鍵盤的時間愈來愈少,而看螢幕上輸入區的時間愈來愈多。


進入實際的鍵盤佈局設計

在了解使用者打字習慣和提供自動修正機制後,接下來要決定鍵盤的佈局:什麼按鍵要擺那裡,預設要擺多少按鍵,可以由以下幾個研究結果來決定。
  1. 人們已經很習慣用實體鍵盤打字,不要去打破已養成的習慣。
  2. 按鍵大小已有最佳的尺寸範圍可循,Windows 8 把觸控的字母按鍵設計為 19mm,跟許多實體按鍵一樣。
  3. 同時存在的按鍵愈多,就愈容易打錯。
  4. 虛擬鍵盤不能超過螢幕的一半,佔據一半還算可行,因為使用者主要還是在看自己正在輸入的字所出現的地方,而不會去看離目標位置太遠的區域。
  5. 有些字母、符號的使用頻率比較高。
  6. 在不干擾既有習慣的情況下,人們學習新事物的速度還蠻快的,所以虛擬鍵盤可以有一些特別的設計。
總歸一句話,對打字效率有利的就採用、拖累打字效率的就得捨棄。

先來看個例子:數字鍵的佈局實作

Windows 7 裡面的虛擬鍵盤是有一列數字鍵的,如下圖所示,整個看來跟實體鍵盤很像。
但是,把數字鍵、字母鍵放在一起的問題很大,因為按鍵很多,同時不能讓每顆按鍵的尺寸變小,以 10 吋螢幕來說,會讓鍵盤的大小超過螢幕的一半,違反了前面提到的設計原則;如果為了不讓鍵盤過大而讓按鍵變小的話,就會提高按錯的機率。
最後把數字鍵集中在右邊而不是上方,有3個理由:
  • 使用者傾向於一次會輸入好幾個數字。
  • 九宮格排列方式讓數字間的距離不會太遠。
  • 相較於橫列形式,這樣的排列方式會讓打字速度加快。
而且你發現了嗎?數字123是在第一排喔,不像實體鍵盤是擺在第3排,這樣的排列方式跟手機數字鍵、ATM、遙控器是相同的,而人們已經很習慣數字是這樣排列的。
▲ 目前 Windows 8 的數字鍵跟字母鍵不在同一個頁面。
經過許多研究之後,目前 Windows 8 的觸控鍵盤長成這個樣子:
  • 到退鍵:很常用的按鍵,放到跟實體鍵盤一樣的位置。
  • Ctrl:為了便於複製、剪下、貼上這些操作,還是放在 x、c、v 旁邊。
  • 空白鍵:還是要很大,不然很容易按錯。
  • 表情符號鍵:在文章裡使用表情符號的人愈來愈多,所以安排了表情符號鍵,這也是虛擬鍵盤的好處,按個鍵就可以切換到不同的按鍵類別頁面。
  • 當你用一手按著「&123」鍵不放,會暫時切換成符號、數字頁面,可以用另一隻手操作。
當然,也是可以切換到跟實體鍵盤一樣的標準鍵盤佈局,因為有些軟體或操作動作還是會用到的。從以上的說明來看,Windows 8 的虛擬鍵盤的確下了不少工夫在做最佳化,至於實際使用的感覺如何,就要等更多人實際玩過裝上 Windows 8 的觸控裝置後,才能見真章了。
資料來源:Building Windows 8




沒有留言: