文本框中自動完成的應用

近來積累了一些關於自動完成的應用方式,今天將其擴展延伸並整理了些常見的應用方法供大家一起學習。

“自動完成”的設計思路源自於Poka-yoka預防機制。是一種自動糾偏方法,在生產中用以防止人爲失誤發展成爲最終產品缺陷。

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

優點:
“自動完成”輸入框能預防錯誤。用戶經常在輸入幾個字的情況下就能在推薦列表中發現正確的名稱,而不會因爲筆誤找不到適配的搜索結果。

防止用戶爲已經在存在於數據中的名稱創建多條數據庫記錄。

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

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

侷限性:
當用戶搜索一些小範圍的數據時,例如某個學科的分支目錄,他會很有用,但是對於在google和yahoo 這樣的網站中進行廣域搜索的用戶來說,並不一定有用。

首先,那些盯着鍵盤輸入文字的用戶通常注意不到推薦列表,雖然已經把一切都送到眼前,他們還是看不到。有些人偶爾會在輸入完想要的內容後擡頭才發現推薦列表,但他們往往都是敲了回車鍵才擡頭,所以根本沒看清楚列表裏面是什麼。

其次,用戶會因爲推薦而放棄自己先前的主張,但其實他們自己想輸入的文字很可能比推薦的詞彙更加有效。原因是用戶認爲系統推薦的將會產生更有效的結果,也有可能他們認爲這些搜索詞是開發者希望他們使用的詞彙。

“冷啓動”是個問題,也即最初可能沒有任何用戶行爲數據。這時候需要結合熱點挖掘的方式給用戶一個最初的感受,不過需要很好的把控質量,並進行灰度放量,AB test。

suggest的一些質量評測點:

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

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

百度

Quora

 

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

這是一個使用HTML/CSS,jQuery,MySQL PHP等技術實現的Search Suggestion。

TextboxList (演示地址)

這個Mootools插件能夠將普通的文本輸入框,轉換成擁有Autocomplete功能風格類似於Facebook的文本輸入框。支持任意類型的數據源(XHR、Json)。

Tokenizing Autocomplete Text Entry (演示地址)

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

有道

有道爲suggest添加三欄顯示、網頁預覽等功能,幫助用戶更快的找到答案。在優酷等視頻網站中也有此功能。

優酷

參考文獻

<瞬間之美>

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章