“煩人的小妖精”,小紅點是怎么來的

5 評論 15425 瀏覽 96 收藏 20 分鐘
🔗 B端产品经理需要进行售前演示、方案定制、合同签订等,而C端产品经理需要进行活动策划、内容运营、用户激励等

人類似乎天生對不對稱、不和諧的事物有厭煩心理,并且想要去糾正這些“錯誤”,簡而言之就是大家平時所說的“強迫癥”。而小紅點則完美利用了這一人性的弱點,它就像白嫩臉頰上長出的一顆小痘痘,讓人忍住不去要去擠破它。因此,小紅點也成為了一把產(chǎn)品運營利器,只要投放在某個業(yè)務(wù)入口,就幾乎沒有用戶會對它熟視無睹,而當用戶忍不住要去輕觸消除它時,產(chǎn)品側(cè)為業(yè)務(wù)導(dǎo)流的目的也就達到了。

那么問題來了,用戶喜歡小紅點嗎?在Google和必應(yīng)上搜索關(guān)鍵詞“App小紅點”,幾乎有一半的搜索結(jié)果是“教你如何消除小紅點”。

一項數(shù)據(jù)顯示,在用戶卸載App的7大原因中,“煩人的消息提醒”一項高居榜首,而小紅點作為提醒引導(dǎo)的形式之一也難逃其咎。

可見,用戶對小紅點實在是喜歡不起來。但是,讓用戶如此厭煩的小紅點真的就一無是處嗎?如果沒有小紅點,用戶將無法第一時間知道男神女神給自己回了微信,無法最快得知自己關(guān)注的淘寶店鋪剛剛上架了新品,也會錯過最新的優(yōu)惠活動和剛剛上線的有趣功能。

小紅點之所以變成煩人的“小妖精”,究其原因,其實是產(chǎn)品側(cè)和用戶側(cè)的目標不一致造成的。產(chǎn)品側(cè)想要向用戶推廣新功能新業(yè)務(wù),但這些不一定是用戶需要的,甚至?xí)驍_到用戶。所以,如何權(quán)衡好小紅點的業(yè)務(wù)目標和用戶體驗,是一項可以認真討論的議題。

小紅點的起源

在開始之前,我們先來追溯一下小紅點的起源。小紅點到底是由誰最先發(fā)明的呢?眾說紛紜,其中一個比較受大眾認同的說法是,小紅點最早來自于黑莓手機系統(tǒng)。在諾基亞仍一統(tǒng)天下的時代,新消息的提醒為圖標+數(shù)字的形式,更像是Web端的處理方式。黑莓在2009年推出的9700系列,其搭載的黑莓系統(tǒng)開始使用了帶星號的小紅點形式。

而在小紅點的專利歸屬上,Apple公司成為了最終贏家。Apple公司于2013年注冊了相關(guān)專利,并在iOS系統(tǒng)上開始正式使用,小紅點由此逐漸被人們所熟知。

在iOS界面設(shè)計指南中,Apple公司對涉及小紅點的推送通知規(guī)范也有明確的闡述:

無論設(shè)備被鎖屏還是在使用中,app都能隨時利用通知來提供及時和重要的信息。每個通知都包含應(yīng)用名稱、一個app圖標以及一條消息。通知的到來也可能伴隨聲音提示,以及app圖標右上角小紅點角標的出現(xiàn)和更新。Android隨后跟進模仿了這一設(shè)計樣式,小紅點成為了通用設(shè)計的規(guī)范。如今,小紅點的身影在各個App中幾乎無處不在,在移動互聯(lián)網(wǎng)的時代,它與我們的日常生活正變得密不可分起來。

小紅點的類型及主要的使用場景

隨著眾多App的功能不斷豐富,內(nèi)容的更新日漸頻繁,為了增加各個業(yè)務(wù)的曝光率,提升相關(guān)頁面的觸達率,大量的小紅點被投放在各個業(yè)務(wù)入口。原本形式單一的小紅點,也隨之演化出各種不同的形式,以滿足不同業(yè)務(wù)場景的需求。

眾所周知,手機QQ是一款功能豐富的社交產(chǎn)品,其涉及到的各種業(yè)務(wù)數(shù)不勝數(shù),如果各個業(yè)務(wù)線隨心所欲的在自己的業(yè)務(wù)入口投放各種樣式的紅點,對用戶而言無疑是個災(zāi)難。為了保證用戶體驗的一致性,手機QQ的QUI規(guī)范就對小紅點的類型進行了歸類整理,這里再簡單梳理其主要對應(yīng)的使用場景。

1. 小紅點

最基本也是最常用的紅點類型,也是小紅點的最初形態(tài),一般被投放在業(yè)務(wù)入口處,用于內(nèi)容、功能或動態(tài)更新的提醒。

2. 小紅點+數(shù)字

由基礎(chǔ)的小紅點樣式演化而來,可以展示未讀消息的數(shù)量,一般用于比如QQ,微信,QQ空間,朋友圈等社交場景,在有新的好友信息,新的點贊或評論時顯示。

3. 文字紅點

文字內(nèi)容主要有“免費”“熱門”“新”“new”等,主要用于上新、免費、限時搶購等運營活動,直觀的文字內(nèi)容如“免費”一般能強烈的吸引用戶的點擊欲望。

4. 異形紅點

App功能和場景不斷拓展,使得小紅點形式也隨之發(fā)生了新的變化,擁有了更多的形態(tài),雖然與基礎(chǔ)樣式的小紅點已經(jīng)有很大差別,但是其仍然承擔了小紅點的功能,從一定意義上來說,它仍然是小紅點。結(jié)合圖標或內(nèi)容縮略圖的異形紅點讓用戶對內(nèi)容有了提前預(yù)知,主要用于強力推送的運營活動場景。

以上的幾種小紅點類型,基本涵蓋了目前市面上所有App的基礎(chǔ)小紅點形式。還有各類App根據(jù)自己的業(yè)務(wù)需求設(shè)計了更多個性化的小紅點形式,這里就不一一細數(shù)。當然,小紅點不是孤立使用的,一項功能或業(yè)務(wù)的運營涉及多個層級多個入口,所以大多數(shù)情況下是多種小紅點形式結(jié)合使用的。

小紅點的幾個設(shè)計細節(jié)

說到小紅點的設(shè)計,有些同學(xué)可能會想,一個紅色的小圓點,有什么好設(shè)計的?當然,使用基礎(chǔ)的小紅點樣式,無疑是最省時省力的做法。但是,正如我們看到的,未經(jīng)思考設(shè)計而投放的小紅點,不僅讓用戶產(chǎn)生強烈的厭煩心理,而過多的小紅點也會導(dǎo)致用戶免疫,影響業(yè)務(wù)導(dǎo)流的效果。

那么,如何設(shè)計好小紅點呢。在這里根據(jù)平時項目的經(jīng)驗以及對一些案例的分析,總結(jié)了小紅點設(shè)計的幾個細節(jié):

1. 清晰的路徑導(dǎo)向

每當一項業(yè)務(wù)有新的動態(tài)消息或上新的內(nèi)容時,都要在業(yè)務(wù)入口處投放小紅點以把用戶引導(dǎo)到最終頁面,但投放的小紅點往往會出現(xiàn)斷層的情況,用戶在一步步輕觸到達最終的頁面后戛然而止,不清楚產(chǎn)品側(cè)想給他展示什么內(nèi)容。

如下圖App中,在底部的tabbar的首頁tab投放了小紅點,但是在頁面內(nèi)容中卻看不到與小紅點相關(guān)的內(nèi)容。而在消息tab上沒有投放小紅點,卻在消息列表里卻出現(xiàn)了小紅點,這樣提醒引導(dǎo)出現(xiàn)了信息斷層,容易導(dǎo)致用戶產(chǎn)生困惑。

針對這一問題,一種有效的設(shè)計方法是倒推法,即從最終要投放小紅點的末級頁面開始,不斷的向上一層級的頁面倒推,思考每一個層級業(yè)務(wù)入口投放小紅點的合理性,如此一來每個頁面層級的小紅點也能繼承起來,給用戶以清晰的路徑導(dǎo)向。

2. 符合用戶預(yù)期

對于小紅點的投放,也要注意每個頁面層級前后信息的一致性,以符合用戶的預(yù)期。

如下圖App中,右上角的消息入口顯示紅點+數(shù)字5,輕觸進入下一層級后,顯示的小紅點數(shù)字為1+2+1=4,與上一層級的數(shù)字5不一致,導(dǎo)致與用戶原本的預(yù)期產(chǎn)生偏差,而產(chǎn)品本身的專業(yè)性也會受到用戶質(zhì)疑。

3. 友好的消除策略

在投放小紅點之前,應(yīng)先確定好小紅點的消除策略,大部分App采用觸過即消的策略,還有一些App則需要到達最后的頁面層級,其上幾個層級入口的小紅點才會消除。而部分App為了對業(yè)務(wù)入口進行強引導(dǎo),在用戶輕觸后小紅點仍然存在,這無疑是在挑戰(zhàn)用戶的底線,甚至還有可能導(dǎo)致用戶卸載App。

筆者正在使用的Behance這款A(yù)pp,首頁右上角的紅點,無論嘗試多少次輕觸進入最后層級的頁面,都無法成功將其消除,實在是令人如鯁在喉,不知道有沒有小伙伴也遇到相同的問題。

而手機QQ早在2014年就上線的小紅點“一鍵下班”功能則是一個非常值得稱道的設(shè)計案例,拖拽消除小紅點的操作便捷又有趣味性,一鍵清除小紅點之后簡直是神清氣爽,可見從小細節(jié)上給用戶帶更好的體驗多么重要。

4. 更多樣的小紅點

形式小紅點的樣式從最初始的紅色小圓點形式,已經(jīng)慢慢進化到現(xiàn)在樣式豐富的異形紅點,但紅色小圓點這一元素仍得以保留。千篇一律的樣式總是讓人感到厭倦,如果能結(jié)合自身產(chǎn)品的特征及形象設(shè)計新的小紅點樣式,不僅能給用戶帶來新鮮感,更能加強產(chǎn)品的品牌形象。

如厘米秀就使用了小膠囊的樣式,作為獲得新套裝的提醒引導(dǎo),不僅貼合了自身品牌的形象,也與頁面其他的常規(guī)小紅點樣式區(qū)分開來,更加生動有趣。

5. 結(jié)合微動效

如今手機的屏幕很大,用戶閱讀的視線路徑很長,用戶被上一層級入口的小紅點引導(dǎo)到當前頁面后,往往需要花費一點時間來尋找當前頁面的小紅點,而結(jié)合微動效的小紅點則可以有效的解決這一問題。因為人類天生就會關(guān)注正在運動的事物,讓小紅點動起來無疑是吸引用戶注意的好方法,結(jié)合微動效的小紅點更具情感和趣味性,容易能給用戶帶來愉悅的體驗。

6. 克制投放小紅點

投放太多小紅點容易產(chǎn)生兩種極端情況,一個是造成用戶產(chǎn)生厭煩心理而卸載App,另一個是用戶對小紅點完全產(chǎn)生免疫,尤其是在游戲App中,試問你現(xiàn)在玩王者榮耀的時候,面對滿屏的小紅點,還要每次都全部消除完畢之后才會開黑嗎。

因此,在投放小紅點之前,先思考一下在某一入口投放小紅點的目的,是不是有其他更好的方式能代替小紅點,即符合業(yè)務(wù)場景又能起到為業(yè)務(wù)導(dǎo)流的作用。

來看看幾個在同一業(yè)務(wù)入口下使用小紅點與非紅點案例的對比,第一個是QQ錢包的賬戶余額入口,非紅點方案采用了數(shù)字滾動的效果,比起小紅點方案,不僅更能吸引用戶的注意力,也能清晰的表達錢包余額減少的概念,設(shè)計可謂十分精巧。

第二個是淘寶App首頁的“天貓國際”業(yè)務(wù)入口,非紅點的方案,結(jié)合了天貓的卡通形象,配合了彈出和眨眼的動效,十分的俏皮可愛,也加強了自身的品牌形象。

如今這種動態(tài)業(yè)務(wù)入口的方案正被許多電商類App采用,不僅能吸引到用戶的注意力,還能展示更多的運營信息內(nèi)容。

從以上幾個方案的對比,可以看到,在一些業(yè)務(wù)入口的場景下,投放常規(guī)的小紅點雖然也能滿足業(yè)務(wù)的需求,但是如果經(jīng)過精心的思考和設(shè)計,最終的方案往往能給予用戶超出意料之外的精致體驗。

7. 驗證投放的效果

一款A(yù)pp有成百上千的業(yè)務(wù)入口,并不是每種小紅點形式都能適用。如果不確定是否要投放紅點,或者糾結(jié)使用哪種小紅點形式,在條件允許的情況下,可以通過灰度發(fā)布進行A/B test,關(guān)注不同小紅點方案的轉(zhuǎn)化效果,搜集到的數(shù)據(jù)往往能為最終上線的方案提供有力的支撐。

由騰訊SNG內(nèi)部開發(fā)的開普勒平臺,就是一個通過數(shù)據(jù)檢驗設(shè)計效果的得力工具,通過在各個業(yè)務(wù)入口埋點,持續(xù)關(guān)注線上數(shù)據(jù)的變化,搜集用戶的反饋數(shù)據(jù)。

如以下的案例,通過A/Btest,發(fā)現(xiàn)業(yè)務(wù)入口的彩色icon的平均轉(zhuǎn)化率高于純色的icon 20%左右,因此最終選用了彩色icon作為最終上線方案。通過工具搜集數(shù)據(jù)反饋,讓設(shè)計不再是主觀臆斷,也能以此為依據(jù)不斷的迭代優(yōu)化設(shè)計方案,增強用戶體驗感。

結(jié)語

以上啰嗦了這么多,主要目的是希望廣大的互聯(lián)網(wǎng)從業(yè)者們在設(shè)計過程中能對小紅點的保持一定的關(guān)注。不要在設(shè)計的最后環(huán)節(jié)才想起它,然后隨意投放應(yīng)付了事,最終不僅打擾到用戶,產(chǎn)品自身的口碑也受到影響。

當然,每款A(yù)pp的各個業(yè)務(wù)入口和功能場景不盡相同,設(shè)計面臨的情況十分復(fù)雜,也不要為了追求所謂的創(chuàng)新而使用各種“炫酷”樣式的小紅點,應(yīng)當回歸到用戶的價值,思考投放小紅點的必要性,以及小紅點形式與產(chǎn)品視覺風(fēng)格的一致性,如此一來,原本煩人的“小妖精”才會真正的被用戶所接受。

參考資料:

 

作者:騰訊社交用戶體驗設(shè)計部 YU

來源:zhihu

本文由 知乎賬號@騰訊?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學(xué)習(xí)了,講的很清楚明白。

    來自浙江 回復(fù)
  2. 原來不懂套路,不注重用戶心理的人,真心不適合做產(chǎn)品經(jīng)理

    回復(fù)
  3. 試問你現(xiàn)在玩王者榮耀的時候,面對滿屏的小紅點,還要每次都全部消除完畢之后才會開黑嗎。——筆者,答案是肯定的,哈哈哈哈

    來自北京 回復(fù)
    1. 6+,哈哈哈

      來自四川 回復(fù)