iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
Post on:2024年6月20日
sponsors
iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。
情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです。
Modern iOS Navigation Patterns
by Frank Rausch
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
最新のiOSのナビゲーションパターン
この記事では、ドリルダウン、モーダル、ピラミッド、シーケンスなど、iOSアプリを構造化するための一般的なナビゲーションパターンをすべて集めました。AppleのHuman Interface Guidelinesの非公式なボーナス章だと考えてください。
構造型ナビゲーション
iOSの一般的なアプリは、固定されたアーキテクチャ（複数レベルを持つ階層ツリー）を備えています。この固定された構造により、ナビゲーションのオプションが予測しやすくなります。構造的なナビゲーションパターンは、ユーザーがどこから来たのか、階層のどこにいるのか、そしてどうやって元の場所に戻るのかについて、ユーザーに確信を与えます。
構造型ナビゲーションには、以下の4種類があります。
- ドリルダウン
- フラット
- ピラミッド
- ハブアンドスポーク
ドリルダウン（Drill-Down）
ドリルダウンは、情報ツリー構造を階層リストとしてレベルごとに、画面ごとに走査します。
アニメーション化された遷移は、カラム間の水平移動を意味します。右に移動するとツリーの階層が深くなり、左に移動すると階層は上に戻ります。ドリルダウンはモードレスです。階層の移動は常に可能で、変更を保存するかどうかの質問によって中断されることはありません。
ナビゲーションバーには、現在のスクリーンのタイトルが表示されます。進む（>）は階層を深く掘り下げることが可能であることを示し、戻る（<）は階層を戻るための分かりやすい経路を提供します。スペースに余裕がある場合は「戻る」ではなく、親のタイトルを表示すべきです。
スクリーンの左端から右にスワイプすると、「戻る」ボタンをタップしたのと同じ動作になります。カスタム実装ではiOS標準を模倣し、スクリーン端のパンによって制御できるインタラクティブ型のキャンセル可能な遷移を提供する必要があります。
言語が右から左の場合は、ドリルダウンの方向とコントロールのレイアウトはその方向の合わせてミラーリングされます。
ツリー構造を動的に構築して、データベースをフィルタリングすることもできます。たとえば、音楽プレーヤーのアプリでは、検索インターフェイスを使用するだけでなく、同じアルバムを見つけるために異なる階層の開始点（アーティスト・アルバム・ジャンル）からドリルダウンすることができます。
ドリルダウンは、macOSのFinderスタイルのミラーカラムの1画面あたり1カラムのバリエーションです。
フラット（Flat）
フラットは、ルートレベルで階層を分割し、タブバー（iPadではサイドバー）として表示されます。
タブバーのアイテムは、アプリの主要な機能を中心にまとめられ、ユーザーの期待とアプリの機能に関するメンタルモデルを形成します。タブバーのアイテムは常に1つが選択された状態で、アクティブな選択によってアプリのメインコンテンツに表示されるコンテンツが決まります。
現在選択されているタブバーのアイテムは、プログラム的に（ユーザーの操作なしで）または間接的に（たとえば、インターフェイスの他の場所にあるボタンをタップすることによって）変更されるべきではありません。
タブバーはモーダルシートによって一時的に覆われている場合を除き、アプリ全体のすべてのスクリーンに表示されたままになります。
タブはフィルタとして使用したり、音楽・ビデオ・写真などのライブラリなど、同じ大規模なコンテンツのコレクションの異なるエントリポイントとして使用することもできます。各セクションは、そのサブ階層のナビゲーションの状態を保持します。
タブバーのアイテムは、予測可能な方法で動作する必要があります。シートを表示したり、アクションをトリガーにしたりすべきではありません。
悪名高いハンバーガーメニューは、タブバーの邪悪な兄弟です。ナビゲーションのインターフェイス全体が小さなアイコンの後ろに隠されていると、ユーザーは見つけにくくなります。ハンバーガーメニューは2015年頃から数年間iOSで流行していましたが、現在ではタブバーの方がはるかに見つけやすいという調査結果が出たため、アプリのメーカーはハンバーガーメニューを放棄しました。
ピラミッド（Pyramid）
ピラミッドを使用すると、親画面に戻ることなく、同じ階層レベルの兄弟間をすばやく移動できます。
水平方向のスワイプは、アプリで兄弟ビュー間を移動する一般的な方法です。iOSのメールアプリの「次のメッセージ」「前のメッセージ」のようにボタンを使用することもできます。
iOSの写真アプリはピラミッドを採用しています。写真をタップしてフルスクリーンで開き、左右にスワイプして隣接する画像をフリップします。小さなコレクションにはページコントロールをしようして、アイテムの合計数と現在のアイテムの兄弟に対する位置を視覚化します。
iOSのアプリスイッチャーは、アプリ間を素早く移動する方法としてピラミッドを採用しています。これにより、ホーム画面を経由するよりも高速なナビゲーションが可能になっています。
ハブアンドスポーク（Hub-and-Spoke）
ハブアンドスポークは、階層の最上位にある無関係なアイテムが多数ある場合に最適なナビゲーションです。フルスクリーンの子ビューを切り替えるには、常にハブに戻ります。
iOSのホーム画面は、インストールされているアプリすべての集合体で、ハブとして、またオペレーティングシステムの信頼できる「ニュートラルな状態」として機能します。
画面下部のホームインジケーターは、使い慣れたホーム画面にいつでも戻れ、簡単に習得できる、いつでも利用できる「エスケープ・ハッチ」として機能します。
このパターンは、アプリ内で使用されることはほぼありません。このパターンが必要になるのは完全性を保つためです。オペレーティングシステムレベルで、アプリ間のような強力な分離を必要とすることはほとんどありません。
オーバーレイ型ナビゲーション
オーバーレイ型のナビゲーションは、ユーザーの注意を引くものです。このオーバーレイはあらゆるコンテキストの上に、他のオーバーレイの上であっても表示できます。モーダルのオーバーレイは、消える前にユーザーのアクションが必要となります。つまり、アプリを別のモードに切り替えて、背後にあるインターフェースをブロックします。一時的な通知のような非モーダルのオーバーレイは、アプリをブロックしません。
オーバーレイ型ナビゲーションには、以下の3種類があります。
- ハイフリクション モーダル
- ローフリクション モーダル
- ノン モーダル
ハイフリクション モーダル（High-Friction Modal）
ハイフリクション モーダル（複数のアクションを伴うシートやアラートダイアログなど）は、ユーザーが操作をするまでその背後にあるコンテンツをブロックします。モーダルを閉じるには決定が必要で、たとえば、メールを作成したりカレンダーでイベントを作成するときに、ユーザーは続行（送信または完了）をタップするか、キャンセルをタップして決定する必要があります。
キャンセルボタンは、状態やデータを直接破棄してはいけません。ユーザーがモーダルのキャンセルボタンをタップした場合は、安全対策として必ず追加の確認ダイアログを表示してください。アラートダイアログでは、キャンセルボタンは決して破壊的なアクションをしてはいけません。
モーダルはメールの作成やイベントの追加など、特定の自己完結型のタスクを完了させることに重点が置かれています。
ローフリクション モーダル（Low-Friction Modal）
ローフリクション モーダル（シートやメニューやポップオーバーなど）は、アプリの他の部分をブロックしますが、「どちらか一方」の決定は必要としません。簡単に閉じることができるモーダルです。
ローフリクションとは、戻る方法を考える必要がないことを意味します。閉じるボタンをタップしたり、下にスワイプしたり、コンテキストメニューやポップオーバー以外の場所をタップしたりすることで、ローフリクションのモーダルは手間をかけずに閉じることができます。
OKボタンしかないアラートダイアログは簡単に閉じることができますが、ローフリクションはフリクションがないことと同じではありません。可能な限り、単一アクションのアラートは避けてください。これはユーザーのフローを妨げ、多くの場合インラインテキストやノン モーダル通知で置き換えることができます。
ノン モーダル（Non-Modal）
ノン モーダルのオーバーレイはスクリーンの一部を覆いますが、その背後にあるインターフェイスをブロックしません。ノンブロッキング（つまりモードレス）であるため、フリクションはほとんど発生しません。
OSからの通知など、アプリの外側のトリガーに反応して表示されることもあります。自動的に消える場合は、中断を最小限に抑えて一目で分かる周辺情報を提供する必要があります。
一時的なノン モーダルのオーバーレイには、通知をタップしたり、オーバーレイが消える前に音量インジケーターをスワイプして音量を変更したりといったオプションのインタラクションがある場合があります。
オーバーレイがアプリの他の部分をブロックせず、自動的に表示・非表示にならない場合、90年代のUIのベテランはそれをパレットと呼びます。
埋め込み型ナビゲーション
埋め込み型ナビゲーションのパターンは、iOSの厳密な構造モデルと空間モデルに適合させるために特別な注意が必要となります。このパターンは、アプリ構造内の明確に定義された場所かモーダルオーバーレイの別のビューに含めるか埋め込むことがが最適です。
埋め込み型ナビゲーションには、以下の3種類があります。
- ステート チェンジ
- ステップ バイ ステップ
- コンテンツ ドリブン
ステート チェンジ（State Change）
ステート チェンジは、1つのビューに複数の状態（ステート）を設定することができます。たとえば、リストビューには空の状態・ローディングの状態・入力済みの状態を設定でき、その際にナビゲーション階層内の位置は変わりません。
状態の変化が階層的でもモーダルでもないことを確認してください。ただし、入力済みの状態を変更する場合は、フルスクリーン遷移を避けてください。
ステート チェンジの他の例は、リストの編集モード、ブラウザのインターフェイス、パンするストリートマップ、ズーム可能な画像などがあります。
表示オプションは、ナビゲーション階層におけるユーザーの位置を変更することなく、コンテンツの表示方法を変更できます。たとえば、リストビューとサムネイルビューを切り替えると、同じコンテクストで同じ情報を異なる方法で表示できます。
ステップ バイ ステップ（Step-by-Step）
ステップ バイ ステップは、ガイドツアー、セットアップフロー、オンボーディングチュートリアルなど、一連の画面を直線的なフローでつなぐナビゲーションです。オンラインストアのチェックアウトで多くのデータを入力する場合も複数のステップが必要です。
このパターンは順序を前後させても、階層レベルは変わりません。前述のドリルダウンのパターンとは異なります。
ステップ バイ ステップのシーケンスは、プレゼン用のモーダル オーバーレイに含まれる必要があり、このコンテキストにおける戻るボタンは階層型のドリルダウンとは異なる目的を果たすことを強調するためです。
ステップ バイ ステップのプロセスは通常、完了ボタンまたは閉じるボタンで完了し、モーダルを閉じます。シーケンスのステップ数は可変で、選択したオプションに応じてさまざまな数のステップとさまざまなパスを含めることができます。
ウィザードや愛スタントは、このパターンの別名です。
ステップ バイ ステップのプロセスは退屈に感じられることがあります。ユーザーがこのプロセスを頻繁に実行することが予想される場合は、情報の解像度を上げ、コンテキストの切り替えを減らすために、ステップをさまざまな状態を持つ単一のビューにまとめることを検討してください。
コンテンツ ドリブン（Content-Driven）
コンテンツ ドリブンは、コンテンツ主導型のナビゲーションで、ハイパーリンクやボタンを使用してユーザーは他のページやビューに移動できることを意味します。これはブラウザでWebナビゲーションが機能する仕組みです。
ハイパーテキスト、没入型ゲーム、または同様のノンリニアコンテンツを表示するアプリを除き、iOSアプリではこのパターンは避けてください。
アプリにハイパーテキストを表示しなければならない場合は、戻る・進むを備えたブラウザ型のインターフェイスを組み込むことを検討してください。自己完結型のブラウザインターフェースの状態変化は、アプリ階層内の予期せぬ場所の変化よりも理解しやすいものです。
リンクを使用してアプリ間を移動させることもできます。ディープリンクは、ユーザーをアプリまたはWebサイトから別のアプリの階層の奥深くに移動させます（URLスキームやドメインにバインドされたユニバーサルリンクを使用）。
参考資料
- Apple WWDC 2022 video: Explore navigation design for iOS.
- Tidwell, Jenifer (2020). Designing Interfaces (Third edition). O’Reilly.
- Apple Human Interface Guidelines / Navigation (Archive.org, 2022-01-19)
sponsors
