Human Interface Guidelineを読んだ(iOS App ArchitectureのModalityまで)

try! Swiftのセッション内で、「Human Interface Guidelineを1年以内に読んだことのない人は読んだ方が良いよ」と言っている方がいました。

私はHuman Interface Guidelineをまともに読まずに開発をしていたので、iOSのルールも知らずに開発をしてきたことになります。

このままではまずいと思い、Human Interface Guidelineを読み始めました。

Human Interface Guidelineとは?

Human Interface Guidelineとは、Appleが開発者向けに出している、Interface Guidelineです。

Human Interface Guidelines - Design - Apple Developer

Human Interface Guidelineに書いてあること

Top画面

Top画面では、macOS, iOS, watchOS, tvOSの選択および、その他Technology(Airplay, Apple Pay, GameKit, SiriKitなど)について選択ができます。

iOSに絞って見ていこうと思います。

iOS - Themes

Themes - iOS - Human Interface Guidelines - Apple Developer

  • デザインのテーマ

明快 (Clarity)・尊敬 (Deference)・深さ (Depth)

  • デザインの原則

美的完成度 (Aesthetic Integrity)・一貫性 (Consistency)・直接操作 (Direct Manipulation)・フィードバック (Feedback)・比喩の使用 (Metaphors)・ユーザーによる制御 (User Control)

下記サイトを参考にさせて頂きました。

goodpatch.com

インタフェースの重要な点

  • Bar

どこにいるのかを明確にする

  • Views

テキストなどの、ユーザに見られる主要なコンテンツを含む

  • Controls

アクションを始めた際に情報を伝えること

Accessibility

  • 代替テキストLabelをつけること
  • ユーザ補助の設定に答えること
  • アクセシビリティ機能のテストをすること
  • キャプションや音声の説明を含めること
  • 十分なカラーコントラストを使用すること

より詳細はColor - Visual Design - iOS - Human Interface Guidelines - Apple Developerに記載

Loading

  • ロード中だということを分かりやすくする
  • 可能な限り早くコンテンツを表示する
  • ロード時間を隠してユーザを楽しませる
  • ロードのスクリーンをカスタマイズする

詳細はProgress Indicators - Controls - iOS - Human Interface Guidelines - Apple Developerに記載

Modality

  • モーダルは可能な限り使わない
  • モーダルタスクを終了するための明白で安全な方法を提供する
  • モーダルタスクをシンプルに、短く、そして焦点を絞る
  • 必要に応じて、タスクを識別するタイトルを表示する
  • 重要な情報をアラートで提示する

Alerts - Views - iOS - Human Interface Guidelines - Apple Developer

  • 通知の設定を尊重する
  • ポップオーバーの上にモーダルを表示しない
  • モーダルビューの外観を調整する

一番適切なModal Viewを選択する

  • Page Sheet
  • Full Screen
  • Form Sheet
  • Current context

ちなみに他のプラットフォームのGuidelineは?

AndroidはこちらのサイトにDesign Guidelineがありました。

Android Developers

Webもあるようです。

Web Content Accessibility Guidelines (WCAG) 2.0

少しずつ読み進めていきたいです。