Jabob Nielsen提出的10個可用性原則中有一個原則-防止出錯（Error Prevention）。官網中有對這一原則的具體解釋，這裏不再復述。筆者認為還有一個防止出錯的方法就是讓用戶選擇而不是輸入。在這裏用戶不需要思考 如何輸入，輸入是否正確，這裏以常見的“自動完成”來談一下這個設計模式在當下的應用。
自動完成是一種屬於反應性介面的強大模式。典型的 網頁設計 模式是隨著用戶在文本框的輸入，顯示一個包含搭配項的下拉清單。理想情況下，應該自動選擇最佳的搭配項。此時，用戶只需要接受搭配項或者從列表選擇其他項。
典型應用：郵箱，即時通信軟體
好，現在我們來思考下這簡單的交互中，有哪些需要在交互設計中需要注意網頁設計模式的地方。筆者從輸入、搭配、選擇這三個方面進行分析。
輸入
用戶輸入時，需要等待多少時間回饋？對自動完成而言，用戶每輸入一個字元就需要回饋。不過，如果用戶輸入速度很快，在輸入幾個字元給出回饋建議也是可以的，同時這裏也需要考慮到網頁設計性能問題。
搭配
對於IBM的Note而言，用戶輸入的字元可以與聯繫人的名字或者電子郵件位址的任意部分搭配，突出顯示搭配的聯繫人，同時也以粗體顯示已輸入的字元。這樣可以清楚地告知用戶選中的聯繫人以及所搭配的字元，進行拼寫檢查，防止出錯。
同時支援鍵盤操作，上、下方向鍵可以用來選擇搭配的項。
在一些集成開發環境中，系統會從規定的參數中基於用戶的輸入提供一些搭配的關鍵字。在開發中使用這種網頁設計模式，幫助 程式設計 師大大地提高效率。從認知上由系統給出提示減輕了記憶負擔，而操作上程式師只需要選擇不需要輸入對應代碼減少了操作，降低了出錯的可能性。在集成開發環境 中，系統會根據用戶輸入的值搭配標籤中的任意部分進行提示。特別是標籤的自動關閉，語法提示都是自動完成這一設計模式的體現，很好地提升了體驗效果。
這裏說明普通的搭配列表如何做優化和引導。搭配列表也可以提供一些使用說明和額外的相關資訊。
1.在列表中用灰色字體提供了使用說明；
2.在有些搭配項後提供了類型(computer science, blog)等，這樣就更方便地進行精准搜尋和資訊歸類；
3.網頁設計提供了搜尋功能，在沒有合適的搭配內容時，給予用戶更大的搜尋範圍；
4.給予用戶控制，用戶可以隱藏不符合預期的內容。
自動完成這個網頁設計模式除了在簡單的文本輸入框中有應用還可以使用在其他環境中。說明了利用自動完成去指定對應的屬性。一旦從列表中選擇了屬性，相對應 的值也同時會被設定。這裏將屬性與值配對在大型軟體發展的協同工作中有特別的意義，保證了輸出品質的統一和規範。設計和開發只需要去調用就可以，大大減少 了溝通成本。
自動完成與標籤組合，很顯然只會搭配那些以標籤名開頭的項。在一些企業內部的SNS應用，自動搜尋這一個模式可以與很多Web 2.0的元素組合，提高設計體驗。
選擇
在郵箱的自動搭配環境中，按Tab就可以把搭配的聯繫人輸入到文本框中。因為郵箱中的TAB鍵支持選定和改變焦點的作用。在普通的即時通訊軟體中一般使用按Enter進行選中並直接打開對話方塊。如果是企業級的即時通訊軟體建議支援Tab進行多人選擇。
什麼時候不用
1.一些涉及到安全的應用最好不要使用“自動完成”，例如在輸入用戶名、密碼或者其他敏感資訊的時候；
2.當存在大量的搭配的內容，但沒有合理的依據去歸類；
3.系統不能基於用戶的輸入即時更新搭配的內容；
4.自動選擇不能用於有固定搭配項的場景，例如最好使用下拉清單而不是自動完成讓用戶選擇名稱。
無障礙設計
1.當頁面進行刷新的時候，螢幕閱讀器會重複閱讀。所以在更新搭配項的時候頁面不能進行刷新。
2.螢幕閱讀器是按照從上到下的順序閱讀已載入的頁面。因此在頁面載入完成後，出現的搭配項需要通知螢幕閱讀器，並且在頁面的這一部分要給一個快速入口。
轉貼來源：網頁設計部落格
http://www.piece2ec.com.tw/news.asp?ID=1875
參考文獻：
1.伯德‧史密特（Bernd H. Schmitt）著、王育英譯（2000）。體驗行銷。台北：經典傳訊。
2.約瑟夫‧派恩（B. Joseph Pine II）& 詹姆斯‧吉爾摩（James H. Gilmore）、夏業良譯（2003）。體驗經濟時代。台北：經濟新潮社。
3.賴逸婷（2007）。網站體驗品質評估之研究。國立雲林科技大學視覺傳達設計研究所碩士論文，未出版。
留言列表
