提升網站用戶體驗:你該知道的6條專業建議

提升網站用戶體驗:你該知道的6條專業建議

作為網頁設計師,我們知道,我們的任務就是與用戶對話。所以每當你正在進行一個網站的設計,問自己:我們如何給用戶更好的關懷感?

作為網頁設計師,我們知道,我們的任務就是與用戶對話。這就是為什麼我們能夠從容的著手眼前的工作。我們選擇顏色、字體,以及要使用的網頁佈局,甚至編寫CSS的方式,所有的東西看起來都那麼有目的性。正如我們精心製作設計時,我們會意識到結果會透露出一些關於我們,設計師的內容。然而這些我們所設計東西並不是總能很好道出我們的初衷。所以每當你正在進行一個網站的設計,問自己:我們如何給用戶更好的關懷感?

浮動窗口廣告 = 金錢比UX和內容更重要

因此,很多網站都選擇了浮動窗口或者遮罩層廣告,這似乎是現代形式的彈出窗廣告。
就像他們的前輩,彈出窗口廣告 ,浮動窗口的廣告很煩人。
浮動窗口廣告是非常具侵擾性的策略,從而影響並且中斷 用戶體驗 。

想「 廣告 」與「 用戶體驗 」二者兼得的同學推薦閱讀: 網站廣告和用戶體驗的平衡之道

 

如果你的用戶非常艱難的才能訪問到你的網站上的內容,那麼你一定有些地方做錯了。你的設計應該展示給用戶的最優先事項是它的體驗,當然也要說明網站的內容也是十分重要的一方面。通過中斷,延遲,或者別的什麼方式讓用戶千辛萬苦地才能瞭解到您的內容,那麼你是在告訴他們,用戶的價值低於金錢。同樣,任何強迫用戶註冊,登錄,填寫郵箱等方式才能訪問到內容,都應重新考慮是否涉及欠妥。試想一下這種情況:由於你當前的主機無法滿足現有需求,於是你拚命尋找一個新的主機。它只是不斷崩潰,而這是在告訴你,你已經超越了當前解決方案(PS:順便祝賀你站點的成長)。如同很多科技的創業者們,你最初的解決問題的行動是用谷歌搜索一台新的主機 。
你偶然在Quora看見了一條線索,一個很多如同你一樣的創業者們經常光顧的站點。
 

你現在感覺非常興奮,因為在幾秒鐘內,你就會有個良好的開端!你問自己:「不行,它應該不會這麼簡單?」隨後你點開這個網站,事實證明它確實是不容易的(即使它應該是)。可悲的是,你會發現,該網頁要求你連接你的Facebook帳戶,否則你將無法看到所有的內容。

如果您選擇不與您的Facebook或谷歌帳戶登錄,只有一個答案可以看見。答案的其餘部分是模糊的。

如果這是你第一次訪問該站點,他們對你做的第一件事是有意掩蓋了你希望看到的內容 ,那不是會給你留下了可怕的印象?讓我們的用戶儘可能方便的獲得他們所希望看到的內容應該是作為最優先考慮的一項,作為網頁設計師。而任何阻礙該目標的東西,都應該從我們的設計中切去。現在有很多無須太過耀眼的方式來顯示廣告的設計策略。比如:讓用戶選擇他們是否要與廣告產生互動或者至少有一個快速跳過/忽略它們選擇,如側邊欄上的廣告。

用戶體驗 還有很多準則可以借鑑,比如: 提高網站瀏覽體驗,這裡有5條忠告 和這篇 網站用戶體驗的76個要點

缺乏網站的可訪問性 = 並不是所有人覺得你重要

無障礙網站設計需要被設計行業更為廣泛的認可。
我們需要關注我們的網頁設計的創新應該面向所有用戶,而不僅僅是使用昂貴觸摸屏智能手機。
無障礙網頁僅僅是跨過了那些殘疾人。一些使用舊的移動設備或者網速較差(全球平均上網速度只有2.9Mbs,還不到美國平均網速的一半)用戶也需要被列入。
除非你想你的網站的設計是希望留下這樣印象,即你是針對特定用戶的,要不然你還是精心的去製作具備無障礙特性的網站。其實大多數無障礙網頁網站的特點是比較容易實現的,已經是良好的網路設計最佳實踐的一部分。
雖然我們中的大多數會有意選擇忽略掉使用某種瀏覽器(比如故意選擇了不支持Internet Explorer 6)的用戶,但這是極其不不公平的,也許他們也無法控制(如色盲)。

缺少適當的空白 = 內容的可讀性並不重要

有一件事,我看到了很多網站,在內容或者圖片周圍都缺少一定的空白。
空白是一個強大的設計工具。空白可以拼讓您的內容更好的展現更,也易於閱讀。反之則帶來狹小的感覺和視覺上不舒服。
內容為王,我們應該花費一些(通常很少)時間來確保達到了最佳的發布形式。
為了說明,來看下下面這段文字的閱讀是多麼的困難:
 

這是很難讀,因為極小字母letter-spacing,line-height,padding,margin屬性值。這些都是很容易修正的問題,如果你瞭解CSS。在幾秒鐘內,只是一些padding,margin,和line-height屬性值的調整,同樣的文本變得更易閱讀。

這裡有一些關於使用空白的文章:

留白的重要性: 我們為何要在設計中重視「留白」
提高頁面可讀性的乾貨! 強烈推薦!格式塔在頁面設計中的應用

有用的404錯誤頁面 = 你關心站點上的用戶

404經常是由於在輸入不正確的URL。
一些鏈接到您的內容可能不再存在,或可能已被移動。
有時候,由於技術問題,某些網頁剛剛停止工作,。
對於這樣的事件,我們需要創建和設計一個有效的404頁面,這不單單是一個頁面,而是重申,讓用戶已經知道發生了什麼(他們並沒有訪問到正確的頁面)。

這 30個創意十足的404頁面設計 可能會帶來靈感,除此之外,騰訊同學灰常專業的總結也是設計404前必看的好文 四時充美:騰訊遊戲404頁面小結

一些設計有效的錯誤頁面設計的基本技巧:

為用戶準備一個搜索框,以便他們想嘗試找到某個頁面;

  • 提供一種可以幫助用戶的聯繫方式;
  • 自動建議與他們尋找的內容相關的內容列表
  • 鏈接到其他網頁,列出您的內容(例如,存檔頁面,地圖,幫助/支持頁面等)
  • 以下是GitHub的404錯誤頁面(一個 404錯誤頁面的的很好案例):

 

是什麼讓 GitHub 的錯誤頁面變得有效果?

  • 它有一個搜索表單,用戶可以用它來尋找到正確的網頁
  • 它有一個鏈接,允許網站訪問者獲得援助
  • 它有一個鏈接,讓用戶可以看到否該網站只是暫時有問題

如果你不採取措施,以幫助用戶找到他們所尋求的內容,那麼你只是告訴他們,他們應該去到另一個網站。

背景/前景對比度較弱 = 美學設計勝過清晰度

沒有提供足夠的背景與前景之間的色彩對比,對於很多視覺較差用戶來說是個壞消息。那麼你是在告訴你的用戶你更關心的是網站的美學設計,而不是它的實質內容。
下面是一個例子,色彩缺乏對比度對清晰度的影響
 

只需要很少的CSS調整, 在這種情況下,只是改變了<h1>和<p>元素顏色的屬性值,可以使閱讀體驗更好

雖然這裡有提高清晰度之類的工具 ,這將有助於你的用戶關心這些問題。當然這也是你作為網頁設計師的責任,在工作開始時便致力於提供更好的閱讀體驗。

儘可能的關注實現舒適的,令人喜歡的內容呈現。這會鼓勵用戶去關注你提供的內容。

如果你關注的是你的網站的設計缺乏足夠的色彩對比,可以先觀察借鑑這篇 玩轉整體色彩搭配!看看這40個經典案例 ,重新複習下基礎理論: 色彩知識大科普 和 網頁設計中色彩的運用
基礎打紮實了來看看最後的終極配色法 怎樣選擇合適的配色方案(附工具推薦) 和 設計師的選色指南

沒有參與功能 = 不關心用戶說什麼

為您的用戶提供一些方法,以便能夠與您聯繫,這會讓他們覺得你很關心他們在站點上的體驗。
這說明你非常重視他們的反饋,無論是正面或負面。
一些評論系統,聯繫的表單,電子郵件,社交網路,幫助和支持論壇,或者一個實時聊天工具 ,這些用戶參與的工具都表明你希望聽到他們反饋。
 

如果你沒有給予他們有聯繫你的機會,那麼你是在告訴人們,你並不關心他們有什麼要說的。用戶的反饋意見對於調整和開發您的網站的UI和UX而言是至關重要的,所以保持您的溝通渠道的暢通。你想說什麼? 
本文地址: http://www.uisdc.com/website-design-says

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。