42 個移動端啓動頁面優化 Tips

我們都聽過這句話,“你只會有一次機會去打造第一印象”, 當涉及到移動端的啓動頁面時,這句話會更加令人信服. 在最基本的層面上,啓動頁面將會是消費者同你網站的第一次接觸.

擁有好的第一印象是很重要的. 今年早些時候我們發佈了這篇文章, 《響應式設計不是一種移動端優化策略》 ,它專門講爲你的移動通信媒介打造專用移動端啓動頁面來將訪問者轉換成消費者的重要性.

Responsive-design-

 移動端統計數據:

  • 今年美國智能手機的移動商務收入爲148億美元. (Statista)

  • 到 2016, 移動端本地搜索有望創造32億美元的收入,相比之下,桌面端爲102億美元. (Kelsey 報告)

  • 50%的智能手機用戶曾通過他們的手機進行過消費(Prosper Mobile Insights).

  • 73% 的智能手機用戶聲稱他們曾使用移動端 web 而不是 app 來進行購買(JumpTap.com).

下面是42個移動端啓動界面的優化建議,它們能幫助你將更多的移動端訪問者轉換成付費顧客,這些建議分爲如下類別:

  •  策略

  •  基礎

  •  AB 測試

策略

1. 知道從哪裏開始 —— 創建一個完整的移動端 web 是昂貴的,且會耽誤許多的時間。所以起步的最好方式是通過跟蹤分析,瞭解轉型中的痛點和漏洞。一旦你瞭解了這些,你就會明白從哪裏開始了。你所要在轉型中關注的應該是流量,用戶量和購買模式.

2. 瞭解你的顧客的目標 —— 確保你能瞭解移動端和桌面端用戶的目標有何不同。你是不是想要他們擁有完全一樣的體驗呢?我們使用 web 和移動端相比有所不同,其體驗是不同的,而且又是我們因爲完全不同的原因同時使用兩種或者三種設別.。要考慮到你的訪問者會在你的移動端站點上做些什麼,理解他們嘗試要達成的目標是什麼,並且創建一個用戶導遊來幫助他們更快跟敏捷的達成其目標。

3. 定義你的目標 —— 一旦你瞭解並且也定義好了訪問者的目標,那你就要定義好啓動頁面的目標並在心裏針對那個目標設計一種體驗。扔掉那些不重要的信息、針對過個調用的動作按鈕以及其它的噱頭。要專注於啓動頁面最重要的元素,以及如何讓它們幫助你的訪問者完成你的目標。

4. 改變他們的生活:有無數的公司在做同樣的事情。人們在移動端的站點上花費的時間很少,並且需要在幾秒中之內理解你(頁面上)最有價值的部分。記得要關注客戶和他們的利益。至少要說明:“我們是世界上最好的”,多一些可以說:“這將會改變你的生活”。

Screen-Shot-2014-11-17-at-9.32.23-AM

5. 定義所需的操作 –  你希望訪問者在你的移動登錄頁上,知道一個他所需要的操作,那就要制定一個清晰的行爲召喚(call to action),最好是明顯的,具有邏輯性的,這能讓訪問者明確地移動到下一步。

6. 在重要的位置表述 – 一個訪問者應該能夠很快就區分他們,而不是去閱讀複雜的文本和故事。確保你有價值的位置是在頁面的頂部。你的標題和行爲召喚(call to action)應該在摺頁(fold)(當訪問者登錄到頁面的時候就能看到的部分)之上,這樣能更快速地讓訪問者取其所需。

7. 清晰地知道後果 – 重要地是讓訪問者能清晰地理解,如果他們提供信息,你將會如何使用收集到的信息。

基礎

8. 忘記滾動 —— 要創建出適合一個移動端屏幕邊界的頁面,並且這樣的頁面不需要滾動。這一點同時適用於橫屏和豎屏模式.

9. 同時爲橫向和縱向的屏幕做設計 —— 大多數人在設計移動端啓動界面時都會考慮到縱向視圖, 但是有賴於訪問者會橫着拿他們的手機,所以他們也可能會在橫屏模式下瀏覽你的移動端網站。要確保你的移動端啓動界面針對這兩種情況都能進行縮放.

Localization-on-mobile-pages

10. 使用本地化設置 —— 啓用了 GPS 的設備可以運用特殊的本地化內容來減少文化差異的摩擦,提高轉換率。 在你的註冊表單中你可以通過他們輸入的郵編偵測到訪問者的國別和城市。 可以讓“郵編”作爲你的第一個地址信息輸入項,並好好利用這一項信息來做點事情。

11. 移除外部鏈接 —— 通過移除連接到網站其它部分的外部鏈接,你可以控制訪問者的瀏覽過程,使其更專注於你需要他們做出的動作。記住,移動端瀏覽器新的tab —— 打開立即就會是訪問者原理你所設定的目標位置。要使其編程一次快速輕鬆的瀏覽過程,而別讓他們跑到別的地方去了。

12. 去掉雜七雜八的東西 —— 集中在重點上,儘可能保持頁面整潔,減少摩擦,保證按鈕之間的間距足夠大。雜七雜八的東西以及文字和顏色越少,訪問者越願意完成這項渠道。

13. 保持流程和設計的一致性——不要使訪問者感到驚訝或被愚弄,在手機登錄界面上使用他們在廣告上看到的相同信息和設計。與信息保持一致,將有助於使頁面的訪問變現,同時提供廣告品質。

14.別讓用戶縮放——登錄頁面的焦點由你決定。登錄頁面的設計方式將決定用戶在網站上的操作。如果讓用戶縮放,他們將選擇網站的焦點,而不是你。

IMG_0277

15.點擊呼叫——很多移動搜索用戶的目標都是立刻獲取聯繫。相比複製粘帖號碼,直接使用“點擊呼叫”按鈕將更容易讓用戶快速開始對話。在開始前,設置好你的電話追蹤器以便跟蹤來電。

16. 調整鍵盤 — 確保在每個表格區域中使用合適的鍵盤。訪問者可以不用改變鍵盤輸出而快速的插入數字或者郵件。

17. 保持表格最小化 — 所有設備上的註冊表單都讓人沮喪,手機上的註冊表單更是如此。由於在手機上輸入非常費勁,所以在可能的情況下儘量避免打開文本域。確保表格夠大夠清楚,可使用全屏,並使字段和提交按鈕大的可以用拇指點擊(忽略右邊區域,因爲它太小不能拖拽)。

18. 簡化搜索—讓訪問者可以很容易的快速找到他們需要的內容。將搜索元素放在覈心位置,可以保證用戶可以快速的找到他們所需要的。(記住,這並不是最重要的因素,所以不要讓它反超其他元素)

20. 允許“稍後購買—— 有時候我們沒有足夠的實際或精力來完成註冊或購買流程。可以在其他設備上通過 email 或加到購物車的簡單方式,讓使用者可以很容易的在其他設備上稍後完成購買流程。

21. QA,QA,再QA —— 因爲手機網站在你自己的手機上測試通過,並不意味着它可以在別人的手機上也可以。在開始前,在谷歌 Analytics上覈查,以找出訪問者最常使用的的手機屏幕。確保在多種設備上檢查你的登錄界面,並在一段時間內進行跟蹤。

22. 要求少一些 —— 爲了減少摩擦、提高轉化率,可對訪問者要求少一些。在開始時,只獲取所需要的最重要的信息,稍後再獲取額外的信息。手機屏幕很小、時間寶貴,如果難以操作,人們將不會逗留。

23.使副本最小化 —— 大多數訪問者不想通讀文章的好幾個段落。將最重要的信息放在登錄頁面上,使訪問者快速移動到下一步。

24. 強調你的行動引導 –
行動的引導是一個訪問者在啓動頁面看到的第一樣東西。提供一個快速的方式讓用戶跟着你的行動引導,完成整個流程。讓你的行動引導按鈕可視,並且容易通過觸摸屏點擊。

通過 Naked Wines 檢驗以下示例:

  • 大量文本

  • 行動引導按鈕被切斷

IMG_0274

25. 優化你的表單 – 讓的的表單儘可能的簡單,讓訪問者快速完成你的表單,嘗試着分離成多個簡單的步驟。

26. 標題儘量短 – 標題長度不要超過 3-4 詞,儘量一行顯示。

27. 構建限制數據大小 – 移動數據連接會比家庭寬帶連接慢,用戶並沒有那麼多耐心等待移動網站的加載。確保符合移動用戶的需求,更輕量級。

28. 遠離 Flash –也許在 Web 上看着不錯(無法轉換),但在移動端並不合適。使用 HTML5,GIFs 和 JPEGs 會更好一些。

29. 將導航位置考慮進來 – 我們使用智能手機來看電視,開車,購物和完成各種功能。應使移動端順眼,並使用圖標來進行快速導航(包括短文字說明)。

30. 擁抱第三方社交平臺登錄 – 第三方登錄有着很高的轉化率,對於鼓勵訪客和你的商品進行社交互動是個極佳的方式。

31. 提供移動獨享 – 大多數人更喜歡使用 PC 屏幕來下單。爲了提高轉換率,可嘗試提供移動端獨享,以減少與 PC 端正面競爭,增加銷售。

32. 爲動作而設計 – 將所有的可點擊元素設計爲按鈕(不僅僅是文本鏈接), 確保它們足夠大,並留白以突出。

iconixx_calculation-2

33. 少即是多——儘量使用少一點的文字,去除所有不必要的設計元素,只留下功能要素。

34. 消息個性化——智能手機提供了很多重要的用戶信息。手機爲用戶提供瞭如 GPS 和基於位置服務的一體化特性,如:運往華盛頓!

35. 考慮字體因素——讓文本更易讀。使用更大的字體、行間距和字間距讓文本容易閱讀和略讀。

36. 使 SEO優化而不破壞轉換策略——避免在手機登錄頁面使用大量文字,或者引入可伸展的 div 而引發混亂。這將縮短頁面,使用戶可以點擊他們感興趣的內容。

手機上的 AB 測試

Screen-Shot-2014-11-17-at-9.37.05-AM

37. 測試關鍵績效指標(KPI)—— 開始測試前,確定你的商業目標,然後把它們轉換爲數字化的關鍵績效指標(KPI)(例如註冊數量、購買數量、下載次數)。一旦確定了關鍵績效指標,就要確保建立正確的跟蹤機制。

38.達到顯著效果 —— 當你運行測試時,確保在達到顯著效果前一直運行,你可以使用 Google Experiments 或者 A/B test calculator 來知道何時達到這個效果。達到顯著效果可以確保你儘可能的從測試中瞭解更多,並知道它們的正確性。

39.避開特殊日期——在可以提供最真實的測試結果的環境下開展測試。避免在節假日、特殊活動或者結賬日測試。

40.保持系統性——爲了達到清晰並可理解的測試結果,確保在一段時間運行一個測試,或者如果你有足夠的流量來同時運行多個測試組。

41. 測試策略,不是元素 –
當你處理好所有技術性問題和元素之後,可以增加用戶轉換率,但是要確保有測試策略,這樣能更好的理解你的用戶。測試按鈕顏色或者標題只會讓你關注某一個點。爲了能獲得最大的勝利,從你的測試中獲取更多有價值的東西,你需要開啓測試情緒化策略。

42. 使用一個清單 – 建議使用一個清單來記住以上講述的所有啓動頁面優化的策略,確保沒有漏掉任何重要的部分。一個清單也可以確保你和你的團隊爲每個項目都能按照這些策略去優化。

結束

響應式設計並不是一個移動優化策略。爲了得到更多的移動訪問者,創建專用的啓動頁面和啓動頁面的不同用戶體驗是成功的關鍵。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章