用戶體驗:評”燒包網(wǎng)”翻頁功能

0 評論 10338 瀏覽 8 收藏 10 分鐘

今天突然想到要買只包過年用,由于要買男包就上燒包網(wǎng)看了下。
在瀏覽完第一頁后想繼續(xù)翻頁瀏覽,結(jié)果看到右下角的翻頁按鈕我愣了下:“這么的大的網(wǎng)站就一頁商品?”。片刻思考后我想應(yīng)該還有下一頁的,結(jié)果翻下去確實還有。但是翻頁過程中,心里不清楚后面還有幾頁也產(chǎn)生了對網(wǎng)站片刻的反感與放棄的沖動。
主要是多年以來養(yǎng)成的瀏覽習慣,潛移默化的影響了一個人對網(wǎng)頁的判斷。所以提個建議也提醒下各位派友,必須要注重用戶的使用習慣,細微的心理變化與挫敗感會不同程度的影響到網(wǎng)站的轉(zhuǎn)化率。好不容易吸引進來的IP,我們一定要轉(zhuǎn)化為好的PV 才對的起高昂的推廣費。
————————————————————————-
燒包網(wǎng):
————————————————————————–

麥包包:包含了頁數(shù)與商品數(shù)(個人感覺是比較好的)

————————————————————————–

 

 

 

淘寶網(wǎng):影響了大部分網(wǎng)購消費者的瀏覽習慣

——————————————————————-

非購物類網(wǎng)站

 

 

 

大旗:

—————————————————————————
貓撲:

 

 

 

——————————————————————-
繼續(xù)研究,下面找了些資料

為了研究什么樣的“網(wǎng)頁翻頁設(shè)計”即符合網(wǎng)站需要,又能更方便訪問者,我選擇了 Amazon、Google、Flickr、新浪和淘寶這五個網(wǎng)站,體驗他們的翻頁設(shè)計。Amazon 是國外購物網(wǎng)站,Google 是搜索引擎,F(xiàn)lickr 是 Web 2.0 和 Yahoo 的代表,新浪是中國門戶,淘寶是國內(nèi)最大的購物站點。淘寶擁有優(yōu)秀的設(shè)計團隊和用戶體驗設(shè)計團隊(UED)。

Google 搜索結(jié)果的翻頁

  • 富有創(chuàng)意的設(shè)計;
  • 不需要“上一頁”、“下一頁”的時候就不顯示;
  • “上一頁”“下一頁”的鏈接區(qū)域很大,容易點;
  • 不提供所有的頁,上圖中 100 頁是極限,100 頁之后的內(nèi)容或許可以更換關(guān)鍵詞重新搜索,但是沒有提示。

Amazon 商品列表頁的翻頁

  • 是五個網(wǎng)站中唯一一個區(qū)分訪問過、沒訪問過的鏈接的顏色;
  • 不需要“上一頁”、“下一頁”的時候就不顯示;
  • 第一頁的鏈接永遠存在;
  • 告知用戶列表總數(shù)量和當前顯示的數(shù)量(Amazon有些頁面將數(shù)量顯示在列表頂部);
  • 不提供所有的頁,上圖中 400 頁是極限,400 頁之后的內(nèi)容可以通過分類選擇來縮小范圍(同時給出提示)。

Flickr 照片列表的翻頁

  • “上一頁”“下一頁”永遠顯示,但不同情況顯示不同樣式;
  • 按了“上一頁”或“下一頁”之后則邊框加粗(成為重點),引導(dǎo)你繼續(xù)往下點;
  • 告知用戶列表的總數(shù)量;
  • 數(shù)量少得情況下,提供了“最后一頁”的鏈接(圖上沒有);
  • 可以訪問到所有的頁,可惜如上圖所示超過一定的頁碼,顯示上有問題(IE 和 FF 都這樣)。

新浪文章留言部分的翻頁

  • 新浪評論部分的翻頁,Ajax 可以拖動翻頁(顯擺用的);
  • 永遠提供“第一頁”“最后一頁”“上一頁”“下一頁”的鏈接,但是樣式基本一致沒有差別;
  • 告知用戶列表的總數(shù)量;
  • 提供批量翻頁(“上 10 頁”)。

但是在新浪博客(新浪比較有代表性的新產(chǎn)品)中,我們也可以看到以下相對比較粗糙的翻頁:

新浪博客的翻頁

  • 給出了“最后一頁”的鏈接,直接顯示為“第 n 頁”,如上圖中的“第 7 頁”;
  • 在單個博客頁面上的翻頁,以“>>”作為下一頁,而不是常見的“>”;
  • 提供了批量翻頁(“上 5 頁”)。

淘寶商品列表的翻頁

  • 永遠顯示“上一頁”“下一頁”,并且狀態(tài)和形狀有區(qū)分;上一頁使用率較低,所以設(shè)計的較小;
  • 永遠提供“第一頁”“最后一頁”的鏈接;
  • 提供頁面的跳轉(zhuǎn),但是默認值為當前頁;
  • 在列表的頂部右側(cè)提供了一個簡化的翻頁,并且與底部的翻頁設(shè)計一致。

小結(jié)

  1. 必須提供“上一頁”和“下一頁”的鏈接,并根據(jù)狀態(tài)和使用率區(qū)分設(shè)計;
  2. 數(shù)據(jù)量大且更新快的情況下,并且當列表按照特定排序時,一定要提供返回“第一頁”的鏈接;“最后一頁”的鏈接根據(jù)訪問情況而定;
  3. 突出當前頁的數(shù)字,并且盡量使頁碼容易點擊(不要緊緊地靠在一起),也不要一下子把所有頁碼都顯示出來;
  4. 一般不需要在列表的上下都提供翻頁,增加程序負擔并且干擾視覺;淘寶列表頂部提供的簡化的翻頁想法不錯,但不知道使用率如何;
  5. 批量翻頁是無意義的(但是可以增加 PageView),可以通過優(yōu)化頁碼排列來替代;比如在當前頁的左右兩側(cè)各提供一定數(shù)量的頁碼;
  6. 對于“第一頁”和“最后一頁”的鏈接,如果是在頁碼序列中顯示,一般會附帶顯示第二頁和最后第二頁的鏈接,比如本文中的淘寶翻頁的截圖,顯示為“1 2 … 96 97”。如果單獨提供,可能視覺上會以為這不是頁碼序列的一部分,特別是最后一頁的數(shù)字,用戶可能沒有概念;
  7. 對于用戶比較熟悉的內(nèi)容,或者用戶自己的內(nèi)容,盡量提供“最后一頁”的鏈接,比如 Flickr 對于個人照片就是這樣處理的(文中的翻頁取自某個 tag 的照片)。

如果可以通過數(shù)據(jù)確定用戶的行為是較為隨意和沒有目的性的瀏覽,那么提供多種方式的翻頁很有必要,比如提供跳轉(zhuǎn)到固定頁碼。比較理性的行為,不會使用直接跳轉(zhuǎn)到某頁,因為無法知道那里是什么。

Shark 在白鴉的那篇淘寶的體驗文章中回復(fù)到“有些東西出現(xiàn)在頁面上是有很長的故事的,不便多說了?!蔽蚁雭硐肴ィ瑢懕疚牟⑶医貓D只是看看這些公司在細節(jié)上面是怎么處理的、是否用心設(shè)計,不存在絕對的對錯。

數(shù)據(jù)很重要,我曾經(jīng)做過一個活動廣告,點擊率大約是 1%,后來在廣告上增加了“點擊查看詳情”,并且采用默認的藍色加下劃線的鏈接形式,點擊率提高到了 10% 左右。

來源:http://www.paidai.com/displaythread.php?boardid=18&topicid=21260

 

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App