網站使用者體驗3要素：別讓我等！ 別讓我想！ 別讓我煩！

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

使用者體驗三要素：別讓我等!別讓我想!別讓我煩!

別讓我等

曾有很多研究表明：使用者最滿意的打開網頁時間是2-5秒，如果等待超過10秒，99%的使用者會關閉這個網頁。 也許這樣講，各位還不會有太多感觸，接下來，我列舉一組資料：Google網站存取速度每慢400ms就導致使用者搜索請求下降0.59%; Amazon每增加100ms網站延遲將導致收入下降1%;雅虎如果有400ms延遲會導致流量下降5-9%。

怎麼樣?現在感受如何?是不是該馬上去做測試工作呢。

這時候你也許會問：什麼原因會導致網站打開慢?有什麼辦法解決呢?別急，我一一道來。 以下內容有些偏技術層面，各位需要耐心閱讀。

1、減少HTTP請求數

使用者在打開一個網頁的時候，幕後程式回應使用者所需的時間並不多，使用者等待的時間主要花費在下載網頁元素上了，即HTML、CSS、JavaScript、Flash、圖片等，統計顯示，每增加一個元素， 網頁載入的時間就增加25-40毫秒(取決於使用者的頻寬情況)。

所以，想要提高網頁打開速度，就要減少HTTP請求數，方法有3種：

1)減少不必要的HTTP請求，例如用CSS圓角代替圓角圖片，減少圖片的使用。

2)合併檔，對於文字檔，可以直接合並內容。 例如將多個JS(JavaScript的簡稱)檔合併成一個，將多個CSS檔合併成一個。

3)優化緩存，對於沒有變化的網頁元素(如頁頭、頁尾等)，使用者再次訪問的時候沒有必要重新下載，直接從瀏覽器緩存裡讀取就可以了。

2、使用CDN(Content Delivery Network，內容分發網路)

CDN由一系列分散到各個不同地理位置上的Web伺服器組成，它根據和使用者在網路上的靠近程度來指定某台伺服器回應使用者的請求。 當你的網站圖片很多事，就一樣要使用CDN了，比如現在的電商網站，幾乎都在使用CDN。

3、壓縮網頁元素

網頁中的每個元素越小，下載所需的時間就越少，這個很好理解。 現在比較成熟和流程的壓縮網頁的方式，是通過Gzip，我自己的實操經驗來看，一般可以將網頁文本內容減少70%以上。

4、樣式表放在網頁Head部分

這也是我實際操作過的案例，把樣式表(CSS檔)移到網頁的Head部分，可以提高頁面的載入速度，讓頁面元素順序顯示。

5、把JS檔放到網頁底部

網頁打開時，所有元素是順序顯示的。 由於JS檔的特殊性，其相比其他元素來說，會載入的很慢，在JS檔下載完成之前，其他後面元素的順序顯示將被阻塞，因此把JS檔儘量放在底部，意味著內容能被快速顯示。

6、把樣式表和JS腳本放到外部檔中

儘管將樣式表和JS腳本直接寫入網頁HTML中，可以減少外部檔調用數量，但是，這樣做會增加網頁的檔案大小。 綜合來看，將樣式表和JS腳本放到外部檔中，也許使用者首次訪問時會有點慢，但是後續在訪問網站時，使用者直接通過瀏覽器緩存就可以用，從而達到減少HTTP請求數的目的，為最優的做法。

寫在最後的話：

在提升網頁打開速度經常被忽視的一個問題是回應。 對於使用者來說，每次的操作，不管返回結果是慢，還是快，都要及時予以回應，最典型的例子就是：當使用者點擊打開一張圖片時，是否有百分比數字顯示的進度條，就是一個典型的回應設計。

一流的網站使用者體驗絕對不是一蹴而就的，要進行充分的可用性測試，收集使用者的回饋，持續改進。

別讓我想

使用者不會使用一個網站絕對不是使用者的錯，他會打開電腦，會使用鍵盤和滑鼠，會打開瀏覽器上網，經過這麼步驟最終到達了你的網站，然後發現網站上一團糟，搞不懂這是什麼，那是什麼，也懶得學習如何使用， 於是就會眼都不眨一下就關閉你的網站。 這是很現實的一個使用者行為。

在網站能夠快速觸達使用者之後，網站運營人員面臨的下一個重要問題就是：如何留住使用者?

一、包裝好你的網站

1、你是誰

我們辨識一個人，並不需要記住他從頭到腳所有細節，看他的臉就OK了;當我們辨識一個網站時，也是同樣的道理，網站的Logo就是臉。 Logo可以讓使用者輕鬆知道網站是誰，無論流覽到網站中的任何一個網頁，都能知道這是哪個網站在提供服務。

2、你是幹什麼的

有了網站Logo，還要告訴使用者，網站是提供什麼服務的，是購物網站，新聞網站，還是社交網站。 尤其是對於一個新網站，清晰的一句話介紹至關重要。

3、你能帶來什麼好處

這就是網站的差異化優勢介紹，相比同行競爭網站來說，使用者使用你的網站，好處是什麼，可以和「你是幹什麼的」整合成一句話至於Logo下方。

經過對網站的基礎包裝之後，我們算是完成了留住使用者的第一步工作，接下來，我們希望使用者在網站中做進一步的嘗試，如何做呢?

二、關注使用者及其任務，給予明確指引

對於使用者來說，登陸任何一個網站，一定都有其目的。 上購物網站是買東西，上入口網站是為看新聞，上SNS網站是為分享資訊、聯絡朋友等，要達到這些目的，一定需要進行一系列操作。 如果能讓使用者以最方便、最快捷的方式完成這些操作，順利完成任務，毋庸置疑，使用者一定會留下。

舉例來說，如果是一家電商網站，是否有清晰的站內搜索功能提示，清晰的商品分類導航，醒目的購買按鈕，以及靈活的付款結算系統等，這些都是圍繞著使用者及其任務(網上購物)展開的。 因此，在設計網站的時候，我們一定要給予使用者醒目、清晰的操作指引，以説明使用者儘快且順利地進入下一步，下一步，直至最終完成任務(下單付款)。

滿足使用者，其實很簡單，做到貼心、用心、上心，使用者自然會向你靠近。

別讓我煩

使用者都是喜歡偷懶的，如果你的網站操作效率很低，就會令使用者煩躁，進而導致不好的體驗，甚至出現壞口碑。 有一個粗略的說話是，完成任務的難度與其所需步驟的平方成正比，那麼，縮短完成路徑就是幫使用者偷懶，就是好的使用者體驗。

舉個正面的網站實例來說明。 登陸美國亞馬遜網站，當你進入一個商品頁面之後可以無刷新切換商品的規格，比如我要購買一台蘋果筆記本電腦，我打開了商品頁(大家自己登錄試試)，商品右側會有個版本切換的選項，在這裡我可以快速查看不同配置的電腦價格， 只需將滑鼠移動上去，商品圖片、價格等資訊就會自動發生變化。 這種人性化的設計，為想要比較商品的多個版本的使用者提供了極高的操作效率，使用者自然喜歡。

目標資訊要醒目而親近

在關注縮短完成路徑這個問題的時候，優化操作步驟是第一位的，因為我們首先要簡化使用者的任務。 接下來，我們要在任務內部優化指點設備(滑鼠或手指等)運動軌跡和眼球運動軌跡等細節。 根據費茨定律，使用指點設備到達一個目標的時間與以下2個因素有關：

1.設備當前位置和目標位置的距離，距離越短，所用時間越短。

2.目標的面積，面積越大，所用時間越短。

通俗來說，就是如果我們希望使用者注意或點擊某個元素(如文字、圖片、按鈕等)，那麼這個元素就不應該距離指點設備的當前位置太遠(比如出現在螢幕的右側)，並且它的面積要足夠大。 伴隨著Web2.0的熱浪，網站設計也有了一系列的革新，其中最大的一個革新就是「以大為美」，大大的LOGO，大大的圖片，大大的按鈕，它們不光看起來更有衝擊力，也更方便使用者的識別和點擊。

提醒方式要溫和並及時

除了簡化任務流程之外，在使用者完成任務的過程中，網站有時需要給使用者提供説明和指引。 之前常見的做法是採用彈框方式進行提示，使用者需要關閉對話方塊才能繼續自己的任務，無形中降低了操作效率。

最佳的提醒方式應該轉向溫柔的方式，將打斷降低到最低，舉個例子：當在你註冊一個郵箱時，當輸入使用者名後，最佳的檢驗方式應是自動查詢此使用者名是否可用，如不可用，應給出建議，yeah.net郵箱就做的很好，圖略(大家可以登錄嘗試 )。

其實，有時候操作效率的降低，並不是因為功能設計得不夠好，或者提示和建議處理得不夠好，而是由於強行的塞進了一些使用者不想要的資訊或任務。 比如，使用者正在閱讀一篇文章，忽然飄出來一個廣告擋住了使用者想要閱讀的部分，使用者怎麼能不惱火?

經營網站，儘管是盈利為本，但是過分的不重視使用者體驗，忽視使用者感受，小心衣食父母離你而去，並一去不返。

當使用者犯錯的時候，你是如何做的呢?

在我們做好一切運營優化後，有一種情況需要另外注意，就是使用者會自己出錯。

當使用者出錯的時候他也會很煩躁，他不會認為是他自己的問題，反倒會把責任推給網站，所以要盡可能降低使用者出錯的機會。

舉一個網站的例子，當使用者登錄一個網站時，首先是輸入使用者名，現在最常見的使用者名是採用郵箱。 當使用者在使用者名的輸入框內輸入郵箱位址時，不可避免的會出現錯誤，比如少了1個字母，或少寫了1個數字，或者郵箱尾碼寫錯了，結果肯定是登陸不進去。 使用者一定會惱火，最佳的提醒方式應該是什麼呢?

當使用者輸入使用者名，游標離開輸入框之後，網站應自動校驗此使用者名是否已註冊(可用)，如若使用者填寫錯誤，應及時給予提醒，如：使用者名不存在，郵箱格式不對等，讓使用者的出錯在萌芽時就完成糾正。

再舉個非網站的例子。 筆記本電腦電源線可能會絆倒人，同時筆記本電腦也會被摔倒地上，這很可能不在保修範圍之內，這種情況很糟糕。 看看Apple是怎麼做的，Apple推出了名為Magsafe的電源介面以減少這種出錯，Magsafe採用磁力的方式連接電源線與筆記本，當電源線受到外力時，會自動脫離筆記本。 是不是很貼心的設計?

這樣的例子還有很多很多，這裡不再一一列舉。 記住：使用者是否喜歡一個網站，不僅取決於他使用網站獲得的好處，也取決於他在網站中獲得的體驗，兩方面都是使用者價值所在，缺一不可。

原文連結：HTTP://jianshu.io/p/65934891ca45