最近有個關于掃一掃的功能設計工作,故對市面上的掃一掃功能做了盤點分析,本文將介紹掃一掃的常用功能、應用場景以及背后的設計邏輯,供讀者參考交流。 一、掃一掃是用來干嘛的?掃一掃用來加好友?進行支付款?可以在過年支付寶活動時候掃“?!??其實這只是我們熟悉的掃一掃功能,事實上,掃一掃的功能和應用場景還有很多。 筆者想用一句話來總結下掃一掃:掃一掃是連接線上線下的一種媒介。通過掃一掃這個媒介,我們可以和線上的人/事/物做連接。 說來抽象,舉個例子,我們熟知的小程序就是用來進行線上線下的連接,比如我們到一個餐廳,直接掃餐桌上的二維碼便可以打開小程序進行下單,省去了線下的服務員點餐,從點餐、支付都可以在線上完成,這就是線上線下的連接。 與小程序不同的是,小程序是一種產品形態(tài),可以像各類app一樣滿足人們的各種需求,而掃一掃是一種線下線上進行連接的媒介,省去了復雜的交互和操作,但是掃一掃可以拓展的應用場景沒有小程序廣泛。 二、目前主流app的掃一掃功能筆者梳理了一些主流 C 端的app,覆蓋電商、社交、視頻、招聘等多個領域,總結下來發(fā)現(xiàn)掃一掃主要的功能有以下幾種: 通過梳理可以先發(fā)現(xiàn),我們平常用到掃一掃的功能其實多集中在前三個:登錄、添加好友、支付。因為這三種場景我們生活中遇到的會更多一點,且我們的行為是被動,是被教育要用掃一掃才能完成某個動作,比如我們是在支付時看到二維碼并且寫著“用支付寶支付”我們才會打開支付寶掃一掃進行操作。 接下來我會比較詳細介紹掃一掃背后的設計邏輯,過程中便會涉及到這些功能。 三、掃一掃的設計邏輯1. 設計需要考慮的三要素:用戶、需求、場景用戶、需求、場景是 pm 日常工作中需要經常思考的問題,在為不同產品設計掃一掃功能的時候,交互、操作流程、功能等都會有所不同。 產品設計需要考慮用戶群體是誰,有什么特征,有什么操作習慣,掃一掃功能在什么場景下用,有什么需求可以用掃一掃滿足等等問題。 比如在為一個 to B 產品設計上班掃碼簽到功能時,先思考掃碼簽到流程是: 我們可以思考一下功能使用場景:一個場景是用戶簽到時可能手里提著很多東西(包、早餐等)不方便操作手機,同時簽到人可能會很多,基于這個常用場景考慮,掃一掃功能的入口就不能太深。 再比如這個場景下,如果掃碼不成功,提示掃碼失敗后,返回頁面是主頁還是停留在掃碼頁面可以繼續(xù)掃? 對比兩種操作,其實就是操作成本的高低區(qū)別。如果掃碼不成功返回主頁,再發(fā)起掃一掃會增加操作成本。試想用戶上班起很早,剛擠了地鐵,好不容易排隊簽到了,不停反復點擊,用戶難免有一種煩躁的心理。 所以,在主頁沒有更多有關掃碼簽到的有效信息可以參考或沒有其他價值更大的操作時,會把提示掃碼失敗后的頁面選擇為當前掃碼頁面,可以繼續(xù)掃碼。 還是這個場景,如果用戶掃碼不成功,還需要對掃碼失敗彈窗進行設計。如果提供錯誤原因,或者提供幫助的鏈接幫助用戶快速定位和解決問題,可以極大加快用戶解決問題的速率。 這時彈窗設計就不僅僅是冰冷的一句“簽到失敗”加一個“確定”按鈕了。在設計這個彈窗時,我們甚至可以將“xxs后自動返回首頁示”這種自動關閉彈窗同時給用戶時間查看有效信息的功能和手動關閉彈窗功能同時提供給用戶,滿足不同場景下的不同需求。 此外,就掃碼功能而言,我們可以把我們的用戶細分,通過掃一掃的主被動性,可以主要分為兩種:
順著這個邏輯,可以想象下為用戶設置答疑解難的功能,用戶主動探索和被動掃碼都可能遇到問題,尤其當?shù)谝淮问褂么水a品的時候。 如果我的用戶群體大多是互聯(lián)網(wǎng)從業(yè)者,對于產品比較敏感,會主動體驗掃一掃功能,遇到了一些產品疑問,我的答疑環(huán)節(jié)就主要是介紹功能是什么、怎么操作,解答用戶在主動了解掃一掃時遇到的問題。 如果我的用戶多是對互聯(lián)網(wǎng)產品不敏感的用戶,多屬于被動掃碼,掃碼失敗時,答疑解難就會側重提供給用戶失敗解決方案,側重為什么,怎么做。 當然這些設計都需要考慮投入產出比,如果我的簽到功能只為幾十個人設計,這個答疑功能就需要權衡是否實現(xiàn)或者排期了,因為我可以通過其他成本更小的方式更好地達到目的,比如做一次簽到宣貫。 2. 根據(jù)業(yè)務流程進行產品設計除了用戶、需求、場景這三個被說爛同時也是極其重要的因素,在進行產品設計的時候還要多考慮業(yè)務流程。比如我們可以根據(jù)用戶操作掃一掃的步驟進行分階段思考和設計。 在掃一掃操作流程中,我們可以分為三個階段:觸達前、觸達時、觸達后。每個階段的產品設計都需要考慮。筆者總結了目前掃一掃在各階段的一些產品設計,主要是以下幾種: 1. 觸達前 文案和icon: 文案和icon需要根據(jù)產品調性決定,京東的掃一掃,文案是“掃啊掃”比較符合購物時放松輕快的調性,微信的掃一掃則是雙手比劃出的掃描框,比較契合微信溝通、支付的稍顯嚴肅的調性。 入口層級: 類似于愛奇藝、優(yōu)酷、騰訊視頻、微博、boss直聘等之類的掃一掃功能,主要是讓用戶掃碼登陸PC,所以優(yōu)先級比較低,層級比較深,在“我的”才可以找到,或者放在首頁左上角或者收納框里面。 而對于支付寶、微信這些常用的掃一掃,觸達不超過2步,支付寶直接就把掃一掃入口放在首頁頂部。 所以根據(jù)業(yè)務不同,決定了掃一掃功能的優(yōu)先級,優(yōu)先級則決定了入口和層級。 2. 觸達時 預測可能性操作: 網(wǎng)易云音樂、微信、QQ等的掃一掃有添加好友的動作。產品考慮到用戶可能由于客觀原因,比如相機問題、網(wǎng)速問題等主動添加不成功,因此會在掃一掃頁鏈接“我的二維碼”,這時可以快速調出我的二維碼,方便對方添加自己,不必去“我的”調出我的二維碼。 小米的掃一掃操作較多,包括了掃植物、翻譯等多種功能拓展,這時提供常用操作設置用戶就不用每次打開都選擇掃碼功能。 天貓和淘汰會提供快速跳轉功能,因為用戶到達這一步操作層級已經比較深了,同時很多app還會提供掃碼記錄功能,方便快速跳轉,減少重復掃描或者用來查詢記錄。 觸達時考慮用戶可能的操作,包括疑問,下一步操作等,可以減少用戶操作路徑,提升用戶體驗。 幫助用戶答疑解難: 在這一步中,個人覺得做的很好的是支付寶的掃一掃,支付寶掃碼超過一定時間文案會變化,由操作方法到操作建議再到幫助中心跳轉,幫助用戶解決掃碼過程中遇到的問題。 京東會建議用戶在掃不出來的時候手動輸入,并且給予快速入口和操作指引。天貓?zhí)詫殑t會在幫助里詳細介紹原因和解決方案。 讓用戶掃得開心: 相信大家用京東、天貓等掃實物的時候,會看到星星點點的交互,可能掃三維比掃二維時間要長,這樣的交互給用戶帶來期待的同時,還可以安撫其等待的交集感。 此外,掃到實體物品后會有標簽提醒進行快速連接。 考慮產品的商業(yè)模式: 淘寶掃一掃的界面嵌入了垃圾分類,以及會員廣告,讓整個掃一掃頁面略顯臃腫。 京東掃一掃AR模塊可以直接鏈接到店鋪直接進行商品實看和購買,同時還有AR試妝等功能。此外,為了讓廣告變得沒那么煩人,京東設計了很多AR體驗游戲,完成游戲后會推送相關的產品,比如下面這個: 同時類似淘寶、京東掃一掃的AR模塊還會有很多AR體驗活動,可以作為該司的一個AR體驗站了。 拓展場景: 不同產品對應著不同的業(yè)務,不同的業(yè)務就會有不同的場景,拿電商產品來說,掃一掃可以用來AR/拍照購物,也可以掃條形碼購物,天貓在掃條形碼的時候允許手動調焦,這就是基于其條形碼在不同商品上大小不一致的場景設計的。 再比如,進行摩拜單車掃碼操作的時候,多數(shù)人會掃車鎖那里的二維碼,所以我們能看到很多人彎腰來掃碼,摩拜單車考慮到了這一點,如果二維碼較小會自動將其放大進行掃碼,用戶不需要進行手動縮放操作,也不用彎很深的腰了。 對于一些夜晚場景,掃一掃會提供手電筒觸發(fā)操作,快速解決獲取光線的需求,有的是輕觸即可點亮手電筒,有的會直接在掃一掃一面貼一個手電筒icon供點擊。 小米掃一掃在掃描翻譯的時候還會提供參考線,方便用戶準確地進行掃描翻譯。 可以看到不同產品設計掃一掃都會考慮到用戶在使用時的多種場景,并且給用戶提供解決方案,不同產品,業(yè)務不同,場景也就不同。 3. 觸達后 考慮產品的商業(yè)模式: 除了像淘寶直接將廣告貼在掃一掃界面,在觸達時就呈現(xiàn)給用戶,很多產品還選擇在有了掃描結果后提供到相應商品詳情或者店鋪的鏈接,方便快速購買,同時為平臺創(chuàng)收。 設計要考慮流程閉環(huán): 一個動作的發(fā)起和關閉,可能會與其他的流程有關聯(lián)。如果掃一掃的層級本來就高,或者掃一掃功能邏輯復雜,當用戶操作掃一掃來到某一層級時,通過給用戶一個快捷跳轉的操作,將會讓用戶減少很多操作步驟,一個小小的交互就可以讓用戶感覺到貼心。比如淘寶、天貓掃一掃進入幫助頁面后會提供快速跳轉。 四、掃一掃設計心得在分析了掃一掃后,反思下產品設計除了考慮用戶、場景、需求,很重要的一點是要根據(jù)業(yè)務場景、業(yè)務流程來考慮產品設計。就拿上述掃碼簽到例子而言,其實從業(yè)務場景需求分析是不需要快速跳轉、操作記錄等功能的。同時基于業(yè)務對每個邏輯細節(jié)的處理,都要根據(jù)用戶、場景、需求來深入考慮。 將操作流程拆分,從觸達前、觸達時、觸達后進行分階段產品設計也便于理清設計邏輯,同時保證用戶體驗。 同時未來掃一掃可能也會有更多的應用場景,比如現(xiàn)在很火的垃圾分類。 甚至可以開個腦洞,未來每個人都有一個獨一無二的二維碼,這個二維碼就類似身份證,簽到、支付、留聯(lián)系方式等都可以通過簡單的掃一掃操作完成,不再需要在不同app間切換,也不再需要手動輸入等較為復雜的操作。 |
|