產品設計:APP產品“加載”策略思考

4 評論 14512 瀏覽 429 收藏 12 分鐘

用戶與產品的每一次互動都是一次加載過程,加載的好壞直接影響用戶與產品的交流體驗,即將加載策略運用到適合的產品情境中可以將產品塑造成一個可以和用戶交流的“人”,這個“人”彬彬有禮、善于溝通、聰明伶俐,想用戶之所想,急用戶之所急。

啟動頁加載

產品的第一印象很重要,如果用戶剛開始打開一張“空白頁面”,用戶還未與產品交互之前,就已經留下一個差印象,就像談對象,你給對方的第一印象就是邋遢,后面盡管每天都打啫喱,對方也會覺得這是幾星期沒洗頭的節奏。因此啟動頁的出現就是為了給她(用戶)營造一個好的第一印象,其次產品啟動需要一個過程,而“啟動頁加載”可以實現這一過程的一個過渡,在給予用戶一個響應的同時預加載部分首頁內容,使得用戶不至于看到空白的頁面,體驗上更趨流暢。

1.1 保持過渡的流暢性:一致性與內容感

通過啟動頁的吸引,將用戶帶入產品的品牌與情感的世界?;贗OS平臺應用的啟動特質(放大特效),Twitter的啟動頁與Icon采用了一致的元素與構圖(信鴿為物,湖藍背景為底),確保Icon至啟動頁的平滑過渡、加深了用戶對Twitter的品牌印象,同時呈現“信鴿翱翔藍天”的意向使得產品的固有等待(產品啟動需要一個過程)不易為用戶所察覺(啟動頁呈現的意向還沒遐想完,產品已經順利過渡到首頁了)。接著“信鴿”以同樣的效果完成主頁內容的過渡。

T1

這里我們再舉一反例:WPS的啟動頁大面積留白使其在過渡過程中由于缺乏內容感使得產品的固有等待很易呈現顯性狀態,造成體驗上的卡頓,試想你在看電影,看一分鐘加載30秒,你還有心思再看下去?

T2

1.2 除了流暢我們還能做點什么

前面提到的“一致性”和“內容感”只保證了中間鏈的流暢,要完成Icon至首頁的流暢體驗,還需充分利用啟動頁為首頁加載贏得的時間,圖中美團在應用啟動過程中預加載首頁的一些重要框架,從而為首頁加載減負。

T3

下一頁還是當前頁加載

用戶進入首頁,正式邁出體驗的第一步,接下來迎接的就是基于用戶目標的界面間跳轉。完成界面的跳轉,會有各種加載策略,但無論形式如何,我們都可以將其歸為兩大類:“下一頁加載”、“當前頁加載”。

2.1 “下一頁加載”滿足了用戶提前窺視的需求

我們把頁面看成“點”,頁面流是連接這些點的“線”,我們以“用戶想買一條牛仔褲”這一場景作為案例做了簡單的眼動研究,從應用啟動到商品瀏覽再到商品確定最后進入下單頁,用戶所呈現的瞳孔梯次增大,即E>D>C>B>A,為了解釋這一現象,通過與被試交流,我們發現相比于各種瀏覽,用戶更期待看到他們想看到的東西。因此此時的”下一頁加載“正好,滿足了用戶提前窺視的需求。

E1

2.2 ?Wait!I Need Think Think

我們以同樣的方式又對“使用支付寶對手機充值”這一場景做了研究,從開始支付到二次確認支付,用戶所呈現的瞳孔都比較大,即A與B近似相等,通過訪談,我們發現與“遞增體驗流”不同的是,當用戶遇到判斷邏輯的界面時,用戶并非急于想看下一頁面到底包含怎樣的內容,而是非0即1的驗證心態,即我的操作效成功了嗎?因此在判斷邏輯界面中,用戶的內容窺視需求并不強,當然也沒什么內容,要么僅是一個小小的Toast,再大一點就是一個簡單的信息反饋界面(意味著“下一頁加載”在這里就是個雞肋),用戶反而對非0即1的驗證需求較為強烈,其中還伴隨著等待結果過程中的緊張感、激動感,因此界面通過當前頁加載表明系統正在努力地處理用戶交代的指令迎合了用戶的緊張感、激動感,直到結果顯現——“處理成功”,完成了非0即1驗證的滿足感。

kq

我(設計師)比你(用戶)更了解你

在看視頻過程中我們經常遇到這樣一種情景,“網速較慢,建議切換至流暢模式”。作為用戶,我們總希望享受的是最好的,視頻恨不得720P(PS:可能自己電腦顯卡就只有那么點),此時網速可能也只有幾十KB,但是Whatever,我就是要用最好的,然最后的結果是不能用,所以我們的用戶其實并不了解自己。

我們已經習慣了4G下的移動端體驗,有一天我們身處外地,想在附近找一家好吃的餐廳,但是手機切換到了E,我相信無論是4G還是E,用戶的期望未曾改變——“bia 一下,附近所有好吃的餐廳全都出來!”但是現實是,E狀態下要想像實現4G狀態下的“bia一下”要耗費大把的等待時長,然最后的無盡的等待換來的還是空白。所以我們要跳出用戶的視角,依據當下場景給出最合理的加載策略,從4G到E,為了避免用戶過長的等待,我們可以采用分布加載策略,如圖中“E狀態”先加載占用網絡資源少的內容,例如框架、文字、默認圖案,再通過手動觸發,加載占用網絡資源多的內容,這樣可以讓用戶更快速地看到界面框架內容。雖然體驗上較4G模式會大打折扣,但我們至少維系了E狀態下的可用性。

可

看不到的情懷

有情懷產品的爆點往往介于顯性與隱形之間,平凡外表背后往往給人帶來驚喜和感動!手機休眠鍵由Iphone5s的左側布局到Iphone6的右側布局就是為了方便用戶的單手操作。? 真正的情懷級產品,就是你第一眼看到它時,也許不會立刻發現有什么與眾不同,但當你開始使用它時,才會慢慢感受到它對用戶的體貼細膩之處。

4.1 導航欄加載帶來的驚喜

通過加載策略將產品塑造成為一個可以與用戶交流的人,這個人聰明伶俐,而非反應遲鈍,勞心勞力說了一堆,結果對方沒有一點反應,此時你的心情也好不到哪里去。將導航欄標題臨時變為加載信息,在用戶與產品互動過程中提供實時反饋,此時的產品不再是一堆冷冰冰的界面,而是一位善于溝通的人,這個人聰明機靈,想用戶之所想,急用戶之所急,和他互動過的用戶都會產生良好的體驗。

G1

4.2 等待也是如此有趣

界面的每一個加載都會涉及到等待,有時受到網絡的限制,可能需要等待更久,但是用戶等不起,普通用戶能夠忍受的最長的加載頁面時間一般為8秒,如果加載時間超過8秒,除非用戶必須在這個頁面獲得一些信息,一般用戶會關閉頁面或轉到其他頁面。面對著千篇一律直接采用系統提供的旋轉式loading,等待會顯得更加焦躁。網絡狀態等外部環境我們無法保證,但是作為設計師我們可以通過自己的專業將“情感化”融入加載設計中,改變那些用戶習以為常的loading式樣,讓用戶在等待的等待過程中感受到樂趣,同時還能強化產品的品牌印象。

H1

5. 寫在最后

加載無處不在,它貫穿用戶的行為路徑,所以對于加載策略的思量是設計師尤其要關注的,不同的場景會需要不同的加載策略,我們所要做的就是抓取用戶當下的場景,給出最合理的加載策略,保持用戶感受的連續性,讓加載變得更有價值,讓枯燥的等待變得更加有趣!

 

本文由人人都是產品經理專欄作家 @UE小牛犢(微信公眾號:UE小牛犢) 原創發布于人人都是產品經理?。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我認為,加載時的動畫不宜動作太大,宣傳宗旨為主,在加載等待中告訴用戶,其實我們和他們是一個戰線上的,我們一起在和網速做抗爭,并不是用戶和我們在做抗爭

    來自北京 回復
    1. 同意! ??

      來自江蘇 回復
    2. ??

      來自北京 回復
  2. 下一頁還是當前頁加載,這個視角很棒啊,值得仔細考慮下~

    來自北京 回復