※回答一覧

 出題者   カテゴリ   作成日

坂本　邦夫		 ユーザビリティ・デザイン担当 2014-11-28 17:16:31
 問題   ヒント   回答数 
■ナビゲーションドロワーを押すと画面はどう動くのか?

最近スマートフォンやタブレット用のウェブサイトで ≡ のような3本線のナビゲーションが多く見られるのにお気づきでしょうか? このボタンはハンバーガーやナビゲーションドロワーなどと呼ばれています。

さて、いろいろな場面で見られるこのナビゲーションドロワーを操作するとどのような動きになるか、皆さんは想像できていますでしょうか?

このナビゲーションは様々な場面でまったく異なる挙動をすることも多く、予想外の動きにとまどってしまうこともたびたびです。

そこで皆さんに今月の問題です。

1. このナビゲーションを操作すると、どのように動くのが理想でしょうか? 以下の3つから選んで、その理由もお書きください。

　A. 画面自体がスライドし、縦並びのメニューが表示される
　B. 画面はスライドせず、ボタンの一覧がナビゲーションドロワーの下に表示される
　C. その他(具体的にお書きください)

2.ナビゲーションドロワーを使うメリットとデメリットは何でしょうか?		 8

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 たけ
(1) どのように動くのが理想か

【B】が理想だと思います。

理由:
ユーザーがこのボタンのデザインをぱっと見た時に、
「これを押すと画面が遷移する/スライドする」といった期待/予想はしにくいと思います。
この為、画面が動いてしまうと、戸惑ってしまうと考えるからです。


(2) メリットとデメリット

メリット:

・複数のメニューをまとめることができ、
　画面の小さいデバイスでも多くのメニューを見せることができるのではと思います。

・特にPCでChromeを使っているユーザーなどはこのUIに慣れていると思うので、
　そういった人には、わかりやすいのかなと思いました。
　

デメリット:

・入っている中身にもよりますが、
　もし重要なコンテンツが入っている場合は、SEO上デメリットになるのかなと思いました。
　(参考:http://goo.gl/ooJA7N)

・ナビゲーションドロワーだけでなく、こういったタブ?的なUIを使うもので共通かもしれませんが、
　任意のページへ遷移するまでに、必要なアクションが増えるので、
　少し離脱が増える可能性があるのかなと思いました。

⇒上記踏まえると、中に入れるメニューには、
　コンバージョンにあたり重要なページなどは含めない形にした方が、有効活用できるのかなと思いました。		 注目 (坂本　邦夫)
SEO上のデメリットなども指摘していただいきました。 厳密に検索にどのように影響するかは微妙なところではありますが、一般的にはナビゲーションとしての利用が多いところなので、PCサイトではヘッダのナビゲーションであったり、サイドバーであったりしたものが、ドロワーの中に納められていることが多いです。 そこにコンバージョンにつながるようなバナーやコンテンツを入れるのは大きな問題があると思います。
1 gabber1090
1. このナビゲーションを操作すると、どのように動くのが理想でしょうか? 以下の3つから選んで、その理由もお書きください。

　A. 画面自体がスライドし、縦並びのメニューが表示される
　B. 画面はスライドせず、ボタンの一覧がナビゲーションドロワーの下に表示される
　C. その他(具体的にお書きください)

⇒A
「ナビゲーションドロワー」という名のとおり引き出し(ドロワー)の様な動きを想像します。またその様に振る舞うことがBに比べ個人的には自然に感じます。

2.ナビゲーションドロワーを使うメリットとデメリットは何でしょうか?

⇒メリット
一画面内の情報量をシンプルにし重要度の高い情報へのリーチをしやすくする効果があると思います。また、複雑な階層を持つアプリやページなどでは下層ページからのダイレクトなナビゲーションに有用と思います。

デメリット
そもそもナビゲーションドロワーに掲載すべき項目が多い場合には本意である「ナビゲーション」の機能が損なわれることが考えられます。また「ナビゲーションドロワー」の存在に気づかないユーザーも居ることがアプリやページの評価を下げる要因になると思います。		 なし (坂本　邦夫)
ご指摘の通り、メリットとデメリットが両方あるのがナビゲーションドロワーですが、重要な情報をどのように扱うかで導入を考えることが必要ですね。 スマートフォンの比率が高まっているとは言え、年代が上がるとやはりメールくらいしか利用していないという人も多く、ナビゲーションドロワーの存在に気づかない層も一定以上いるはずですので、ユーザー層を考えることも重要です。
0 ゆっき3
1. このナビゲーションを操作すると、どのように動くのが理想でしょうか? 以下の3つから選んで、その理由もお書きください。

　A. 画面自体がスライドし、縦並びのメニューが表示される
　B. 画面はスライドせず、ボタンの一覧がナビゲーションドロワーの下に表示される
　C. その他(具体的にお書きください)
→B. 画面はスライドせず、ボタンの一覧がナビゲーションドロワーの下に表示される
狭い画面の中で、元の画面も見ながら必要であれば他のメニューに移動できるため。

2.ナビゲーションドロワーを使うメリットとデメリットは何でしょうか?
→メリット:ユーザーにとっては、狭い画面で必要なときにメニュー一覧を必要な際にだけ見れるため。
デメリット:慣れない人にとっては、何のボタンか分かりにくい		 なし (坂本　邦夫)
「慣れない人にとっては、何のボタンか分かりにくい」というのは仰る通りで、海外サイトではボタンのみが表示されていますが、日本では「MENU」などと書かれていることが多いですね。新しい機能のラベリングは非常に難しいです。
0 丸田
1.
すみません、どう答えていいのかわかりません。


2.
メリット
・メニューが折りたたまれた状態になるため、画面がすっきりし、見やすく、コンテンツに集中してもらうことができる
・よく使うメニューにアクセスしやすくすることができる(そういう風に設計すれば)
・あとからの拡張性に優れる

デメリット
・項目を探し回るのにクリック数が増えるため、ストレスが高まる可能性がある(項目の場所を覚えないといけない)
・安易な階層化により、練り込みが足りず使いにくいものになる可能性がある
・知らない人にはドロワーの存在にに気づいてもらえない可能性がある(慣れの問題かもしれませんが)

以上です。		 銀 (坂本　邦夫)
メリット、デメリットを簡潔に非常にまとめていただきました。 この拡張性という部分も非常に重要ですね。どうしても一画面単位で考えがちになるのですが、サイトの構成が変動しやすい場合には、非常に合理的なナビゲーションと言えます。 その反面、クリック数が増えたり、階層の複雑化につながることもあるため、よく見られる割に実は難しいナビゲーションであることにも気づかされます。
0 YN
1. Bが理想だと思います。
理由:狭い画面スペースを有効に使える。
ユーザが閲覧しているコンテンツをスライドすることなくメニューを示すことにより、混乱を回避することができる。

2.
メリット:
画面スペースを有効に使える。
PCサイトで潤沢なコンテンツを提供している場合でも、スマホやタブレット用のサイトを制作する際に、ナビゲーションが困難だからという理由でコンテンツを無理に削減する必要がない。ナビゲーションドロワーで効率的にカテゴリーを提示することで、必要なコンテンツに適切に誘導できる。

デメリット:
タブメニューに比べ、ドロワーだと目的のメニューをタップするまでに1アクション余分にかかってしまう。
メニューが表示されている際、画面のコンテンツが隠れてしまい、障害物という印象を与える可能性もある。		 銅 (坂本　邦夫)
複雑な構成にも対応出来るというメリットをご指摘いただきました。 逆にスライドさせなくても全部メニューが表示できるような、比較的小規模のサイトであれば、そもそもナビゲーションドロワーを使う必要もないのかもしれませんね。 狭い画面なりに大きな画面の端末も増えているため、どうすれば使いやすいサイトになるのかは悩みどころですね。
0 yukko
1. このナビゲーションを操作すると、どのように動くのが理想でしょうか? 以下の3つから選んで、その理由もお書きください。

A. 画面自体がスライドし、縦並びのメニューが表示される

理由:使いなれているというのが主な理由ですが、必要である情報がこの中に隠れているのだろうなという直感的な要素があると思います。

2.ナビゲーションドロワーを使うメリットとデメリットは何でしょうか?
メリット:
・多くの情報が格納できること
・画面を広く使えるので見やすいこと
・主に使う機能のみを強調することができる

デメリット:
・表示項目が多い
・多くの情報の中から目的の情報が探すのが困難
・拡張性ができてしまったことにより、不要な機能が増加		 注目 (坂本　邦夫)
「主に使う機能のみを強調することができる」ということで、小さな画面の場合にはどの情報を優先的に見せることが重要になります。 2015年はPC用の大きな画面を埋めるための不要なコンテンツも排除されていくような流れになっていくはずですので、情報の重要度と精度を上げていき、本当に必要なものを見せるように順序づけしなければならなくなるでしょう。
0 kamino
1.
A. 画面自体がスライドし、縦並びのメニューが表示される
理由:フェイスブックアプリ右下にあるものを押すとその動きだったので、それに慣れているということもありますが、スライドしてメニューが出てくるというイメージがあるので、画面が切り替わらずにサッとメニューが出てきた方がなんとなく操作しやすいように思いました。
ただの慣れが大きいと思いますが、実際は脇に隠れているものが横からサッと必要なときに見える範囲に出てくる動きがなんとなくしっくりきますし、PCは縦ですが、スマホだと横にページをめくっていくので、横の動きが自然な気がしました。とくにボタンが無い場合でも指が勝手に画面をスライドさせようとするので。

2.
メリット
限られた画面を横に広く使うことができる
情報をたくさん見せることができる

デメリット
慣れないとどこに何のメニューがあるかわかりにくい
戻りたいところに戻りにくい		 なし (坂本　邦夫)
1の部分について、厚めのご回答をいただきました。 そうなんですよね、フェイスブックのアプリは下から出てくるものと横からスライドで出てくるものの両方があります。 このように普段使いのアプリは慣れが大きいのでしょうが、検索エンジンやソーシャルなどの外部サイトからの流入を期待しているサイトにとっては、やはり複雑な操作は難しいですよね（私自身もフェイスブックアプリの使い方にはいつも悩んでいます）
0 chichichi
1.　A.　引き出される動きがあれば、使い方は一応わかるかと思います。

2.
メリット
・小さい画面でもコンパクトに様々なメニューを収められる。
・シンプルでクリーンな見た目になり、
　他に大きく扱いたいものやビジュアルの邪魔をしない。
・今は使いにくいように感じたとしても、
　多くの人が慣れれば、あまり問題なくなってくるかもしれません。

デメリット
・タップしたメニューに何があるか想像しにくい、
　繰り返しサイトを使うには、覚えなければならない。
・1クリック増える
・小さいと、人によっては(手の大きさ、細かく手先を動かせないなど)
　「押しにくい」と感じさせそうです。		 金 (坂本　邦夫)
「繰り返しサイトを使うには、覚えなければならない」という学習コストについてご指摘いただきました。 まさに今制作者としても困っているところもそこでして、いかに学習コストを下げられるかということと、下げれないのであれば、上手くガイダンスを出せるようなことは出来ないかというところにあります。 繰り返し訪問されるようなサイトで、難易度が高いサイトについては、最初の訪問から複数回だけは、操作説明を表示するなどの解決法も考えられるかもしれません。 またサイズの問題もご指摘いただきました。確かに使いにくい小さなボタンもまだまだ多く見られます。スマートフォンそのものが大型化している傾向にありますが、それでも小さすぎるボタンはタップしづらいので注意は必要ですね。