銀川羽之科網(wǎng)絡(luò)科技有限公司 - 為你思考，為你實現(xiàn)！為客戶創(chuàng)造與傳遞品牌價值是我們的最終使命！
全國服務(wù)熱線：
網(wǎng)站建設(shè)
微信支付
微信營銷
微信小程序
全網(wǎng)營銷
解決方案
經(jīng)典案例
知識/動態(tài)
代理合作
關(guān)于我們
盡管”外觀服從于功能“這一觀點備受爭議卻被廣泛的認(rèn)可。在設(shè)計網(wǎng)站方面，通常是指網(wǎng)站功能的易用性和是否可以方便訪客完成自己的目標(biāo)。
在接下來的案例中，我們將展示那些設(shè)計得漂亮但可用性差的網(wǎng)站?？捎眯圆畹脑虬ǎ翰季只靵y不堪，載入速度過慢，導(dǎo)航識別性差。盡管這些網(wǎng)站在視覺設(shè)計上很有特色，但很不幸他們可用性的確很差。讓我們研究下這些失敗的案例避免出現(xiàn)在自己的設(shè)計中出現(xiàn)易用性差的情況。
雜亂無序的設(shè)計
我看到的是什么網(wǎng)站？我要在那里點擊？接下來我該怎么做？設(shè)計的雜亂無序是給訪客最糟糕的印象。訪客不知道設(shè)計師所要表達的意圖(因為都被隱藏在了雜亂無序的設(shè)計中)，從而導(dǎo)致訪客在未做任何動作之前就要關(guān)閉該網(wǎng)頁。
導(dǎo)航信息超載！不僅我們不知道要看什么，甚至都不知道應(yīng)該點擊那里。通過鼠標(biāo)掃描方式查找可點擊區(qū)域無助于提升網(wǎng)站的易用性。并且，整個網(wǎng)站的載入過程連個進度條都沒有。而且更令哥震驚的是，還要花時間搞清楚必須關(guān)閉歡迎的窗口才可以點擊頁面其他地方。欄目里缺少滾動條的內(nèi)容讓哥對藏在里面的內(nèi)容頓時失去了興趣。
Marc Ecko是一個擁有數(shù)不清楚生意的成功商人，貌似他也希望許多人了解這些生意。問題是，他展示了太多我們甚至不知道從那里開始閱讀頁面的內(nèi)容，該網(wǎng)站還使用了飄忽不定的橫向滾動條。坑爹?。≌业剿璧膬?nèi)容的確需要相當(dāng)長的時間。
即便是已經(jīng)閱讀”關(guān)于我們”頁面并文字里有許多的隨機鏈接，哥還是很疑惑這個頁面到底是不是打醬油用的。最合適的猜測可能這是個人介紹頁面，而亂七八糟的鏈接和找不到導(dǎo)航欄，哥只能帶著困惑和不解離開這個網(wǎng)站。
有一半的圈圈看上去是可以點的，實際上卻不能。如果拖拽一個圈圈，它會跳到其他圓圈中去。當(dāng)然，這些坑爹的圈圈動畫效果充分的體現(xiàn)出公司比較xxx的理念，這明顯有些過度了嘛！用58秒等待一個動畫的確太漫長了。并且，如果你想需要更多的圈圈，點擊或拖拉空白區(qū)域就會出來，同時也帶給訪問者更多迷惑。
加載問題
隨著跳出率上升，頁面停留時間變得越來越短。能立即抓住訪問者眼球就變得尤為重要。網(wǎng)站加載時間越長，訪問者返回google或facebook尋找下一個合適網(wǎng)站可能性也就越大。加載時間、跳過按鈕、無固定導(dǎo)航欄與其他部分都是我們需要思考的點。
這是另一個很糟糕的情況，flash設(shè)計師強迫用戶看介紹動畫。沒有跳過按鈕的介紹動畫會讓訪問者在進入網(wǎng)站前就放棄訪問。點擊又沒立即響應(yīng)的按鈕或是視覺上不像是導(dǎo)航欄的設(shè)計將導(dǎo)致訪問者失去興致繼續(xù)訪問即便是足夠漂亮的網(wǎng)站。該網(wǎng)站花費許多周折浪費訪客的時間才能回到首頁將給人感覺進行次”世界之旅”。在網(wǎng)站地圖里需要查找隱藏在里面的許多泡泡。
哥從未見到過加載問題如此之杯具的網(wǎng)站。多重加載元素，即使你看到了網(wǎng)頁內(nèi)容實際上還有東西要再次加載。也沒有跡象可以表示加載結(jié)束了，這樣做也讓哥非常的困惑不解并且該網(wǎng)站還不易使用。事實上，找到閱讀的內(nèi)容也需要花些功夫，而網(wǎng)站在牛奶卡通包裝盒所做的效果與內(nèi)容根本沒有毛關(guān)系嘛。
進入網(wǎng)站要花很長時間痛苦的等待，如果接下來打開的網(wǎng)站足夠漂亮，易用性再好些也算是能接受的?？上?，打開頁面后哥徹底傻眼了，里面每張圖片還要繼續(xù)下載，我去！并且還要強迫看模糊圖片。更好的改進是，加載圖片時有加載進度條示意正在加載中。如果訪客的帶寬足夠也許問題還不算嚴(yán)重。但如果不是，那么訪客很快就會變得抓狂起來。還有那個返回按鈕不夠明顯，這也讓哥覺得這個網(wǎng)站很杯具。
導(dǎo)航欄
對于那些信息量大或是欄目結(jié)構(gòu)復(fù)雜的網(wǎng)站來說，良好的導(dǎo)航顯得尤為重要。你可以想象沒有地圖的情況下開車或在沒有標(biāo)簽的雜貨鋪里購物有多么困難。導(dǎo)航欄會告訴我們應(yīng)該去那里，而在下面的案例中的網(wǎng)站導(dǎo)航幾乎沒有提供任何有用的信息。你甚至可以考慮帶個指南針了，因為這些案例實在是太容易讓人迷失方向了。
經(jīng)過漫長的加載后，網(wǎng)站需要訪客點擊”進入”按鈕。好吧，我們點它下。盡管網(wǎng)站上有坨快捷菜單，但很不幸的是這坨菜單并沒有引起訪客的注意。并且，訪客需要將鼠標(biāo)挪到圖片上才能查看子類目。而這些導(dǎo)航按鈕需要訪客非常仔細(xì)的查找才行。
易用性差的網(wǎng)站通常都有同樣的通病。當(dāng)哥在這么漂亮的網(wǎng)站上看不到導(dǎo)航時，就不得不用鼠標(biāo)亂戳的方式查找鏈接。這個網(wǎng)站很漂亮但也非常復(fù)雜，復(fù)雜到我們需要花費一個小時來找鏈接，但你可能都猜不到點擊跟隨鼠標(biāo)的圖標(biāo)方式進入網(wǎng)站。并且，這個網(wǎng)站除了令人印象深刻的設(shè)計之外就沒提供個毛內(nèi)容出來！
緩慢的加載導(dǎo)致訪客不明白接下來要做點啥：導(dǎo)航欄的視覺不清晰與難以發(fā)現(xiàn)的返回按鈕問題一樣嚴(yán)重。哥很疑惑：當(dāng)訪問該豐田網(wǎng)站時到底要傳遞給訪客什么樣的概念呢？
無跳過介紹的按鈕。無視覺清晰的導(dǎo)航欄。加載很慢。而牛x的是頁面與播放的背景音樂竟然是分開的。當(dāng)網(wǎng)速快的訪客訪問網(wǎng)站時，網(wǎng)站的動畫都可能引起訪客的反感。
構(gòu)架與目錄問題
你的網(wǎng)站加載情況良好，你知道訪客來你網(wǎng)站想做什么，你的網(wǎng)站有固定的導(dǎo)航。但訪客一旦進入你的網(wǎng)站卻無法知道你的目錄結(jié)構(gòu)。就好比，要吃肉就應(yīng)該去肉食店，而不是牛奶店。很不幸的是，有些網(wǎng)站就是這么干的。
隱藏的菜單與類目不清楚導(dǎo)致網(wǎng)站導(dǎo)航難以使用。當(dāng)訪客想找到他想了解的類目將會是非常困難的。
該網(wǎng)站的類目由豎條折疊而成。當(dāng)哥點擊時卻提供了非常少的信息。如果是第一次訪問該網(wǎng)站，可能需要花點時間才能找出你需要的東西。
該網(wǎng)站的確告訴我們要”點擊與拖拽”，但這個區(qū)域看上去更像是份海報，我很懷疑到底會有多少人知道那里是可以點擊的。該網(wǎng)站也的確的意識到了上面說的這一點，于是在頁面頂部創(chuàng)建了菜單。但有多大的幾率會被人看到呢？
這是另一個視覺效果很好但由于糟糕的用戶體驗會引起訪客不爽的案例。網(wǎng)站上沒有固定的導(dǎo)航欄，而只是浮動的頭部。如果要找到聯(lián)系方式，需要到左下角點擊”Information”（信息）。使用更傳統(tǒng)的方式將有助于提升訪客體驗：例如，放一個電子郵箱或是將文案改為”contact information”（聯(lián)系信息），亦或是在頁面底部添加聯(lián)系方式。這是典型的通過細(xì)節(jié)提升用戶體驗的方式。
可視化與滾動條
即便是網(wǎng)站布局并不混亂，導(dǎo)航也十分清晰。但如果關(guān)閉了鼠標(biāo)交互效果或頁面不能滾動了，那也就意味著無人可以看到這些內(nèi)容了。原本可見的元素因為變?yōu)椴豢梢姇?dǎo)致訪客直接離開你的網(wǎng)站。
除非你用鼠標(biāo)點擊不同的區(qū)域，否則可點擊元素是根本看不見的。點擊某個區(qū)域后又是長時間的等待，點擊后額外增加的效果也在考驗訪客跳出網(wǎng)站的幾率。
網(wǎng)頁的滾動通常是從左至右，從上到下。而這個坑爹的網(wǎng)站卻是從網(wǎng)頁底部開始。加上不能關(guān)閉的關(guān)閉按鈕和其他些小問題，你會覺得樂高這個網(wǎng)站很莫名其妙（雖然設(shè)計很漂亮）。
該網(wǎng)站非常巨大，但事實上你打開后根本就不可能知道這個情況。拖動滾動條后也沒有提示信息，就離開內(nèi)容區(qū)域。如果你拖拉滾動條太快甚至都可以跑出網(wǎng)站設(shè)計部分。而且，回到內(nèi)容部分也很麻煩。該網(wǎng)站的設(shè)計好但也太難用了吧。
Faub（現(xiàn)已離線）
這是另一個設(shè)計漂亮，但卻導(dǎo)航無鼠標(biāo)交互效果或提示信息。
優(yōu)衣庫網(wǎng)站看上去很美觀也很易用。但直到訪客添加10件商品到購物車才發(fā)覺無法結(jié)賬。而事實上這根本就不是購物車而是愿望清單。該體驗完完全全的把每個使用過的用戶都給坑了。
這是另一個拖動方式進行導(dǎo)航的網(wǎng)站，很顯然它對于這種導(dǎo)航方式自我感覺非常良好。從視覺/樂趣角度來說是個好網(wǎng)站，但設(shè)計公司設(shè)計了用戶體驗很糟糕的導(dǎo)航方式：必須要使用鼠標(biāo)滾輪才能看到比首屏更多的內(nèi)容。
小結(jié)
設(shè)計要服務(wù)于網(wǎng)站功能以及訪客溝通。如果你的網(wǎng)站同時也能夠達到美觀，那就一舉兩得了。設(shè)計得美觀漂亮僅當(dāng)網(wǎng)站首要任務(wù)是視覺美觀才適用。
注意那些無序的排版，尤其是在導(dǎo)航欄與訪客首次訪問的頁面。設(shè)計的排版過于雜亂無序會導(dǎo)致訪客不知道如何使用你的網(wǎng)站。最糟糕的可能是訪客在首個頁面沒有打開就走掉了。網(wǎng)站訪客不喜歡等待。確保網(wǎng)站的加載速度快，并且能讓訪客知道可以加載完畢所花費的時間。減少訪客流失的最小風(fēng)險是一打開網(wǎng)頁就能夠吸引他們的注意。
一旦訪客訪問，你希望他們訪問你網(wǎng)站上的某個頁面。確保訪客可以輕松找到你的導(dǎo)航欄，以及每個導(dǎo)航元素的動作。不要讓訪客猜測或胡亂點擊尋找鏈接。在有許多內(nèi)容的的大網(wǎng)站，信息構(gòu)架與組織尤為重要。要確保訪客可以瀏覽你的內(nèi)容。確保菜單易識別，節(jié)省訪客的時間，讓訪客知道導(dǎo)航可用。
內(nèi)容的可見性很重要，但許多人都無視它。確保訪客可以在最小的分辨率下也可以看到所有你希望他們看的內(nèi)容。如果你正在為銷售產(chǎn)品做設(shè)計，確保你的設(shè)計是為銷售服務(wù)的。必須明確你的設(shè)計是為推銷產(chǎn)品服務(wù)的。你的網(wǎng)站越是沒為銷售產(chǎn)品服務(wù)，你賺得錢就越少。
