國家選擇器链峭，通出現(xiàn)在當(dāng)你新注冊一個網(wǎng)站賬號，檢查一個電子商務(wù)網(wǎng)店谐算，或者報名參加一個會議涌韩。常規(guī)的設(shè)計是一個由所有國家組成的下拉列表。
然而氯夷，當(dāng)我們組織一大批用戶測試該設(shè)計的可用性時，我們發(fā)現(xiàn)針對多國家選擇器的可用性問題靶擦。所以腮考，我們決定重新設(shè)計國家選擇器。這篇文章重在介紹我們最終方案前的四次迭代設(shè)計玄捕。
首先踩蔚，讓我們看一下傳統(tǒng)的下拉列表式的國家選擇器存在的諸多可用性問題：
1、缺乏概覽
看到超過20多個未歸類的選項時枚粘，就會令人眼花繚亂馅闽，更別說那些動不動就包含上百個選項的國家選擇器（按照ISO 3166標(biāo)準(zhǔn)，有249個國家）馍迄。
2福也、排序規(guī)則不明晰
看到一個大數(shù)據(jù)量的列表時，用戶關(guān)心的第一件事往往是搞明白列表項的排序邏輯攀圈。但是因為國家選擇器列表中通常將3-5個熱門選擇放在最前面暴凑，就造成排序邏輯在咋一看下還不清楚。
3赘来、滾動問題
這種滾動大的下拉列表會帶來多個問題现喳。如果用戶將鼠標(biāo)移出了列表下拉區(qū)凯傲，很大意圖上他更想要滾動這個頁面內(nèi)容，應(yīng)該講下拉列表隱藏掉嗦篱。然而冰单，在其他瀏覽器中，只要有焦點灸促，下拉就會是使列表滾動诫欠，這就可能給你帶來錯誤的數(shù)據(jù)。
4腿宰、UI不一致
下拉列表的UI在不同的瀏覽器和不同的操作系統(tǒng)間會有所不同呕诉。但是它們不光會看起來不一樣，使用方式可能也會不同吃度。比如甩挫，在Mac端Safair瀏覽器中，用戶必須將鼠標(biāo)移至兩個控制箭頭上來上下滾動（親測現(xiàn)在已經(jīng)支持滾動列表內(nèi)容椿每，不顯示滾動條）伊者，在Firefox中則使用傳統(tǒng)的滾動條來滾動。而現(xiàn)在手機上间护，則會看到巨變的UI設(shè)計亦渗。
5、缺乏上下文
移動設(shè)備的屏幕空間非常有限汁尺，這就意味著你在頁面上下滾動時僅能顯示更少的內(nèi)容法精，就導(dǎo)致你要找到選項需要花費更長的時間。
6痴突、打破操作流
幾乎所有用戶搂蜓，甚至那些原本在表單內(nèi)容間切換的用戶也需要在滾動列表的時候用到鼠標(biāo)，這就減慢了這個過程辽装。
這些可用性問題都是些小問題帮碰，它們并不會每次都出現(xiàn)在任何人使用下拉列表式國家選擇器的時候。但是當(dāng)這些問題都加在一起拾积，連同其他一些小問題都出現(xiàn)在你的網(wǎng)站上殉挽，它們就會降低整體的用戶體驗，最終被用戶遺棄拓巧。
在這些想法下斯碌，我們開始重新設(shè)計標(biāo)準(zhǔn)的下拉列表式國家選擇器。以下是我們經(jīng)歷的四次迭代過程。
迭代1：打字Vs滾動
擺脫數(shù)以百計的選項和滾動的問題的最簡單的方法是簡單地替換下拉列表為一個文本框,讓用戶自己輸入國家名稱。但是這種情況只有在用戶知道該輸入什么的時候才有效罩扇，因為那里沒有任何識別效果（這永遠(yuǎn)不會為航運選擇工作,因為用戶必須猜選項的名稱）诉字。但是一個國家選擇器是一個文本域的好的候選者,因為它公平的假設(shè)每個用戶知道他們居住的這個國家的名稱嫂便。
因此层皱，我們設(shè)計了一個文本域誊抛。雖然有很好的可用性启涯，但是不利于快遞員交付產(chǎn)品猴抹。下拉列表提供了數(shù)量有限的下拉選項,而文本域則提供了無限的輸入（用戶可以輸入任何他們想輸入的內(nèi)容）带族。為了限制那些我們后臺系統(tǒng)能夠處理的輸入值（如國家），文本字段需要自動補全并接受限制蟀给。這將使我們能夠100%準(zhǔn)確的將文本字段的輸入映射到國家蝙砌，這些則是我們的后端系統(tǒng)(快遞員)能識別的。
迭代2：拼寫錯誤和順序
雖然用戶可以知道自己國家的名字,他們不可能會知道我們的系統(tǒng)如何命名它跋理。如果用戶居住在US择克，但他遺漏了一些文本，比如輸入成“nited states”前普，或者只輸入名字的部分信息肚邢，比如輸入“America”（取代“United States of America”），這樣的結(jié)果是沒有任何正確的結(jié)果出現(xiàn)拭卿。
這是因為一個典型的自動補全文本域?qū)ふ夷切┎粌H是拼寫正確而且輸入順序一致的結(jié)果骡湖。
很多的Web服務(wù)，尤其是電子商務(wù)商店會有地理限制峻厚，國際用戶非常清楚這一點响蕴。即使那些很大的網(wǎng)站，諸Amazon,Hulu和Spotify惠桃，都會在他們的某項或全部服務(wù)上有嚴(yán)格的地理限制浦夷。雖然來自US的用戶期望他們的國家被支持，但任何國家的用戶都可能因為無法找到他們國家而在檢查他們的錯誤輸入之前放棄你的網(wǎng)站辜王。
簡而言之,國家選擇器應(yīng)該接受遺漏和順序問題军拟。為了實現(xiàn)這一目的，只需使用松散比較部分匹配的方法：
迭代3：當(dāng)Netherlands不叫“Netherlands”
雖然我們現(xiàn)在意識到了遺漏和順序的問題誓禁，但實際上還是有其他的問題。一些國家名稱可能有幾個拼寫肾档，比如Netherlands有時被稱為Holland摹恰。就地理位置而言，它們是一樣怒见，但是一般人都會說它們在“Holland”度假俗慈，而荷蘭人則一般會拼寫自己國家名稱為“Netherlands”。
當(dāng)我們要求用戶去輸入一個國家名稱遣耍，我們必須考慮到所有可能的拼寫闺阱。這其中包括同義詞，當(dāng)?shù)氐钠捶ǘ姹洌Ｒ娍s寫和國家代碼酣溃。當(dāng)使用所有這些拼寫時瘦穆，比如USA表示United States，或者Schweiz赊豌、Suisse扛或、Svizzera和Svizra表示Switzerland，DE表示Germany碘饼，一個典型的自動補全文本域（下拉列表）就會出錯熙兔。
從可用性的角度來說，這自然是不能接受的因為這都是普通的拼寫艾恼，人們通常就會在文本域中輸入它們住涉。
在我們重新設(shè)計的選擇器中，我們就把這種一對多的映射加了進(jìn)來：
迭代4：當(dāng)“United States”比“United Arab Emirates”更普遍時
在蘋果網(wǎng)站自動補全文本域中輸入“United”時钠绍，它給出以下結(jié)果：
下拉列表簡單地按照字母表排序舆声。但是因為我們不再需要滾動很長列表了，似乎也不再非得按照字母表排序五慈。一個更自然的排序規(guī)則是按照熱度排序纳寂。蘋果應(yīng)該是考慮優(yōu)先把United States排在首位才對。就像一份英國報紙極可能想把United Kingdom放在首位泻拦。
為了適應(yīng)這個問題毙芜，所有的值（國家）應(yīng)該被給一個權(quán)重。默認(rèn)情況下争拐，它們是平等的腋粥，然而每個網(wǎng)站應(yīng)該按照他們的國家選擇熱度給予相應(yīng)的權(quán)重。
解決方案：國家選擇器的重新設(shè)計
解決方案解決了下拉列表式國家選擇器問題架曹，是一個經(jīng)過重新設(shè)計的選擇器隘冲。它解決了遺漏，拼寫順序绑雄，同義詞和優(yōu)先級問題展辞。
譯自：：https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
