建站常識
設計模式-自動完成
2010-10-29 17:23:00
Jabob Nielsen提出的10個可用性原則中有一個原則-防止出錯(Error Prevention)。官網(wǎng)中有對這一原則的具體解釋,這里不再復述。筆者認為還有一個防止出錯的方法就是讓用戶選擇而不是輸入。在這里用戶不需要思考如何輸入,輸入是否正確,這里以常見的“自動完成”來談一下這個設計模式在當下的應用。
自動完成是一種屬于反應性界面的強大模式。典型的模式是隨著用戶在文本框的輸入,顯示一個包含匹配項的下拉列表。理想情況下,應該自動選擇最佳的匹配項。此時,用戶只需要接受匹配項或者從列表選擇其他項。
典型應用:郵箱,即時通信軟件
圖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)會根據(jù)用戶輸入的值匹配標簽中的任意部分進行提示。特別是標簽的自動關閉,語法提示都是自動完成這一設計模式的體現(xiàn),很好地提升了體驗效果。
圖3 Lotus Note v8.0 IBM Rational Application Developer
圖4 中這里說明普通的匹配列表如何做優(yōu)化和引導。匹配列表也可以提供一些使用說明和額外的相關信息。
1. 在列表中用灰色字體提供了使用說明;
2. 在有些匹配項后提供了類型(computer science, blog)等,這樣就更方便地進行精準搜索和信息歸類;
3. 提供了網(wǎng)頁搜索功能,在沒有合適的匹配內(nèi)容時,給予用戶更大的搜索范圍;
4. 給予用戶控制,用戶可以隱藏不符合預期的內(nèi)容。
圖4 IBM w3 portal
自動完成這個設計模式除了在簡單的文本輸入框中有應用還可以使用在其他環(huán)境中。圖5說明了利用自動完成去指定對應的屬性。一旦從列表中選擇了屬性,相對應的值也同時會被設定。這里將屬性與值配對在大型軟件開發(fā)的協(xié)同工作中有特別的意義,保證了輸出質(zhì)量的統(tǒng)一和規(guī)范。設計和開發(fā)只需要去調(diào)用就可以,大大減少了溝通成本。
圖5 IBM Fringe
圖6自動完成與標簽組合,很顯然只會匹配那些以標簽名開頭的項。在一些企業(yè)內(nèi)部的SNS應用,自動搜索這一個模式可以與很多Web 2.0的元素組合,提高設計體驗。
圖6 Lotus Connections
選擇
在郵箱的自動匹配環(huán)境中,按Tab就可以把匹配的聯(lián)系人輸入到文本框中。因為郵箱中的TAB鍵支持選定和改變焦點的作用。在普通的即時通訊軟件中一般使用按Enter進行選中并直接打開對話框。如果是企業(yè)級的即時通訊軟件建議支持Tab進行多人選擇。
什么時候不用
1. 一些涉及到安全的應用最好不要使用“自動完成”,例如在輸入用戶名、密碼或者其他敏感信息的時候;
2. 當存在大量的匹配的內(nèi)容,但沒有合理的依據(jù)去歸類;
3. 系統(tǒng)不能基于用戶的輸入即時更新匹配的內(nèi)容;
4. 自動選擇不能用于有固定匹配項的場景,例如最好使用下拉列表而不是自動完成讓用戶選擇洲名。
無障礙設計
1. 當頁面進行刷新的時候,屏幕閱讀器會重復閱讀。所以在更新匹配項的時候頁面不能進行刷新。
2. 屏幕閱讀器是按照從上到下的順序閱讀已載入的頁面。因此在頁面載入完成后,出現(xiàn)的匹配項需要通知屏幕閱讀器,并且在頁面的這一部分要給一個快速入口。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2009-10-29 18:26:00] 關于bing的交互設計
- [2009-07-04 18:27:00] 交互設計師修煉之“變色龍”
- [2009-07-20 08:05:00] “左行右立”的交互設計
- [2010-03-18 08:41:00] 什么是交互設計
- [2007-05-24 17:06:00] 釋疑交互設計師的幾個問題
- [2009-12-29 17:24:00] Web 交互設計“灰色”的8類應用
- [2009-06-19 08:15:00] 用戶不會記得點了多少下
- [2010-05-11 10:55:00] 設計提升滿意度
- [2010-11-11 08:22:00] 基礎控件和交互設計元素的層級
- [2009-12-16 17:45:00] 交互設計模式(四)-Spatial Memory(空間記憶)
- [2009-05-08 08:11:00] 交互設計:不是什么和是什么
- [2010-11-25 08:34:00] 兼容心理模型和系統(tǒng)模型的交互設計
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
營銷型網(wǎng)站 H5 微信小程序 青島做網(wǎng)站多少錢 官網(wǎng)建設 響應式設計 微信開發(fā) 網(wǎng)站SEO 網(wǎng)站設計 網(wǎng)站設計趨勢 互聯(lián)網(wǎng) 網(wǎng)站制作 微官網(wǎng)帶來的好處 企業(yè)網(wǎng)站為什么要備案 網(wǎng)站改版 IT資訊 青島高端網(wǎng)站建設 青島網(wǎng)站SEO 營銷型網(wǎng)站建設 青島高端網(wǎng)站設計公司哪家好 交互設計 空白和簡潔的設計 青島網(wǎng)站建設公司哪家好 搜索引擎蜘蛛 青島網(wǎng)站營銷 企業(yè)建站 網(wǎng)站設計資訊 青島輪胎網(wǎng)站設計公司 網(wǎng)站的速度 html和css