下のナビゲーション

画像



設計を開発するとき、まず、私たちが生きている人々のためにそれを開発していることを理解する必要があります。 車はシェルの下を覗き込むことができ、検索ボットはコンテンツのセマンティックダイアグラムを構築し、信じられないほど混乱したナビゲーションでもそれを見つけることができます。 しかし、人々は自分が見るものしか理解できない。 そして、彼らが彼らの目に提示されるすべてをすぐに理解すると仮定しないでください。



また、ある種の欠陥を段階的に修正することは時々悪い考えであることを覚えておく必要があります。 たとえば、TIME.comがモバイルWebアプリケーションを作成したときに、スライドナビゲーション(または「ハンバーガーメニュー」)を追加しナビゲーションボタンの下にテキスト「MENU」を追加し、このボタンを指すポップアップウィンドウも追加しました。 そして、ユーザーにアプリケーションと対話するように教育するためのすべて。







画像



多くのWebデザイナーと開発者は、プルダウンメニューはナビゲーションに最適なオプションではないと考えています。 重要な情報をユーザーから隠すという点で悪いです。



もちろん、メニューではなく、コンテンツ自体が最も重要なコンポーネントであると主張できます。これは事実です。 しかし、それでも、 ユーザーエクスペリエンスの形成に影響する情報の重要な部分は、他の利用可能なコンテンツの認識です。 これは、アプリケーションを初めて見ている人にとって特に重要です。そのような情報は、アプリケーションから何を取得できるかをすぐに理解できるからです。



今日、ほとんどのユーザーはすでにハンバーガーメニューに慣れていますが、それでも、そのようなナビゲーションシステムにまだ慣れていない人がたくさんいます。



コントロールがデザインと一致しないという理由だけで、コントロールを非表示にする必要はありません。 もちろん、試すことはできますが、ユーザーアクティビティがどれだけ低下するかがわかります。 しかし、この指標は実際には私たちの主な目標です。



画像



したがって、スペースを節約するためにメニューを非表示にする代わりに、最も重要なコンポーネントを選択し、それらを配置する場所を見つけることをお勧めします。 これは、タブ、セグメント化されたコントロール、または下部のナビゲーションバーです。



なぜこの原理はそんなに良いのですか? 事実、このアプローチでは、必要な機能が常に見えるようになっています。これは、次の2つの理由で役立ちます。 -この原則は、ハンバーガーメニューをクリックするか、 ドロップダウンメニューを開いてから必要なアクションのボタンを押すだけであるかを問わず、別の方法で追加の対話の必要性の下で隠されるアプリケーションの領域への迅速なアクセスを提供します



画像



原則として、一度に表示できるのは3〜5個だけになるようにボタンを設定することは理にかなっています。 これらは、メインのトップレベルナビゲーション要素になります。 人々が常に実行するアクションを検討してください。 ユーザーがWebサービスの多数の可能な機能で混乱しないように、モバイルデバイスでの作業に関連するアクションのみに焦点を合わせます。 重要なアイコンの機能を簡単に説明してください。 画面上の各アイコンに十分なスペースを確保して、ユーザーがナビゲーションアイテムに簡単にアクセスできるようにします。 また、一般的な背景に対して特定の要素を強調することを忘れないでください。



画像



5つを超えるオプションが使用可能な場合は、リストの最後のアイテムの代わりに「詳細」ボタンを使用します。 このボタンをクリックすると、残りの利用可能なアクションが表示されます。 [もっと見る]ボタンの下で、最も人気のないアクションを非表示にする必要があります。



画像



あまりにも多くのアクションを配布する別の方法は、ナビゲーションバーをスクロール可能にすることです。 この場合、パネルのこのような外観について考える必要があります。この外観では、ユーザーがスクロールできることを一目で十分に確認できます。 相互作用モデルがユーザーに完全に理解可能であることが重要です。



画像



フレンドリクエストの数など、表示可能なアイテムの数などの追加情報を表示する必要がある場合は、アクションアイコンのアイコンを使用します。 これにより、アイコンをクリックすると表示される内容がすぐにわかります。



画像



簡単なナビゲーションを優先する必要があります。 ユーザーが必要な情報を見つけるのがどれだけ簡単で、アプリケーションを直接使用するのがどれほど便利かは、ユーザーが再び戻ってくる可能性に影響するためです。 明らかに、これが主な目標なので、ユーザーを支援します-アプリケーションとの対話を簡素化します。



All Articles