Zenn
🍎

Apple Human Interface Guidelines for iOSを理解したい

2024/06/30に公開
iOS
tech

徐々に記載していきます

Get start

各項目の特徴

  • iOS
    • 移動中も使用することを想定する
      • 音声制御、仮想キーボード、マルチタッチジェスチャーなどを使用して実現を行う
    • 使用用途は、ゲーム、メディア視聴、タスクの達成、個人情報の管理を想定
    • 手で持って使用する
    • 複数のアプリを同時に開き、切り替えて使用する
      • バックグラウンド時のの想定必須
    • iOSでユーザーが一貫した使用方法でそうできるようにする仕組み
      • ウィジェット
      • Spotlight
      • ショートカット
      • Activity View
    • 1画面上の情報やアクションは制限すべき
    • デバイスの向き、ダークモード、文字の大きさをユーザーの決定でシームレスに適応する
    • 画面の中央または下部に操作が必要な項目を配置したり、スワイプまたはリストタップでの画面切り替えに対応することで、デバイスの持ち方に合わせたインターフェースを作成する
    • ユーザーの入力負担を軽減するために、ユーザーに許可を求めた後プラットフォーム経由で取得できるデータを使用する
      • 生体認証、支払いの受付、位置情報、ヘルス情報など
  • iPadOS
    • 使用用途は、ゲーム、メディア視聴、創作物の作成
    • 手で持つまたは台に置いたりスタンドに立てかけて使用する
    • 何時間も１つのアプリに没頭することを想定
    • 複数のアプリを１つの画面上で操作、ドラッグアンドドロップでの連携などアプリ間の連携を想定
    • 大画面の特徴を最大限利用する
      • フルスクリーン遷移は最低限に抑え、ユーザーが今一番興味のあるコンテンツを最前面に表示する
    • マルチタッチジェスチャー、キーボード＆マウス、トラックパッドの使用、Apple Pencilの使用を想定する
    • デバイスの向き、ダークモード、文字の大きさをユーザーの決定でシームレスに適応する
    • MacOSでの使用も円滑に移行できるようにする

感想

iPhoneとiPadの違いは、やはり大きさが一番大きいと感じた。
大きさが違うからこそ、日常での使い方やインターフェースの考え方が違ってくる。

画面の中央または下部に操作が必要な項目を配置したり、スワイプまたはリストタップでの画面切り替えに対応することで、デバイスの持ち方に合わせたインターフェースを作成する

この項目は自分でiPhoneを使用していてとても感じる部分だった。自分は今でもメインはAndroidを使用しているため、3Wayナビゲーションの戻るボタンやスワイプでのバック操作は当たり前に存在している状況でスマホを使用していた。
去年iPhoneを家で使用するように購入して最初に感じたことは、スワイプで戻れないアプリの左上の戻るボタンを押す煩わしさだった。
もちろんYoutubeやX(旧Twitter)など世界的にしようされているアプリはだいたいスワイプの戻る動作を対応している。
それでもスワイプでの戻る動作が対応されていないアプリが多いのは、アプリを開発する際に、デフォルトではスワイプで戻る動作が有効になっていないことが原因だろうか。
もちろんAndroidの戻る動作をOFFにして実装することも可能だが、初期設定ではONになっている。
iOSの実装では戻る動作の実装に追加で一手間かかるような状況が、スワイプでの戻る動作が対応されていないアプリが多いことの原因だろうか。

MacOSでの使用も円滑に移行できるようにする
マルチタッチジェスチャー、キーボード＆マウス、トラックパッドの使用、Apple Pencilの使用を想定する

iPadOSは大きさ的にも日常持ち運ぶのでなく、音楽や動画作成などの創作作業や、大画面を活かしたゲームや動画の視聴、読書に使用されることが多いのだろうか。
また、MacOSでの使用やキーボード&マウスでの操作を考慮していることから、一時的なサブモニターのような使用方法も考えられているような気がする。
また、iPadに対応しているが、MacOSに対応していないアプリを、
MacからAppleStoreで検索したときに、対応していないけれどという注釈入りで検索結果に出てくるのもこの理由だろうか。

Foundations

Accessibility

概要

7人に1人が世界やデバイスとのやり取りに関して何かしらの障害を持っていることを念頭に置いて設計を行う。
ただ、アクセシビリティとは障害のある人だけに利用可能にするということではなく、すべての人が等しく利用可能にすることである。
以下の2項目をAppleは最初に挙げている。

  • シンプル性
    • 直感的に操作できるように一貫性のあるサポートを行う。
  • 知覚性
    • すべてのコンテンツが視覚、触覚、聴覚のいずれかを使用していても知覚可能であること。
  • パーソナライゼーション
    • デバイスの向き、ディスプレイサイズ、解像度、色域、分割ビューなどを考慮して設計する。
  • アクセシビリティのテスト
    • Accessibility Inspectorが役に立つ。VoiceOver、モーション軽減、大きなテキストサイズなどのアクセシビリティ機能をオンにし、フロー内のすべてのタスクを困難なく完了できることを確認すること。

設定アプリのアクセシビリティ設定には適応されるべき。だた、標準のコンポーネントを使用していれば、自動で適応される。

プラットフォームのジャスチャー(通知センター表示のための上下スワイプなど)は邪魔しない。
また、長押し、スワイプのような複雑なジェステャーは使用するのが難しい場合がある。
より簡単なタップのジャスチャーを優先することと、複雑なジェスチャーを採用する場合は
簡単なジャスチャーで実現できるオプションを用意するようする。

また、アプリでのカスタムジェスチャーを作成する場合は、必ず代替方法を提供する。
PointerControlやDwellControlが使用できる。

ボタンとコントロール

タップなどジェスチャーの対象となる要素の大きさは最低44x44ptが必要。
visionOSでは、各要素の中心は60pt以上離すこと。
これらは最低の大きさであり、可動性が限られる人はより大きな要素を必要とする。

ボタンの見た目はアプリ内で統一し、重要なボタンは塗りつぶしを使用するなど、相対的な重要性を伝える。アクティブなボタンを周囲のコンテンツと区別するために、ボタンの形状をON(枠線をつけたり、色や形を変える)ことも推奨。
visionOSでは標準で背景が視認可能なボタンを使用できる。

標準で提供されるスイッチを使用すると、設定で提供される、ボタンのON/OFFを見分けることができるラベルが使用できる。

リンクには色に加えて下線を使用することが推奨される。

ユーザー入力

指での入力の代わりに、音声でも入力できるようにする。カスタムキーボードを作成する場合、音声入力ボタンは必須。
また、重要なタスクは音声のみで完結できるように、Siriやショートカットをサポートする。

・ハプティクス(触覚伝達)
ディスプレイを見ることができない場合の情報伝達手段として、佐の成功または失敗した時や、イベントの発生前に、ハプティクスを使用する。
また、アプリ内で一貫したハプティクスを使用してユーザーが混乱しないようにする。

ハプティクスを使用しな場合は、音声など他のフィードバックを提供する。

voiceOver

表示されているコンテンツの音声説明を提供する。

visionOSではオブジェクトの位置を伝えるために、空間オーディオを使用する。

意味を伝えるすべての画像に代替説明を提供する。
画像を見ると認識できることが自明であろう情報から簡潔に説明する。
特にインフォグラフィクス(目で見て直感的にわかるようにしている情報)は、vioceOverユーザー
も利用できるようにする。

逆に装飾の意図で利用されており、重要な情報を持たない画像に関しては、ユーザーの負荷を軽減するためにvoiceOverから外す。

ビデオやオーディオコンテンツは誰でも楽しめるようにする必要がある。
クロードキャプション(後述)、音声解説、トランスクリプト(後述)の提供を考える

クロードキャプションは、ビデオの音声情報のテキスト相当を提供する。
また、システムの設定にあった言語に翻訳を行う。
字幕の提供も場合によって行う。

※クロードキャプションは、単純に音声を書き起こしたものであり、効果音も文字に起こして表示する。
字幕はセリフを書き起こして、ビデオの音声に合わせて表示するもの。

トランスクリプトは、音声と視覚の両方の情報をカバーするビデオの完全なテキスト説明を提供する。

すべての要素にvoiceOverユーザーがアクセスできるようにする必要がある。
そのうえで、要素のグループ分け、順序付け、リンク方法を指定することでvoiceOverの体験を向上させる。

例えばvoiceOverに各画像をそのフレーズとグループ化する必要性を設定していない場合、
「マンゴーの様々な種類が入った大きな容器。多くの緑のアーティチョークが入った大きな容器。マンゴーはMangifera属に属する木から生ります。アーティチョークはアザミの一種の変種から生ります。」と読み上げる。
voiceOverはデフォルトでは上から下へと読み上げるからである。
グループ化を設定して、本来読み上げてほしい、「マンゴーの様々な種類が入った大きな容器の画像。マンゴーはMangifera属に属する木から生ります。多くの緑のアーティチョークが入った大きな容器の画像。アーティチョークはアザミの一種の変種から生ります。」の順番にする必要がある。

・コンテンツやレイアウトが変更された場合
・違うコンテンツやアプリを開く前
　　・省略してタップした後の詳細コンテンツから誘導することも有効
・重要なコンテンツには、音声として読み上げるのは表示とほかの、代替テキストラベルも使用する
・VoiceOverローター(見出し、リンク、その他のセクションタイプによってドキュメントやウェブページをナビゲートでき、点字キーボードも表示できるコントロール)も場合によって使用する
・iPadOS、macOS、visionOSは、フルキーボードアクセスをONにして、すべてのタスクをキーボードで行えるようにすることが理想。ただ、システム標準のショートカットは重要。

テキスト表示

・iOS、iPadOS、tvOS、visionOS、watchOSでは、ダイナミックタイプを使用し、アプリのレイアウトがすべてのフォントサイズに適応する(標準のコンポーネントは自動で対応)
・フォントサイズが大きくなるにつれて、テキストの切り捨てを最小限に抑える。スクロール可能な領域でテキストを切り捨てることは、人々が残りのコンテンツを読むために別のビューを開くことができない限り避ける。
・レイアウト調整時には、大きなフォントサイズ時の表示を基準に調整する。

Discussion