2010-07-26 49 views
9

我讀過某處(不記得/找到哪裏)關於網頁可用性的文章,描述何時使用下拉菜單以及何時使用自動填充字段。自動完成與下拉。何時使用?

基本上,文章說人腦不能存儲更多,然後提供最後五個選項選擇。

例如,在個人資料表單中,當前有職業,系統給了你一堆選項,當你閱讀第六個選項時,你的大腦不會再記得第一個選項。這個例子是使用自動填充字段的好地方,用戶輸入他認爲是他的職業的東西,然後從過濾的幾個選項中選擇更好的。

我想聽聽您對此主題的看法。

什麼時候應該使用下拉式選項,何時使用自動填充字段?

+1

當你說「組合框」,我懷疑你真的是一個下拉列表。組合框允許從列表中進行選擇,並允許自由形式的文本輸入 - 這就是爲什麼它被稱爲「組合」框。請參閱http://en.wikipedia。org/wiki/Combo_box – 2010-07-27 02:42:48

+0

是的,沒錯。編輯。 Tks – robertokl 2010-07-27 15:27:49

回答

8

對於有限的列表,請不要使用自動填充編輯框或組合框,而要使用列表框,其中所有值一次都可見。對於有限的列表,特別是靜態內容多達約8項,這佔用了不動產,但向用戶提供了更好的即時概覽。

對於小於5項的RadioGroup中或複選框組(可選擇多個)也可以是較好的。

對於其內容是動態的列表(如聯繫人列表),(滾動)列表框或組合框是合適的,因爲您永遠不知道列表中有多少項目。爲了保持可管理性,您需要允許進行某種過濾和/或自動完成。

自動完成通常會遭遇以下事實:用戶類型需要從頭開始匹配字符串。我討厭那些除了當他們習慣於根據我之前在那個(類型)字段中輸入的值完成一個值的時候。例如。現在瀏覽器在填寫在線表單時提供了什麼。

允許用戶開始在組合框鍵入通常遭受相同的缺點。但不可否認的是,如果過濾基於「like%abc%」而不是「以abc開頭」,則不需要過濾。

當處理可能有許多類似項目的列表時,我非常喜歡GMail的「To 「字段處理它。你開始輸入對方的姓名或電子郵件地址的任何部分和Gmail將下拉列表中列出的所有名字電子郵件地址包含字符至今在其中隨時隨地您鍵入的聯繫人。使用上下鍵更改下拉列表中的選擇(不會影響您輸入的內容),然後按Enter鍵將當前選定的項目添加到「收件人」字段。到目前爲止,當我不得不從列表中選擇某些東西時,迄今爲止我所擁有的最佳用戶體驗。

還沒有發現任何可以做到這一點的組件,但是通過將編輯框和列表框組合在一起,在開始輸入時下拉列表框並將其內容基於已經過濾的內容進行過濾迄今爲止輸入。

+0

對於我的職業例子,你會選擇什麼樣的方法?我不認爲嘗試在任何地方找到的自動完成功能都有幫助。我還想聽聽你對另一個案例的看法:想象一下IP管理系統,當你選擇一個IP時,你必須選擇一臺機器來附加它。有10k臺機器。你會怎麼做? – robertokl 2010-07-27 15:42:15

+1

關於職業列表,我會選擇一個帶有足夠物品(至少8個)在下拉列表中可見的組合框。不確定我是否同意自動完成(或者說過濾)不會有幫助,即使在職業列表中也是如此。 Wrt從10k列表中選擇機器:你真的需要在這裏實現過濾。沒有兩種方式。在這種情況下,我會使用編輯和下拉篩選列表。我會過濾機器識別信息的任何部分:域名,機器名稱,機器描述。 – 2010-07-27 17:58:06

+0

選擇機器的人已經確切知道他正在分配的機器的名稱。例如,過濾器不會用於描述,不會有幫助。對於職業而言,我無法真正瞭解長度下拉會對幫助什麼地方產生幫助,因爲按字母順序排列(正如他們通常所說的那樣),上面和下面的項目與我所看到的項目無關。 – robertokl 2010-07-27 21:14:13

2

我會用2個標準,

1)有多長列表,如果該列表中包含5個元素你更好地使用ComboBox,因爲它將會爲用戶更容易(更好的UX)

2 )如果列表很長,用戶很容易記住他/她正在尋找的前綴...如果不容易,使用自動完成是無關緊要的。

2

我想說這取決於列表中的多樣性以及對列表項的熟悉程度。

如果例如包含5個汽車品牌(我熟悉的列表項)的列表沒有問題。

如果列表中有超過5個姓氏,在我做出選擇之前可能需要一些時間。

你應該試試這兩種選擇,並相信你覺得你更容易使用的腸道。

+0

+1您的第一個陳述是我想要表達的,但更簡潔。然而,對於像汽車品牌這樣的清單,如果你沒有包括所有這些清單(例如:使用過的經銷商現有的一個品牌子集),那麼更有用的IMO將它們全部列出,而不是讓用戶猜測在哪些品牌可用。 – 2010-07-26 21:36:54

1

我通常看看列表會有多大。如果將會有超過15個選項,那麼看起來更容易找到他們是否可以開始輸入。

對我來說,另一種情況是有其他選擇時,他們可以自由輸入。這基本上消除了對兩個控件的需求,因爲您可以將它們合併爲一個。

+0

@downvoter關注評論 – spinon 2010-07-26 21:32:30

+1

看起來像有人在這個網頁上心情不好,我試圖抵消它有點 – 2010-07-26 21:36:38

+1

雅,有人正在成爲一個工具。 MrOhad在這一點上是唯一一個沒有-2的人。 – 2010-07-26 21:38:25

2

這裏是相反的方法:

最糟糕的時候使用一個自動完成框是當你有一個有限的和相對小的一組選項,用戶不知道的有效選項的範圍。例如,如果您銷售的是二手車,並且品牌混雜不一,那麼只需將組合品牌列入組合框,就會比自動完成方法更有效,更易於瀏覽。

能夠記住最後5個選項最有可能是不相關的,除非你有一個巨大的選項列表,並要求用戶選擇最相關的項目。

另一種方法是使用兩者。我相信Dojo有一個既可以作爲組合框也可以作爲自動完成域的小部件。你可以選擇開始輸入,它會縮小可能的選項,或者你可以用鼠標與它進行交互,並像組合框一樣瀏覽它。

+0

是的..幾乎所有的自動完成有長度零選項,這意味着當你專注領域時,它已經帶來了列表中的所有選項。 – robertokl 2010-07-26 22:39:00

+0

那麼那麼,更好。 – 2010-07-27 01:46:28

+0

所以,你認爲我們應該總是去自動完成? – robertokl 2010-07-27 15:24:55

1

的主要區別無關與可用性,但更多的是什麼定義可接受的輸入。

當您有可接受輸入的預定義列表(例如Enum或職業列表)時,您通常會使用ComboBox。

當有許多已知的輸入時,最好使用自動完成字段,但也接受自定義輸入。如果用戶在他們的職業中鍵入「程序員」,但他不是預定義的可接受輸入之一,則用戶會感到沮喪,並且他們被給出消息,表明他們的輸入無效。

請記住,組合框也允許您在其中鍵入選擇第一個匹配選項。某些類型的組合框(取決於您使用的UI框架)甚至允許在字段頂部或側面的自由格式文本字段進行搜索或添加到列表中。

粗,以確定你的用戶會選擇最好的方法是測試:A/B,領域,用戶等

希望這有助於你解決你的困境!

+0

「程序員」預定義的輸入如果在組合框中不存在,它們不會造成同樣的沮喪嗎? – robertokl 2010-07-26 22:43:21

+0

他們本來可以爲「軟件開發人員」,「IT專業人員」或「其他」安頓下來,這不應該是關於用戶可接受的輸入但更多的是關於你的應用程序的可接受的輸入,可用性應該被測試,而不是猜測在我聽起來,就好像你正在避免一個組合框,因爲有些你可能會或可能沒有閱讀,說這可能是一個壞主意,使用組合框;讓真正的用戶告訴你,這是不可接受的,然後改進它,而不是試圖解決你不確定你有問題。 ;) – 2010-07-27 14:25:44

+0

我只是覺得這個問題在幾乎所有的網站都很常見,我真的很生氣,所以我想我們可以找到/創建一個關於這個主題的模式。你沒有看到我們可以建立的任何模式? – robertokl 2010-07-27 15:35:49