不！要！把！東！西！到！處！挪！」在改版之后做可用性測(cè)試的時(shí)候，會(huì)議室里經(jīng)常會(huì)回蕩著用戶這樣的喊聲。
當(dāng)用戶習(xí)慣了一種設(shè)計(jì)的時(shí)候，他們大多不愿意看到改版后自己不習(xí)慣的界面。今天的文章則是 icons8 網(wǎng)站重設(shè)計(jì)時(shí)，可用性測(cè)試、迭代和設(shè)計(jì)權(quán)衡背后的故事。
對(duì)此，你也可以在 Product Hunt 上參與討論，也許你的意見將會(huì)讓正在迭代的測(cè)試版，更加優(yōu)秀。
舊用戶界面：
新用戶界面：
當(dāng)我們?cè)诓榭从脩魯?shù)據(jù)的時(shí)候，腦子里面所思考的最多的問題是：為什么用戶在 icons 8 瀏覽的時(shí)候點(diǎn)擊的數(shù)量比在競(jìng)爭(zhēng)對(duì)手的網(wǎng)站里，要少好幾倍？
對(duì)于這一點(diǎn)，我所想到的原因大概有兩個(gè)：
這種解釋聽起來太好了，說實(shí)話連我自己也難以相信。
首先，我依然還是將用戶的瀏覽行為和數(shù)據(jù)提交給 Google Analytics 做分析。同時(shí)，我的直覺迫使我繼續(xù)尋找，我相信是存在一個(gè)不太令人滿意的原因，導(dǎo)致了這樣的結(jié)果。
這個(gè)想法來自于我在 Usethics 的朋友，他們用一個(gè)基本上設(shè)計(jì)師大都知道的概念來解釋這件事情：費(fèi)茨定律。
費(fèi)茨定律原本是針對(duì)桌面端人機(jī)交互所總結(jié)的，它指的是「任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長(zhǎng)，目標(biāo)越大時(shí)間越短」，相應(yīng)的它也可以用公式表達(dá)出來：T = a + b log2(D/W+1) 。更通俗地講，就是UI界面中按鈕的大小以及和光標(biāo)之間的距離會(huì)影響到交互所需要的時(shí)間。
更通俗的講，越是靠近的兩個(gè)控件，用戶越容易使用光標(biāo)移動(dòng)過去。在我們的網(wǎng)站中，用戶有時(shí)候需要從一個(gè)控件移動(dòng)到另外一個(gè)控件上，而如果兩者距離太遠(yuǎn)，會(huì)成為一種相對(duì)繁重的認(rèn)知壓力，用戶在這種局面下會(huì)主動(dòng)離開。
解決方案很簡(jiǎn)單，讓邏輯關(guān)聯(lián)的控件，在靠近的地方呈現(xiàn)。
而 Google圖片在很久之前就這么做了。問題是在于，Google 圖片所需要做的事情相對(duì)簡(jiǎn)單，但是 Icons8 所需要提供的功能就多樣很多了：
真想在界面里面硬塞個(gè)功能，總會(huì)有地方放：
問題是在于，用戶并不期望拓展功能的時(shí)候，就這么硬塞進(jìn)來，同樣的，他們也不會(huì)去尋求這樣的功能。正如同信息覓食理論中所說的，用戶從來都不會(huì)去主動(dòng)尋找「了解更多」這個(gè)按鈕。
我們?cè)?jīng)嘗試去隱藏一些功能，但是在進(jìn)行可用性研究的時(shí)候，發(fā)現(xiàn)這么做太痛苦了，而且好像大家都在力圖解決這個(gè)問題。盡管只是點(diǎn)擊兩下就可以生成字體，但是用戶似乎在這個(gè)事情上耗費(fèi)了全身的力氣。
長(zhǎng)話短說，我們需要充分的展現(xiàn)，并且同時(shí)需要適當(dāng)?shù)碾[藏。
這是經(jīng)過幾次迭代之后所設(shè)計(jì)的版本：
Icons8 Web APP 重設(shè)計(jì)，第一版，使用Sketch設(shè)計(jì)完成
除了使用新的圖標(biāo)，整個(gè)設(shè)計(jì)風(fēng)格上都進(jìn)行了調(diào)整。
新的視覺風(fēng)格下還有了新的圖標(biāo)，新的配色，配色和功能上都做了調(diào)整。
經(jīng)過幾次可用性測(cè)試之后，我們發(fā)現(xiàn)了另外一個(gè)問題。當(dāng)我們要求用戶選擇幾個(gè)不同的圖標(biāo)創(chuàng)建合集的時(shí)候，他們選取了幾個(gè)不同風(fēng)格的圖標(biāo)來組成合集，過程中沒有一絲猶豫。
他們喜歡這樣的結(jié)果。相比之下，我們則感到很震驚。這就像用不同的字體來拼湊一個(gè)單詞，他們根本不在意一致性，至少是在這個(gè)環(huán)節(jié)不在意。這一點(diǎn)讓我們開始重新思考如何構(gòu)建合集。
舊有的網(wǎng)站當(dāng)中，我們會(huì)將不同風(fēng)格的圖標(biāo)以相同的大小擺在一起，讓它們看起來很相似。此外，每個(gè)合集都會(huì)被拆分成很多行，相互之間的對(duì)比并不明顯。
因此，我們將新的圖標(biāo)合集按照橫向排布起來，便于對(duì)比。
另外一方面，基于用戶的習(xí)慣，我們打算也讓圖標(biāo)以原始尺寸來顯示。
圖標(biāo)大的大，小的小。
單純的這么一個(gè)決策，就使得網(wǎng)站需要進(jìn)行重設(shè)計(jì)，并且重新編寫相應(yīng)的代碼。
讓圖標(biāo)水平排布的另外一個(gè)結(jié)果，就是要重新設(shè)計(jì)列表。同時(shí)，讓用戶可以拖動(dòng)列表中任何一個(gè)圖標(biāo)，以重新排布。
這是展示圖標(biāo)細(xì)節(jié)的對(duì)話框。
△ 圖標(biāo)對(duì)話框
除了足夠好看以外，它還有很多功能：
唯一的問題在于，它看起來有點(diǎn)怪異。一旦打開，就會(huì)占據(jù)整個(gè)屏幕。
接下來，我們針對(duì)這個(gè)版本進(jìn)行了精簡(jiǎn)和壓縮，去掉了漂亮的留白，并且縮小了字體的大小，減少多余的特效。不過對(duì)話框的占地面積依然很大。
這一環(huán)節(jié)的突破性進(jìn)展源自于可用性測(cè)試的一個(gè)參與者。她提出了一個(gè)重要的建議，那就是大家確實(shí)需要不同風(fēng)格不同樣式的圖標(biāo)，但是并不是在同一個(gè)界面當(dāng)中，同時(shí)推薦和呈現(xiàn)。
如果在首頁上搜索，就會(huì)出現(xiàn)所有樣式，全部風(fēng)格的圖標(biāo)。
△ 在列表中呈現(xiàn)全部的樣式
如果選擇單一樣式，那么屏幕上會(huì)呈現(xiàn)所有類似的圖標(biāo)：
△ 選擇單一樣式，我們會(huì)在列表中呈現(xiàn)類似的圖標(biāo)
在這一的策略之下，圖標(biāo)的搜索和呈現(xiàn)就更加富有條理了，同時(shí)，對(duì)話框的尺寸也更小了，更加節(jié)省空間了。
當(dāng)我們創(chuàng)建網(wǎng)站的時(shí)候，最初圖標(biāo)只有4種不同的樣式，但是現(xiàn)在已經(jīng)有十幾個(gè)不同的分類了。最糟糕的地方在于，圖標(biāo)的名稱和視覺風(fēng)格并不一定一致，也不一定清晰。誰知道「黃昏」是怎樣的一種風(fēng)格呢？
重新設(shè)計(jì)了樣式列表，最新的設(shè)計(jì)在右邊。
為了尋找完美的下載控件，我們花費(fèi)了很長(zhǎng)的時(shí)間。因?yàn)槲覀儗?duì)于下載還是有一定要求的。
我們之前的下載功能其實(shí)已經(jīng)做的不錯(cuò)了，并且通過了現(xiàn)在的可用性測(cè)試，現(xiàn)在我們主要是針對(duì)這個(gè)功能進(jìn)行美化。
當(dāng)然，主要的問題在于，需要兼容如此之多的下載選項(xiàng)。
在下載這個(gè)功能上，我們放棄了創(chuàng)建一個(gè)單獨(dú)的對(duì)話框。
所以，最終搜索之后的對(duì)話框是這個(gè)樣子：
最終迭代完成之后的樣子：
付費(fèi)購(gòu)買：
當(dāng)然，我們最終還是做了一些別的修改：
此外，性能的優(yōu)化也在這次改版范圍內(nèi)。這可能是我們第一次在 WebPagetest 上獲得 AAAAA 評(píng)級(jí)。
