移動網站應用設計：速度相當重要！

如下內容由Mockplus（摹客）團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

在2016年，全球的移動互聯網使用率首次超過臺式電腦。根據谷歌英國地區研究:

「現在，65％的英國成年人都使用智能手機做爲他們上網的主要設備。」

人們搜索信息，購買商品，訂閱服務都是使用移動設備。用戶偏好的轉變致使用戶對產品的指望也大大增長。現在，大多數用戶對於糟糕的手機性能幾乎沒有耐心 - 若是他們不能當即獲取他們想要的東西，他們就會轉投其餘產品的懷抱（這對於一款應用來講簡直是重擊）。

 

設計一款移動網站應用，如何才能抓住用戶的心？首先，設計師應該規避設計中一些常見的錯誤，提升運行速度。在這裏，我將會提供一些解決頁面加載緩慢，登陸牆用戶體驗差和支付過程耗時久這些常見問題的方法，以供參考。

頁面加載緩慢

因爲目前的技術支持實現更快的體驗，用戶的等待意願開始降低。

「其中三分之二的移動網絡用戶表示，加載頁面所需的速度對他們的總體體驗影響最大。」

Google在全球範圍內對90萬個移動網站進行了測試，發現徹底加載移動網頁所需的平均時間爲22秒。與此同時：

若是加載時間超過3秒，53％的用戶將離開移動網站。

解決方法

1. 試着找出形成加載緩慢的緣由

若是加載緩慢是你網站的常見狀況，請嘗試找出具體緣由並解決問題。一般，頁面加載時間受如下影響：

視覺元素（圖像和動畫）。高清圖像和流暢的動畫只能在不影響加載時間的狀況下建立良好的用戶體驗。所以，這多是形成網站加載緩慢的緣由之一。建議閱讀「圖像優化」相關知識瞭解更多優化細節。

自定義字體。與網站上其餘資源同樣，下載自定義字體會耗費必定的加載時間(若是字體位於第三方服務上，則須要更多時間)。

商業邏輯。程序編寫不夠規範。

網站基礎設施。網站所使用的硬件，如服務器的性能、寬度速度以及服務器的硬件配置都會影響加載速度。

2.測試你的網站

如何測試網站的性能？這裏推薦兩個工具給你們。第一個是Google’s Test MySite，該網站會根據網站性能的現狀，提供有關如何加速和改進網站的可操做報告。

WebPagetest 是另外一個測試和優化網站性能的工具，它容許你對全球多個地方的真實用戶使用的真實瀏覽器 (如IE瀏覽器和谷歌瀏覽器) 的鏈接速度進行一個免費的測試。

3. 使用加載佔位圖

若是你不能提升網站實際的運行速度，至少試着營造一種加載速度很快的感受--用戶對於網站速度快慢的感受一般比實際的加載速度更重要。

加載佔位圖是在加載內容時顯示的頁面版本。佔位圖會使用戶感受網站速度的運行起來比實際狀況更快。

設計師不妨在Codepen Example中查看佔位圖效果。它的設計者就是利用壓力緩衝器的原理，使用佔位圖給用戶營造出一種錯覺: 網站正在運行，而且內容在快速加載中。

 

 

登陸牆設置

在用戶使用應用程序以前，通常會有一個強制性註冊的登陸牆。登陸牆是用戶在初次使用下放棄應用的主要緣由。對於品牌認知度較低或價值主張不明確的應用而言，使用應用的用戶數量尤爲重要。所以，建議推遲註冊 – 提供用戶嘗試應用該項服務，他們會更樂意完成此步驟。

解決方法

1.使用電子郵件地址或電話號碼做爲用戶ID

若是你讓用戶建立一個獨特的用戶名，他們極可能會遇到如下這些麻煩:

因爲用戶名必須是惟一的，所以用戶可能須要花費幾分鐘才能獲得正確的名稱，由於首選用戶名已被其餘用戶使用。

用戶可能會以用戶名註冊，但過了一段時間後，他們就會徹底忘記。根據Janrain+Blue的研究，92%的用戶若是忘記了用戶名就會放棄使用。

 

所以，容許用戶經過電子郵件或電話號碼做進行註冊，讓註冊更加簡單輕鬆。

2. 使密碼驗證成爲無摩擦的體驗

用戶常常忘記他們的帳號密碼，當他們不得不經歷密碼重置這個過程時，他們會感到很是惱火。

 

這時候設計師應該怎麼作？簡化認證體驗，減小放棄風險。使用第三方登陸（使用Facebook / Twitter登陸）：

 

Flipboard容許用戶經過社交網絡賬戶登陸，

或指紋觸摸/臉部識別登陸：

 

iPhone應用程序的Chase銀行提供了一鍵式登陸選項。

3. 提供其餘登陸方式

根據用戶提供的相關信息來提供其餘登陸方式。例如，若是你擁有用戶的手機號碼，則能夠在手機上輸入一次性密碼。

 

漫長的支付過程

愈來愈多的移動用戶不只使用移動設備搜索商品，甚至會在手機上完成支付過程。這意味着咱們須要爲小屏幕設備設計購物體驗，並讓它儘量溫馨。但提及來容易每每作起來難，在移動設備上填寫結帳表單可能很痛苦。所以，繁瑣的支付過程是致使用戶放棄支付的主要緣由。這並不奇怪，根據Google數據代表：

「50％的用戶由於不愉快的移動端支付體驗而放棄了交易」

解決方法

1.不要強迫用戶建立帳號

據Baymard研究所稱，強迫用戶建立帳號是消費者放棄購買的最大緣由之一。正確的作法是支持用戶無需註冊進行購買。所以，應用不只須要爲消費者提供了「快捷支付」選項，並且要讓該選項足夠清晰可見 (Baymard研究所還發現，88%的移動端支持訪客支付，這些選項每每因爲不夠明顯而容易地被用戶忽略)。

 

易趣提供了兩種選擇 -'登陸支付'和'訪客支付'

2. 記住用戶的詳細信息

不要要求用戶輸入他們以前提供的任何信息。收集過用戶數據以後，能夠再將其用於用戶的其餘新交易中。這些數據多是收貨地址和支付信息，必定要確保用戶在須要的時候能夠進行修改。

3. 利用地理位置數據

與其向用戶詢問送貨地址，不如將其當前位置做爲配送貨物的默認選項。但在設計時需確保用戶在須要的時候，能夠輕鬆地更改收貨地址。

 

當用戶點擊「分享個人位置」按鈕時，表格中的信息將會自動填入當前地址。

4. 使用Apple Pay或Google Pay支付

談到付款問題，設計者應該儘量提供用戶多種選擇，這樣用戶就能夠選擇他們喜歡的方法進行支付。提供多種支付選項的應用程序，如Apple Pay和Android Pay，可讓用戶在付款時從填寫額外表單的痛苦中解脫出來，並能提供給他們更大的安全感。

 

5. 設計「快速購買」選項

設置自「快速購買」這個選項可能對老用戶更有幫助。當用戶點擊「快速購買」按鈕時，網站應該自動將用戶重定向到購買信息頁面進行確認。全部經常使用的支付方式和收貨地址都應該直接從以前的訂單中進行提取。

6. 支持使用其餘設備繼續購買

雖然使用移動設備完成購買的人數正在增加，但有至關多的用戶使用手機只是爲了瀏覽，更喜歡在臺式電腦上完成購買。設計者應該設置「保存以待後用」或「將購物車發送至郵箱」的選項來幫助用戶完成支付。

閱讀本文（本文最初發表於 babich.biz）以後，大家有更多關於改善移動網站性能的建議嗎？ 歡迎在下面的評論區中進行分享！

原文做者：Nick Babich

原文連接：https://uxplanet.org/mobile-web-when-speed-matters-d371a961cf46