Jabob Nielsen提出的10個可用性原則中有一個原則-防止出錯(Error Prevention)。官網中有對這一原則的具體解釋,這里不再復述。筆者認為還有一個防止出錯的方法就是讓用戶選擇而不是輸入。在這里用戶不需要思考如何輸入,輸入是否正確,這里以常見的“自動完成”來談一下這個設計模式在當下的應用。
自動完成是一種屬于反應性界面的強大模式。典型的模式是隨著用戶在文本框的輸入,顯示一個包含匹配項的下拉列表。理想情況下,應該自動選擇最佳的匹配項。此時,用戶只需要接受匹配項或者從列表選擇其他項。
典型應用:郵箱,即時通信軟件

圖1 Sametime 7.5.1
好,現(xiàn)在我們來思考下這簡單的交互中,有哪些需要在交互設計中需要注意的地方。筆者從輸入、匹配、選擇這三個方面進行分析。
輸入
用戶輸入時,需要等待多少時間反饋?對自動完成而言,用戶每輸入一個字符就需要反饋。不過,如果用戶輸入速度很快,在輸入幾個字符給出反饋建議也是可以的,同時這里也需要考慮到性能問題。
匹配
如圖2對于IBM的Note而言,用戶輸入的字符可以與聯(lián)系人的名字或者電子郵件地址的任意部分匹配,突出顯示匹配的聯(lián)系人,同時也以粗體顯示已輸入的字符。這樣可以清楚地告知用戶選中的聯(lián)系人以及所匹配的字符,進行拼寫檢查,防止出錯。
同時支持鍵盤操作,上、下方向鍵可以用來選擇匹配的項。

圖2 Lotus Note v8.0
如圖3在一些集成開發(fā)環(huán)境中,系統(tǒng)會從規(guī)定的參數(shù)中基于用戶的輸入提供一些匹配的關鍵字。在開發(fā)中使用這種設計模式,幫助程序員大大地提高效率。從認知上由系統(tǒng)給出提示減輕了記憶負擔,而操作上程序員只需要選擇不需要輸入對應代碼減少了操作,降低了出錯的可能性。在集成開發(fā)環(huán)境中,系統(tǒng)會根據用戶輸入的值匹配標簽中的任意部分進行提示。特別是標簽的自動關閉,語法提示都是自動完成這一設計模式的體現(xiàn),很好地提升了體驗效果。

圖3 Lotus Note v8.0 IBM Rational Application Developer
下圖中這里說明普通的匹配列表如何做優(yōu)化和引導。匹配列表也可以提供一些使用說明和額外的相關信息。
1. 在列表中用灰色字體提供了使用說明;
2. 在有些匹配項后提供了類型(computer science, blog)等,這樣就更方便地進行精準搜索和信息歸類;
3. 提供了網頁搜索功能,在沒有合適的匹配內容時,給予用戶更大的搜索范圍;
4. 給予用戶控制,用戶可以隱藏不符合預期的內容。

圖4 IBM w3 portal
自動完成這個設計模式除了在簡單的文本輸入框中有應用還可以使用在其他環(huán)境中。圖5說明了利用自動完成去指定對應的屬性。一旦從列表中選擇了屬性,相對應的值也同時會被設定。這里將屬性與值配對在大型軟件開發(fā)的協(xié)同工作中有特別的意義,保證了輸出質量的統(tǒng)一和規(guī)范。設計和開發(fā)只需要去調用就可以,大大減少了溝通成本。

圖5 IBM Fringe
圖6自動完成與標簽組合,很顯然只會匹配那些以標簽名開頭的項。在一些企業(yè)內部的SNS應用,自動搜索這一個模式可以與很多Web 2.0的元素組合,提高設計體驗。

圖6 Lotus Connections
選擇
在郵箱的自動匹配環(huán)境中,按Tab就可以把匹配的聯(lián)系人輸入到文本框中。因為郵箱中的TAB鍵支持選定和改變焦點的作用。在普通的即時通訊軟件中一般使用按Enter進行選中并直接打開對話框。如果是企業(yè)級的即時通訊軟件建議支持Tab進行多人選擇。
什么時候不用
1. 一些涉及到安全的應用最好不要使用“自動完成”,例如在輸入用戶名、密碼或者其他敏感信息的時候;
2. 當存在大量的匹配的內容,但沒有合理的依據去歸類;
3. 系統(tǒng)不能基于用戶的輸入即時更新匹配的內容;
4. 自動選擇不能用于有固定匹配項的場景,例如最好使用下拉列表而不是自動完成讓用戶選擇洲名。
無障礙設計
1. 當頁面進行刷新的時候,屏幕閱讀器會重復閱讀。所以在更新匹配項的時候頁面不能進行刷新。
2. 屏幕閱讀器是按照從上到下的順序閱讀已載入的頁面。因此在頁面載入完成后,出現(xiàn)的匹配項需要通知屏幕閱讀器,并且在頁面的這一部分要給一個快速入口。
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優(yōu)秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節(jié)教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節(jié)把握2010-09-01
總結交互組件創(chuàng)新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
簡單6步幫UI設計師快速高效完成切圖
相關文章2312016-09-09
資深設計師教您如何快速完成設計布局
相關文章2782015-12-18
詳細解析12306網站用戶體驗分析
相關文章2172015-01-21
淺談讓用戶更高效地完成表單填寫
相關文章1262014-07-19
教你不用PS也能完成網站制作
相關文章6502014-06-16
詳細解析7個漂亮的文章頭部介紹效果
相關文章2332014-05-27
詳細解析如何排放表單標簽介紹的位置
相關文章2222014-05-22
詳解完成簡單網頁的設計上傳和發(fā)布
相關文章2532013-12-03
