交互設計|抖音為什么是上滑查看下一個視頻
編輯導讀:一個好的產品,不光是能夠滿足人們的使用需求,還要在交互設計上花費心思。比如,為什么抖音是“上滑看下一個視頻”,而探探是“左右滑動”呢?本文作者對此進行了四個維度的分析,希望對你有幫助。
去年求職的時候,作為一個產品新人,每次體驗產品更多的是關注產品的設計細節,總是會覺得xx功能體驗特別好,xx界面設計非常合理,xx細節引導非常場景化,非常貼心。但對于產品如何和用戶發生交互,交互如何讓用戶輕松理解且用得爽,思考的非常少。比如說:
- 產品界面里面哪些內容能點擊,哪些內容能滑動;
- 點擊的時候是在屏幕中央還是屏幕周圍;
- 屏幕的四個角分別代表什么操作;
- 滑動的時候是上下滑動還是左右滑動,是在屏幕中央滑動還是從邊緣滑動;
- 這樣的交互是否費勁,是否合理;
- 是否容易誤操作;
- 點擊/滑動之后界面內容出現什么樣的變化,是否符合預期;
- 用戶進入下一個頁面的時候,究竟是向左滑動進入下一個界面,還是向上滑動進入下一個界面;
- ……
這種維度的思考在之前的產品思考中都是缺失的,近期在工作中,自己設計界面的交互細節的時候也出現了一些想當然的設計,以為用戶能看懂,能用明白,實際是自己在自嗨。所以之后會更多的關注這一類內容,本篇從抖音為什么上滑講起。
01 不上滑的話還能怎樣
當我們沒有沒有頭緒的時候,總是試試反過來想。為什么是上滑查看下一個視頻,那反過來思考就是為什么不是上滑呢。如果不上滑我們還能怎么切換下一個視頻呢,還有哪些可以設計的交互方式呢?
(查理芒格的逆向思維真的很好用?。?/p>
那么問題就轉變為,有哪樣一些交互設計方式,這些方式和上滑這個手勢相比用來處理查看下一個視頻的操作行為,優劣勢分別是什么。
在分析交互方式之前,先思考一個問題,交互是為了干啥?
我們說產品是一套契合用戶使用場景,滿足該場景下用戶痛點的解決方案。因此我們是一套方案,是一個工具,但是是一個沒有使用說明,也沒有工程師上門安裝的工具。因此,解決方案好不好很重要的一個評價維度是用戶能不能輕松上手你的工具,能不能用明白。
互聯網產品是一個全新的工具,大家都在探索一個符合人性,符合使用習慣,符合大眾認知的操作規范。產品和用戶在互相調教,互相進步。用戶的每一次操作都是人機交互的過程,告訴你這一刻他想干什么,他如何向產品尋求幫助。
雖然說,最完美的交互,是不用交互。類似于你一個眼神,你媽就知道你是去廁所還是去廚房,你男朋友就知道你是想喝快樂水還是喝白開水,未來的交互或許也會智能到通過眼神和微動作去交互。(但是游戲產品是特例,因為真實的交互能夠讓用戶有參與感,讓用戶覺得我參與到世界的共建)
剛剛暢想的是完美的場景和未來的可能,但當下,如果用戶真的不和你的產品發生交互的話,你沒法確認到底是因為我們的交互設計過于完美,滿足用戶所想所愿,還是因為交互太傻逼沒有正常用戶能找到你的功能入口(而且大概率是后者),所以我們需要精心思考每一個交互細節,避免因為交互的復雜而導致用戶不滿意你的解決方案。
那么,按照我目前的簡單理解,交互設計分為點擊行為和手勢操作。
1)點擊行為
回顧一下,PC時代,我們怎么查看下一個,在Pinterest還沒有發明瀑布流這種玩法之前,大家都是看完當前頁面,點擊頁面下方的“下一頁”,然后跳轉到新的頁面,視線從頁面下方回到上方,等待頁面加載,類似下圖。
(微博網頁版截圖)
一般如果頁面默認展示10條內容的話,我們想看100條內容就需要進行九次點擊“下一頁”的行為,然后進入九個新的頁面,視線重新聚焦到未看過的位置。
那抖音為什么不采取這種方式,為什么不放兩個按鈕,分別是上一個和下一個呢?
點擊查看下一個視頻和下滑查看下一個視頻有什么優劣勢?
- 從產品使用體驗而言,點擊行為有功能熱區,無論放在哪一塊,用戶都需要定睛觀察圖面才能知道按鈕的位置,準確進行點擊行為,這意味著用戶的視覺焦點會從視頻本身移到功能按鈕上,會中斷用戶的沉浸式體驗,而手勢操作在屏幕中任意位置下滑都可以實現操作,不需要特意觀察圖面;
- 從操作難度來看,根據功能按鍵在屏幕的擺放位置不同,比如屏幕中央還是屏幕邊緣,還是屏幕的四個角落,不同位置對于用戶操作門檻不一樣,單手操作的操作范圍有限,查看下一個視頻的行為還需要和點贊評論等用戶行為反復PK決勝一個最佳按鈕位置。但手勢滑動相對來講就比較簡單,小孩子都可以學會,且誤觸的風險比較低,也更適用于移動產品交互。某種程度上,移動產品的設計,是建立在手勢交互的基礎上的。
所以,在用戶都能理解的基礎上,滑動的手勢操作在整體使用體驗和操作難度上都優于點擊“下一頁”的交互。
2)手勢操作
手勢操作的話,這里只討論單手持機的場景(畢竟大部分單手能完成的行為雙手持機也能完成),也只討論比較常見的單指操作,類似mac那種多指多方向的復雜手勢不在討論范圍內。
手勢操作可以分為左右滑和上下滑,以及稍復雜一點的用手勢繪制相應圖形的操作。這里主要討論一下上下滑和左右滑。
剛才我們討論了為什么手勢操作優于屏幕點擊,但同樣是手勢操作,為什么不是向右滑動查看下一個視頻呢?目前左右滑動主要應用于什么場景下的什么操作行為?以及,左右滑和上下滑有啥區別?
首先,按照常規的從上到下,從左到右的閱讀習慣,如果左滑是上一個,右滑是下一個的話,也不是很難理解和接受。類似下面網易云音樂首頁的banner輪播圖和菜單欄都是類似的設計,可以通過滑動來查看下一張和上一張。所以,如果用左右滑動來切換下一個視頻也是能夠被用戶理解的交互行為。
網易云音樂首頁截圖
除了類似這個case里面圖面部分區域可左右滑以外,也有整屏左右滑的手勢操作的應用,即滑動切換頂部tab。
就好像是當前這個菜單下,我有一疊卡片分別是屬于這個菜單下的不同分類,通過左右滑動可以切換查看不同的卡片內容,也可以通過點擊頂部tab直接定位到相應的某張卡片,比如下圖的酷狗音樂。
(酷狗音樂app的首頁截圖,功能真的太多了==)
這個認知在一眾產品的教育下逐漸形成,抖音也是這樣處理的,左右滑動是切換頂部的三個tab,分別是同城、關注、推薦。
(除了以上兩種左右滑動場景以外,部分頁面跳轉較多的的app比如淘寶,也會用左右滑動的手勢來控制進入下一個頁面和退出當前頁面,這里先不展開了)
因此,抖音為什么不用左右滑來切換視頻就很好理解了。
- 因為左右滑被其他操作給占用了左右滑動當前承載著切換頂部tab的功能,方便承載更多不同類別的豐富內容,滿足不同用戶多元化的訴求,如果用左右滑動來切換上一個和下一個視頻的話,意味著切tab的功能需要用其他手勢/功能按鈕來替代,或者用戶需要手動點擊才能切換類別,或者用戶用上下滑等其他手勢替代操作,前者操作成本較高,后者暫未形成統一認知,教育成本較高。
- 因為左右滑沒有上下滑好操作從操作的簡便性而言,上下滑動優于左右滑動,在單手持機的狀態下,上下滑動是更符合操作習慣的。而且,用戶切換查看下一個視頻的行為頻次會遠高于切換頂部tab查看另一個類目,因此更高頻的行為對應更低門檻的手勢交互,能讓用戶用的更爽。
02 為什么探探是左右滑,抖音是上下滑
剛剛我們只討論了抖音,基于產品本身的特性,和目前內容的豐富程度,選擇了上下滑切換視頻,那為啥探探選擇了左右滑呢?
如果說抖音是首創大屏沉浸式的短視頻且通過下滑切換的產品,那么探探就是首個用卡片形式通過左右滑來交互的陌生人交友產品。既然上下滑這么友好易操作,為啥不是下滑查看下一個交友對象呢?
首先,我們說下滑比左滑好操作,并不意味著所有的交互都需要用下滑,畢竟上下滑只能操作一種行為,因此需要比較用戶的操作頻次以及產品本身的定位綜合考慮。
對于抖音來說,查看下一個視頻是用戶的高頻行為,且這類短視頻app希望用戶盡可能的多消費內容,多看視頻,所以產品設計上要用最好交互的手勢操作最應當發生的用戶行為,非常合理。
但是,對于探探來說,下滑查看更多并不是用戶的核心訴求,用戶打開探探是想找到一個匹配的對象,而不是看看探探上到底有多少小哥哥,如果是來看美男子照片的話,我為啥不去刷陳偉霆的微博呢?對吧,所以探探其實不希望用戶是來消費內容,然后不斷下滑查看下一個內容的。
用戶想要的是,找到一個匹配的對象,并且快速搭訕,建立關系。
基于這個用戶訴求,探探需要做的是:
- 【提供內容】基于用戶畫像,推薦可能的匹配對象
- 【輔助快速匹配決策】首先是提供盡可能少,且關鍵的信息,幫助用戶構建對對方的profile,這些信息包括照片、年齡、星座、地理位置。
除此之外,提供盡可能少的選項,即喜歡、不喜歡、超級喜歡。
探探首頁截圖
超級喜歡某種程度上是為了會員制而包裝出來的特色功能,對于單個對象而言,其實所有的決策都可以簡化為喜歡,和不喜歡兩種。
當選項足夠少的時候,決策才能變得容易。
否則光排除錯誤答案都要思考老半天。舉個反面例子,如果用戶對于單個對象的決策分成四檔,“一見鐘情型喜歡”,“感興趣想試試”,“一點點心動但是不想主動追”和“完全不感興趣下一個”。
好家伙,光是理解這幾種分類就很費勁了,還需要思考具體放在哪一類合適。如果“一見鐘情型喜歡”的池子里沒有魚上鉤,就繼續在“感興趣想試試”的池子里再決策一下有沒有勉強能達到“一見鐘情型喜歡”的類型,這樣整個決策過程就會變的非常復雜,光是基于照片等有限信息也很難支持這么詳細的分類依據。
所以,探探想幫助用戶快速決策,重點在于快速,只要選擇喜歡和不喜歡就行了。
剛剛我們拿抖音和探探做比較,一個上下滑,一個左右滑。但是實際上,完全沒有可比性。抖音上下滑是查看上一個和下一個,而探探嚴格來說,左滑也是下一個,右滑也是下一個,因此是用互斥的兩個手勢動作來承載用戶互斥的兩個態度,喜歡和不喜歡。
也就是說,用戶沒有選擇上一個的操作按鈕。
這個需求不是做不了,而是不給做。
只有沒有退路的時候我們才會更加慎重的決策,否則錯過這個村就沒這個店了,通過不給用戶試錯和回退的機會來讓用戶更加慎重的決策,提高決策的效率。
如果用上下滑來表示喜歡和不喜歡的話,上滑查看下一個的用戶習慣過于根深蒂固,一定會帶來大量用戶實際想看下一個但莫名其妙選擇了喜歡還配成對的badcase,因此,這個場景下,首創左右滑動的交互方式來代表用戶態度就顯得有用且高效。
03 當滑動屏幕的時候,我們想干啥
討論完各種交互方式,我們回歸到上滑屏幕這個行為本身,當我們滑動屏幕的時候,我們想干啥。我們在什么時候會有意識的滑動屏幕?
有兩種可能性,一種是當前屏幕的內容感興趣,想了解關于當前這個對象的更多信息,即追求當前信息的延伸,比如看長微博的時候,一屏沒放下,然后滑動屏幕慢慢慢慢往下看。
另一種是對當前內容不感興趣或者已經消費完成當前內容,尋求同類型的下一個對象,比如刷朋友圈,往下滑不是還想看python的廣告,而是對這個廣告不感興趣想快點略過廣告查看下一條。
這兩者其實是有區別的,舉個不太恰當的例子,當你在一個狼人殺局認識了一個可愛的二次元女孩,你加她微信搭訕,可能有兩個目的,如果這個女孩子還單身,你或許想進一步增進了解,追求人家,即當前對象信息的延伸,如果這個女孩子已經有男朋友了,你或許想問問人家,還有沒有閨蜜,還有沒有和她一樣可愛的女孩子,可以介紹給自己認識,即追求同類型的下一個對象。
那怎么區分用戶滑動的時候,是想滑動當前這張卡片,還是想滑動切換到下一張卡片呢。
答案是,不區分hhh。
雖然在知乎早期是將這兩種行為嚴格區分開來的,查看完當前回答需要返回上一個列表頁,點擊下一個回答,然后進入內頁查看詳情。
但實際上,無論是同類還是不同類的內容,對于用戶而言都是消費更多的信息,屏幕大小有限,當前內容一屏展示不下,所以需要用戶手動下滑,但這張卡片總歸有看完的時候,內容加載完之后,是選擇讓用戶下拉失敗告訴他我這兒沒有更多內容了,你需要退出再找找別的,還是馬上補上下一個相似內容,方便用戶無縫銜接的繼續消費呢?
(雖然我沒有關于這個小哥哥的更多詳細信息了,但我還能給你介紹更多小哥哥,保準有你喜歡的內容,反正你別走,歡迎再看看別的~)
產品選擇的必然是后者,也就是現在的瀑布流。內容的無縫銜接降低了用戶查看更多內容的操作成本,畢竟消費當前信息的用戶對于同類信息也大概率會感興趣,給到用戶更流暢的信息消費體驗的同時,產品經理也促進了更多內容消費的行為的發生,給產品帶來更大的商業價值。
但是瀑布流也不是什么都好,也有badcase,畢竟混雜了兩種用戶需求,喜歡當前內容和消費完了不喜歡當前內容的場景。
如果用戶在朋友圈看到了python的廣告,滑動想做的事情是略過這個內容查看下一個,但是默認展開的評論區那么長刷了一屏又一屏,用戶明明對當前信息不感興趣你還繼續補充更多關于當前信息的內容供對方消費,馬屁拍到馬腿上,導致用戶最后罵罵咧咧退了出去。
將滑動的兩種場景耦合在一起的話,勢必會帶來這樣的問題,因此瀑布流能夠讓用戶一直繼續消費下去的前提也取決于看到感興趣的內容帶來的愉悅和對不感興趣的內容或者廣告的容忍度,需要一個強大的推薦算法~
04 一定要交互才能看到下一個視頻嗎
這個問題其實還沒有思考完,我們比較了所有的交互方式,怎么樣看到下一個視頻,怎樣查看下一個,每個交互方式的優劣勢。但一個問題是,我們必須通過交互才能看到下一個視頻嗎?
答案是未必。
比如說,我們可以自動輪播,像微博一樣,3秒后自動為您播放下一個視頻(當初一度吐槽這個功能,因為推薦的視頻太爛了完全不感興趣),再比如說,我們可以一個屏幕放倆視頻啊,上一個和下一個都在這了,整整齊齊,我們也可以像b站一樣,首頁有兩縱列視頻等待小主點閱。
為啥抖音要一個內容占據整個屏幕,然后讓用戶來操作才能看到下一個視頻呢?我猜測可能有以下兩方面的原因:
- 第一,沉浸式體驗。大屏的好處在于沉浸式體驗,整個屏幕除了當前視頻沒有其他信息,用戶可以毫無負擔的享受當前內容,忘卻外部煩惱,不知不覺,抖音十幾秒,人間倆小時。
- 第二,不確定性和驚喜感。大屏交互和快手等產品之前的雙列feed流相比,還有一個好處在于,列表代表了確定性,需要決策成本,點開哪個看哪個,當你查看列表的時候,你預覽了信息,知道可能會有哪些內容,并且基于標題和預覽信息選擇了一個內容,那么你對視頻內容就有了基本的預期,內容也很難超出預期,只能大概率符合預期或者低于預期。
而大屏交互,看不到下一個意味著不確定性和驚喜感,如果說雙列feed流的下一個視頻是4選1,那下滑查看下一個視頻意味著n選1,你完全不知道下一個是什么,你也不用想下一個是什么,你只用看/不看,不看就繼續滑就是了。
我之前的推送中給大家介紹過南京一個我很喜歡的小店,叫做風波莊,我愿意稱它為餐飲界的“抖音”。因為在這家店解決了吃飯的一大難題,點菜。
大家都知道點菜是最難的,點多少,點什么,很費勁。你一問旁邊人說吃啥就是都行,上菜之后,說你這菜不夠硬,或者沒有湯,或者沒有蔬菜,或者太辣了,或者太油膩,點菜的人心里苦也沒處說。
(我可太愛風波莊了~強烈安利大家有機會嘗嘗)
但是風波莊摒棄了傳統的看菜單點菜方式,一進來服務員不會給你遞一張密密麻麻各種推薦菜的菜單,而是直接按照人數上菜,沒有菜單。
你只要坐下喝口水的功夫,就有人開始給你上菜了,但也不是完全失去了選擇權,因為每道菜你都可以獨立選擇留下還是端走,大型100選8的多選題就變成了八道2選1的是非題,整個就餐體驗變得輕松高效。
當然,這個背后還強依賴推薦算法(阿姨對每個人食量和口味的預估),以及產品本身的質量(菜品豐富度和口味)。
所以綜上,抖音為什么是上滑查看下一個視頻的設計,我的回答如下:
首先,這個設計的背景是產品本身基于對其背后推薦算法的自信,省去了用戶決策的環節,直接進入當前內容的消費階段,因此用戶需要手動操作去切換內容,或者換句話說,用戶需要有出口表達自己是否接受被推薦的內容,而不是被迫消費所有被推薦的內容。
在用戶有交互訴求的基礎上,上滑的好處是:
- 不需要額外的教育成本,上滑查看更多內容已經潛移默化成為了用戶習慣。
- 上滑是最簡便的交互手勢,查看更多是用戶和產品的共同訴求,所以上滑承載用戶最高頻的訴求十分合理。
- 用上滑來查看更多,保留左右滑用于tab切換,保證了結構和內容的可擴展性,保證了產品的活力。
#專欄作家#
李濤,微信公眾號:檸檬two,人人都是產品經理專欄作家。新人產品經理,專注于產品求職分享和社交/社區賽道產品思考。
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
應該和身體力學有關,上下滑動只需要動用拇指第一個關節,上滑最省力,下滑會受到拇指內測肌肉的阻力。左右滑動需要動用拇指兩個關節的力量,同理于動一根手指比動一整條手臂省力。
抖音為什么這樣子做,還得問問musical.ly
補充兩點
第一:上下滑動和左右滑動的成本是不一樣的,上下滑動是拇指隨著關節自然彎曲,成本相對較低。而左右滑動時,拇指的左右擺動是不符合拇指關節自然彎曲的。
第二:探探的左右滑動是用戶表達兩種完全相反的意愿,而且,??和??在表達兩個方向比較符合大眾認知。反觀上下滑動則不能表達探探的產品特性。
看過老式的閉路電視嗎,說實話體驗比現在的智能電視好。為什么?選擇困難癥的體驗很不好。
還有一點上下滑動的時候給人感覺銜接性更強
大部分feed流都是上下滑而不是左右滑。左右滑動的一個問題是我們閱讀順序是從上到下的,下滑幾乎無縫銜接更多內容,但是左右滑就會有斷層。
個人觀點:有一個因素因為視頻展示是長的(高大于寬),試想一下如果左右滑動會不會界面切換時會很丑。
市面上不乏左右滑的交互設計,丑不丑可能略微主觀
這個問題我也思考過,而且我看過一些心理學和交互的文章,得出的結論大概是:
人身體的行為是相通的,當你手指上下滑動時,與點頭的心理感受差不多,也就是不停地肯定,較為積極和舒爽;而頻繁地左右滑動像在搖頭,會產生否定的感覺,比較消極。
正確和錯誤有待進一步論證,大家頁可以自行嘗試看看
其實看整體的設計話,除去左右進入關注和賬號功能,單擊暫停這個幾乎誰都有潛意識的觸摸方式,雙擊是點贊,那么你還能有啥操作空間呢?會有人問到為啥不上下進入關注和賬號功能,難道你關注之后,就不是左右分項目,而是上下分了嗎…所以最優是上下
我覺得這也跟手指發力有關系吧?首先一個是手機上上下滑動是很普遍的一個形式,所以抖音也是用這種形式會讓大眾覺得方便,第二個就是上下滑動手指會很方便,相比較一下 上下滑動與左右滑動
相冊都是翻頁,相冊里的照片是核心,就像探探里人物信息(照片)是用戶最關注的 左右滑動如同翻相冊一樣
其實這種交互方式與我們下意識有關。比如我們看書的時候。書本的翻頁就是這樣交互的。
看書不是左右翻頁的么?
本子翻頁不是有 上下翻嗎