はじめに
皆様は、アラートのOKボタンとCancelボタンの配置は
どういった基準で決めていますか?
(右か、左か?)
勿論、スマートフォンを右手で操作する人、
左手で操作する人で、変わってくると思いますが、、、
基準はどうすべきか?
ちなみに、押しやすいのは、右か、左か?
右手で操作する人を想定した場合
押しやすいのは、右側だと思います。
単純に親指からの距離が近いためです。
逆に左側は、親指からの距離が遠いため、
押しにくいです。
(当たり前ですね。)
こういうときは、各プラットフォームのガイドラインに準拠するのがベターだと思います。
「郷に入っては郷に従え」ではないですが、
iOSの場合はヒューマンインタフェースガイドライン、
Androidの場合は、Google Material designに準拠すべきだと思います。
iOSヒューマンインタフェースガイドラインの存在
存在を知っているが、軽視している方もいらっしゃるかもしれませんが、
なんとなく設計や実装をしている方は、今一度読見直されるとよいかもしれませんね。
ちなみに、本件についてガイドラインから抜粋すると、下記のように書かれています。
・最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。
・最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。
翻訳なので、分かりづらいですね。。。
非破壊的なアラートの場合
破壊的なアラートの場合
要約すると、
・基本的には、OKを右、Cancelを左に配置する
・誤ってタップすると困るようなアラートは、OKを左、Cancelを右に配置する
ちなみにAndroidは、Material designによると、
肯定的なボタンは右、否定的なボタンは左に配置すると記載されているようです。
その他 アラート関連のガイドラインについて(一部抜粋)
アラートについて
- タイトル(必須)
- タイトルは1行で十分表示できる短さにすること。
- 「エラー」、「警告」など、有用な情報を提供しない一語のタイトルは避けること。
- メッセージ(任意)
- ボタンを幾つか配置する
- 3つ以上のボタンを含む場合は、アクションシートを使用すること。
選択するアクションについて
- 選択するアクションは、「タップ(tap)」という単語を使用すること。
- 「タッチ(Touch)」、「クリック(Click)」、「選ぶ(Choose)」は、使用しないこと。
ボタンタイトルについて
- タイトル形式の大文字化を使用し、句点は使用しない。(英語の場合)
- アラートに直接関連する動詞を使用すること。
- 単純な受け入れを示す選択肢として、ほかに適切な候補がなければ「OK」を使用する。
- 「はい(Yes)」や「いいえ(No)」の使用は避けること。
まとめ
今回お話したかったことは、
どちらでも大差ないという考え方もあると思いますが、
なんとなく設計や実装するのではなく、
こうあるべきだというべき論(ポリシー)をもって
ものづくりをしていきたいという自分への戒めです。
基本を知ったうえで崩すのと、
基本を知らないで崩すのは、
結果が同じでも、得るものは違うと思います。
(守破離!)
勿論、ユーザビリティ向上には、
パフォーマンスが大事!ということも
十分理解しております。
長文乱文失礼しました。
参考
iOSヒューマンインタフェースガイドライン
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/Alerts/Alerts.html#//apple_ref/doc/uid/TP40006556-CH14-SW1