Human Interface Guidelinesの学びとデデザイン例をまとめてみた 【/app-architecture編】
今回は、Human Interface Guidelinesの/app-architecture部分をまとめました。
昔、Human Interface Guidelinesを読んだことがあったのですが、分かった"気"になっていたことを避けたいと思い、今回このnoteでは要約とデザイン例を自らアウトプットすることでしっかり理解させる狙いです。
ただあくまでデザイン未経験時にまとめたものなので、正確性は低いです。なので未経験者がまとめたものってこんな感じなのかと知りたい方には、この記事を読んでも損しないかもしれません。
Launching
要約・学び）
アプリの起動時は、ユーザー体験に与えるインパクトは大きく、速さや注意が散漫しないシンプルな設計が求められる。
デザイン例）
Onboarding
要約・学び）
オンボーディングは新規・再訪問ユーザーに役立つ。どういうことかというと、オンボーディングの目的はユーザーがアプリを楽しむために存在するもの。ゆえに、新規ユーザーがアプリの楽しみ方を知り、再訪問してきたときにまたアプリの楽しさを感じられるになるかと思った。
またできるだけすぐにアプリを楽しんでもらうことが大事で、その体験中につまづきやすい箇所に細心の注意を払いながら、タイミングを見計らってレクチャーする。
またそもそもレクチャーする必要が多い場合はデザインから検討することが大事で、実際触って学ぶほうが楽しさがあり、ポジティブな影響を与える。
デザイン例）
Loading
要約・学び）
読み込み中の体験はもしアプリがフリーズしているように見られると離脱されやすくなる。そのために、状況を伝え、待機に必要な時間を伝えることが大事。またそもそも読み込みで待たせないことも大事。
デザイン例）
Modality
要約・学び）
モーダルは開いている画面を停止させて、一時的に別のアクションに集中させるときに使うもの。また重要な情報を伝えさせて行動を促すためにも使われる。そして利用タイミングが大事。モーダルはエクスペリエンスを中断させるかつ閉じるにもタップする余計アクションが必要なため、モーダルの表示に納得感をもたせることが大事。
モーダルの作る意識として、複雑だとモーダルの表示前のタスクを忘れてしまう可能性があるため端的にする必要がある。また閉じるボタンを必ず用意すること。そして閉じる際に例えばデータが失うなど問題があれば状況と解決策を提示すること。他にもモーダル表示時には表示前のタスクと異なるためタイトルを記載したり、ナビゲーションバーが含まれていればナビゲーションバーと同じ見た目に統一したり、する必要がある。
モーダルにはシート型？（正しい表現不明）と全画面型の大きく2種類ある。
シート型は前のビューに対し部分的に表示させ、それ以外の前のビューを暗く覆うように表示する。また閉じ方として、画面の上から下にスワイプしたり完了系の？ボタンをタップしたりすることで閉じられるようにする。
全画面型は利用シーンとしては複雑なタスクやビデオ・写真など没入感が必要なシーン利用します。また前のビューは完全に隠されるので、集中感を高める効果がある。
デザイン例）
Navigation
要約・学び）
アプリを深く観察しなくても、構造をつかめるようにデザインすることが大事。そのために馴染みのある構造を使うとよく、その馴染みのあるパターンが「階層ナビゲーション」「フラットナビゲーション」「コンテンツ・エクスペリエンス主導のナビゲーション」の3つある。
また直感的にユーザーに気づかせるために、ページコントロール、タブバー、セグメント化されたコントロール、テーブルビュー、コレクションビュー、分割ビュー（iPadではタブバーの代替）などの標準のナビゲーションコントロールの使用が推奨されている。
＜階層ナビゲーション＞
設定アプリやメールアプリがこのモデルとのこと。タブバーがないアプリの一部がこれに該当するのか？
出典）https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/
＜フラットナビゲーション＞
MusicとAppStoreがこのモデルに該当とのこと。タブバーがあるアプリがこれに該当するのか？
出典）https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/
＜コンテンツ・エクスペリエンス主導のナビゲーション＞
コンテンツ自体がナビゲーションを定義するとのことで、例えばメディア系サービスの関連記事とかで遷移していくイメージかな？ちなみにゲーム、本、その他の没入型アプリがこのモデルに該当するとのこと。
出典）https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/
デザイン例）
▼階層ナビゲーション
▼フラットナビゲーション
▼コンテンツ・エクスペリエンス主導のナビゲーション(??)
Accessing User Data and Resources
要約・学び）
ユーザーのプライバシーに関しての取扱いは、最優先事項とされるくらい重要で、透明性を保たなければいけない。そのために代表的なものでいうと、アクセス許可をリクエストする必要あり。
- 場所、健康、財務、連絡先、およびその他の個人を特定する情報を含む個人データ
- メール、メッセージ、カレンダーデータ、連絡先、ゲームプレイ情報、Apple Musicアクティビティ、HomeKitデータ、オーディオ、ビデオ、写真コンテンツなどのユーザー生成コンテンツ
- Bluetooth周辺機器、ホームオートメーション機能、Wi-Fi接続、ローカルネットワークなどの保護されたリソース
- カメラやマイクなどのデバイス機能
※原文まま
またアプリをダウンロードする前にも、一定の情報出さないといけず、AppStoreのプライバシーの詳細に従わないといけない。
混乱を与えてはいけない。文の大文字小文字を使用し、受動態を避け、最後にピリオドを含めると良い。アラートを読まずにアラートを閉じてしまうことがありますが、結果としてApp StoreのReviewでネガティブにつながるので注意。
また追跡の利点を明確に説明するカスタムメッセージを表示することで、許可の判断を仕向けることが重要。
デザイン例）
Settings
要約・学び）
設定をすることでエクスペリエンスを向上させることはできるが、なるべく手を煩わせないようにする。たとえば、郵便番号を入力するように求める代わりに、現在の場所を使用する許可を求めるなど。
デザイン例）
すみません、不明です。
振り返り
特にこれといってまとめることはありませんが、Navigationが重要そうでかつ、まだ完全に掴めていないので、ここはサービスの設計をしながら掴んでいきたい。
次回はBars編をまとめます。
この記事が気に入ったらサポートをしてみませんか？