アラートを効果的に扱おう
>100 Views
February 14, 24
スライド概要
Mobile Application Programmer
関連スライド
各ページのテキスト
アラートを効果的に扱おう KAWASHIMA Yoshiyuki YUMEMI.grow Mobile #10 2024.2.14
伝えたいこと • ユーザがアラートを軽視しないように
情報源 ヒューマンインターフェースガイドライン https://developer.apple.com/jp/design/human-interface-guidelines/ マテリアルデザイン https://m3.material.io/
前提 詳細はヒューマンインターフェースガイドライン、マテリアルデザイン に書いてあります。 今回の発表では、具体例と見比べながら理解を深めていきたいと思い ます。
用語の整理 • ヒューマンインタフェースガイドライン Alert • SwiftUI alert • UIKit UIAlertController • マテリアルデザイン Dialogs • Flutter AlertDialog • Jetpack Compose Dialog • Android View AlertDialog
- https://developer.apple.com/documentation/SwiftUI/View/alert(_:isPresented:actions:)-1bkka
- https://developer.apple.com/documentation/uikit/uialertcontroller
- https://api.flutter.dev/flutter/material/AlertDialog-class.html
- https://developer.android.com/jetpack/compose/components/dialog
- https://developer.android.com/reference/android/app/AlertDialog
ヒューマンインターフェースガイドライン
アラートは控えめに使う
アラートは重要な情報の提示に使えるとはいえ、そのたびにユー ザの操作が中断されます。どのアラートにも必ず不可欠な情報 や有用なアクションが含まれているようにしないと、ユーザが アラートを軽視するようになりかねません。 https://developer.apple.com/jp/design/human-interface-guidelines/alerts
マテリアルデザインガイドライン
アプリの通常の操作を中断する対話や、特定のユ ーザータスク、決定、もしくは同意に必要となる 重要な情報には Dialogs を使用してください https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873
低または中くらいの優先度の情報に Dialogs は使用し ないでください。代わりに Snackbar を使ってくだ さい。消去できるし、自動的に非表示にもできます https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873
ヒューマンインターフェースガイドライン
ユーザが意図したアクションに関連する選択肢 を提示する場合は、アラートではなくアクシ ョンシートを使用する https://developer.apple.com/jp/design/human-interface-guidelines/alerts#iOS-iPadOS
キャッシュされたデータやプレースホルダのデータ を表示したり、ユーザの操作を中断しない形で問題 について説明するラベルを表示することができます https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Best-practices
具体例
Apple Weather App Airplane • キャッシュがあればキャッシュ を表示（おそらく当日のキャッ シュの有無）
Apple Music Airplane
Apple Home Airplane
Apple Books Airplane
マテリアルデザインガイドライン
重要でない情報は、アプリのコンテンツの 流れの中で他の UI 使って提示してください https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc
ダイアログに重要でない情報を置くことを 避けてください https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc
コンテンツ
簡潔かつ明確に状況を説明するタイトルにする
ユーザに状況を素早く理解してもらう必要があるので、冗長な表現を避け、漏れなく具体的に記述しま す。できる限り、起きたこと、起きた状況、起きた理由について説明しましょう。「エラー」や「エ ラー329347が発生しました」のような、有用な情報を伝達しないタイトルにはしないでください。2 行を超えて折り返されるような長すぎるタイトルも避けます。タイトルが完全な文である場合は、セ ンテンススタイルの大文字化（英語の場合）を使用し、適切な文末記号を付けます。断片的な文をタ イトルにする場合は、タイトルにふさわしい表現にし、文末記号は付けないようにします。 https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Content
わかりにくい
本当に有意義なエラーメッセージを書くには
簡潔かつ明確に状況を説明するタイトル “確実にゴミ箱を空にする”を 使用すると、“ゴミ箱”にある 項目が完全に消去されます。 完全に消去してもよろしいで すか？ https://postd.cc/how-to-write-an-error-message/
このダイアログのタイトルは、具体的な質問を 提示し、リクエストに関わる内容を簡潔に説 明し、明確なアクションを提供します ff https://m3.material.io/components/dialogs/guidelines#0c 8b6b-d4f3-4442-8194-31212f5d1a12
ダイアログのタイトルで曖昧な質問をしな いでください ff https://m3.material.io/components/dialogs/guidelines#0c 8b6b-d4f3-4442-8194-31212f5d1a12
いつアラートを使ったら良いか？
アプリ内でのバランスなので正解はない
アプリ内でアラートを増やすことになったら 他のアラートが必要か絶えず見直しが必要
個々のアプリが対応するだけでは不十分
まずは個々のアプリから対応を 副次的効果でレビューの心象がよくなる （はず）
おわりに 共通言語を作ろう ヒューマンインターフェースガイドライン https://developer.apple.com/jp/design/human-interface-guidelines/ マテリアルデザイン https://m3.material.io/
おわりに 記事紹介 iOS についてのまとめ https://zenn.dev/yumemi_inc/articles/effective-alert 元ネタのスクラップ https://zenn.dev/ykws/scraps/1bd34b3f414206