聊聊微信「浮窗」和「曬圖」的交互設計
筆者對微信「浮窗」和「曬圖」功能進行了系統(tǒng)的分析并總結(jié)了自己對功能設計上的思考,與大家分享。
前幾天在圖書館看到一本很有意思的書——《中老年學微信》,這是一本專門為中老年用戶打造的微信使用教程。此書是18年6月出版,按照書籍正常的出版步驟,這本書里介紹的操作流程應該是微信17年末的版本。
這兩年來微信并未作出大改版,總的來說這本書里介紹的方法多數(shù)都還能用。但是我大致翻閱了一下,還是發(fā)現(xiàn)了一些比較有意思的改動點,這里我就列舉出來,大家一起來分析學習。
浮窗
微信是在6.6.7版本新增了浮窗功能,用戶可以將正在閱讀的文章收在浮窗里,想看的時候可以隨時打開,滿足了“邊閱讀邊聊天”的訴求。
但是用戶不滿足于此,在聊天的時候,我還要聽歌,玩小程序等。
所以微信在7.0.5版本中對浮窗進行了一個升級,讓用戶可以進行多線程操作。
1. 浮窗的特點
浮窗從樣式上來說,它凌駕于當前界面其他元素之上,這個特性帶來了兩個好處:
- 從感官上距離用戶最近,用戶更容易察覺,所以適合承載優(yōu)先級高的信息或者操作;
- 游離于當前頁面,不會破壞頁面結(jié)構(gòu),設計起來比較靈活;
為了更方便理解,我們來舉個例子:經(jīng)常聽歌的朋友對「歌單」應該很熟悉,那么歌單頁需不需要展示底部欄菜單?
我們不要著急打開手機里的XX音樂app,可以自己先想一下,底部欄菜單的作用是什么?
因為歌單頁的層級可能會很深,底部欄菜單可以供用戶快速的跳轉(zhuǎn)到一級頁面。那么是否展示底部欄菜單就主要取決于“用戶對快速跳轉(zhuǎn)到一級頁面的訴求是否足夠的強烈”。
用戶的訴求我們可以通過頁面埋點數(shù)據(jù)和用戶調(diào)研獲取,參考了4款競品,有兩款產(chǎn)品(網(wǎng)易云 蝦米)在歌單頁展示了底部欄菜單,而另外兩款(QQ音樂 酷我音樂)沒有展示。
這說明各家產(chǎn)品對用戶的訴求強度并未達成統(tǒng)一,那些沒有提供底部欄菜單的產(chǎn)品觀點無非是以下兩種:
- 我覺得讓用戶在歌單頁一級一級的返回就挺好的,符合用戶的認知;
- 用戶可能對一兩個一級頁面的訴求很高,例如首頁和我的頁,如果因為這兩個功能,就展示整個底部欄太浪費了。
如果是后一種,我們可以考慮使用浮窗作為一級頁面的入口。
例如,用戶進入一個活動頁,但是用戶有跳轉(zhuǎn)到首頁/我的頁這兩個一級頁面的訴求。
按照常規(guī)思路,一級活動頁的入口是底部欄菜單,但是直接放底部欄菜單不是最好的方案,因為其他幾個頁面,用戶的訴求不是很高,也把入口露出會造成界面空間的浪費。
這種情況下,我們可以選擇浮窗作為這兩個一級頁面的入口。
2. 怎么關閉浮窗
接下來我們來說說浮窗關閉的問題,在浮窗1.0時期,用戶拖動浮窗到頁面底部可以關閉浮窗,但是在支持多線程的浮窗2.0時期,用戶點擊“關閉”圖標關閉浮窗。
從操作成本角度來說,肯定點擊圖標就關閉更加方便。但是這里我們需要考慮兩個問題:
- 因為浮窗位置是可以移動的,如果加了關閉圖標,那么用戶擔心誤觸反而增加了操作成本;
- 關閉彈框是否需要操作確認。
多數(shù)設計師對于“操作確認”的認知還停留在對話框,當我們需要用戶確認上一步操作,想當然的加上一個對話框,詢問你是否要關閉浮窗。
這里我們需要強調(diào)一下:操作確認≠對話框。
這里我們需要從頭梳理一下,為什么我們需要用戶確認剛才的操作?目的有兩個:
- 擔心用戶在不知情的情況下誤觸了有風險或者不可逆的操作,例如轉(zhuǎn)賬、刪除等。所以需要加一個“操作確認”步驟,告知用戶該操作的結(jié)果;
- 對于猶豫不決的用戶,增加確認步驟挽留用戶。
簡單來說,操作確認的目的是防止用戶誤操作和挽留用戶。那么微信的滑動關閉的交互方式是否滿足這兩點呢?
我個人認為是滿足的,因為與點擊直接關閉相比,拖動到特定區(qū)域關閉,用戶誤操作的概率更低。
例如,正常情況下,你點擊“接受”按鈕就可以接聽來電;但當手機鎖屏時,你需要滑動接聽來電。
這是為了避免用戶在不知情的情況下,例如手機放在口袋里,誤觸接聽了來電。因此,如果我們有意識的增加一些高風險性或不可逆操作的交互成本,可以極大的降低用戶誤觸的幾率。
至于挽留用戶這點,這點見仁見智。我認為真正可以挽留下來的是那些猶豫不決的用戶,增加交互成本延長了操作時間,也延長了用戶的決策時間,避免用戶的沖動性操作,讓用戶做出更合理的判斷。
對于那些一開始就抱定目標的用戶,多加一個對話框真的可以挽留住嗎?
3. 單進程場景
當然不能因為對方是微信,所以我們就需要“強行解釋”它的所有行為。
我們可以有自己的思考,例如:當懸浮窗中只有一個進程時,我們是否可以沿用之前的樣式?用戶點擊可以直接進入目標頁,跳過那個選擇的步驟,只有一個也沒得選啊。
這樣做的確很方便,但是存在一個問題,用戶應該如何關閉懸浮窗?
如果還是滑動到底部關閉,那么就會導致單進程和多進程的情況下,用戶關閉懸浮窗的交互方式不統(tǒng)一,違背了一致性原則。
總結(jié)來說,沿用之前的樣式,用戶來的快,去得快,但是違背了一致性。
朋友圈曬圖
朋友圈發(fā)圖片的流程微信最近沒有做太大改動,但是因為每天發(fā)朋友圈的用戶量太大了。我覺得還是很有必要分析一下。
1. 選擇圖片
上傳圖片首先要選擇圖片,圖片選擇界面一般有兩種:一種是以微信為代表的正序排列類,最新的圖片在界面底部;另一種是以微博為代表的倒序排列,最新的圖片在頁面頂部。
一個小小的圖片選擇流程為什么要做差異化呢?
首先我們來說微信的正序排列,一般真正想發(fā)朋友圈的圖片很有可能是你剛剛拍攝或者下載的,把最新的圖片放在最底部,方便用戶拇指操作。
但是如果你想發(fā)的圖片是很久之前拍攝或下載,那就需要你手動滑動界面去搜尋目標圖片,自上而下的瀏覽方式用戶對于信息的獲取效率更高,倒序排列的更加合適。
此外微博這里還做了篩選功能,點擊頂部欄就可以選擇篩選項,為了避免用戶視線在界面頂部(篩選項)到底部(最新的篩選結(jié)果)的大范圍移動,這里采用倒序排列更加合適。
總體來說,微信適合用戶發(fā)最新的圖片,發(fā)完即走;而微博更方便用戶精準的搜尋到自己想要發(fā)的圖片。
2. 編輯/刪除圖片
圖片上傳完成后,進入預發(fā)布階段,用戶對這個圖片進行哪些操作呢?
- 自己不夠美,我要重新修一下——編輯功能(微信不支持發(fā)圖前重新編輯圖片);
- 這個照片排序不對,我要換一下——位置挪動功能;
- 這個照片不好看,我要刪除——刪除功能。
這里我們主要來說一下刪除功能,微信是拖動刪除圖片,跟關閉浮窗一樣,不再贅述。
QQ和微博都在圖片右上角展示了“刪除”圖標,意思很明顯,點擊這個圖標就可以刪除這張圖片。
但是這個刪除圖標是否一直需要呢?
例如,在QQ中,如果用戶中途退出,我們會詢問用戶是否要保存當前的圖片,用戶選擇保存。再次進來的時候,圖片右上角是不會有“刪除”圖標,因為之前已經(jīng)詢問過用戶,既然用戶選擇保存,說明用戶不太可能刪除這圖片,可以考慮去掉“刪除”圖標。
面向場景,才能對功能進行取舍。
當然這并不意味著,用戶不能刪除這張圖片,用戶可以進入圖片頁刪除。
這里有個交互細節(jié)也很有意思,微信使用的刪除確認彈框是在頁面底部,而QQ的是在頁面中間。如果你要確定是否刪除這個圖片,那么首先你要對這個圖片有一個清晰的認識,將對話框放在界面中央,遮擋了圖片的主體,會對用戶的確認過程造成干擾。
總結(jié)
以上就是我對微信浮窗和曬圖功能的思考和總結(jié),如果你有不同的意見或者看法,歡迎留言討論。
#專欄作家#
王M爭(微信公眾號:王M爭),人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
最后微信和QQ刪除彈框的位置,應該和上一步操作的位置也就是“刪除”按鈕的位置有關,微信的刪除在底部,所以確認彈窗也在底部
微信是從分析人性的角度出發(fā) 每一步交互 考慮清楚操作人當下心情 說起來簡單 能做到的只有微信
為啥保留的圖片是沒有刪除按鈕的
上文提到,再進入看到的圖片是經(jīng)過“保留”操作確認的。微信考慮的退出條件是緊急事務打斷了發(fā)圈動作,用戶隨即返回接著發(fā)圈。但作為用戶如果地點、時間改變想表達的內(nèi)容不一致,這么做就不人性了