TIPS-Design A Mouseless Web UI

經歷過DOS->Windows轉換的老人家們應該不會忘記第一次踏著滑鼠在視窗上衝浪的莫名感動，一樣是打電腦，用滑滑點點取代一長串按鍵，感覺就是不一樣，一瞬間，人生彷彿由黑白變彩色~~~

隨著GUI視窗化介面的普及，大部分的開發者開始認定充分使用滑鼠才是最人性化的界面設計方式，但是世界上有一群人持著不一樣的看法。

滑鼠操作的動作範圍較小，2D空間定位的直覺性是鍵盤無從取代的，但這仍無法改變我們必須依賴鍵盤輸入文字的事實。當你被要求每天輸入幾百上千筆相似的資料，若輸入幾個字元就要滑一下滑鼠，意味著每幾秒鐘需轉動手肘將手掌從鍵盤移駕到滑鼠背上，接著得眼睛盯著螢幕做手眼協調練習，轉轉手腕，動動手指後再回到鍵盤上。一天下來，等同於手臂做了上萬次伸展運動，除了累積職業傷病給付的領取資格外，依據工業工程(很巧地，工工也叫IE，沒想到二技唸工管的我，在這個議題上，居然有在電腦科班大軍面前"裝懂"的一天，哈!)裡的動作經濟原則(Motion Economy Principle By Ralph M. Barnes)，三級動作(指牽動手肘、手腕、手指的動作)絕對比一、二級動作不利於工作效率。

換句話說，對於重度的Key In使用者來說，Keyboard動作肯定無法避免(總不能用螢幕小鍵盤去點出所有的字母吧?)，所以設法讓所有的操作以Keyboard完成，減少使用者切換滑鼠/鍵盤的次數，對於降低使用者的肉體疲勞與精神折磨(可以閉著眼睛敲Key解決，絕對比盯著螢幕滑滑鼠來得輕鬆)及提高使用者操作流暢度，都有神奇的改善效果。

除了全程使用Keyboard外，還有一個設計重點: 務必減少使用者必須按鍵的次數，可以敲兩個鍵做到的事，就不要逼使用按三下才完成。這些操作介面上的改善，其實都適用工作研究中的諸項原理，誰說拿著碼錶計時法只能用來提升工廠作業員的工作流暢度?

以下提供幾則設計Mouseless Web UI的小技巧:

1. 善用tabindex屬性
   幾乎各Input都有這個屬性，使用者在輸入完一個欄位後，按下Tab鍵，就將焦點移到下一個要輸入的欄位上，讓使用者不要花時間自行切換焦點，可以減少可觀的按鍵次數。
2. 焦點快速鍵
   除了tabindex，若使用者想隨機跳到某個欄位輸入資料，<input>還有個accesskey屬性，<input type="text" accesskey="f">代表使用者在IE按下Alt-F，在FireFox按下Alt-Shift-F，焦點就會立刻跳到該欄位上。
   Radio Button/Checkbox也支援accesskey，按下後可直接checked!
3. Radio Button & Dropdown快速鍵
   當焦點移在Radio Button(<input type="radio">)或Dropdown(<select>)時，Browser都支援按上、下、左、右鍵切換選項。Dropdown時，按下字母鍵還可快速跳到該字母開頭的Option上。
4. 按Enter鍵送出表單
   ASP.NET 2.0新增了DefaultButton，可以讓使用者按Enter時自動Submit表單，詳情請見先前的KB。
5. 以AutoComplete取代冗長的Dropdown List
   當選項很多時，使用者必須使用下捲在Dropdown的選項大海中查找，我個人的建議是利用AutoComplete的AJAX技巧取代Dropdown。