文本框中自動完成的應(yīng)用

2013-10-18    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   sillybuy.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

來源:http://sudasuta.com/cooler-photo.html

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

 

近來積累了一些關(guān)于自動完成的應(yīng)用方式,今天將其擴展延伸并整理了些常見的應(yīng)用方法供大家一起學(xué)習(xí)。

“自動完成”的設(shè)計思路源自于Poka-yoka預(yù)防機制。是一種自動糾偏方法,在生產(chǎn)中用以防止人為失誤發(fā)展成為最終產(chǎn)品缺陷。

網(wǎng)頁設(shè)計中自動完成在輸入框的應(yīng)用已很廣泛,屬于反應(yīng)性界面的強大模式。能夠嘗試猜測用戶輸入的文字,并且動態(tài)的搜索出適配的結(jié)果并推薦給用戶,輔助完成輸入。目的是避免用戶打錯字,起到提示作用,智能預(yù)測用戶心理期望,從而確保他們的搜索更有效率。

優(yōu)點:
“自動完成”輸入框能預(yù)防錯誤。用戶經(jīng)常在輸入幾個字的情況下就能在推薦列表中發(fā)現(xiàn)正確的名稱,而不會因為筆誤找不到適配的搜索結(jié)果。

防止用戶為已經(jīng)在存在于數(shù)據(jù)中的名稱創(chuàng)建多條數(shù)據(jù)庫記錄。

這種輸入框列出的搜索結(jié)果不會分頁。因為搜索結(jié)果是隨著輸入的文字增加而變化的,所以就在當前頁面中。因此完全沒有必要點開“下一頁”,查看其余的結(jié)果。

這個功能的靈活性使用戶更加信任這個網(wǎng)站,使事情變得簡單可依賴。雖然這個功能有很多值得夸贊的地方,但它也同樣有一些局限性。

 

局限性:
當用戶搜索一些小范圍的數(shù)據(jù)時,例如某個學(xué)科的分支目錄,他會很有用,但是對于在google和yahoo 這樣的網(wǎng)站中進行廣域搜索的用戶來說,并不一定有用。

首先,那些盯著鍵盤輸入文字的用戶通常注意不到推薦列表,雖然已經(jīng)把一切都送到眼前,他們還是看不到。有些人偶爾會在輸入完想要的內(nèi)容后抬頭才發(fā)現(xiàn)推薦列表,但他們往往都是敲了回車鍵才抬頭,所以根本沒看清楚列表里面是什么。

其次,用戶會因為推薦而放棄自己先前的主張,但其實他們自己想輸入的文字很可能比推薦的詞匯更加有效。原因是用戶認為系統(tǒng)推薦的將會產(chǎn)生更有效的結(jié)果,也有可能他們認為這些搜索詞是開發(fā)者希望他們使用的詞匯。

“冷啟動”是個問題,也即最初可能沒有任何用戶行為數(shù)據(jù)。這時候需要結(jié)合熱點挖掘的方式給用戶一個最初的感受,不過需要很好的把控質(zhì)量,并進行灰度放量,AB test。

 

suggest的一些質(zhì)量評測點:

1. 垃圾詞過濾。比如帶無意義符號的查詢串要進行處理。
2. 意義重復(fù)的query,比如“天上人間照片”和“天上人間的照片”屬于同意。
3. 在去重復(fù)基礎(chǔ)上考慮多樣性。
4. 匹配模式,前綴匹配、后綴匹配。
5. 中英文(拼音)混合串的質(zhì)量。
6. 錯別字智能糾錯。
7. 政治、黃詞、零結(jié)果等的過濾。
8. 新聞類檢索需要引入時新性。
9. 如果有類似阿拉丁的直達區(qū),考慮直達區(qū)策略以及展示樣式。
10. 數(shù)據(jù)方面主要看CTR。但是要注意,用戶只要輸入query,就會調(diào)用suggestion,多一個查詢詞,suggest就又檢索一次,如果以單純的檢索量做分母是不合適的。應(yīng)該以一次完整的檢索行為作為分母,以點擊提示詞的次數(shù)為分子。

 

Google suggest是Google搜索引擎最重要的人性化服務(wù)之一,即在搜索欄輸入框內(nèi)使用了此功能,使用戶在輸入搜索關(guān)鍵詞時能及時調(diào)整關(guān)鍵詞推薦列表,以 獲得最需要的搜索結(jié)果。其中通過各種搜索請求的流行度來確定這些預(yù)測推薦請求的排列順序等。目前中國的版本已經(jīng)沒有這個功能了。

 

百度

 

Quora

 

 

A fancy Apple.com-style search suggestion (演示地址)

這是一個使用HTML/CSS,jQuery,MySQL PHP等技術(shù)實現(xiàn)的Search Suggestion。

 

TextboxList (演示地址)

這個Mootools插件能夠?qū)⑵胀ǖ奈谋据斎肟?,轉(zhuǎn)換成擁有Autocomplete功能風(fēng)格類似于Facebook的文本輸入框。支持任意類型的數(shù)據(jù)源(XHR、Json)。

 

Tokenizing Autocomplete Text Entry (演示地址)

一個jQuery插件能夠讓用戶從一個預(yù)設(shè)的列表中,選擇多個項目。并提供Autocompletion功能來幫助用戶搜索項目。支持通過CSS控制和定制布局。能夠緩存搜索結(jié)果減少服務(wù)器加載次數(shù)。支持用鼠標或鍵盤來選擇項目。提供平滑的動畫數(shù)據(jù)加載效果。

 

有道

有道為suggest添加三欄顯示、網(wǎng)頁預(yù)覽等功能,幫助用戶更快的找到答案。在優(yōu)酷等視頻網(wǎng)站中也有此功能。

 

優(yōu)酷

 

參考文獻

<瞬間之美>

http://paranimage.com/33-javascript-autocomplete-scripts/

http://www.zhihu.com/question/19571974

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔