日韩久草黄色电影视频,999精品免费久久

國(guó)家選擇器，通出現(xiàn)在當(dāng)你新注冊(cè)一個(gè)網(wǎng)站賬號(hào)，檢查一個(gè)電子商務(wù)網(wǎng)店，或者報(bào)名參加一個(gè)會(huì)議。常規(guī)的設(shè)計(jì)是一個(gè)由所有國(guó)家組成的下拉列表。

然而，當(dāng)我們組織一大批用戶測(cè)試該設(shè)計(jì)的可用性時(shí)，我們發(fā)現(xiàn)針對(duì)多國(guó)家選擇器的可用性問題。所以，我們決定重新設(shè)計(jì)國(guó)家選擇器。這篇文章重在介紹我們最終方案前的四次迭代設(shè)計(jì)。

首先，讓我們看一下傳統(tǒng)的下拉列表式的國(guó)家選擇器存在的諸多可用性問題：

1、缺乏概覽

看到超過20多個(gè)未歸類的選項(xiàng)時(shí)，就會(huì)令人眼花繚亂，更別說那些動(dòng)不動(dòng)就包含上百個(gè)選項(xiàng)的國(guó)家選擇器（按照ISO 3166標(biāo)準(zhǔn)，有249個(gè)國(guó)家）。

2、排序規(guī)則不明晰

看到一個(gè)大數(shù)據(jù)量的列表時(shí)，用戶關(guān)心的第一件事往往是搞明白列表項(xiàng)的排序邏輯。但是因?yàn)閲?guó)家選擇器列表中通常將3-5個(gè)熱門選擇放在最前面，就造成排序邏輯在咋一看下還不清楚。

3、滾動(dòng)問題

這種滾動(dòng)大的下拉列表會(huì)帶來多個(gè)問題。如果用戶將鼠標(biāo)移出了列表下拉區(qū)，很大意圖上他更想要滾動(dòng)這個(gè)頁(yè)面內(nèi)容，應(yīng)該講下拉列表隱藏掉。然而，在其他瀏覽器中，只要有焦點(diǎn)，下拉就會(huì)是使列表滾動(dòng)，這就可能給你帶來錯(cuò)誤的數(shù)據(jù)。

4、UI不一致

下拉列表的UI在不同的瀏覽器和不同的操作系統(tǒng)間會(huì)有所不同。但是它們不光會(huì)看起來不一樣，使用方式可能也會(huì)不同。比如，在Mac端Safair瀏覽器中，用戶必須將鼠標(biāo)移至兩個(gè)控制箭頭上來上下滾動(dòng)（親測(cè)現(xiàn)在已經(jīng)支持滾動(dòng)列表內(nèi)容，不顯示滾動(dòng)條），在Firefox中則使用傳統(tǒng)的滾動(dòng)條來滾動(dòng)。而現(xiàn)在手機(jī)上，則會(huì)看到巨變的UI設(shè)計(jì)。

5、缺乏上下文

移動(dòng)設(shè)備的屏幕空間非常有限，這就意味著你在頁(yè)面上下滾動(dòng)時(shí)僅能顯示更少的內(nèi)容，就導(dǎo)致你要找到選項(xiàng)需要花費(fèi)更長(zhǎng)的時(shí)間。

6、打破操作流

幾乎所有用戶，甚至那些原本在表單內(nèi)容間切換的用戶也需要在滾動(dòng)列表的時(shí)候用到鼠標(biāo)，這就減慢了這個(gè)過程。

這些可用性問題都是些小問題，它們并不會(huì)每次都出現(xiàn)在任何人使用下拉列表式國(guó)家選擇器的時(shí)候。但是當(dāng)這些問題都加在一起，連同其他一些小問題都出現(xiàn)在你的網(wǎng)站上，它們就會(huì)降低整體的用戶體驗(yàn)，最終被用戶遺棄。

在這些想法下，我們開始重新設(shè)計(jì)標(biāo)準(zhǔn)的下拉列表式國(guó)家選擇器。以下是我們經(jīng)歷的四次迭代過程。

迭代1：打字Vs滾動(dòng)

擺脫數(shù)以百計(jì)的選項(xiàng)和滾動(dòng)的問題的最簡(jiǎn)單的方法是簡(jiǎn)單地替換下拉列表為一個(gè)文本框,讓用戶自己輸入國(guó)家名稱。但是這種情況只有在用戶知道該輸入什么的時(shí)候才有效，因?yàn)槟抢餂]有任何識(shí)別效果（這永遠(yuǎn)不會(huì)為航運(yùn)選擇工作,因?yàn)橛脩舯仨毑逻x項(xiàng)的名稱）。但是一個(gè)國(guó)家選擇器是一個(gè)文本域的好的候選者,因?yàn)樗降募僭O(shè)每個(gè)用戶知道他們居住的這個(gè)國(guó)家的名稱。

因此，我們?cè)O(shè)計(jì)了一個(gè)文本域。雖然有很好的可用性，但是不利于快遞員交付產(chǎn)品。下拉列表提供了數(shù)量有限的下拉選項(xiàng),而文本域則提供了無限的輸入（用戶可以輸入任何他們想輸入的內(nèi)容）。為了限制那些我們后臺(tái)系統(tǒng)能夠處理的輸入值（如國(guó)家），文本字段需要自動(dòng)補(bǔ)全并接受限制。這將使我們能夠100%準(zhǔn)確的將文本字段的輸入映射到國(guó)家，這些則是我們的后端系統(tǒng)(快遞員)能識(shí)別的。

迭代2：拼寫錯(cuò)誤和順序

雖然用戶可以知道自己國(guó)家的名字,他們不可能會(huì)知道我們的系統(tǒng)如何命名它。如果用戶居住在US，但他遺漏了一些文本，比如輸入成“nited states”，或者只輸入名字的部分信息，比如輸入“America”（取代“United States of America”），這樣的結(jié)果是沒有任何正確的結(jié)果出現(xiàn)。

這是因?yàn)橐粋€(gè)典型的自動(dòng)補(bǔ)全文本域?qū)ふ夷切┎粌H是拼寫正確而且輸入順序一致的結(jié)果。

很多的Web服務(wù)，尤其是電子商務(wù)商店會(huì)有地理限制，國(guó)際用戶非常清楚這一點(diǎn)。即使那些很大的網(wǎng)站，諸Amazon,Hulu和Spotify，都會(huì)在他們的某項(xiàng)或全部服務(wù)上有嚴(yán)格的地理限制。雖然來自US的用戶期望他們的國(guó)家被支持，但任何國(guó)家的用戶都可能因?yàn)闊o法找到他們國(guó)家而在檢查他們的錯(cuò)誤輸入之前放棄你的網(wǎng)站。

簡(jiǎn)而言之,國(guó)家選擇器應(yīng)該接受遺漏和順序問題。為了實(shí)現(xiàn)這一目的，只需使用松散比較部分匹配的方法：

迭代3：當(dāng)Netherlands不叫“Netherlands”

雖然我們現(xiàn)在意識(shí)到了遺漏和順序的問題，但實(shí)際上還是有其他的問題。一些國(guó)家名稱可能有幾個(gè)拼寫，比如Netherlands有時(shí)被稱為Holland。就地理位置而言，它們是一樣，但是一般人都會(huì)說它們?cè)凇癏olland”度假，而荷蘭人則一般會(huì)拼寫自己國(guó)家名稱為“Netherlands”。

當(dāng)我們要求用戶去輸入一個(gè)國(guó)家名稱，我們必須考慮到所有可能的拼寫。這其中包括同義詞，當(dāng)?shù)氐钠捶?，常見縮寫和國(guó)家代碼。當(dāng)使用所有這些拼寫時(shí)，比如USA表示United States，或者Schweiz、Suisse、Svizzera和Svizra表示Switzerland，DE表示Germany，一個(gè)典型的自動(dòng)補(bǔ)全文本域（下拉列表）就會(huì)出錯(cuò)。

從可用性的角度來說，這自然是不能接受的因?yàn)檫@都是普通的拼寫，人們通常就會(huì)在文本域中輸入它們。

在我們重新設(shè)計(jì)的選擇器中，我們就把這種一對(duì)多的映射加了進(jìn)來：

迭代4：當(dāng)“United States”比“United Arab Emirates”更普遍時(shí)

在蘋果網(wǎng)站自動(dòng)補(bǔ)全文本域中輸入“United”時(shí)，它給出以下結(jié)果：

下拉列表簡(jiǎn)單地按照字母表排序。但是因?yàn)槲覀儾辉傩枰獫L動(dòng)很長(zhǎng)列表了，似乎也不再非得按照字母表排序。一個(gè)更自然的排序規(guī)則是按照熱度排序。蘋果應(yīng)該是考慮優(yōu)先把United States排在首位才對(duì)。就像一份英國(guó)報(bào)紙極可能想把United Kingdom放在首位。

為了適應(yīng)這個(gè)問題，所有的值（國(guó)家）應(yīng)該被給一個(gè)權(quán)重。默認(rèn)情況下，它們是平等的，然而每個(gè)網(wǎng)站應(yīng)該按照他們的國(guó)家選擇熱度給予相應(yīng)的權(quán)重。