多くのサイドバーが役に立っていない理由とは?

Yona Gidalevitz

YonaはCodal社のテクニカルライターです。彼はコンテンツ戦略、文章、ブログ、編集の責任者です。また多岐にわたる記事を提供するため、Codal社のUX、発展、マーケティングそして管理チームと密接に働いています。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why UX Designers Should Ditch the Sidebar in 2016

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

Webサイトにおいて、サイドバーは必要でしょうか?

情報交換をとても重要視している業界ですから、サイドバーが流行してスタンダードな手法となったのはある意味必然といえば必然です。ですが、サイドバーはつまるところただのリンク集でしか無く、補足的な情報を入れておく程度の場所です。

これを言い切ることで私を嫌いにならないで欲しいのですが、UXデザイナーはサイドバーに頼りすぎなのです。

例えばUXデザイナーの方にサイドバーを使わなければいけない理由を聞いてみてください。おそらく合理的な答えを導き出すまで相当な時間がかかるのではないでしょうか。

では、サイドバーに対抗できるものはあるのでしょうか?

サイドバーは役に立たない?

全てのサイドバーが役にたたないわけではないのですが、大半は役に立ちません。役に立つサイドバーとそうでないサイドバーはどう区別するのでしょうか。それは「目的」で区別します。

まずは問いかけて見てください。「サイドバーに何を入れようか?」と。

もし答えが「リンク」であれば、より具体化してみましょう。それはナビゲーションリンクですか? またはおすすめのコンテンツへのリンクですか?

全てのリンクが等しく制作された物ではありません。

ナビゲーションのサイドバーはヘッダーやほかのメニューが既に存在していることがない限り、情報設計的には整理する良い方法ではあります。もしそうでなければ、デザインが重複してることになってしまいます。

Google Driveのサイドバーの活用方法を見てみましょう。

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

サイドバーを主なナビゲーション方法として使っている例(Google Drive

Google Driveがページのトップにナビゲーションリンクを設置していない部分に着目してください。その代わりに、コンテンツの左側にサイドバーのナビゲーション要素を実装しています。これは正しく設置されている一例です。

Gmailや連絡先など、他のGoogleのプロダクトも同じようなトレンドを追っています。

では、役に立たないサイドバーとはどのようなものなのでしょうか?

オンラインのニュースサイトなどは悪い例です。

おそらく「ニュースサイトなんてどうしたら悪くできるのか?」と思われる方もいるでしょう。この業界のサイドバーの大半は単純に「やりすぎ」なのです。

Fox Newsを例に考えてみましょう。

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

おすすめコンテンツのサイドバー(Fox News

Foxニュースは「More from Fox News」と称して、他の記事を勧める用途でサイドバーを使用しています。自身のサイトにユーザーをとどめておく、という意味では、賢明な策でしょう。

ですが、Amazonが提供するAlexaによると、一人当たりのサイト訪問人数の平均ページビューが2.69であるのに対し、Foxニュースの直帰率は52%です。謎はそこで終わりません。

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

重複するお勧めコンテンツ(Fox News

ページを少しスクロールダウンすると、「あなたの好きそうなスポンサー記事」「Foxニュースをもっと読む」「スポンサー記事」というタイトルの3つの似たような項目が見つかるかと思います。これらは、「おすすめのコンテンツ」でユーザーを広告攻めにしています。

このケースを見てみると、紛らわしい名前を各項目に振り分けることによって、サイドバーのコンテンツと記事下の様々なおすすめコンテンツを区別しようとしていますが、実際にやってみると、明らかにFoxの直帰率の改善に役立っていません。

ミニマリズムの時代

GoogleやAppleなどの企業のWebサイトは「フラットデザイン」という方法を採用したり、ミニマルデザインなどのアプローチをとっています。

ミニマリズムはWebサイトに載っているメッセージを強制的に見せるような働きがあります。UXデザインやビジュアルデザインの場合、たいてい余計なものがないほうがいいのです。ミニマムデザインはCTA(Call To Action=行動喚起部分)をより目立たせ、ユーザーには大切な部分に集中させるのです。

下記はWashington Postの記事は、私が「散らかったサイドバー」としているものの一つです。

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

散らかったサイドバー(Washington Post

上記ページの注目すべき点は、いわずもがな記事のコンテンツですが、ユーザーは広告、おすすめ記事、eBOOKのダウンロードリンク、そしてニュースレター登録のCTAを含めたサイドバーの散乱物全てに、気を散らしてしまうことになります。

散らかったサイドバーをなくすためには、ユーザーの焦点を定めてげるのがよいでしょう。

サイドバーによって頻繁に起こる「散乱物」を取り除くことに関して、MSNBC(下記写真)はミニマリストアプローチをデザインに採用することによって、ニュース業界大半のWebサイトで普及している流行を打ち砕き、目の前のコンテンツにうまく焦点を合わせています。

http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/

焦点を絞ったミニマリストデザイン(MSNBC

あなたはどちらの方が読みたいですか?

散らかったサイドバーはコンバージョン率にも影響を与えます。下記の図では、Smashing MagazineはサイドバーでメルマガのCTAを狙っているのが明白です。

ditch-sidebar-2016-6-smashing

コンバージョンの手段としてのサイドバー(Smashing Magazine

上記の方法はうまくいったかもしれませんが、サイドバーにいれたすべてのものがコンバージョンすると思わないほうがよいでしょう。VideoFruitによると、ユーザーは一回の閲覧につき、0.3%しかサイドバーをクリックしていないそうです。つまり、ユーザー1000人に対し3人ということです。

VideoFruitはサイドバーを取り除き、CTAをほかの場所に設置することでメルマガのコンバージョンレートを26%上昇させました。ImpactBnDも同様のことをして、CTAのパフォーマンスが71%上昇したという驚きの報告が上がりました。

このようにサイドバーを取り除いたところで、コンバージョン率において悪影響はないのです。もしあるとすれば、不利益です。

サイドバーを取り除きましょう

サイドバーを正しい形で採用することは可能でしょうか?

おそらく可能ですが、おすすめはしません。ECのページで焦点を当てるべきは商品のラインナップであり、ポートフォリオページでの焦点は、ポートフォリオです。この法則の唯一の例外は、ブログページです。

ブログなら、単にサイドバーをナビゲーションとして使用せず、うまく実装することが可能です。理由は、高い直帰率が必ずしもブログに不利益を与えるわけではないからです。サイドバー自体がちらかっているにしろ、ないにしろです。特定のページに飛んできたユーザーは、サイトの構造より、コンテンツに関心を持っています。

ブログ以外に関しては、どうしてわざわざページを散らかしに行く必要があるのでしょうか? もしご自身のサイトのサイドバーでコンバージョン率を上げたいと思っているのなら、上記の例があなたを思いとどまらせるはずです。

そしてこのご時世、忘れていけないのが、訪問者はモバイルからの閲覧が多いこと、そしてサイドバーはモバイル機器でがほぼ表示すらされないということです(スワイプを続ければ出てくるでしょうが)。アクセスのほんの僅かな部分にサイドバーを実装して、何を目標としているのでしょうか。

そろそろ問題と向き合いましょう。サイドバーは補足でしかないのです。サイドバーに対する盲信などは捨て去る必要があります。

もしサイドバーをナビゲーションを主にした手段以外で使用しているなら、それはおそらく役に立たないでしょう。

画像: Benoit Meunier – Creative Commons


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて