TAB導航與側邊抽屜導航的巔峰對決

來源:互聯網
上載者:User

 

  編者按:本文作者Anthony Rose,是社交網路電台Zeebox的聯合創始人及CTO,文章不僅分析了側邊欄導航和Tab導航的利弊,還有改版過程進行A/B test 的詳盡過程,且最後也給了建議,讀完能對這兩種導航有清晰的認識,非常有價值的經驗分享 :)

  ================本文分割線================

  設想你需要設計一個含有許多頁面和模組,不能在一屏內顯示完全的應用。你一定會首先想到去設計一個底部或頂部的Tab導航。等一下,多出來的一排導航看上去有點礙眼?我們嘗試下把他們收到側邊欄裡,或者叫安卓團隊給它的名字“側邊抽屜導航”。

  如果你們的應用的也是多視圖的,在你們的團隊裡,以下話題一定常常引發激烈討論:

  是把導航選項都顯示在螢幕上,讓你們的使用者可以清晰認知app結構,並避免多餘操作才能發現;還是使用側導航讓主屏的顯示地區更大些。

  目前,側導航在安卓裝置上比較流行,而iOS平台上使用的還不是很普遍。所以我們的討論還要面對一個問題:安卓和iOS應用是不是有一樣的使用者習慣,適用一樣的導航模式?

  我想,在這裡分享下我們的經驗是很有價值的。

  可用性 vs. 乾淨的設計

  當第一次開始zeekbox項目,我們使用了頂部的tab導航。我們的理由很簡單“看不到的不記掛”。既然你第一眼看不到這些入口,那麼也許你也就不會知道它們在哪兒。

  舉個例子,上圖左邊的方案,如果你沒有看到引導,你可能真的找不到導航在哪裡。如果找到了一次,你會在每次回來zeebox的時候都記得側導航的入口嗎?即使你記住了,每次切換欄目還是會需要點擊兩次。

  但從另外一個角度來說,沒有那一排tab導航,讓設計看上去乾淨多了,把導航放進側邊抽屜裡,讓主內容地區有了更大的空間餘地。

  側邊抽屜導航這種設計模式興起於18個月前。

  2013年九月左右Facebook使用了一種新的導航方式——也有可能是我在使用的Facebook app 作為A/B test的一個樣本。當然了,既然Facebook都這麼做了,那這種方案應該是好的吧,我這麼想。

  而後,友好而樂於提供指導的Google Play團隊建議側邊欄抽屜式導航(navigation drawers)作為一種新的導航方式用於安卓應用。

  所以6個月後,我們決定冒險嘗試改為側邊欄導航。為了保證使用者能清楚地發現側導航,我們在應用初次開啟的時候,設定側邊欄是展開顯示著的,像下圖這樣:

  新版本剛發布的時候,我們的使用者反饋很棒(都是諸如“喜歡新的設計,全5分!”這樣的反饋)但當我們看到自己的資料,這真是個災難!使用者參與度降低了一半,就好像“看不到的不記掛”這句話真的應驗了。

  讓人驚訝的事實

  在意識到結果的嚴重性之後,我們用兩周時間出了一個版本恢複到了頂部Tab導航的模式。同時,為了不讓哪些喜歡新導航的使用者失望,我們在設定裡保留了側導航的選項。

  6個月後,zeebox經曆了不少的改變,我們有了一個新的“我的TV”頁面,它的內容內容更豐富,包括了訂閱和廣告,是對於使用者來說很重要的一個頁面。為了讓更多的內容展現在這個頁面裡,我們又想到了嘗試側導航。基於之前的經曆,這一次,我們決定使用一種更聰明的辦法,A/B test去測試。

  我最喜歡的A/B test工具和方法

  我們使用Flinto來製作高保真的可點擊原型,它讓設計看起來像是一個真實的應用,並且,使用者可以在很短的時間內就完成它。你在這裡看見我們建立的Flinto原型:案例1、案例2 ——在iPhone上可以獲得最佳的點擊效果:在頁面內任何地區點擊,可以互動的熱區就會顯示出高亮提示,可以點擊這些熱區,就像你使用一個真實的應用一樣。

  我們招募了喜歡看電視節目的使用者,每周兩次過來我們的工作室,測試不同的概念和我們設計的原型。在一些情況下,我們可以通過小樣本使用者測試選擇方案,就像上面提到的對於“我的TV”頁面的原型測試。對於另一些情況,像驗證側邊欄導航的使用效果,你需要觀察大量使用者的真實使用記錄。這時,我們需要使用A/B Test。

  對於行動裝置 App的A/B Test,我們使用Swrve——在我看來最成熟的A/B Test工具,它不但能提供Goal Seeking (當勝出方案明確的時候,A/B測試伺服器可以自動切換所有使用者到最佳選項),還能夠選擇對不同使用者提供不同的體驗方案。

  舉個例子來說,如果你是一個Comcast源的訂閱者,你沒有發現我們應用中有對Xfinity遠端控制的功能,Swrve會讓zeebox彈一個窗告訴你相關資訊。通過這種訊息提醒機制的調整控制,A/B test每天都會趨向一種更合理的測試結果。

  對於側邊欄使用效果的測試,我們採用了15/85方法,即針對15%的使用者投放了側邊欄的方案,85%的使用者保持Tab導航的方式。我們發布了這個新版本進行A/B Test,等待最終的測試結果…

  如下圖,測試結果很驚人。

  抽屜導航和tab導航對使用者使用頻率的影響

  周使用頻率在下降(對比明顯),日使用頻率在下降,使用者在應用中花費的時間在下降。側邊欄導航在第一輪測試中看起來像個災難。

  感謝A/B test,讓我們在一段時間的驗證後快速的將所有使用者切換到了tab導航的方案。

  如果關於使用側邊欄還是tab的爭論也出現在你們團隊中,我想我們的研究經驗值得與你們分享。

  在我們通過A/B test決定側邊欄不適合我們產品的時候,facebook也發布了應用的新版本,還是採用了固定的底部tab導航。所以,在iPhone上他們最終還是選擇了保守的導航方式。

  而在安卓上,他們又是怎麼處理的呢。在我的安卓裝置上顯示的是下圖左一的方案(通過二級tab切換不同頁面),在我同事的手機上顯示的是右一的方案,通過(側導航切換不同頁面)。facebook一定也在使用A/B test測試使用者對抽屜導航和tab的不同反應,我很期待facebook對這一測試的最終結果。

  譯者按:在目前最新的face版本中採用了方案1,也就是tab導航的方式,如下圖所示

  facebook最新決定方案

  那麼,到底什麼時候適合用側導航呢?

  我的建議是,如果應用主要的功能和內容都在一個頁面裡面。只是一些使用者佈建和選項需要顯示在其他頁面裡。處於讓首頁面看上去乾淨美觀的目的可以把這些協助工具功能放在側邊欄裡。

  而如果你的應用有不同的視圖,且他們是平級的,需要使用者同等地對待,側邊欄將會浪費掉大多數的使用者對於側邊欄中入口的潛在參與度和互動程度。

  導航從誕生以來,紛爭不斷,孰好孰壞,讀完以下文章自有定奪。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。