2022年05月27日 (金)

Appleのヒューマンインターフェイスガイドラインを読んだ

UI/UX

これ
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

仕事でモーダルやダイアログ、アラートなどをつくったり、ボタン名を考えることがあった。
本来、その企業ごとのデザインシステムに沿って構築するんだろうけど、小規模な会社ではそれがなかったりする。弊社もそう

そんなときはAppleのガイドラインを参考に作ることになったので、アラートとアクションシートについて軽く読んでまとめてみた。何を使えば良いか迷った時に役に立ちそう。

アクションシート

こういうやつ


ユーザーに2つ以上のアクションを提示するときに使う。メニュー一覧ではなく、ユーザーが行おうとしているアクションに関連したもの。

例えばメールの下書き。途中まで書いて閉じようとした場合、

  • 下書きを削除
  • 下書きを保存
  • キャンセル(閉じるのをやめる)

の3通りを提示する。

ユーザーが行おうとしているアクションとは関連のないアクションを提示したい場合はアクションシートではなくコンテキストメニューを使う。

データを破壊する可能性がある場合は必ずキャンセルを提示し、キャンセルは一番下に配置する。
破壊的なアクションは目立たせて、一番上に配置する。
アクションシートのスクロールはさせないこと。



アラート

これ


アラートを使うのは最小限にし、重要な情報だけ。
例えば

  • 問題が発生したとき
  • 購入や破壊的な行動の確認


具体的なアクション(送信や削除など)のときはアクションシートを使う。
可能な限りアラートはスクロールさせない。装飾もしない。
ボタン名に「はい」「いいえ」は使わない。
キャンセルボタンは左側、もしくは一番下。
ホーム画面に戻ったりエスケープキーを押したときはアラートのキャンセルと同じ処理にする。

まとめ

弊社のUIはアラートに頼りがちだったので、使いすぎていることに危機感を覚えた。今後は使う機会を減らさないと。