通過「更新彈窗」的設計,讓用戶愿意更新應用

11 評論 23967 瀏覽 117 收藏 11 分鐘

本文將為大家介紹如何在設計上提升產品的使用體驗,讓用戶更加愿意更新產品。

一個新產品上線之后都會不斷迭代新的版本,版本更新時通常會使用彈窗形式,這類型的彈窗是屬于模態(tài)彈窗,會打斷用戶當前的操作行為,強制用戶必須進行操作回應,才可以進行其他操作,這種行為一定程度上造成用戶情緒的不爽,降低用戶對產品的好感。那我們如何在設計上提升產品的使用體驗,讓用戶更加愿意更新呢?

1. 巧妙的布局

更新彈窗頁面,用戶只有兩種操作選擇,更新或關閉,而我們產品的目的是讓用戶去更新,在設計頁面時設計師需要有意引導用戶去操作更新按鈕。

1.1 常規(guī)卡片形式

這是很常見的三種更新彈窗類型,布局形式上均是插畫+文字+按鈕。先做一下簡單比較分析:

  • 第一種彈窗形式,“立即更新版本”按鈕設計上和第二種方式一樣,而關閉按鈕放在卡片下方,用戶很容易會點擊到,同時會讓用戶在短時間內去決定是否更新版本,加大心理層面的壓力。
  • 第二種彈窗形式,“立即升級”按鈕放在底部,是單手操作很容易觸及的區(qū)域,使用色塊+文字的展示方式是非常顯眼的,將關閉按鈕放在了彈窗卡片右上角位置,隱藏在了頂部的插畫里,用戶不易發(fā)現(xiàn)且不易點擊。
  • 第三種彈窗形式,使用“更新”“跳過”文字形式來操作,通過顏色上的區(qū)別來引導用戶去進行更新,文字形式的按鈕在視覺上是弱于色塊+文字形式。

通過上面的分析,顯然第二種彈窗形式是最合適的設計方案。接下來,對第二種彈窗形式運用到的設計理論進行拆解。

1.2 拇指熱區(qū)

上圖是陌陌App更新彈窗的拇指熱區(qū),根據手機專家 Steve Hoober 的一項研究,以拇指熱圖的形式來顯示出操作手機屏幕不同區(qū)域難易程度,分為舒適區(qū)、可以觸及區(qū)、無法觸及區(qū)。設計彈窗頁面時,可以將導向用戶升級的操作放在舒適區(qū),相反導向的可以放在無法觸及區(qū)。

格式塔理論

格式塔理論(Gestalt)強調經驗和行為的整體性,認為整體不等于部分之和,意識不等于感覺元素的集合,行為不等于反射弧的循環(huán)。共包括7個原則,接近性、相似性、連續(xù)性、封閉性、對稱性、主體/背景、共同命運。

陌陌App更新彈窗運用到了主體/背景原則、接近性原則、相似性原則。

主體/背景原則,使用半透明背景遮擋來弱化底層內容信息,更新彈窗處于用戶的第一視覺層級,從而達到主次信息的區(qū)分。

接近性原則、相似性原則,彈窗內的插畫、文字內容、按鈕的相對距離,及其與彈窗的邊距大小,讓用戶感知到這是三個不同的信息內容。文字內容部分,標題、正文通過距離及字號顏色的不同來區(qū)分信息的主次,這里又涉及到了另一個原則,涉及四大基本原則中的對比。

1.3 異形卡片形式

常規(guī)彈窗是以矩形的形狀進行設計,用戶對于同種類型的已經審美疲勞,看到類似彈窗會略過,并不能吸引用戶多大的注意力。

設計時嘗試使用從另一些角度考慮,像是第一個彈窗以星球火箭為插圖背景,契合了內容標題“主銀,發(fā)現(xiàn)新大陸”,在形式上比較新穎,一定程度上可以吸引用戶的視線。

第二個彈窗使用信封郵件的展示形式,和傳統(tǒng)形式打開信封的情景相似,容易引起用戶的共性經歷,調起用戶的情感。用戶對產品會更有信任感,也會更加愿意更新。

2. 文案的魅力

  • WiFi環(huán)境下更新不到30秒哦~
  • 90%的小伙伴已經更新升級,你還在等什么?
  • 省流量升級(21.8M 11.6M)
  • 恭喜獲得內測體驗資格,搶先體驗新版內容
  • 「全新UI」輕盈靈動,給你更清爽的視覺感受、更便捷的操作體驗
  • 【體驗新升級】修復已知bug,追劇觀影流暢加倍
  • ……

這些都是我整理收集的一些市面上產品更新時使用的優(yōu)秀文案,當更新彈窗內容信息出現(xiàn)這些文字的時候,會更加吸引用戶去更新。這些文案并不是簡單的直接闡述更新的功能點,而是點到用戶的痛點。

WiFi環(huán)境下更新不到30秒哦~,提醒用戶更新的用時很短,不需要等待很多時間,減少用戶的顧慮。

省流量升級(21.8M 11.6M),不僅寫出此次版本更新的文件大小,而且和原本更新需要的文件進行對比(更少了)。這種情況下,給了用戶一個心理預期,可以預計更新時間的。同時,更新所需要的流量還少了,給了用戶一種占便宜的感覺。達到了產品目的,也提升了用戶對于產品的好感。

90%的小伙伴已經更新升級,你還在等什么?這是利用從眾心理,很多人選擇的好的概率是非常大的,同時也暗示用戶進行這個更新操作是安全的。

這里的痛點是用戶不知道更新之后可以得到什么,更新需要等待需要多長時間,更新需要耗費多少流量,簡要來說就是:得到價值、所用時間、耗費流量,在思考版本更新文案的時候可以著重從這三個方面出發(fā)考慮。得到價值不僅僅是全新功能、全新視覺,還可以是尊貴感優(yōu)越感體現(xiàn)這些心理層面的感受,等等。

3. 貼心的交互

更新功能可以從兩個點設計來提高產品的交互體驗,我會以實例來說明這部分內容。

3.1 充分從實際場景中的用戶角度出發(fā),用戶關閉更新彈窗之后,進行二次提示

這里可以支付寶為例:

支付寶更新彈窗,點擊右上角關閉之后,會在首頁出現(xiàn)一個更新提示條,這個提示是一直存在的,但是用戶可以手動關閉。

這里以一個使用場景來猜測一下支付寶這樣設計原因,小林早上上班途中去便利店買了一份早餐套餐,柜臺前結賬時打開支付寶出示付款碼給店員,但是打開之后首頁彈出了一個版本更新彈窗,在這種情況下她點擊關閉了彈窗,出示付款碼完成支付。

類似這種場景的還有很多,用戶通常是需要使用到App才會打開,而彈窗直接打斷了當前的操作,此時用戶更多的選擇關閉彈窗。

支付寶這里設計了一個更加合適的交互方案,在用戶關閉更新彈窗,在首頁出現(xiàn)一個版本更新的快捷入口提示,充分的考慮到了實際使用場景下的產品交互,設身處地的為用戶考慮,從微小細節(jié)方面提升產品的使用體驗。

3.2 更新之后,進入App首頁引導用戶快速的了解更新的功能

上圖是馬蜂窩App更新之后的新功能引導。通過這樣的設計交互方式,用戶能夠了解到新功能及一些功能的位置變化等等。這樣設計的好處是在進行更新操作之后,用戶可以收到反饋,幫助用戶更深入的了解產品功能,可以加深用戶對于產品的印象。

這是我對更新彈窗的一些理解,歡迎有不同想法的小伙伴評論區(qū)交流。

 

作者:小葫圖,微信公眾號:YI易設計

本文由 @YI易設計 原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 彈出規(guī)則呢

    回復
  2. 太棒了!我正好在優(yōu)化APP的升級彈窗 ??

    來自福建 回復
  3. 我覺得任何故意把否定性質的按鈕做的不容易發(fā)現(xiàn)的設計都是不科學的。比如說,用戶想取消關注,有些就把取消關注設計的非常隱秘,我就想問,如果一個人要否定一件事,會因為按鈕不容易發(fā)現(xiàn)就放棄這種想法嗎?是不是很扯淡。

    來自重慶 回復
    1. 這里講的是更新操作和關閉的對比,通過突出更新操作的處理,來引導用戶去點擊,并不是去特意去將關閉設計的不易發(fā)現(xiàn)。

      來自廣東 回復
  4. 感覺第一個陌陌的有點“流氓”的嫌疑,高度隱藏關閉按鈕,強制用戶去更新。從我的角度看,我會很反感。

    來自浙江 回復
    1. 是有點嫌疑 ??

      來自廣東 回復
  5. 除了動畫,這種方式早就有,只不過比以前設計得細膩

    回復
  6. APP啟動彈框更新被拒 最大的原因是中斷用戶操作??梢詫⒏碌奶崾绢A埋在用戶的推薦數據流里加以引導更新。

    回復
    1. 這的確也是一個方案,體驗上會更好,不過用戶更新的概率應該會更低,具體還要看實際數據驗證了

      來自廣東 回復
  7. 學習了

    回復
  8. 有用

    回復