LoginSignup
87
71

More than 5 years have passed since last update.

アラートのOK、Cancelボタンは右と左、どちらにおくべきか?

Posted at

はじめに

皆様は、アラートのOKボタンとCancelボタンの配置は
どういった基準で決めていますか?
(右か、左か?)

勿論、スマートフォンを右手で操作する人、
左手で操作する人で、変わってくると思いますが、、、

基準はどうすべきか?

ちなみに、押しやすいのは、右か、左か?

右手で操作する人を想定した場合
押しやすいのは、右側だと思います。
単純に親指からの距離が近いためです。

逆に左側は、親指からの距離が遠いため、
押しにくいです。
(当たり前ですね。)

こういうときは、各プラットフォームのガイドラインに準拠するのがベターだと思います。

「郷に入っては郷に従え」ではないですが、
iOSの場合はヒューマンインタフェースガイドライン、
Androidの場合は、Google Material designに準拠すべきだと思います。

iOSヒューマンインタフェースガイドラインの存在

存在を知っているが、軽視している方もいらっしゃるかもしれませんが、
なんとなく設計や実装をしている方は、今一度読見直されるとよいかもしれませんね。

ちなみに、本件についてガイドラインから抜粋すると、下記のように書かれています。

・最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。
・最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。

翻訳なので、分かりづらいですね。。。

非破壊的なアラートの場合

スクリーンショット 2016-08-18 11.21.36.png

破壊的なアラートの場合

スクリーンショット 2016-08-18 11.19.52.png

要約すると、
・基本的には、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

87
71
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
87
71