小紅點篇 | 用好這招,讓用戶的觸達率大幅度提升!

15 評論 7596 瀏覽 51 收藏 31 分鐘

對于APP上的小紅點,強迫癥患者很不舒適,一定要點掉消除不可。但對于產品設計者而言,小紅點是他們轉化的一種設計手段。本文將就如何降低或者打消小紅點為用戶帶來的支配恐懼,以及是否能夠帶來轉化這兩個方面展開分析,一起來看看。

你是否在打開QQ、微信后,看到滿屏的小紅點,在強迫癥的趨勢下必須把它們全部消掉才感覺到能正常使用,針對社交類型的產品,我們也許愿意一一點開、逐個消除,但對非社交產品來說,很多小紅點一無是處,點開純屬浪費時間、不消掉著實看著不舒服。

現實世界中存在兩種人,一種是不管應用中有多少小紅點都能做到“不管不問”,有需要時就點開對應的一項,對其他的直接無視;另一種是不把小紅點處理干凈就會原地“爆炸”的人,這就好比一覺醒來,發現臉上長了幾顆痘,不擠掉渾身難受。

在筆者看來,小紅點不管是為了消除而消除、還是為了將用戶吸引到某處,這都是在利用設計手段為產品帶來價值。作為設計師,需要思考的是如果降低或打消用戶被小紅點支配的恐懼、用戶是否會跟隨小紅點的指示而產生轉化,今天就來跟大家一起嘮嘮。

一、小紅點的前世今生

1. 用戶會“喜歡”小紅點嗎?

“強迫癥”是指人們天生的對事/物的不對稱、不和諧產生厭煩心理,并且打心底想要去消除這些“錯誤”,小紅點正是利用了這一人性的弱點而成為了一把營銷人手中利器。

那么用戶真的會“喜歡”小紅點嗎?稍微查看一些資料就不難發現,大部分都是教我們“如何消除小紅點”的內容,以至于很多應用被迫上線的“一鍵消除”操作。另外,據公開資料顯示,在用戶卸載APP的原因統計中,“消息提醒”名列前茅,這其中,小紅點定然有著莫大的功勞。

事實證明,用戶對小紅點真的喜歡不起來,可有沒有想過,一旦沒了小紅點,朋友發來的微信消息不能及時看到、愛人發來的蜜汁短信沒無法第一時間回應、釘釘上領導發來的工作任務都沒能按時完成、線上購物的快遞包裹被人直到順走了才想起去找、等待打折購買的商品也跟你無緣……不巧不成書,當自己沒有碰到損失就想不到小紅點還有用處。

用戶對小紅點可謂是又愛又恨(表面上恨大于愛),于是產品只要將其放在某些功能入口,用戶要么無視它、要么刻意消除或點進去一探究竟,不管如何,站在產品角度目的就此達成。強調一點,別因為用戶不得不接受就毫無底線的干擾用戶,必須要在產品需求和用戶體驗上做到平衡,盡量想辦法降低用戶的抵觸心理,不要天真的以為有了第一次就有很多次,沒準這就是用戶最后一次使用。

2. 小紅點的發展歷程

在如今的移動互聯網時代,各大APP中幾乎都有小紅點的身影,它已然與我們的日常生活變的密不可分。那么,這些隨處可見的小紅點最初到底從何而來,先來了解一下小紅點的起源。

關于小紅點的發源地雖然眾說蕓蕓,但其中有一個較受大眾認可的說法,那就是小紅點最早來自于黑莓手機系統。2009年,黑莓推出9700系列,所搭載的黑莓系統使用了帶“*”號的小紅點,到了2013年,Apple公司注冊了相關專利并在iOS系統中使用小紅點,從此,Apple成為最終贏家、并在iPhone中將小紅點發揚光大。

iOS設計指南中,在推送通知方面對小紅點的使用有明確的規范說明:每個通知都包含一個應用名稱、APP圖標及一條消息,通知的到來伴隨著聲音提示、小紅點即會出現在圖標的右上角。隨后,Android也采用了小紅點的這種視覺表現方式,以至于后來用戶逐漸習慣了這種設計,小紅點也成為了各APP的通用設計規范。

3. UI設計中的小紅點

小紅點是大家最通俗的叫法,在UI設計中還有一個名稱叫徽標(Badge),它指的是出現在圖標或文字右上角、可帶有數字或文字的紅色圓點,小紅點的出現則意味著有新內容或待處理的信息,其目的是為入口導流,起到引導用戶操作、增加點擊量的作用。

4. 深度了解小紅點

小紅點作為消息提醒的一種方式,并不僅僅只是表面上看到的視覺設計問題,它真正是一個產品營銷策略及如何調度用戶注意力的問題,所以我們在設計時要有敬畏之心,切勿亂用/濫用小紅點,需要在產品的長期運行中不斷尋找合理的契機再伺機而為,畢竟用戶體驗與產品利益掛鉤。

用戶對不同類型產品的消息提醒,其投入的精力成本和接受程度是不一樣的。例如對QQ、微信等即時通訊類產品消息的處理效率可以說是非常高,不管是認識的還是不認識的,只要是列表中的好友發來消息,有很大的概率立即點開回復,甚至在沒有小紅點的情況下也會去檢查會話列表,以防有什么消息被漏掉;而抖音、快手這種內容型產品明顯不一樣,基于產品本身就沒有那么強的訴求,一旦消息過多影響內容瀏覽就會讓用戶產生反感,直至忍耐度降低,就算熟人發來消息,大多數人都沒有立即打開、即時回復的欲望。

這里必須要明確一點的是:適合其他產品內容提醒的小紅點設計、并不一定適合自己的產品。

一味追求「高打開率」的小紅點設計在短期內或可滿足產品需求,在用戶心中,不會刻意在乎小紅點的多少,真正關注的是這個提醒是否跟“我”有關,如果產品不懂得節制,僅依靠“紅點”的堆積來時刻吸引用戶注意力,時間一長用戶就會麻木,可能直接忽略掉小紅點或因為不夠專注而遺漏掉與自己相關的內容。所以在設計小紅點之前,需要對其有一個清晰的認識,了解小紅點的屬性、使用場景及設計原則,然后酌情使用。

二、用戶為什么會處理小紅點

1. 打破信息自身的平衡

在正常情況下,任何內容都是沒有小紅點的,一旦某個地方突然出現小紅點則意味著信息發生了變化或出現了異常,極度破壞原本信息的平衡,用戶在本能反應的驅使下可能會不由自主的點開,消除紅點或者一探究竟,不管如何,小紅點誘發用戶點擊的目標就完成了。

2. 破壞周邊環境的和諧

「相似性」原理告訴我們:共同視覺元素的物體看起來更有關聯性,我們傾向于將看起來相似的對象視為一組或者一個模式,例如用顏色、形狀,大小,方向以及紋理等視覺元素,共同組成相近的樣式。

小紅點的出現就嚴重破壞了周邊的平衡、以及畫面的和諧,讓其中的某個內容變得與眾不同并快速引起用戶重視并誘發用戶的點擊行為。利用此種方式達到目的的還有如底部標簽欄引人注目的「發布」按鈕、金剛區的某個動效icon…

3. 給用戶帶來不適

具有強迫癥心理的人都明白,他們喜歡追求極致的完美,對于不和諧、不對稱的事物會產生厭煩心理,并且會試圖去糾正這些“錯誤”。小紅點正是利用了人們的這個弱點,通過打破原本信息平衡,給用戶帶來不適,讓用戶主動點擊并消除它,業務導流的目的也就此達成。

三、小紅點設計三要素

小紅點的天然使命就是為用戶提供明確提醒,它可以是系統強加給用戶的(功能/內容更新)、也可以是用戶之間被動產生(對方發來的消息)或因用戶自己的主動行為產生(操作結果反饋),不管以何種形式出現,它必須符合用戶固有認知以及具備很強的可視性,這里我們可以從小紅點的色彩、位置、形狀三個方面來了解。

1. 色彩:為什么是紅色

設計師都知道,紅色會有一種危險、警示的感覺,并能與其他信息形成強烈的對比,很容易引用戶起注意,所以小紅點使用了高亮度的紅色用以吸引用戶注意力,促使用戶去點擊。

如下圖所示,在不同顏色的徽標中,你是否對小紅點情有獨鐘?

當然,也有一些產品將其他主題色用在圓點徽標中(國外產品居多),在視覺上顯得與眾不同,不過這也只是在少部分場景中用到,并非都統一成了主題色,且這跟產品想傳達的信息權重、用戶群體及內容屬性有很大的關系,如果你對這一塊拿捏的不是特別準,建議不要嘗試,小紅點雖然很大眾化、很普通,可至少不會出錯。

2. 形狀:圓形的優勢

相較于圓形,沒有任何鋒利的邊緣及棱角,它本身的簡潔性能讓界面看起來更和諧、對用戶更友好,且能將視線聚焦至圓的中心點,對于凸顯圓形當中的文本再合適不過了。

設想一下,如果小紅點用的是三角形、矩形或其他奇奇怪怪的形狀,你看到后的第一反應會是什么?

一些文本內容稍多的小紅點會使用圓角矩形(長方形),通過將圓角值調到最大,依然不影響使用,不存在任何棱角的圓角矩形,用戶看到后的第一感覺是近乎橢圓形。

3. 位置:唯一的右上角

大家所看到的小紅點絕大多數都是在元素的右上角,前面講到過,小紅點主要用于消息提醒,所以必然要依附于某個主體信息、作為輔助提示的存在,我們把主體信息看作一個整體(物體),那么它的中心點和四角存在不同的力場,會對用戶產生不同的吸引力,下面將用排除法幫你找到小紅點最合適的位置。

首先,為了不影響主體信息的識別性,直接排除小紅點出現在元素中心位置的可能;

其次,在尼爾森的用戶閱讀視線模型中說過,用戶瀏覽信息的視覺動線是從左到右、從上到下,小紅點既然是輔助信息,放在元素左上角就會喧賓奪主,不太合適;

再者,因受到重力的影響,如果小紅點出現在元素的左下角、右下角,總有一種向下傾斜的感覺,明顯也不合適,這就是為什么倒三角“▽”總感覺立不起來、有種要倒下的感覺,而正三角“△”卻能保持平衡,具有較強的穩定性;

最后只剩下右上角,雖然筆者也無法說出放在右上角的好處,甚至同樣會對畫面造成一定的破壞,但與出其現其他位置相比,右上角的劣勢沒那么明顯,不管是出于產品需求、還是視覺體驗,用戶的接受程度自然會高一些。

(PS:不要去玩那一套,為了證明某個觀點的正確性就使勁吹噓正面、或拼命抹黑對立面,小紅點放在右上角與其說明好處,倒不如說是別無選擇)

有時候,我們在元素底部也會看到類似小紅點的存在,例如頭像下方的VIP標記、右下角的性別提示(女:小紅點)、用戶在線狀態等,這些只是信息組合的一種方式,并非小紅點。需記住一定,小紅點的使命是傳遞新的消息、引導用戶點擊,用戶一旦操作,小紅點的目的就此達成、即刻消失。

四、應用場景及視覺表現方式

很多產品都會不停的更新迭代,其功能也在不斷的豐富,為了提升用戶對相關內容的點擊率,于是小紅點就被運用在了各個業務入口。因為使用場景及內容的重要程度不同,小紅點也衍生出了幾種不同的形式以滿足對應的使用場景,筆者在這里作出了整理歸類,分別對以下三種常見的樣式進行分析。

1. 純紅點

純紅點是較為常見的類型,它的出現意味著“有新的內容、新的消息”,是一種較為輕量級的提醒方式,引導用戶進入更深的層級或打開特定內容,從而達到增加點擊量、提升業務曝光率的目的。例如:圈子有最新動態、APP有版本、功能有新增內容等。

2. 紅點/數字組合

相較于其他方式,這算是最強的紅點提醒了,這種方式由純紅點演變而來,大多使用在與社交相關的功能模塊中,通過紅點加數字(具體數量)的消息提醒,吸引用戶注意力,輔助用戶獲取更多信息并快速做出判斷。例如:會話列表的未讀消息、系統消息通知等。

3. 紅點/文字組合

常用于運營活動場景中,通過“免費、熱門、新、New…”等較為熱門的文案,對用戶產生很大的吸引力,這也是基于大多數用戶的貪小便宜心理、獵奇心理等,促使用戶產生強烈的點擊欲望,從而達到營銷的目的。

五、提升小紅點價值的小技巧

1. 確保清晰的路徑導向

不管是哪種類型的應用,在投放紅點之前一定要考慮清楚每個層級的合理性,讓所有頁面的信息層級能夠串聯起來,確保用戶有一個清晰的路徑導向。

在一些體驗較差應用中,點擊小紅點跳轉至對應的頁面后、卻找不到與小紅點相關的內容,直接導致了信息斷層,用戶根本不清楚產品到底想提示什么,返回到上層頁面后,小紅點依舊無法消除,這時候用戶只能是一臉茫然,甚至一度吐槽、產生反感。

針對初/中的設計師,如果產品的功能信息繁雜、層級很難理清,可以嘗試從小紅點內容的最終級頁面逐漸向上一層推導,這樣做便于每個頁面的小紅點層級關系能很好地繼承起來。

2. 匹配用戶價值

對于小紅點的投放,不能一味的圖“更多、更大、更有吸引力”這種為了投放而投放的自嗨,必須要讓當前內容與用戶價值相匹配,才能起到小紅點真正意義上的作用。

另外,也需要注意每個頁面前后信息的一致性,如果最外層的小紅點用了數字統計的樣式,那么下一層頁面所有紅點數字之和應該與外層的數字統計相等,切勿將純紅點、數字組合、文字組合混合統計在一起,避免讓用戶產生疑惑,如有必要,下一頁面的小紅點可能樣式云集,那就在最上層使用純紅點就可解決這個問題。

3. 微動效的使用

因為人們天生會對動態的事物更加敏感,將這一特性運用在小紅點中是吸引用戶注意力的好方法。很多APP在金剛區圖標小紅點中融入了動態效果,不僅能快速吸引用戶注意力,還讓小紅點具有情感化或趣味性、帶給用戶更愉悅的使用體驗。

動態效果只適用于運營、推廣性質的文字小紅點中,如果用在純紅點、數字紅點中,可能會適得其反。

4. 友好的消除方式

早在2014年,手機QQ上線小紅點“拖拽爆炸”的消除方式廣受好評,相較于每次都要點擊跳轉頁面、再返回的單個消除方式既便捷又有趣味性,同時又能避免追求一鍵清除的便捷而造成失誤的尷尬(眼尖的網友會發現,大部分社交類型的應用都沒有一鍵清除功能)。

我們見過的小紅點消除方式很多都是點擊即可消除,還有一些需要跳轉多個頁面觸達最終信息才能消除,同時也有部分產品為提供更便捷的操作,增加了「一鍵清除」功能。

那么這個頁面到底是否適合一鍵清除操作,還得根據實際情況而定,且看以下分析:

  • 社交/辦公類型產品(數量不可控):不適合一鍵清除功能,因為任何一條好友信息都有可能對用戶很重要,用戶有必要單獨觸達、且也有耐心一一點開并詳細查看,一鍵清除有可能導致用戶誤操作,造成對信息的不可控;
  • 其他類型產品(紅點少):無需一鍵清除,因紅點本身就較少的原因,且不是必須要打開,用戶可忽略或在感興趣之余一探究竟,單獨觸發消除即可;
  • 其他類型產品(紅點多):因很多紅點信息是非必要打開的,可使用一鍵清除功能處理龐大的推送信息,讓頁面瞬間清凈。

(PS:以上僅供參考,雖然沒有足夠的數據支撐,但筆者敢說的是大部分產品都是據此而行,而且也沒有任何一個產品能滿足所有用戶的需求)

5. 驗證投放效果

在一個應用中,我們在成百上千的業務入口中挑選一部分、利用小紅點作為引流方式,即便前期做了充足的準備,在用戶真實的使用場景中,也有可能會不合適,這時候就需要提前做好數據埋點,通過后期對用戶的點擊率、轉化率、層級深入程度等進行綜合分析,如果未達預期,則需要做出優化調整,更改小紅點投放入口或表現方式。

(PS:對于新方案的規劃,基于原有方案通常會設定一個提升20%~30%的預期值,10%是勉強能接受的最低標準,如若低于10%,必定會再次做出優化調整)

六、常見問題及處理方式

1. 避免圖標元素自帶紅點

小紅點已成為一種內容/消息提示的標志性象征,只要被用戶看到就會認為有新的內容出現,在正向的回應中還好,但如果敏感的用戶刻意忽略、或者以消除紅點為目的的點擊行為,這都將增加用戶的理解成本和操作成本,得不償失。

我們在創作圖標的過程中,需要避免圖標右上角本身就自帶小紅點的情況出現,因為絕大多數的圖標造型、元素形狀/大小并非無可替代,若因特殊情況不可更改,請將右上角圓點換成除紅色以外的其他顏色,這也不失為一種解決方案。

2. 小紅點需克制投放

很多產品為了營銷、導流等原因,將大量的小紅點強加給用戶,這樣很容易產生極端情況,要么造成用戶的厭煩心理、對產品的滿意度下降、甚至卸載應用,要么用戶對過多的小紅點產生免疫、看到后直接忽略或為了消除而消除,最終都無法達到產品想要的結果。

在投放小紅點之前,除了要分析清楚投放目的及合適的入口,還需要思考是否有其他更好的方式能代替小紅點,力求發揮其最大價值,如此才不至于顧此失彼。

3. 紅點內容的長度限制

針對數字/文字組合的小紅點,因空間有限,需提前設定好內容的長度極限值。數字紅點在99條內都屬于實時統計,超過99條通常會統一成“99+的樣式”;兩個字符為文字紅點的最佳展示方式,我們在設定上限時,一般不超過3個字符。

4. 主層級紅點數據統計

如果次級頁面的小紅點數量較多且樣式混搭、在主層級頁面需用數字紅點統計數量,那么只統計次級頁面只帶數字紅點消息的總量即可,純紅點與文字組合的直接忽略。

5. 矩形小紅點的用法

在國內的應用中,矩形小紅點應該很難見到,但你可能還不知道,有很多小紅點都是矩形,只不過是將圓角半徑值調到最大、以障眼法的形式讓用戶誤以為這就是這個圓形。

不要以為這樣做多此一舉,當內容由少變多時,小紅點可自由縱向、橫向延伸,非常方便。例如:紅點中的“折”是圓形,當變成“折扣”時就變成了長橢圓(圓角矩形)。

6. 紅色元素上的小紅點

當小紅點用在紅色圖標、圖片或色塊時,就會與之融合在一起,很難單獨看出小紅點的存在,通過給紅點描邊就能將其分離出來,確保在紅色背景或載體中能被用戶清晰的看到。

7. 添加合適的投影

除了上述所說給小紅點添加描邊外,使用投影效果也是突出小紅點不錯的方式(不適合紅色背景),通過吸取紅點色值、然后適當加深,讓小紅點有一種懸浮效果,呼之欲出。

七、結語

整體看來,小紅點已成為頁面導流的一種有效途徑,雖然不同的應用業務入口和功能使用場景也有所不同,但其設計的本質應該是如何更高效的、友好的提醒用戶,不要為了應付了事而隨意投放,最終紅不僅嚴重影響用戶體驗,還有可能造成用戶流失。

在設計小紅點之前,要考慮清楚投放的必要性、以及跟產品風格一致性的表現方式,在條件允許的情況下適當增加趣味性,這樣才能讓那些煩人的“小紅點”真正被用戶接受,對產品轉化起到正向效果。

以上是筆者對小紅點的相關思考與總結,希望對大家有所幫助,如有不同意見,歡迎相互交流、取長補短。

專欄作家

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

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

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 好文,收藏

    來自中國 回復
    1. 感謝認可

      來自廣東 回復
  2. 每次看作者的文章篇幅都比較長,但是內容真的有質量,每次看完都收益匪淺

    來自廣東 回復
  3. 轉發到策劃群,根本沒人看。我該換工作了

    來自四川 回復
  4. 處處留心是學問,寫的真好,學習了,還是有好多細節要注意的

    來自江蘇 回復
  5. 小紅點還有這么多講究,學到了

    來自吉林 回復
    1. 不起眼的小紅點,被套路了

      來自廣東 回復
  6. 重度強迫癥看到小紅點真的受不了,必須全部清掉,有的時候為了清而清,會不小心錯過消息。

    來自吉林 回復
    1. 這才是小紅點的最大就價值所在。
      如果你是用戶,我們的意見絕對相反,如果你是設計師,那就這么干??

      來自廣東 回復
  7. 不喜歡小紅點,強迫癥看見所有小紅點都一定要點掉!感覺這就是小紅點存在的用意了

    來自廣東 回復
    1. 就是利用了這一弱點

      來自廣東 回復
  8. 學到了

    來自北京 回復
    1. ??

      來自廣東 回復
  9. 真不錯

    來自遼寧 回復
    1. 感謝鼓勵

      來自廣東 回復