YouTube 要努力了,被 B 站的體驗(yàn)甩出一條街!

2 評(píng)論 1752 瀏覽 5 收藏 10 分鐘

本文從一位資深交互設(shè)計(jì)師的視角出發(fā),深入分析了YouTube和B站這兩款流行視頻平臺(tái)的交互設(shè)計(jì)。通過評(píng)論、賬號(hào)內(nèi)搜索、暫停等三個(gè)交互點(diǎn)的對(duì)比,揭示了不同設(shè)計(jì)如何影響用戶體驗(yàn)。

我有個(gè)習(xí)慣,吃飯的時(shí)候喜歡看視頻。用的最多的是YouTube(下簡(jiǎn)稱“油管”)和 B 站。作為一枚工作 10 年+的老交互,每次看視頻的時(shí)候,職業(yè)病就犯了。會(huì)不由自主的分析這兩款軟件,在交互上,哪家做得好。

今天我選取 3 個(gè)交互點(diǎn),帶大家一起分析下。通過這 3 個(gè)交互,其實(shí)也能看到不同的交互方式對(duì)體驗(yàn)的影響。

一、評(píng)論

在 B 站,播放器的下方,是“熱門評(píng)論”區(qū)。評(píng)論的內(nèi)容以列表的形式展現(xiàn),上下滑動(dòng)可查看所有的熱門評(píng)論(下圖綠框所示??)。

在“熱門評(píng)論”這個(gè)標(biāo)題右邊,展示著巨大的輸入框。

這種設(shè)計(jì),對(duì)引導(dǎo)用戶輸入評(píng)論是有幫助的。

一個(gè)視頻的評(píng)論越多,用戶互動(dòng)越活躍,社區(qū)氛圍就越好。

對(duì)于提升留存,是有一定幫助的。

在油管,播放器下方是一個(gè)“評(píng)論 + 評(píng)論數(shù)量”的卡片(如下圖綠框所示)。這張卡片只展示一條評(píng)論,用戶無法通過上下滑動(dòng)來查看更多。

這種方式對(duì)于空間的利用率不高,因?yàn)橛脩粼谶@里無法看到更多評(píng)論,必須通過點(diǎn)擊操作,打開評(píng)論的浮層,才能看到剩余的所有評(píng)論。而點(diǎn)擊操作的操作成本,比 B 站那種上下滑動(dòng),要高很多。所以這種交互方式,將評(píng)論的內(nèi)容藏得較深。其實(shí)對(duì)用戶看評(píng)論的需求,滿足得不太好。

對(duì)于評(píng)論,還有個(gè)關(guān)鍵交互,就是如何展示所有評(píng)論的浮層。

B 站的做法,是浮層從右向左出現(xiàn),類似 PC 端里經(jīng)常用到的抽屜組件,比較符合用戶的心智模型。

油管的做法,是長(zhǎng)條形狀的浮層,從下向上出現(xiàn)。

就很神奇,神來之筆??,很難評(píng)啊很難評(píng)。

這兩種交互動(dòng)效,帶來的體驗(yàn)很不同:

首先,從效率和順滑程度上來說,B 站的浮層移動(dòng)的距離小, 所以效率更高,“動(dòng)靜”更小,帶來的體驗(yàn)會(huì)更加順滑;而油管的浮層,移動(dòng)的距離大了很多, 動(dòng)靜明顯大了很多。

這其實(shí)沒有必要。?

因?yàn)檫@個(gè)動(dòng)效只是為了讓浮層的出現(xiàn)更加順滑,所以目標(biāo)應(yīng)該是動(dòng)靜越小越好,從而讓用戶感受到一種流暢的體驗(yàn)。而不需要用特別大的動(dòng)靜,吸引用戶的注意力。

二、賬號(hào)內(nèi)搜索

所謂賬號(hào)內(nèi)搜索,是指用戶進(jìn)入到一個(gè)Up主的空間, 想找該 Up 主發(fā)布的某個(gè)特定話題的視頻。?這個(gè)需求相對(duì)來說比較低頻。但細(xì)節(jié)累積起來,也決定了用戶對(duì)應(yīng)用的整體印象。

在 B 站里,點(diǎn)擊Up 主空間里的搜索按鈕,會(huì)進(jìn)入搜索頁(yè),頁(yè)面中明確地提示“搜索 ta 的視頻”??

這個(gè)提示非常關(guān)鍵,讓用戶很明確的知道,現(xiàn)在搜索的只是 ta的視頻,不是全站的。

輸入搜索詞“宇宙”,以卡片的形式展現(xiàn)所有視頻,屏效很高??

如果換個(gè)詞,沒有結(jié)果,那么會(huì)提示“沒有搜到相關(guān)內(nèi)容…”, 下面有個(gè)紅色的按鈕是搜索全站。

這個(gè)邏輯就給得很清晰:當(dāng)前Up主沒有該內(nèi)容,您還可以搜全站。

對(duì)于油管,點(diǎn)擊 Up 主空間的搜索按鈕,進(jìn)入的是如下的搜索頁(yè)。頁(yè)面展示的整站的搜索歷史

而當(dāng)我搜索“健康”之后,當(dāng)前 Up 主沒有相關(guān)結(jié)果,但是油管自作主張地展示了全站的內(nèi)容。

從場(chǎng)景來分析,這個(gè)設(shè)計(jì)我認(rèn)為不夠好。

因?yàn)橛脩粼谑褂眠@個(gè)功能的時(shí)候,場(chǎng)景特別明確,就是希望找到這個(gè)Up主的視頻中,有關(guān)這個(gè)搜索詞的視頻?,F(xiàn)在的搜索結(jié)果,讓用戶無法明確當(dāng)前Up主到底有沒有該視頻。用戶需要經(jīng)過一番嘗試和推斷,才能得出結(jié)論。

這樣的設(shè)計(jì)就是讓用戶思考的設(shè)計(jì)。

我們知道有本書特別有名,叫《Don’t Make Me Think》。讓用戶思考的設(shè)計(jì),往往就不是好設(shè)計(jì)。

三、暫停

關(guān)于暫停,兩個(gè)應(yīng)用的便捷性也差別很大。

B 站是雙擊播放器區(qū)域,就可以暫停;

油管是先單擊播放器,然后精確點(diǎn)擊暫停按鈕,實(shí)現(xiàn)暫停。

這兩個(gè)設(shè)計(jì)的差別,在以下場(chǎng)景中體現(xiàn)得淋漓盡致:

當(dāng)我吃完飯,我需要暫停視頻起身去做別的事情。

當(dāng)在B站操作的時(shí)候,我只要粗略看一下屏幕, 在播放器大概的位置雙擊就可以暫停;但是對(duì)于油管,我需要先點(diǎn)擊一下,然后盯著屏幕、非常精確地點(diǎn)擊暫停按鈕,這大概需要我3秒左右的時(shí)間。

雖然不多,但是沒有對(duì)比就沒有傷害。

油管的體驗(yàn),和B站那種完全不用操心的體驗(yàn),相差真的太多了。

以上從 3 個(gè)角度,對(duì)比了兩家的交互設(shè)計(jì)的差別。這些體驗(yàn)問題看起來好像也不是什么大問題。但是說實(shí)話,如果是同樣的視頻,我更愿意選擇在B站觀看。

除了操作更加簡(jiǎn)便、順暢以外,還可以看到更多好玩的字幕。何樂而不為?

所以當(dāng)產(chǎn)品的內(nèi)容和服務(wù)差不多的時(shí)候,體驗(yàn)的不同就會(huì)對(duì)用戶的留存產(chǎn)生更大的影響。

最后,也想感嘆一下國(guó)內(nèi)的體驗(yàn)設(shè)計(jì),其實(shí)是很一流的。奈何國(guó)際化做得不好,國(guó)外的用戶享受不到。

當(dāng)然,背后的原因很復(fù)雜,這一篇也先不展開了。不過說實(shí)話,寫完這篇文章,作為中國(guó)體驗(yàn)行業(yè)的一分子,我也可以小小驕傲一把了,嘿嘿。

本文由人人都是產(chǎn)品經(jīng)理作者【沐風(fēng)】,微信公眾號(hào):【沐風(fēng)的UX充電站】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我也這么覺得

    來自浙江 回復(fù)
  2. 確實(shí),而且我看電影也喜歡B站。就喜歡看彈幕。其他視頻網(wǎng)站的彈幕沒有B站有趣。

    來自重慶 回復(fù)