🍎

Androidと比較しながらおさえる！新しいHuman Interface Guidelineの勘所と活用法

2023/12/24に公開

iOS

マテリアルデザイン

hig

tech

こちらはQiita Advent Calender 2023 iOS 24日目の記事です。

今年のiOSDCに応募したものの不採択だったプロポーザルを簡易ながら供養します。

Human Interface Guideline(以下HIG)を、Material Designガイドラインと比較しつつ要点をまとめます。

Material Designのガイドラインと比較しつつ、HIGの基本理念をおさらい

Material Designガイドラインの基本理念

Material DesignとはMaterial DesignのGet started曰く、以下の通り。

Material Design is a design system built and supported by Google designers and developers. Material.io includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web.

現状、上記ガイドラインのWebサイトの記載からは基本理念的なものは読み取れません。
公式のコンテンツでそういったことが理解するには、以下の動画の4分以降の説明がよさそうでした。

いろいろ端折ってざっくりとした解釈は以下の通り。

ユーザーが触っていて「楽しい！」と思える体験を提供することを目指す
- 楽しい体験のために、遊び心を優先してシンプルさを目指さない
デザインシステムで定義している要素では体験の一貫性も保ちつつ、活き活きとした体験を提供できるよう、時にはユーザーにとって予想外の動きも取り入れており、それらを両立させている

HIGの基本理念

HIGとはApple Developerのデザイントップページ曰く、以下の通り。

プラットフォーム、基本要素、パターン、コンポーネント、入力、テクノロジーに関する重要な情報を理解できます。HIGは、すべてのAppleプラットフォームで優れたユーザー体験をデザインするためのガイダンスとベストプラクティスを提供します。

基本要素だけでもたくさんありますが、各項目のベストプラクティスを眺めるとHIGで目指すアプリケーションの理想が詰まっています。

ざっくり読み取れる情報は以下の通り。

あらゆるユーザーが主目的としている操作や興味を阻害せず、快適に利用できるデザインを目指す
- Appleのプラットフォーム上でAppleプラットフォーム標準に慣れ親しんでいるユーザーにとって一貫したデザインを目指す
時と場合に応じて、ユーザーが求めている情報を必要最小限提供する

Material DesignガイドラインとHIGの差分

差分としてはざっくり以下の通り。

Material Designガイドライン
- ガイドラインの定義はアプリケーションの画面について
- ユーザーがアプリケーションを触るのが楽しくなるよう、標準コンポーネントから遊びの余地を積極的に取り入れる
HIG
- ガイドラインの定義は画面に閉じず、アプリケーションが提供するあらゆる体験について
- ユーザーがアプリケーションの機能に集中できるよう、標準コンポーネントはシンプルを目指す

それぞれのガイドラインは上記の通りカバーしている範囲が異なり、HIGのほうがカバーしている範囲が広いので単純に並べて比較できるものではないです。
何らかの事情で上記を比較しながら物事を進めなくてはいけない場合、アプリケーションの画面上に表示するコンポーネント単位に限ることになるでしょう。

余談ですが、Material Designの解説動画の途中で日本語訳だと「シンプルでモダンなだけのデザインという古い考えを捨て」って話してて、誰にとは言わないが喧嘩売ってるように受け取れて笑ってしまいました。

プラットフォームを問わず、ネイティブアプリを開発する上で大事にしたいことまとめ

アクセシビリティ

ベストプラクティス〜モーションまで、一通り頭に入れたうえで開発に携わりたい。
あらゆる立場や場面におかれたユーザーが快適にアプリケーションを利用するために考慮すべきことが簡潔にまとめられている。

たとえばAppleの操作を受け付ける標準コンポーネントのうち、テーブル形式で表示している項目。
削除をするのに編集モードに切り替えて該当項目をタップでも行えるが、左へスワイプすると削除の選択肢を表示する方法にもサポートしている。

1個の機能に対してできるだけ複数の操作方法を提供する(ただし互いの操作方法が邪魔にならない範囲で)ことにより、あらゆるユーザーが使いやすいよう配慮する、といった視点は大事にしたい。

Material Designガイドラインでのアクセシビリティとの共通点と差分

Material Designガイドラインでもアクセシビリティについては言及がある。

共通点は以下の通り。

あらゆるユーザーにとって理解しやすい、目的を簡潔に達成できるUIを目指すこと
音声読み上げ機能を利用しているユーザーも理解しやすいよう、表示するコンテンツは適切なラベリング・階層表現を行うこと
ボタンなど、操作を受け付けるUIはユーザーがタップしやすい最低限のサイズ以上にすること
カラーはWeb Content Accessibility Guidelines（WCAG）に基づき、視認しやすいコントラストを確保すること
標準コンポーネントでアクセシビリティの高いUIを提供を簡単に実現する方法をサポートしていること

明確に差分があるのは、HIGではユーザー体験に必須でない限りアニメーションを利用しないことを推奨している辺り。

Material Designガイドラインとの基本理念の違いが明確な項目で、アプリケーションを開発する上で想像が至らないケースについても言及があったりする。短いので最低一読はして頭の隅には置いておくのがよさそう。

プライバシー

当たり前ですが、ユーザーからデータをもらうのは必要最小限。
アプリケーションを提供するためにもらう権限も必要最小限。
重要なデータをもらう場合は、セキュリティのベストプラクティスに従って取り扱う。

インクルージョン

アプリケーション内でのユーザーとのコミュニケーションのあり方が言語化されている。
この項目に関してはプラットフォームを問わずどころか、普段あらゆる立場の人間とコミュニケーションをとる上でおさえておきたい当たり前のことがいっぱい書いてある。

Appleのアプリケーション開発にきっと役立つHIG活用法

とりあえず全部目を通す

ユーザーが快適にアプリケーションを利用してもらうために必要な考慮事項がぎゅっと詰まっており、覚えておくに越したことないことばかり。
開発を進めていく中でUI・UXを検討する折に、「そういえばHIGに記載があった気がする」と調べるきっかけの引き出しが出来上がっている程度に読んだことがあると良さそう。

最優先でプラットフォームの考慮事項を確認する

どの項目においても後半の方にあるが、Appleプラットフォーム向けアプリケーションを開発する大半のエンジニアはiPhoneやiPadをターゲットにしているはず。

欲しいと思った情報の項目を少し違和感を持ちつつ読み進めてからプラットフォームの考慮事項に辿り着き、ターゲット外だと少し悲しい気持ちになるので、細かいことだが真っ先に確認するのがよさそう。

ベストプラクティスの有無を確認する

ほとんどの項目がベストプラクティスを記載しており、基軸としてそれらに則っておけばユーザーにとって快適で易しくて安全なアプリケーションを提供することにつながる。
アプリを審査へ提出した際に、リジェクトもされにくくなる。アプリ開発者にとってもいいことづくめ。

気になる機能を検索・絞り込み

UIKit、SwiftUIなどソースコードで実際に用いるクラス名に絡むガイドラインを絞り込むことも可能。
XcodeからはCommand+Shift+HのショートカットでHIGを開くことができる。

左カラムのフィルタ窓ではなく、右上の虫眼鏡アイコン側の検索窓から確認したいクラス名を検索をかければOK。
英語に切り替えず、日本語表示のままでも関連項目が検索結果として表示できる。

２０２３年６月のHIG大幅更新で、~KitなどかつてApple Developer上に散り散りに記載があり、実装を進める上で探すのが面倒だったドキュメント類を全部HIG内にまとめてくれている。大変便利になった。

さいごに

HIGを積極的に活用して、自分が開発に関わるアプリケーションを様々なユーザーに快適に使ってもらえることをどんどん目指しましょう！

快適に使ってもらえれば、長く愛用されていくことにもつながっていくはず。