移動端的返回頂部懸浮按鈕還需要存在嗎?

7 評論 11746 瀏覽 33 收藏 11 分鐘

返回頂部懸浮按鈕解決了用戶的什么痛點?它是否還需要存在?

一、 返回頂部懸浮按鈕的出現(xiàn)

返回頂部懸浮按鈕大家都不陌生,在pc端瀏覽網(wǎng)頁的時候都會在右下角出現(xiàn),方便用戶點擊后直接返回到頂部。產(chǎn)品功能都是為了解決用戶的需求而出現(xiàn)的,返回頂部懸浮按鈕也是如此。那么這個小小的懸浮按鈕解決了用戶什么痛點呢?

  1. 縱向頁面太長,用戶重新回看頂部內(nèi)容時需要較多的滾動。
  2. 對頁面頂部控件有需求,如搜索框、確定按鈕等控件放置在頁面頂部。

隨著智能手機的普及,許多網(wǎng)站也紛紛開發(fā)出移動端的app,作為功能之一,返回頂部懸浮按鈕也跟著遷移到了移動端。但不同于pc,手機屏幕寸土寸金,因此在懸浮按鈕單一功能上做出了改進,加入了動畫交互(如下圖左下角手淘按鈕),隨著頁面的不斷滑動懸浮按鈕會產(chǎn)生動畫形變,增加了和用戶的互動,也提醒用戶這個功能按鈕的存在。這就是目前返回頂部懸浮按鈕在移動端的現(xiàn)狀。

二、 哪些類型的應用需要返回頂部

返回頂部的出現(xiàn)是為了頁面太長的問題,那些會出現(xiàn)長頁面的應用會加入這個功能,我們可以總結(jié)出以下這幾個類型:

  • 購物類:如淘寶、京東等,商品圖片展示和文字描述會占據(jù)較大空間,因此需要增加頁面的長度。
  • 美食佳飲類:同購物類應用類似。
  • 新聞類:新聞常常以圖文并茂的形式出現(xiàn),因此也需要用戶不斷滑動才能看完全文。

相信大家都能看出這幾類應用類型的相同點,都是圖文并茂,并且需要足夠的展示空間。也就是常說的“瀑布流”展示形式。說到“瀑布流”,就不得不提我們的微信朋友圈了。

三、 微信朋友圈的返回頂部

隨著社交圈的拓寬,每個用戶添加的微信好友越來越多,每天要“批閱”的朋友圈也越來越多,瀑布流要展示的內(nèi)容大有“飛流直下三千尺”的氣勢,自然也會出現(xiàn)頁面過長,回滾過慢的情況。微信的產(chǎn)品經(jīng)理們也注意到這一點,很快,微信版的返回頂部功能也面世,但不是采用傳統(tǒng)的懸浮按鈕的形式,而是推出了雙擊頂部返回功能。

相比懸浮按鈕,雙擊頂部的設計顯得更加聰明:不需要在頁面中“塞入”一個懸浮按鈕,頁面能夠保持簡潔;將頂部標題本身變成“按鈕“,使得頁面更具整體化。不過這個聰明的交互方法可不是微信原創(chuàng),最先使用的應該是蘋果的ios系統(tǒng)。

四、 蘋果ios系統(tǒng)的返回頂部

從iphone4開始,蘋果手機開始風靡,ios操作系統(tǒng)也開始影響人們的生活。隨著系統(tǒng)的不斷更新,蘋果的產(chǎn)品經(jīng)理們也注意到了用戶返回頂部這一痛點,于是點擊狀態(tài)欄返回頂部的功能應運而生。

這一人性化功能的推出,讓返回頂部不再是局限于一個app內(nèi),而是擴展到整個系統(tǒng),這一功能也使得眾多手機廠商效仿,經(jīng)筆者測試,目前魅族、華為都適用,小米不是點擊狀態(tài)欄,而是第三方插件實現(xiàn)此功能。
受微信和操作系統(tǒng)的影響,如今大部分的應用軟件都采用新的返回頂部方式,以下是幾款軟件的對比。

五、 部分軟件返回頂部的對比

筆者分別從購物類、美食類、新聞類中選擇幾個應用作為代表,從上面的對比圖我們可以看出,其他的應用都使用了點擊頂部返回的交互方式,只有淘寶、京東等購物類軟件仍然保留返回頂部的懸浮按鈕。那么,為什么淘寶京東仍保留懸浮按鈕這種形式呢?懸浮按鈕還有存在的價值嗎?我們不妨來探究一下。(京東淘寶互為競品,相似性較大,因此這里只選擇下載人數(shù)多的淘寶為例)

六、 手淘中返回頂部懸浮按鈕的分析

首先我們來看一下返回頂部懸浮按鈕在手淘app中出現(xiàn)的頁面,分別出現(xiàn)在首頁和商品詳情頁,但奇怪的是,同為長頁面的動態(tài)頁卻沒有這一功能。

在此筆者猜測,首頁和商品詳情頁是手淘app一開始的版本就有的功能,也就是跟著pc端遷移過來的,因此保留了懸浮按鈕,而動態(tài)頁則是后來隨著版本迭代而逐步添加的功能,因此兩版功能出現(xiàn)了這一差異。

那么在這兩個頁面中,這兩個按鈕的使用情況如何呢?我們一共收集了131份有效調(diào)查問卷,調(diào)查問卷顯示
在是否使用過首頁中的返回頂部懸浮按鈕問題中,僅有17.5%的受訪者使用過此按鈕,而八成的人則表示從未使用甚至不知道這個按鈕的存在。

而在是否使用過商品詳情頁里的懸浮按鈕問題中,6成的受訪者表示使用過這個懸浮按鈕。

兩個相同功能的按鈕為什么會有不同的使用率呢?我們結(jié)合具體的頁面來看一看:

在文章開頭我們提過,返回頂部滿足了用戶的兩個痛點,而這兩個頁面正好是這兩個痛點的代表。第一個頁面中,按鈕的功能是讓用戶返回頂部搜索框進行搜索,但隨著版本迭代,搜索框已經(jīng)被更新為固定在頂部,也就是說用戶可以隨時進行搜索,根本不需要在滑動返回頂部,自然,這個懸浮按鈕也就成了擺設。

在第二個頁面中,用戶返回頂部則是滿足第一個痛點,回看頂部商品信息,因為在購買商品的過程中,用戶會反復確認商品的信息是否是自己需要的,所以返回頂部是用戶的需求之一。
但這個按鈕的情況其實也不容樂觀,手機淘寶在新的版本迭代中也加入了商品詳情頁面的頂部固定,用戶同樣可以點擊頂部標題直接回到頂部?;蛟S被新功能代替也是遲早的事。

七、 總結(jié)

綜合上述幾點內(nèi)容的分析,我們不難發(fā)現(xiàn),返回頂部懸浮按鈕處于一個尷尬的境地。

  1. 在大的范圍中,有手機系統(tǒng)自帶的返回功能可以取代。
  2. 在小的范圍中,同一個app中也有相同的功能按鈕。
  3. 新的類型功能按鈕的面世,如微信的頂部標題欄,手淘的固定標題欄,更加適應潮流。
  4. 按鈕本身的使用需求并沒有pc端那么強烈,使用率不高。
  5. 本身的功能游離于應用軟件的體系之外,即該功能的刪除對軟件本身的業(yè)務流程沒有影響。

在以上種種因素的前后夾擊下,或許返回頂部的懸浮按鈕真的應該退出移動端了。當然,這并不是說現(xiàn)有的功能應該砍掉,而是給設計新產(chǎn)品功能的產(chǎn)品經(jīng)理一點參考,看看是否有必要加入此功能。

 

本文由 @神戶短郎 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 網(wǎng)頁端的回到頂部按鈕,看好多網(wǎng)站都只有常態(tài)和懸浮態(tài)沒有點擊態(tài)。需不需要呢?

    來自浙江 回復
  2. 懸浮按鈕的目的:
    1.錨點定位
    2.突出優(yōu)先級高的操作

    如果是目的1,那么會慢慢被頂部雙擊這個交互取代;目的2會成為懸浮按鈕以后的核心

    來自四川 回復
  3. mark

    回復
  4. 有個設計原則叫【易取】,大致是說用戶眼睛看不見的功能,那就得靠記憶,要記憶的東西就會被用得少或干脆人家就不知道。用戶群不同情況不同,iOS那個點擊置頂(我還沒試)幾個人會知道呢?連左滑返回我都經(jīng)??吹饺瞬恢?。包括微信的雙擊頂欄回頂部,我自己就是靠硬記來使用這功能的(以便提高效率)。因此要不要懸浮一個回頂部按鈕,這個按鈕要什么時候出現(xiàn),面積搞得多大,還得具體情況具體分析。

    來自廣東 回復
    1. 贊,說的很有道理!自己考慮得還是不夠

      回復
  5. 淘寶京東的手指滑動屏幕很靈活,用力一下也會直接到頂部的位置,這個功能也不錯,微信回到頂部的功能其中一個也包含了手指滑動,另一個就是頂部雙擊。

    來自上海 回復
    1. 受教了

      回復