你會犯哪些網頁設計最常見可用性錯誤?
在過去十年中高品質的可用性一直是業內討論的核心,因為它對使用者來說越來越重要。好的可用性也可以幫助建立品牌知名度,從而提升使用者對一個網站或者是一家公司的評價。今天人們依然高度關注可用性,是因為大大小小的公司已經證明了好的可用性策略是多麼重要。
在過去幾年中,良好的可用性成為那些成功的初創公司的核心。多數情況下,簡單的想法最具創造性,可用性主要是指:使一個功能或者產品易於使用,但同時也要保持產品質量維持在高水平上。
如今,很多文章會談到普遍意義。在對該話題年復一年的討論之後,似乎web設計者們仍然很難去理解它。可用性早已不再是一個玩笑,下面這些建議應當被列印出來並粘到你桌子對面的牆上。
連結的顏色
我經常發現自己在瀏覽網頁時,有些頁面上的連結沒有以某種形式高亮顯示。這是我見過的最愚蠢的錯誤。我願意訪問那些連結使用預設藍色的頁面,而不是連結和普通文字一個顏色的頁面。使用者需要知道如何在頁面之間導航、在哪兒能點選連結。你不能指望他們把滑鼠一行行的掠過所有文字去找連結,直到發現滑鼠箭頭變成“小手兒”。
我完全理解,有時候出於設計考慮,連結不能使用某種顏色來高亮顯示,這樣會使它們顯得太過突兀。這完全是可以理解的。但是可以新增文字樣式或者虛線框,你需要的只是以這種或那種方式來強調連結而已。
訪問過的連結也應當以不同的方式來顯示,以區別於預設的連結顏色。因為這樣可以幫助使用者知道他們已經訪問過什麼,從而確定下一步要去哪兒。一些網站會使使用者困惑,但是讓他們知道自己已經訪問過什麼,絕對會使他們對你的網站印象更好。
糟糕的排版
當我們談到 排版,並不是說我們需要一個大大的標題,或者一段漂亮的文字。 當我們考慮易用性時,排版的漂亮與否並不那麼重要,重要的是排版要如何使我們的內容易於閱讀。
緊密排列的大段文字會使閱讀它的人感到非常頭疼,但它應該不會讓設計師頭疼。他只需要簡單的增加行高,進行分段,增加文字大小,改變字型,就能使它更容易閱讀。
在網頁設計中,如何搭配字型的和用什麼樣的顏色來喚醒訪客,並不是十分重要。當然,你會這些那就更好 。在過去的幾年中,我們總是錯誤的將美感重要性放到功能性之上。其實網站最重要的特性它易用性,它並不像圖形設計領域那樣有很很大的侷限性。有的時候我們不在乎它能有多麼的好看,僅需要的是它能正常工作而已。
讓我來作進一步的解釋. 網際網路上兩股最新的設計思潮, 極簡主義和扁平化設計, 都極其的簡約並聚焦於內容的呈現而非背景圖該多漂亮才好. 在極簡主義與扁平化設計變得越來越流行的後面有個原因就是他們非常簡單,而且工作良好 -有時候真的是很難去相信如此簡單的一個網站卻能獲得巨大的成功, 你進入網站, 看完內容,然後走人, 沒有東西使你分心, 沒有Flash, 沒有使得網站載入變慢的Javascript, 沒有好看的花兒或圖樣, 僅僅是內容而已.
現在, 你應該明白了讓內容變得易於訪問是多麼的重要的道理, 不要在第一時間花費太多的精力去思考該如何讓網站變得多漂亮 -無論字型有多優美,別人如果不能閱讀的話也是枉然.
不參照慣例
參照設計慣例和易用性建議是非常重要的,因為無論你是誰,只要你按照那麼做了,那麼使用者會在你的網站上花費的時間會和在其他網站上花費的一樣多,這意味著你和其他人站在了同一起跑線上。
舉一個例子讓大家更清楚的理解我到底想要表的什麼。這有這麼一個網站,在它導航欄上放置了一連結來退出頁面。這個按鈕的作用,這與通常所理解的導航欄應該有的作用大不相同,這樣的設計違反了設計慣例。
好在最近幾年,情況改善了很多,但還是能發現在一些不應該發生的低階錯誤,比如:迴圈展示模組上面連結失效,或者點選連結的時候彈出了框。因此,要緊跟設計慣例。
避免回答問題
使用者瀏覽網頁都是有目標的。也許是想娛樂一下,也許是查詢資訊,也許是跟家人或朋友保持聯絡,也許是其它目的。不管他們做什麼,總會有一個目標。
現在你需要記住的最重要的是,大多數情況下,使用者上網是在尋求某些資訊。他們去 Google是要搜尋某些東西;他們去維基百科是要學習某些東西;他們上企業站點是為了瞭解產品資訊。他們總會有一個目標。
當我明確地想去網頁上找一個問題的答案的時候, 它們卻就是找不到, 這種問題在我身上已經發生n次了. 我能理解設計代理(機構)們為何不是始終都突出表述價格因素, 因為在一個專案裡面變數太多, 但我就是不能理解一個髮廊為何不告訴我理髮到底需要多少錢, 我也不能理解洗車公司的網站上為何不突出表述我洗乾淨車需要多少錢, 那你為啥還要在這個地球上建一個網站呢? 我只是覺得這對你和你的訪客都是無益的, 你倆誰也不能從中獲得任何有用的資訊.
在訪客訪問你的網站的時候瞭解他們的意圖是個好主意, 如果有人想去下載部落格主題, 那就引導他們到下載區域, 如果他們是為了玩遊戲而來, 那就儘量多放些遊戲在上面, 如果他們是來了解產品價格或者你所能提供的服務的, 那就突出表述它們.
你需要考慮你的網站訪客的需求的原因是你的網站不是給你自己建的, 如果你是給你自己建的, 你就別聯網, 直接在你自己的電腦上看就可以了, 一個網站是為訪客而建的, 訪客是有需求的, 實現它們(的需求)吧!
小塊可點選區域
因為我買了臺Mac所以從不用滑鼠。事實上我買了一隻魔術滑鼠,就在它們被髮布並銷售僅僅三天以後。因為對我來說再沒有什麼需要用到滑鼠的地方了。我用觸控板移動電腦指標動作非常熟練。但我記得五年前,當我仍然使用PC的時候,我也曾有各種各樣的垃圾滑鼠。它們並不總是很精確,而且在懸停於小塊區域的時候經常定位很困難。
現在我再也沒有這個問題了。但是web不是僅僅給我用的。大約有數以億計的使用者,所以你應該明白不是他們所有人都能這麼熟練的使用這些奇妙的工具。
小塊可點選區域有時候令人不那麼舒服。你或許想讓字型顯得小一點,因為你相信這樣看起來很漂亮,但你要考慮到你的決定對可用性的影響有多大(我們不妨再來看看可讀性)。
重要的是不但要保證連結是可見的,還要讓它們是可點選的。這個區域越小,人們點選它們就越難。這裡面有一個網站趨向移動化背後原因——就是說佈局需要適應更小的螢幕。需要適應的東西之一就是按鈕,根據建議它們應該在行動式裝置上變得更大,好讓它們容易被點選。
同樣的策略也適用於桌面環境。新的扁平化使用者介面的風潮是這個理念的佈道者。你不會有點選又大又清晰的連結的煩惱。保證讓你的使用者更輕鬆的瀏覽。再說一次,關注於功能性,讓美觀成為一個神奇蛋糕上面的櫻桃。
缺少聯絡資訊
有幾件事比糟糕的客戶服務更使我惱怒。其中之一就是根本無法聯絡上客服或者負責該事務的公司。
正如我們之前討論的,人們總是帶著目的來訪問網頁。如果他們的目的是跟你取得聯絡,那麼從他們的角度來說,如果找不到聯絡方式那麼這個頁面就毫無用處。
沒有任何藉口可以不提供聯絡資訊。如果你不想把你自己的電話號碼公之於眾,可以留下你的e-mail。對了,你也可以買個便宜的手機配個划算的套餐,然後留下這個號碼,或者申請一個新的e-mail。你想要避開垃圾郵件嗎? 可以使用一種機器無法自動識別的聯絡方式。分享Twitter或者Facebook地址,也沒什麼大不了。這都沒什麼,只要能給你的客戶一個以某種方式找到你的機會。
搜尋功能
許多使用者都是任務導向型的, 也就是說他們來到網站上僅為獲取指定的資訊而並不對其他東西感興趣. 如此看來, 你會發現一個好的搜尋功能會變得多麼的重要.
但這並不意味著你需要在每個頁面都提供一個搜尋欄, 如果你運營著一家設計公司, 只有一個單頁式網站用於提供專案和聯絡方式的資訊, 那就沒必要提供搜尋功能.
然而, 如果說你執行著一個部落格或者其他任何內容主打的網站, 搜尋將會是許多使用者首先會去使用的功能, 研究表明第一時間會去查詢搜尋欄的使用者的比例佔到了所有使用者的一半以上, 真的是極大的超乎了我們的想象.
假設你在一個類似於WordPress的平臺上執行著一個網站, 你將可以利用其內部整合的搜尋功能, 另外你也可以始終使用Google提供的搜尋, 因為智慧搜素引擎可能已經索引了你的所有(或者大部分)網頁, 你不再需要去自行編寫搜尋功能, 所以你沒有理由不在你的網站上使用它.
強制性的註冊要求
允許使用者在必須註冊或者付費之前,能對軟體或者功能有個預覽,比要求他們立即註冊要好得多。網際網路上看到的一些優秀的概念或者想法,總是要求我先註冊,令人不爽。
不,在能夠使用你的應用之前,我不會想把我的電話、住址和鞋碼留給你。我需要立刻就能試用一下來決定它是否適合我。
這種說法,也是手機UX/UI設計大師Luke Wroblewski (相關參考在文章最後)所贊同的。他相信,使用者在做出決定之前,應該先窺見到產品的內在。這很簡單,也是全部意義之所在。
不管你是做什麼的, 銷售還是生產, 不要要求網上的使用者在他們還沒確定需要該產品的情況下就進行支付(負擔), 不然他們會感覺受了欺騙, 當然你也就永遠的失去了他們. 一個好的例子就是水果忍者, iOS平臺上很潮的遊戲, 它總是以一個免費示例版的形式出現, 然後過了一段週期之後, 也就是你已經迷上這個示例版的時候, 你會感覺你有點想要更大的挑戰, 然後你就購買了遊戲的完整版本. 這就是我所做的, 而且我覺得這的確說的過去, 我會一開始就在不能試玩的前提下購買這個遊戲麼? 扯淡.
這不僅僅是針對設計人員的一堂課, 也適用於許多的公司和製造商們, 如果你的產品夠好, 不要立即呼籲使用者去訂購, 相反, 你應該儘快的提供給他們免費試用你的產品的機會, 你應該確信的是如果產品真有你想的那麼好的話, 他們是會買的.
登錄檔單
Luke Wroblewski在他的關鍵提示中常常提及的另一個問題是登錄檔單。我都曾經使用過註冊。你非常喜希望馬上註冊一個帳號(因為某種程度上他可以滿足你的某種需求),但是由於登錄檔單太長。於是你可能放棄註冊,這樣一個潛在的顧客就會失去。
讓登錄檔單儘可能的簡單。只要求最重要的資訊,郵箱、密碼和使用者名稱。完成註冊後,你可以讓他們選擇填寫更多的細節。這同樣也符合前面提及同樣的原則。為了提交,使用者需要先嚐試你的產品。如果客戶不能確定是否喜歡你的產品,那麼憑什麼他們會把他們的家庭地址、真實姓名和職稱等資訊給你呢?頂多你得到一些冒填的虛假資訊,在他們確定想使用你的產品前,你不會得到真實資訊的。
現如今,很多網站已經可以實現通過Twitter或者Facebook 即可登入。這很棒,使得登入非常簡單快捷。你為此不需要記憶太多的帳號和密碼。只要你能登入Facebook,你也就可以登入那些使用API註冊的網站。雖然不是所有人都使用這個途徑,但是請給使用者提供這種可能的登入途徑。
設計不一致
當網頁為白色背景並在頂部有一個導航條的時候,不要讓關於頁面黑色背景底部導航條。這會讓我疑惑我是否還在同一個網站,我不想花事件在這個判斷上。
在整站上使用相同的佈局。使用合適的網格系統,並在整個網站上堅持。相同的原則也適用於背景色、連結色、排版和設計原則。讓我能夠明確的知道自己還在點選“關於我”之前的同一個網站上。
圖片的誤用
設計的一個基本原則就是,不要使用那些你其實並需要的元素。對圖片來說也是這樣,不要只是為了填滿頁面而使用它們。研究表明,使用者趨向於忽略那些只是填充頁面的圖片。所以如果你沒有什麼要展示的話,我最不想看到的就是隨機展示的圖片。
如果你決定要使用圖片,至少要確保把它們放到正確的位置。我討厭某站網站,把正文寫到一個兩列寬的表格裡,還用整行寬的圖片把正文分隔開。這總是讓我考慮:我是應該接著看右側第二列然後看圖片下的第一列呢,還是應該先看圖片下的第一列?這真是讓人厭惡,而更讓人厭惡的是不同網站在處理這一問題時使用了不同的方式。 如果你要使用圖片,要確保我在讀文字時不會被圖片影響太多,這是最重要的。我需要的只是閱讀。
哦,順便說一下,如果你想知道為什麼我不願意考慮這個問題(或者為什麼使用者不願意考慮), 我強烈推薦你看一下Steve Krug’s 的書。你可以在本文最後的參考中找到該書的連結。
結論
如果你想成為一個好的網頁設計師,你只需按照上面的步驟行事即可。你無需成為一個使用者體驗專家,上面我寫的真的只不過是一些常識,但是在大多數時候正是它們使得一個頂級的網站與一個像樣的網站區別開來。
這也很大程度上歸因與你對使用者的興趣。如果你製作網站只是為了維持生計,那麼你無需這些規則。你也可能只是一個低於自我期望的設計師,會在若干年內失敗。如果你為你的訪問者考慮更多,想給他們提供一個好的網站體驗,那麼你需要知道,什麼是應該開始著手處理的基本要素。正如前文所述,網站不需要漂亮。應該記得的是,沒有什麼比一個簡單的、執行優異的網站更漂亮的了。
相關文章
- Python程式設計最常見的錯誤有哪些?Python程式設計
- 最常見領域驅動設計錯誤
- 網站建設中最常見的三個錯誤網站
- PHP程式設計中10個最常見的錯誤PHP程式設計
- Python程式設計最常見的錯誤有哪些?這五點很關鍵!Python程式設計
- 網頁設計中常見的五種互動設計錯誤網頁
- Logo設計師可能會犯的22個錯誤Go
- 程式設計師可能犯的3個常見SQL錯誤程式設計師SQL
- (網頁)Java程式設計師們最常犯的10個錯誤(轉)網頁Java程式設計師
- 程式設計師程式設計生涯中會犯的7個錯誤程式設計師
- 實用推薦!網頁設計中常見的錯誤網頁
- Java初學者容易犯哪些錯誤?Java
- 每個程式設計師都會犯的10個錯誤程式設計師
- 更好的前端設計形式——設計者犯的常見錯誤及修改方法前端
- Bash程式設計易犯的錯誤程式設計
- Java程式設計師可能犯的3個常見SQL錯誤Java程式設計師SQL
- 你會犯這些 Go 編碼錯誤嗎(二)?Go
- 好程式設計師分享JavaScript幾個最常見的錯誤程式設計師JavaScript
- 處理網頁圖片最常見的10個錯誤及其解決方案網頁
- 程式基本設計可以犯的最大錯誤
- 測試程式碼時你會犯的 11 個錯誤
- 新手網站最佳化前期常常容易犯哪些錯誤網站
- 這些錯誤你都犯過嗎?來看看9大XMind初學者常見錯誤!
- 這些常見的 Go 編碼錯誤,你犯過嗎(一)?Go
- 15個常見網站開發錯誤,誰都可能犯網站
- 【譯】10 種 JavaScript 最常見的錯誤JavaScript
- Java 中最常見的 5 個錯誤Java
- Java程式設計師容易犯的10個錯誤Java程式設計師
- Android程式設計容易犯的錯誤之一Android程式設計
- Android程式設計容易犯的錯誤之二Android程式設計
- 教你避雷!網頁設計中常見的17個UI設計錯誤集錦(附贈設計技巧)網頁UI
- 程式設計師最常見的技術性誤區程式設計師
- 增強Web可用性,你需要避免的七大設計錯誤Web
- 你知道網頁設計中最常用的15張圖片素材嗎?網頁
- 還在為黑白網頁設計犯難?12款設計幫你輕鬆解決!!!網頁
- 十個Python程式設計師易犯的錯誤Python程式設計師
- C# 程式設計師易犯的 10 個錯誤C#程式設計師
- 蔡學鏞專欄:全世界所有程式設計師都會犯的錯誤 (轉)程式設計師