設(shè)計一款移動網(wǎng)站應(yīng)用，如何才能抓住用戶的心？

在2016年，全球的移動互聯(lián)網(wǎng)使用率首次超過臺式電腦。根據(jù)谷歌英國地區(qū)研究：

“如今，65％的英國成年人都使用智能手機(jī)作為他們上網(wǎng)的主要設(shè)備?！?/p>

人們搜索信息，購買商品，訂閱服務(wù)都是使用移動設(shè)備。用戶偏好的轉(zhuǎn)變導(dǎo)致用戶對產(chǎn)品的期望也大大增加。如今，大多數(shù)用戶對于糟糕的手機(jī)性能幾乎沒有耐心 – 如果他們不能立即獲取他們想要的東西，他們就會轉(zhuǎn)投其他產(chǎn)品的懷抱（這對于一款應(yīng)用來說簡直是重?fù)簦?/p>

設(shè)計一款移動網(wǎng)站應(yīng)用，如何才能抓住用戶的心？首先，設(shè)計師應(yīng)該規(guī)避設(shè)計中一些常見的錯誤，提高運(yùn)行速度。在這里，我將會提供一些解決頁面加載緩慢，登錄墻用戶體驗(yàn)差和支付過程耗時久這些常見問題的方法，以供參考。

頁面加載緩慢

由于目前的技術(shù)支持實(shí)現(xiàn)更快的體驗(yàn)，用戶的等待意愿開始下降。

“其中三分之二的移動網(wǎng)絡(luò)用戶表示，加載頁面所需的速度對他們的整體體驗(yàn)影響最大。”

Google在全球范圍內(nèi)對90萬個移動網(wǎng)站進(jìn)行了測試，發(fā)現(xiàn)完全加載移動網(wǎng)頁所需的平均時間為22秒。與此同時：

如果加載時間超過3秒，53％的用戶將離開移動網(wǎng)站。

解決方法

1.?試著找出造成加載緩慢的原因

如果加載緩慢是你網(wǎng)站的常見情況，請嘗試找出具體原因并解決問題。通常，頁面加載時間受以下影響：

視覺元素（圖像和動畫）。高清圖像和流暢的動畫只能在不影響加載時間的情況下創(chuàng)建良好的用戶體驗(yàn)。因此，這可能是造成網(wǎng)站加載緩慢的原因之一。建議閱讀“圖像優(yōu)化”相關(guān)知識了解更多優(yōu)化細(xì)節(jié)。

自定義字體。與網(wǎng)站上其他資源一樣，下載自定義字體會耗費(fèi)一定的加載時間(如果字體位于第三方服務(wù)上，則需要更多時間)。

商業(yè)邏輯。程序編寫不夠規(guī)范。

網(wǎng)站基礎(chǔ)設(shè)施。網(wǎng)站所使用的硬件，如服務(wù)器的性能、寬度速度以及服務(wù)器的硬件配置都會影響加載速度。

2.測試你的網(wǎng)站

如何測試網(wǎng)站的性能？這里推薦兩個工具給大家。第一個是Google’s Test MySite，該網(wǎng)站會根據(jù)網(wǎng)站性能的現(xiàn)狀，提供有關(guān)如何加速和改進(jìn)網(wǎng)站的可操作報告。

WebPagetest 是另一個測試和優(yōu)化網(wǎng)站性能的工具，它允許你對全球多個地方的真實(shí)用戶使用的真實(shí)瀏覽器 (如IE瀏覽器和谷歌瀏覽器) 的連接速度進(jìn)行一個免費(fèi)的測試。

3.?使用加載占位圖

如果你不能提高網(wǎng)站實(shí)際的運(yùn)行速度，至少試著營造一種加載速度很快的感覺–用戶對于網(wǎng)站速度快慢的感覺通常比實(shí)際的加載速度更重要。

加載占位圖是在加載內(nèi)容時顯示的頁面版本。占位圖會使用戶感覺網(wǎng)站速度的運(yùn)行起來比實(shí)際情況更快。

設(shè)計師不妨在Codepen Example中查看占位圖效果。它的設(shè)計者就是利用壓力緩沖器的原理，使用占位圖給用戶營造出一種錯覺：網(wǎng)站正在運(yùn)行，并且內(nèi)容在快速加載中。

登錄墻設(shè)置

在用戶使用應(yīng)用程序之前，一般會有一個強(qiáng)制性注冊的登錄墻。登錄墻是用戶在初次使用下放棄應(yīng)用的主要原因。對于品牌認(rèn)知度較低或價值主張不明確的應(yīng)用而言，使用應(yīng)用的用戶數(shù)量尤其重要。因此，建議推遲注冊 – 提供用戶嘗試應(yīng)用該項(xiàng)服務(wù)，他們會更樂意完成此步驟。

解決方法

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

如果你讓用戶創(chuàng)建一個獨(dú)特的用戶名，他們很可能會遇到以下這些麻煩:

由于用戶名必須是唯一的，因此用戶可能需要花費(fèi)幾分鐘才能得到正確的名稱，因?yàn)槭走x用戶名已被其他用戶使用。

用戶可能會以用戶名注冊，但過了一段時間后，他們就會完全忘記。根據(jù)Janrain+Blue的研究，92%的用戶如果忘記了用戶名就會放棄使用。

因此，允許用戶通過電子郵件或電話號碼作進(jìn)行注冊，讓注冊更加簡單輕松。

2.?使密碼驗(yàn)證成為無摩擦的體驗(yàn)

用戶經(jīng)常忘記他們的賬號密碼，當(dāng)他們不得不經(jīng)歷密碼重置這個過程時，他們會感到非常惱火。

這時候設(shè)計師應(yīng)該怎么做？簡化認(rèn)證體驗(yàn)，減少放棄風(fēng)險。使用第三方登錄（使用Facebook / Twitter登錄）：

Flipboard允許用戶通過社交網(wǎng)絡(luò)帳戶登錄，

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

iPhone應(yīng)用程序的Chase銀行提供了一鍵式登錄選項(xiàng)。

3.?提供其他登錄方式

根據(jù)用戶提供的相關(guān)信息來提供其他登錄方式。例如，如果你擁有用戶的手機(jī)號碼，則可以在手機(jī)上輸入一次性密碼。

漫長的支付過程

越來越多的移動用戶不僅使用移動設(shè)備搜索商品，甚至?xí)谑謾C(jī)上完成支付過程。這意味著我們需要為小屏幕設(shè)備設(shè)計購物體驗(yàn)，并讓它盡可能舒適。但說起來容易往往做起來難，在移動設(shè)備上填寫結(jié)賬表單可能很痛苦。因此，繁瑣的支付過程是導(dǎo)致用戶放棄支付的主要原因。這并不奇怪，根據(jù)Google數(shù)據(jù)表明：

“50％的用戶因?yàn)椴挥淇斓囊苿佣酥Ц扼w驗(yàn)而放棄了交易”。

解決方法

1.不要強(qiáng)迫用戶創(chuàng)建賬號

據(jù)Baymard研究所稱，強(qiáng)迫用戶創(chuàng)建賬號是消費(fèi)者放棄購買的最大原因之一。正確的做法是支持用戶無需注冊進(jìn)行購買。因此，應(yīng)用不僅需要為消費(fèi)者提供了“快捷支付”選項(xiàng)，而且要讓該選項(xiàng)足夠清晰可見 (Baymard研究所還發(fā)現(xiàn)，88%的移動端支持訪客支付，這些選項(xiàng)往往由于不夠明顯而容易地被用戶忽略)。

易趣提供了兩種選擇 -“登錄支付”和“訪客支付”

2. 記住用戶的詳細(xì)信息

不要要求用戶輸入他們之前提供的任何信息。收集過用戶數(shù)據(jù)之后，可以再將其用于用戶的其他新交易中。這些數(shù)據(jù)可能是收貨地址和支付信息，一定要確保用戶在需要的時候可以進(jìn)行修改。

3.?利用地理位置數(shù)據(jù)

與其向用戶詢問送貨地址，不如將其當(dāng)前位置作為配送貨物的默認(rèn)選項(xiàng)。但在設(shè)計時需確保用戶在需要的時候，可以輕松地更改收貨地址。

當(dāng)用戶點(diǎn)擊“分享我的位置”按鈕時，表格中的信息將會自動填入當(dāng)前地址。

4.?使用Apple Pay或Google Pay支付

談到付款問題，設(shè)計者應(yīng)該盡可能提供用戶多種選擇，這樣用戶就可以選擇他們喜歡的方法進(jìn)行支付。提供多種支付選項(xiàng)的應(yīng)用程序，如Apple Pay和Android Pay，可以讓用戶在付款時從填寫額外表單的痛苦中解脫出來，并能提供給他們更大的安全感。

5.?設(shè)計“快速購買”選項(xiàng)

設(shè)置自“快速購買”這個選項(xiàng)可能對老用戶更有幫助。當(dāng)用戶點(diǎn)擊“快速購買”按鈕時，網(wǎng)站應(yīng)該自動將用戶重定向到購買信息頁面進(jìn)行確認(rèn)。所有常用的支付方式和收貨地址都應(yīng)該直接從之前的訂單中進(jìn)行提取。

6.?支持使用其他設(shè)備繼續(xù)購買

雖然使用移動設(shè)備完成購買的人數(shù)正在增長，但有相當(dāng)多的用戶使用手機(jī)只是為了瀏覽，更喜歡在臺式電腦上完成購買。設(shè)計者應(yīng)該設(shè)置“保存以待后用”或“將購物車發(fā)送至郵箱”的選項(xiàng)來幫助用戶完成支付。

閱讀本文（本文最初發(fā)表于 babich.biz）之后，你們有更多關(guān)于改善移動網(wǎng)站性能的建議嗎？ 歡迎在下面的評論區(qū)中進(jìn)行分享！

原文作者：Nick Babich

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

本文由@Mockplus（摹客）團(tuán)隊?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。i

題圖來自unsplash，基于CC0協(xié)議