主要なモバイルナビゲーションのアイコンとドロップダウン
私は、プライマリナビゲーションに5つの選択肢があるレスポンシブデザインに取り組んでいます。プライマリナビゲーションのドロップダウンの代わりにアイコンを使用できるのは5つしかないので、私は考えています。考え？
ナビゲーションにドロップダウンを使用することは、次の理由により、良い考えとは思えません。
- オプションが何であるかを確認する前にドロップダウンを選択する必要があるため、これは発見しにくいです。
- アイコンのみに比べてspaceの多くを節約しません。 5つ以上必要な場合は、横にあるメニュースライダーを検討してください。これはより一般的で柔軟性があります。 （下のメニュースライダーの例）
![enter image description here]()
- アイコンと比較すると、追加のタップ /選択が追加されます。一般的には少ないほど良いです。
- すばやくスキャンする機能はありませんオプションの場合、アイコンで表示される位置、色、および形状のインジケータのほとんどが失われるためです。
現時点ではリンクはありませんが、オーストラリアの新聞はモバイルナビゲーションのバリエーションを使用して多くのUXテストを実施し、アイコン（ラベル付き）が最も効果的であることがわかりました。
ボタン、常にボタン。親指に優しい大きなアイコン。ドロップダウンを使用するためにグリップを調整しなければならないことは非常に厄介であり、すべてのブラウザーが論理的にドロップダウンをレンダリングするわけではありません（WM6.5でのオペラのドロップダウンの処理は一般にひどいです）。
モバイルの土地では、ドロップダウンが少ないほど良いです。アクティブ化のクリックが必要な場合は、コンテキストクリックの場合、もう一度やり直さなければならないため、タップやフラストレーションが不正確になる傾向があります。
この決定を行う前に回答する必要がある質問が他にもあります。
今後、さらにオプションが追加されますか？もしそうなら、あなたはすべてのアイコンのためのスペースを使い果たすかもしれません。
アイコンとドロップダウンのみがオプションですか？スピナーはどうですか？
ドロップダウンを選択した場合、最初にそれを展開して探索しなくても、ユーザーは他のオプションが何であるかをユーザーがすでに知っていると安全に想定できますか？
オプションは簡単にアイコン化できますか？それに直面しよう、そこに恐ろしいアイコンがたくさんあります。時々あなたはそれらを見て、「とにかくそのボタンは一体何をしているの？」と考えます。
私はアイコンを選びますが、アイコンがあいまいになる場合があるため、テキストを含めることをお勧めします。
上記のワイヤーフレームでは、どちらかが「おそらく」うまく機能します。
私たちのチームでは、ドロップダウンがうまく「レンダリング」されるかどうかについてはそれほどではありません（私は上記のクリストファーの意見に同意しますが、通常はそうです）。さらに重要なのは、ユーザーが何もクリックしなくても、すべてのオプションがユーザーに表示されるようにすることです。私たちのチームは満場一致でボタンに投票します。絶対に。
地獄、（ワイヤーフレームに基づいて）オプションの数を倍増させたとしても、大きな太いボタンの別の行は、エンドユーザーにとっておそらくうまく機能し、論理的でしょう。
アイコンを使用することを選択します。これはモバイルデバイス用であるため、表示したアイコンのフットプリントが大きい方が、ドロップダウン/コンボボックスと言うよりも、インターフェイスをタッチするのに適しています。言い換えれば、アイコンは「太った運指」を防ぎます。また、主要なナビゲーションとしてアイコンを選択することにより、垂直方向の画面領域をさらに利用できるようにします。コンボボックス/ドロップダウンは、展開されたときにその垂直スペースを占有するように強制します。そして、そのコンボボックスのナビゲート可能/選択可能なオプションのリストが増えるとどうなりますか？縦サイズも大きくなります。全体として、アイコンはスケーラビリティと使いやすさのための最良のオプションだと思います。
アイコンが本当に本当に明白でない限り（フォークとナイフ、車、歯車など）。ある時点で不自然に見えるアイコンが常にあるので、私はどれも使用することをお勧めしません。追加の読み込み時間と追加の認識読み込みを追加すると、ほとんどの場合、それはまったく問題ありません。
ユーザーが即座に取得する「メニュー」リンクを単に持つことはどうでしょうか。それをクリックすると、引き出しまたはある種のモバイルフレンドリーなメガメニューが開きます。