如何打造一個用戶體驗良好的下載頁面?

3 評論 13125 瀏覽 69 收藏 11 分鐘

下載頁面是一個移動產品的臉面,是用戶接觸產品的第一層。那么如何打造一個用戶體驗良好的下載頁面呢?本文為你解析。

下載頁是移動互聯網在傳播移動端產品的必備頁面。由于一些產品經理對這塊注意不足或者不屑在這個地方深究,導致產品在下載頁的體驗并不好。同時很少見有人專門對此撰文,因此來簡單聊聊下載頁面存在的“坑”、流程設計和界面設計。

通過梳理完善下載頁的業務流程,能改善下載產品過程中的用戶體驗,同時能進一步提高產品經理的流程化意識。

1 下載頁面的作用

1.1 展示產品核心功能與界面設計的窗口

為什么一個下載頁面是如此的重要?下載頁是產品重要的入口。用戶看到一個產品時,根本不會去看密密麻麻的介紹文字。更多的是粗略看產品介紹頁的圖片。此時下載頁承載著傳遞產品的核心特點、最新功能和展示界面設計的功能。

1.2 App下載前的最后一道障礙

下載頁是用戶下載決策前的最后一道障礙。根據漏斗模型,從用戶開始了解你的產品,到查看產品介紹到下載,最后到開始使用產品,用戶將會呈漏斗狀減少。下載頁是一個非常重要的過渡頁。頁面的設計是否美觀,下載流程是否順暢都關系到用戶是否繼續使用產品。在下載頁應盡可能的避免較多的點擊次數。

?2 下載過程中存在的坑

最大的來自騰訊的微信與應用寶。微信是手機必備社交軟件,但其自帶的瀏覽器不允許(非法)跳轉。因此,使得很多下載鏈接無法自動下載移動客戶端。(支付寶下載頁甚至被完全屏蔽了)于是一些產品經理直接采用了騰訊開發平臺提供的微下載鏈接。微下載是騰訊官方提供的下載鏈接,可自動判斷手機系統類型。微下載鏈接方便了iOS系統的跳轉,但在Android端體驗不好。

應用寶是國內最大的第三方安卓應用市場,眾多的安卓移動客戶端通過應用寶分發出去。用安卓微信掃描二維碼,打開下載頁面,“普通下載”按鈕故意做得很小,而突出顯示了“安全下載”按鈕。點擊安全下載,首先下載的卻是應用寶的APK。點擊普通下載,則還需用戶點擊確定。如果用戶是第一次接觸肯定會點擊錯誤。例如下圖的簡書安卓版。這種方式是常用的流氓手段~

3 下載流程分析梳理

首先在闡述流程之前,PM要厘清用戶可通過什么方式進入到下載頁面,用戶所使用的訪問方式(工具)是什么,手機系統是iOS還是Android。通過簡單的思維導圖可梳理出本產品可能存在的組合場景。

從進入下載頁的方式主要分為兩類:

  1. 直接訪問下載頁面。用戶通過主頁跳轉或者其他頁面跳轉到下載頁面。
  2. 掃描(網站/文章)二維碼。

隨著二維碼的普及,越多越多的信息通過二維碼傳播,而下載頁的鏈接生成二維碼置于海報、文章中??赡艿姆绞桨ㄔ诰W站下載頁面直接用微信掃一掃/瀏覽器掃描二維碼,在文章末尾識別二維碼。

下載頁面訪問方式包括web端(PC瀏覽器)、wap端(手機瀏覽器)和微信(內置瀏覽器)。

另外要考慮的不同的手機操作系統。當前主流為iOS與Android,兩者在下載方式有很大的不同。iOS僅能通過APP Store下載安裝。Android可以通過直接下載APK,也可以通過應用市場安裝,效果都一樣。

在下載頁面流程的設計之前有2個原則應充分注意到:

1)盡可能減少跳轉,減少用戶點擊的次數。

跳轉次數越多,用戶點擊次數更多,用戶的耐心被消耗,則頁面跳出率越高。當然還要結合其他因素一起考慮。要盡量避免在諸如下載軟件首先下載的是應用寶軟件這種被“坑”的事情。

2)把簡單留給用戶,把復雜留給自己。

對于前端展示給用戶的邏輯盡可能簡單,而背后可能存在的復雜的判斷留給后臺來進行。用戶都是“懶”的,下載流程要讓用戶少想少操作。如Keep下載頁,用iPhone版微信掃描,點擊下載,依然提示在瀏覽器中打開,這種情形本可以避免。

結合上面提到的各種坑以及流程設計原則,通過梳理可得到這樣一個下載流程圖。

(點擊查看大圖)

從上圖我們可以歸納出3種典型具體的使用場景:

1)用戶A打開官網下載頁面,使用iPhone 版微信掃一掃二維碼后,頁面跳轉至wap端下載頁面,點擊“立即下載”按鈕,則頁面經過跳轉,最后打開了該APP的APP Store詳情頁,點擊即可下載安裝。微信的跳轉必須要用到騰訊提供的微下載鏈接。從點擊掃一掃到下載完成,用戶A僅點擊了3下。例如,用iPhone版微信掃描網易云音樂官方下載二維碼,則可直接跳轉至APP Store。

2)用戶B手持安卓手機,用百度瀏覽器掃描海報中的下載二維碼,頁面跳轉至wap端下載頁面,點擊“立即下載”按鈕,瀏覽器提示將要下載移動客戶端的APK。點擊確定,從自己服務器下載APK并安裝。從點擊掃一掃到下載完成,用戶B僅點擊了3下。如下圖的支付寶。

3)用戶C手持安卓手機,用微信識別出圖片中的下載二維碼,頁面跳轉至wap端下載頁面,點擊“立即下載”按鈕,此時彈出提示界面,提示用戶“用瀏覽器打開”。用戶在手機瀏覽器打開后,則其后與第2種場景一致。雖然這樣讓用戶增加了2步操作,但有效避免了應用寶里存在的大坑。下圖為安卓微信版下載Keep、銅板街APP,在點擊下載后,均提示用戶用瀏覽器打開。

以上說了那么多,其實就是告訴大家需要分清不同的下載場景,針對每種場景選擇一個最優的方式。每一種情況下,盡量縮短操作。當然,你甚至還可以在此流程基礎上進一步優化。比如優酷在安卓瀏覽器掃描二維碼,可直接彈出下載提示框。

4下載頁面設計的要點

4.1?? 兩套界面

Web端與Wap端由于所在的屏幕大小不一,因此需針對兩個不同的訪問端展示不同的下載頁面。Wap端用戶的頁面大小和交互方式決定了用戶決策時間短,其應做得盡量簡潔。

4.2 web端設置iOS與Android下載入口

通過前面的分析,在下載頁面二維碼必不能少。Web端下載頁面放置一個二維碼已經足夠。但同時我們還需留意一些特殊需求的“長尾”用戶。比如某些用戶安卓手機無法聯網或者想節省移動流量但又想安裝某APP,則需通過桌面下載安裝。用戶想看下APP Store對該產品的介紹?;谝陨暇涂煽紤]在Web端設置iOS與Android下載入口。

4.3 設計突出核心功能

正如前面所說,下載頁面是一個移動產品的臉面,是用戶接觸產品的第一層。下載頁面要突出產品的核心功能,最近更新的亮點功能,以及產品主要頁面。在界面設計層次,盡可能的吸引用戶的眼球。無論是動感十足還是文藝小清新,這就是產品和UI設計師共同討論的問題了。

利益聲明:以上舉例app與本人均不存在利益相關,截圖僅用于說明。

 

作者:游俠兒,愛閱讀愛健身的PM一枚。

本文由 @游俠兒 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么沒有提到H5呢?

    來自江蘇 回復
  2. 感謝

    來自北京 回復
  3. 非常細心,學習了

    來自浙江 回復