iOSナビゲーションデザインの探求

♪ 穏やかな音楽 ヒップホップミュージック ♪ ♪ こんにちは Sarah McClanahanです Evangelismチームで デザイナーをしています 本日ご紹介するのは iOS Appで ナビゲーションを改善するための 実用的なヒント ガイダンス ベストプラクティス についてです Appのナビゲーションが 優れていると コンテンツや 体験に集中できるため その事実に 気づかないこともあります ナビゲーションは どのように動作し どこに物事が存在し Appで どのようなことができるのか を説明します ナビゲーションのゴールは Appに慣れ親んだ感覚を与え コンテンツや Appとのインタラクションを 見つけやすくすることです ナビゲーションが期待した ものよりもかけ離れている また 理解しづらいもの であった場合 フラストレーションを感じ そのAppは 使用するのが難しい と感じてしまいます 適切なナビゲーションには フォーカスと意図が必要です 本日お話しするコンセプトは 新しいものではありませんが 基礎となるものであり iOSでのAppの成功のために 不可欠なものとなります App体験を改善するための 方法を探している方に加え このプラットフォームが初めての 方にも最適なセッションです 本日 iOSのナビゲーション の共通的なフォームである タブバーについて 話していきます 次に 階層型のナビゲーションや モーダルプレゼンテーション について掘り下げ 画面間を移動する インタクションについて話します ご覧のように これからナビゲーションという 広範なトピックの サブセットを見ていきます ここから始めるのは これらのコアパターンが よく間違って使用されるような 基礎となるものであり これを理解することで Appを進化させ 他のデバイスへの対応を 成功させることができます タブバーから 見ていきましょう タブバーは画面下部にある グローバルナビゲーション コントロールのことであり Appのコンテンツを さまざまなセクションに 分類しています タブは情報の階層を 反映するための コントロールだと 考えてください UIコントロール自体は 明確なグループ分けを行い Appの異なるエリア間の 関係性を確立する 必要があります タブバーはAppの階層の 最上位に位置する トップレベルのコンテンツ を表しています 各タブはAppのオプションの メニューをユーザーに伝え これらのセクションは意味のある 説明的なものである必要があります これは本当に 単純なことのようですが 実際には さまざまな理由で Appにおいて 見失いがちなことです いくつか適切な例を 見ていきましょう これらのAppのコンテンツ を実際に確認することなく タブが機能性におけるヒントを 示していることに気付きます 簡潔なラベルを 表示するだけで そのAppで 何ができるか物語ります 「今すぐ聴く」と「ラジオ」は 音声メディアによる コンテンツベースApp であることを示しています このAppでは ライブラリとアルバムが パーソナライゼーションを強化した For Youタブがあるコンテンツ豊富な Appであることを示しています このAppは機能性が 見てわかるように 焦点を当てたタブがあり そのコンテンツエリアで できることを 正確に教えてくれます Appの最初のタブが 重めの機能を 搭載している場合 がよくあります タブを通して 機能を分散させることで インターフェイスのバランスを とるようにしてください このことに関する 例を見ていき タブが引き起こす ミスガイドや混乱について 探っていきましょう 地元のサイクリストのように 都市でキュレートされたルートを 発見できる フェイクAppを作ったとします 旅行や 新しい都市への引っ越し あるいは スポーツを 始めたばかりの人に最適な ルートを保存して旅程を作成する 簡単な方法が提供されます こちらをご覧ください このAppで自転車の ルートを見つける場合 まず初めに サイクリングの フィルタがあるマップがあります 今後の旅程を記した セクションがあり 内容を編集したり 友人を招待したりして インタラクション することができます コレクションビューに グルーピングされた ルートがあります このように すべての機能を 1つのタブにまとめると 一目でわかるので魅力的だと 思っていたのかもしれません あるいは Appが時間とともに進化し タブバーのセクションに 機能をグループ化することを 見失っている状態 であることも考えられます 本日は このことをこのAppを 通して考え直してみましょう このデザインでは 探しているものを見つけるために 何度もスクロールする 必要があり 関係のない 異なる機能を解析するのに 精神的に負担を感じます マップビューのフィルタリングと 旅程の編集は このAppを使う人にとって まったく異なる機能であり 異なるマインドセットです このような方法でAppの 機能を組み合わせたり Appの他の部分が 使用されなくなることを恐れ このようなことをするには 注意が必要です よく構成されており 明確に それが伝えられている場合 Appの機能をより簡単に 理解することができます 振り返り 自問してみるのも ひとつの方法です なぜ自身のAppが人々に 利用されているのか 優れたAppにはフォーカスのある分解がある ということを覚えておいてください 1つのAppですべてを 解決するのではなく いくつかを正常に非常に良く機能させる ということを目的としています このサイクリングAppのタブバー について再度見ていきます このAppを使用して 気になる場所への 自身のレベルにあった ルートを探します これがAppでの最も 重要なビューの一つであり 人々が最も気にする コンテンツを示しています ここで タブバーを見直し ルートがどのように 使われる可能性があり そのコンテンツをどのように Appで表現すれば よりバランスがよくなるかを 理解することができます こちらがルートの詳細です 距離や標高 地図へのアクセス 歩道や車道など ルート全体の路面状況などの 概要を期待している方 がいるかもしれません 急な登りや下り道が 具体的に表示されていると このルートが自分のレベルに 合っているかがよくわかります そして ルートにある 食事のとれる場所は プランニングをすすめるのに 最適な情報です では ルートを表示する上で このコアとなる機能が どの程度理にかなっているものに なっているのでしょうか ルートは その位置が分かり 初めて役立つものとなります ルートは関連する都市と 関係性を持つ必要があります それにより そこの サイクリングに関する情報がある 都市の概要を 得ることができます ビューをスクロールすると サイクリングができるルートが すべて表示されています このAppは異なる都市の ルートをサポートしているため 各都市に行った際はすべての場所が表示された リストに戻る必要があります ルートへのナビゲートの際に 場所がトップレベルの 階層になり得ます このワークフローだけでも 多くのコンテンツがあり それがAppが 提供する価値となります これはタブバーアイテムとする 正当な理由となります タブ自身に内包されている ことに注目してください このタブに 場所に関すること以外のものを 入れても意味がありません 優れたタブバーのデザインは コンテンツが整理されています 関係性に対処するため 自然な方法を探してください このエクササイズでは 旅程表など Appの他の主要な機能も見ていき 次のように自問自答することができます 旅程とは どのように使用するのか App内のどこに配置すればいいのか Appのコンテンツを よく知らない場合でも おそらくその場合であっても 機能やコンテンツ を明確に伝え コンテンツが どの階層に属するか どのように人々が Appと関わるのか を評価することが最適です このAppは 最初のタブにすべての機能が 組み込まれている状態から もっとわかりやすい ナビゲーションの形に 改善することができます これらのセクションが 独立して成り立っているため 主要機能はタブバーに バランスよく配置されています それらは関連性はありますが 明確に異なるコンテンツエリアと ワークフローがあります これにより ナビゲーションがとても 直感的に分かるようになりました 次に 少し関連したトピックに ついて話したいですが 私たちはこの表現を違うもの としてとらえています 機能の重複を避け 1つのタブに集約します このようなコンテンツが 豊富なAppでは ホームというタブは App全体の機能を 一カ所にまとめて表示できる 魅力的な場所に 見えるかもしれません 例えば 旅程機能を利用する人が 少ないように見えるのは その機能があることを 知らないから ではないかと心配に なるかもしれません

タブバーに繰り返し 表示されるアクション 場所カードの新規旅程などを より見やすくしたり 例えば 友達を招待したり 立ち寄り先をリストアップし 簡単に追加できるような 機能を前面に押し出した 旅程ビューのバージョンを 作ることで エンゲージメントを 高めることが 理にかなっていると 思われるかもしれません Appから機能が全く 発見されなくなることを恐れ そうしたくなる かもしれません はっきりお伝えしますが これは コンテンツの重複についてではありません 多くの場合 曲や写真など 同じような種類のコンテンツが 多くのタブに存在し 異なる方法で整理されていることは 理にかなっています それがAppの機能であり 物事を達成するための アクションである場合 冗長性は混乱を生みます 実際に ホームタブは Appの階層を乱します Appを通して異なるタブや 分野の機能が重複し 十分なコンテキストなしに 1つの画面に追加されると 冗長性と 混乱を引き起こします ホームは 見つけやすさの問題を 解決しようとする タブであるため すべての機能が場所を 争うようになります 実際には コンテンツを 理解すること それに対して どのように行動するかと いうことの間に解離が生じます これがみなさんのAppの場合 ホームタブを同時に 削除することを考えてください 機能の冗長性は どこに何があるのか なぜあるのかを 理解することから遠ざけます ホームタブの場合 別のタブにも アクションが存在するため 分散した繰り返しの機能により 誰かが タブジャンプしてしまうことが 懸念されています ビュー内の要素をタップして 別のタブに移動させるのは 乱雑さがあり 適切ではありません タブを自動的に切り替えする ことを強制してはいけません そして タブ付きナビゲーションの 最大のセールスポイントは 複数のトップレベルの階層に アクセスできることであり ナビゲーションにおいて タブバーを非表示や 削除することは 避けてください タブバーへの 持続的なアクセスにより 情報階層の 異なるレベルに切り替え それぞれのコンテキストを 維持することができます 例えば 場所タブで 新たにサイクリングしようと 考えているルートを見て 旅程タブで作成中の旅程と すでに保存した 2階層分のルートを 比較することができます これは タブの目的が明確で コンテンツの 特定のカテゴリが存在する 場合にのみ有効です 最終的に しっかりとした 情報アーキテクチャのために つぎ込んだすべての作業は 明確で簡潔なラベルにより 尊重されるべきです 今年の インタラクション部門の Apple Design受賞作を 見てみましょう Slopes Appです Appを起動すると 真ん中のタブに Logbookがあり シーズンの統計が表示される 素晴らしい機能があります その他のタブには 具体性があります わかりやすく Appの機能や 使用方法がすぐに 分かるようになっています ラベルを見ただけで コンテンツが 分かるようになっています スキーをした日の記録 リゾートの閲覧 友人との統計比較 など 主要機能を 簡潔なラベルで 表現しています タブバーはナビゲーションにおける 強力なコントロールです 学んだことをすべて おさらいしましょう 情報階層を反映させるために タブを使用します タブ間で バランスよく機能を整理します 機能の重複を避け 1つのタブに統合します App内では常に タブバーを表示します 最後に 各タブには明確で 簡潔なラベルを使用します それでは インタラクションを 見ていきましょう Appの画面間を 移動する場合 非常に一般的な 2つの形態があります 「プッシュ」と呼ばれる アクションにより （例えば より詳細に プッシュするなど） Appの階層を 移動することができます あるいは モーダルプレゼンテーションで 移動することも可能です これらは Appの階層を移動し ビュー間を移動するための 簡潔で身近な方法です 今から2つの形態をお見せします 階層型ナビゲーションを 移動する際 ビュープッシュといって 要素をタップすると 次の画面が 右から左へスライドして 表示されるように なっています プッシュ移動は Appの階層を掘り下げる際に 期待されるデフォルトです プッシュは 情報階層を 直接反映させるため とても優れた機能です 高いレベルのコンテンツから より詳細に掘り下げることを 文字通りに表現しています 一方 モーダルは インターフェイスにある 自己完結型タスクのために 予約されています モーダルは 独立した ワークフローに最適であり 誰かが意思決定し タスクを完了するのために 十分な情報をそのビューで 得られるということです モーダルは 情報階層から 切り離すことで フォーカスを作り出す というユニークなものです 例えば 新しい旅程を 作成する場合は モーダルビューで 表示されます タイトルや都市名 日付の範囲など を選択または入力し 友人を招待することも可能です UI はビューを閉じたり Appの他の部分に移動したりする前に 編集して完了することを 目的としているため これはモーダルに適しています すべてユーザーによる入力のため フィールドを完成させる参考として Appの他のところにある情報は 必要ありません これらのインタラクションを 理解したところで 2つを深く 掘り下げていきましょう 階層型ナビゲーションから 見ていきます ここでは いくつかの ガイドラインを紹介します プッシュ移動は Appの異なる階層間を 移動するために使用します 階層型ナビゲーションは トップレベルとセカンダリ コンテンツ間を強化します トップレベルのコンテンツは より高い階層にあります より詳細な情報が 必要な場合は 階層を掘り下げて 補足的なビューにアクセスします 選択しながら 選択肢を狭めていき 他の階層へのアクセスを 排除していきます このように進めていく 必要があります コンテンツは具体性を増し 詳細を掘り下げるにつれて 選択肢は 少なくなっていきます プッシュ移動を使用する場合 タブバーが画面の下に 固定されたままであることが 非常に重要となります 前にお話ししたように これが タブ付き ナビゲーションの 最大のセールスポイントです 一貫しています 常に利用できるため Appの主要部分への アクセスを可能にします これは 異なる階層の コンテンツを探求することが 可能ということです ビューがプッシュされると 自身の状態が保持されており 他のタブの階層への アクセスを失うことなく 左から右にスワイプして 元の場所に自然に戻ることができます 次に 画面上部にある 適切なラベルが記載された ナビゲーションバー を使用して 階層の方向性を示すことが 重要です ご覧ください コンテンツを掘り下げ 情報の階層を移動すると ナビゲーションバーの 戻るボタンが 今来たばかりの画面のタイトルに 変わることに注目してください これは画面を スクロールしたり 掘り下げたりして App内を 進んでいくときに便利です 戻るボタンが階層を示すため どこから来たのか どうやって戻ればいいのか を覚える必要がありません 階層型ナビゲーションを 使用するもう一つの場所は 開示インジケータを使用する際の すべてのインスタンスがあります シェブロンとも呼ばれる 開示インジケーターは 移動先として期待される 方向を指し示すものです シェブロンが異なる移動を 開始してしまう場合 UIが表すことと その後に続く インタラクションの間に 断絶が生じます プッシュという概念は 進行のメンタルモデルに対応しています 西洋の文化では 左から右へ読むと その方向が進行を意味します アラビア語やヘブライ語のような 右から左への言語では 進行のメンタルモデルが 反対方向に流れています Appが右から左への言語に 対応している場合 プッシュの遷移を反転させ コンテンツの流れとの関連性を 持たせることができます 階層型ナビゲーションを 使用する際の 最後の考慮点は 誰かがコンテンツ間を 頻繁に移動する場合など ワークフローの コンテキストについてです 頻繁にビューを切り替えたり ワークフロー中に Appを切り替えたり ビューに長い時間を費やすなど ユーザーが頻繁に 操作することが予想される ワークフローがある場合は プッシュを使用します 身近な例として メッセージAppがあります 比較的フラットな 階層であっても プッシュ遷移で 簡単にメッセージの 行き来ができます 各メッセージがプッシュではなく モーダルであった場合 異なるチャット間を シームレスに移動することは困難かと思われます メッセージは 流動的であるべきですが 関係ないときに モーダルを閉じて 画面を離れる必要があり それは複雑に感じられます プッシュは Appの主要エリア間を 簡単に移動することを 可能にします これが階層型ナビゲーションの 概要となります では 振り返りましょう 主に Appの階層を たどるために プッシュ遷移が使用されます タブバーは常に画面の下に しっかりと固定されています 各画面の ナビゲーションバーには 明確なタイトルとバックラベルを 反映させ階層を整理します 開示インジケータがある場合は プッシュを使用してください ワークフローでコンテンツ間を 頻繁に行き来する必要がある場合 階層型ナビゲーションは 非常に一般的で 比較的単純な インタラクションであるため この遷移はAppで頻繁に 使用される可能性が高いです モーダルプレゼンテーションでは よりコンテキストのシフトが重要です それは 集中したワークフローや 自己完結したタスクに 誰かを隔離します iOSでモーダルを 使用する場合 常に画面の下部から 表示するようにしてください モーダルは情報階層を 遮る形となります 画面下部からタブバーを カバーします これではAppをさらに 掘り下げることはできません フォーカスを強化することが 目的のため 意図的に妨げています ここで気になることは 自己完結型のタスクについてです 大まかに3つの例を紹介します モーダルプレゼンテーションは シンプルなタスク マルチステップのタスク フルスクリーンのコンテンツに 使用できます それぞれの例について説明します まず初めに イベントの作成や リマインダーの設定など 単純な作業を行う ワークフローに モダリティを使用します リマインダーを作成するには 入力項目を編集して 修正する必要があります 継続的にフォーカスをすれば 中断されることなく 作業を進めることができます 他の要素やタブをタップすることで 誤作動でフローを放棄してしまう 可能性も最小限に抑えます 2つ目は 複雑なタスクに対応する ワークフローに モダリティを使うことです これは ウォレットに 交通カードを追加するなど 複数のステップを要する 場合があります 複雑なタスクに モーダルを使用するのは 直感に反するように 思うかもしれませんが その目的は タブバーを非表示にし タスクが完了するか キャンセルされる前に App内を移動するのを防ぐことで フォーカスの強化という点を忘れないでください 3つ目は 記事 動画 フルスクリーンコンテンツなど 必要最小限のナビゲーションを 使用活用するときに モーダルを使用することです フィットネスAppで 動画表示される ワークアウトを始めることは モーダルプレゼンテーションに 最適なシナリオです 階層型セクションでは ナビゲーションバーが 重要であることを話しました これはモーダルでも 同様に重要なことです モーダルの構造を見るときは ナビゲーションバーを 道標として考えてみてください ラベルと アクションを使うことで 自分がどこにいて どんなアクションを起こせば 他の場所に行けるのか 自信持って操作できます タイトルは 「新しい旅程」のように 画面の内容を理解することに 役立ちます 右のラベルは優先的なアクションを 意図しているため 重要性を強調するために 多くが 太いフォントで表示されています ラベルそのものが 簡潔で肯定的な動詞であり タップしたときに何ができるか 正確に教えてくれます 優先的なアクションは モーダルを閉じ Appの以前の状態を 保持します モーダル上でまだ入力や インタラクションがない場合 優先的なアクションを 非アクティブにすることで 保存または継続するために フィールドが必須であることを 明確にすることができます 優先的なアクションがある場合 左側のアクションとして キャンセルでモーダルを閉じ ワークフローを放棄したことを 明確に示すことができます キャンセルをタップする前に 情報を入力していた場合は アラートや アクションシートを表示して このままキャンセルすると データが失われることを 伝えてください UIを操作していない場合は キャンセルをタップすると 単純にモーダルが解除されます クローズシンボルはあまり使用せず モーダルプレゼンテーションで 最小限のインタラクションとテキスト入力が 必要な場合にのみ使用してください App StoreのTodayタブの この記事のように モーダルで「X」が プライマリな閉じる方法として 表示されることがあります ユーザー入力がないため さりげない表現によって ユーザーがコンテンツに 集中できるように クローズシンボルを活用できます 入力やインタラクションが 必要なモーダルで クローズシンボルがどのような 問題になるのか例を説明します フィルタを選択後 閉じるをタップすると 選択した内容が適用されますか それともキャンセルされますか アクションが明確に 表示されていないため 「閉じるをタップしたらどうなりますか」 と疑問を持たれる場合があります ナビゲーションバーに ラベルを使用することは より肯定的で アクションがより明確であるため 一般的に好まれている ということを覚えておいてください 最後に モーダルの上に表示する モーダルは乱雑で 複雑に感じるため 制限するようにしています モーダルビュー自体が関連する場合 サブビューとトランジションを サポートできることは 非常に価値があることです 前に述べたように これは編集ビューであり テキストフィールドと テーブルセルには 見るだけでなく 操作することを目的とした 選択項目と入力項目があります 例えば 旅程に追加した 友人のテーブルセルを タップすることができます シェブロンがあるからプッシュできる と想定できるはずです プッシュすると このビューに Kateの情報が表示され 彼女を旅程から削除する オプションが表示されます 「人の追加」と 「写真のアップロード」のラベルは タップ可能なアクションであることを示す ティントカラーで表示されています これらのシナリオは ワークフローの中の ワークフローです 旅程の追加から始め 今は写真を追加しています 写真のアップロードは カメラロールをスクロールして 新しい写真を選択するなど かなりのインタラクションを含む ワークフローになっています これも自己完結型の タスクと定義します 写真が選択されると そのモーダルは解除され 新しい旅程の 最初のモーダルに戻ります 複数のモダリティスタックを 制限するようにしますが サブビューの一貫性と 集中力を高めるために 必要な場合もあります これが iOSにおける モーダルの概要となります モーダルは画面の下部から 表示される必要があります それらはシンプル マルチステップ フルスクリーンの 3種類のタスクに使用できます ナビゲーションバーにある優先的なアクションと キャンセルアクションを使用します 最小限のインタラクションのコンテンツには クローズシンボルを使用します モダールの上に表示される モダールを制限します この深掘りが 役に立つことを願います iOS Appの ナビゲーションをデザインする際に コンテンツが どのように構成されており 人がどのように機能を利用し 階層との関連でどう表現するのが 最適なのかを考えてください それにより Appの素晴らしい すべての機能に簡単にアクセスし 利用することが できるようになります ご視聴いただき ありがとうございます ♪