如何打造一個用戶體驗良好的下載頁面?
下載頁面是一個移動產品的臉面,是用戶接觸產品的第一層。那么如何打造一個用戶體驗良好的下載頁面呢?本文為你解析。
下載頁是移動互聯網在傳播移動端產品的必備頁面。由于一些產品經理對這塊注意不足或者不屑在這個地方深究,導致產品在下載頁的體驗并不好。同時很少見有人專門對此撰文,因此來簡單聊聊下載頁面存在的“坑”、流程設計和界面設計。
通過梳理完善下載頁的業務流程,能改善下載產品過程中的用戶體驗,同時能進一步提高產品經理的流程化意識。
1 下載頁面的作用
1.1 展示產品核心功能與界面設計的窗口
為什么一個下載頁面是如此的重要?下載頁是產品重要的入口。用戶看到一個產品時,根本不會去看密密麻麻的介紹文字。更多的是粗略看產品介紹頁的圖片。此時下載頁承載著傳遞產品的核心特點、最新功能和展示界面設計的功能。
1.2 App下載前的最后一道障礙
下載頁是用戶下載決策前的最后一道障礙。根據漏斗模型,從用戶開始了解你的產品,到查看產品介紹到下載,最后到開始使用產品,用戶將會呈漏斗狀減少。下載頁是一個非常重要的過渡頁。頁面的設計是否美觀,下載流程是否順暢都關系到用戶是否繼續使用產品。在下載頁應盡可能的避免較多的點擊次數。
?2 下載過程中存在的坑
最大的來自騰訊的微信與應用寶。微信是手機必備社交軟件,但其自帶的瀏覽器不允許(非法)跳轉。因此,使得很多下載鏈接無法自動下載移動客戶端。(支付寶下載頁甚至被完全屏蔽了)于是一些產品經理直接采用了騰訊開發平臺提供的微下載鏈接。微下載是騰訊官方提供的下載鏈接,可自動判斷手機系統類型。微下載鏈接方便了iOS系統的跳轉,但在Android端體驗不好。
應用寶是國內最大的第三方安卓應用市場,眾多的安卓移動客戶端通過應用寶分發出去。用安卓微信掃描二維碼,打開下載頁面,“普通下載”按鈕故意做得很小,而突出顯示了“安全下載”按鈕。點擊安全下載,首先下載的卻是應用寶的APK。點擊普通下載,則還需用戶點擊確定。如果用戶是第一次接觸肯定會點擊錯誤。例如下圖的簡書安卓版。這種方式是常用的流氓手段~
3 下載流程分析梳理
首先在闡述流程之前,PM要厘清用戶可通過什么方式進入到下載頁面,用戶所使用的訪問方式(工具)是什么,手機系統是iOS還是Android。通過簡單的思維導圖可梳理出本產品可能存在的組合場景。
從進入下載頁的方式主要分為兩類:
- 直接訪問下載頁面。用戶通過主頁跳轉或者其他頁面跳轉到下載頁面。
- 掃描(網站/文章)二維碼。
隨著二維碼的普及,越多越多的信息通過二維碼傳播,而下載頁的鏈接生成二維碼置于海報、文章中??赡艿姆绞桨ㄔ诰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一枚。
本文由 @游俠兒 原創發布于人人都是產品經理。未經許可,禁止轉載。
為什么沒有提到H5呢?
感謝
非常細心,學習了