Study Report ２２ / 『ナビゲーション』

1day1study

どうもJBです。

今回は、「ナビゲーション」についてです。

今回も引き続き「デザインのヒント」の続きになります。
今回は⑩構成のところをもう少し詳しくみていきましょう。

ナビゲーションスタイル

階層的ナビゲーション
用途：設定やメールなどで使われるナビゲーション
特徴：ロジックツリーのような構造。選択肢の中から1つを選択して次に進む。戻る為には、1つ1つさかのぼるか、最初からやり直す必要がある。

フラットナビゲーション
用途：Apple MusicやApp store
特徴：複数のカテゴリを切り替える。WEBサイトのヘッダーにあるナビゲーションのような構造。

コンテンツ主導またはエクスペリエンス主導のナビゲーション
用途：ゲーム、書籍、没入型アプリ。
特徴：自由にコンテンツ内を行き来できる。コンテンツ1つ1つがナビゲーションを定義することができる。

複合型
例）フレットナビゲーションの各カテゴリ内に階層ナビゲーション

ナビゲーションのヒント

常に明確なパスを提供する。
：ページ内のどこにいるのかを明確にする。パンくずリストなど。また、各画面へのパスは一般的に1つで、複数のコンテキストで画面を表示する場合は、アクションアラート、アラート、ポップオーバー、モーダルビューを使用することが望ましい。

素早く簡単にコンテンツにアクセスできる情報構造を設計する。
：シンプルに情報構造を設計する。

タッチジェスチャーをしようして流動性を作成する。
：画面の端からスワイプすることで１ページ戻るなどのタッチジェスチャーを利用して操作が流動的になるように設計する。

標準のナビゲーションコンポーネントを使用する。
：標準的なナビゲーションの操作に慣れているユーザーが多い為、標準のナビゲーションを利用する事で直感的な操作が可能になる。

ナビゲーションバーを使用して、データの階層を移動する。
：ナビゲーションバーに現在の位置を表示したり、戻るボタンを配置する事でユーザーが前のページに戻りやすくなる。

タブバーを使用して、コンテンツまたは機能のピアカテゴリを表示します。
：現在地関係なく、様々なカテゴリに移動できるようになる。

同じタイプのコンテンツの複数のページがある場合は、ページコントロールを使用する。
：ページコントロールを使用する事で、次のページの存在を認識することができる。

学び

ナビゲーションがあることで、ページ内アプリ内の行動が省略される。だが順序を飛ばしているに過ぎない為、今自分がどの位置にいるのかをしっかりユーザーに理解できるようにしないと、ユーザーは使用を諦めてしまう。

「カテゴリ分け」と「現在地を示す」この２点はナビゲーションを行う際はとても大事な要素だと言えます。

また、ナビゲーションの存在はWEBサイトに溶け込んでないといけません。ユーザーが、サイトを使用したときに、自分の目的とした場所まで直感的に辿り着けなければそれは良いUI/UXデザインとは言えないでしょう。

簡単に目的の場所にたどり着ける。それこそが、ストレスレスな良いデザインなのではないでしょうか。

一言まとめ

「ナビゲーションとはGoogle Map」

以上

最後まで読んでいただきありがとうございました。

詳細はこちら↓

拝見記事

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/