web design uiOctober 30, 20266 min read

ボタンラベル:「OK」がダメなボタン文言である理由と、代わりに書くべき言葉

ボタンは、タップしたときに何が起きるかを語るべきです。OK、はい、いいえ、送信がなぜ失敗するのか、Apple自身のガイドラインにある動詞ファーストの原則、そのまま使える6つの言い換え、あらゆるダイアログに使える5秒テストを紹介します。

By Boone
XLinkedIn
Button Labels: Why "OK" Is the Wrong Button Text and What to Write Instead

OKと書かれたボタンは、OKが何を意味するのか確かめるために、人に質問を読み直させます。「OK、削除する?」それとも「OK、やっぱりやめる?」ボタンラベルは、タップしたときに何が起きるかを示すべきで、そうすれば誰も他の場所を見に行く必要がありません。ここでは4つのルールを、それぞれ並べて作り直し、さらにそのまま使える6つの言い換えを紹介します。

OKが失敗する理由

OKは、書いた本人の頭の中でだけ質問への答えになっています。読む人はタイトルを記憶に留め、末尾にOKを付けて文を組み立て直し、それが自分の望むことかどうかを判断しなければなりません。破壊的なダイアログでは、これはギャンブルです。2つのボタンが似て見えるうえ、危険なほうが危険だと言っていないからです。

はい、いいえ、送信、続行、確認も同じです。これらは質問への答えか、フォームの汎用的なステップであって、これから起きることではありません。ラベルが行動を担っていないと、タイトルと本文が肩代わりするしかなく、しかも人は読む前にタップします。

AppleもHuman Interface Guidelinesのアラートの項でそう述べています。ボタンを選んだ結果を表す1〜2語のタイトルを使い、アラートの文章に直接関連する動詞や動詞句を優先せよ、と。ボタンの周りの言葉についてはエラーメッセージの例の記事で扱っています。こちらはボタンそのものの話です。

修正1:何をするかを言う

OK

「この写真を削除」というタイトルのダイアログ。ボタンはキャンセルと黒いOKの2つ

削除

同じダイアログで、OKの代わりに赤い削除ボタンがある
質問には動詞が入っているので、ボタンはそれを借ります。左は、黒いOKボタンに人が誘導されますが、何も名指ししていません。右はボタンが「削除」と言い、しかも赤いので、ラベルと色がこれから起きることについて一致しています。

動詞はタイトルからそのままコピーします。「この写真を削除しますか?」なら削除、「このアカウントをブロックしますか?」ならブロックです。

動詞が収まらないなら、たぶんタイトルが曖昧すぎます。タイトルを直しましょう。

修正2:はい・いいえを捨て、キャンセルは残す

いいえ / はい

「保存せずに離れる」というタイトルのダイアログ。ボタンは「いいえ」と「はい」の2つ

キャンセル / 離れる

同じダイアログで、グレーのキャンセルボタンと赤い「離れる」ボタンがある
「保存せずに離れますか?」に「いいえ」と「はい」は、ちょっとした罠です。「いいえ」は離れないという意味? それとも保存しないという意味? 右では、キャンセルは常に戻る道、離れるは出ていく道なので、どちらも読み違えようがありません。

はい・いいえは、読む人に自分の答えを文に当てはめさせます。キャンセルは残す価値のある唯一の汎用語です。意味が決して変わらないからです。取りやめて、何も起きない。Appleの指針も同じで、はい・いいえは避け、操作を取り消すボタンには必ずキャンセルを使えと言っています。

修正3:結果を名指しする

送信

合計$24.00の注文概要と、「送信」と書かれた黒いボタン

$24.00を支払う

同じ注文概要で、黒いボタンには「$24.00を支払う」と書かれている
送信はフォームが何をするかを述べていて、人が何をするかではありません。「$24.00を支払う」は行動と金額を告げるので、お金を使う前の最後のタップが、そのまま最後の確認にもなります。

最良のラベルは、対象や金額を含むことがよくあります。$50を送る、アカウントを作成、請求書を見る、下書きを保存。支払い、送信、削除のようにコストがかかる場面ほど重要です。ボタンは、約束する前に最後に読まれるものだからです。

修正4:1〜2語

5語

「はい、私のアカウントを永久に削除します」と書かれた横幅の広い赤いボタン

2語

「アカウントを削除」と書かれた赤いボタン
文章が必要なラベルは、上のダイアログが仕事をしていないサインです。結果は本文に書き、ボタンは行動だけにしましょう。

短いラベルは、翻訳や小さな画面にも耐えます。英語で5語のボタンは、ドイツ語やロシア語ではもっと長くなり、折り返しや切り捨てが始まります。2語なら余裕が残ります。

6つの言い換え

変更前変更後使う場面
OK削除「この写真を削除しますか?」の後
はい離れる「保存せずに離れますか?」の後
送信$24.00を支払う決済の概要画面
ここをクリック請求書を見る何かを開くリンクやボタン
続行アカウントを作成登録フォームの最後
確認$50を送る送金概要の後

OKが正しいとき

Appleが認めている用途はちょうど1つ。決めることが何もなく、ボタンの唯一の役目がメッセージを閉じることである、情報提供のアラートです。「セッションが終了しました」にOKボタンなら問題ありません。選択肢のあるものには動詞を付けましょう。情報提供のアラートでも、次の手順を表すなら「了解」や「再度サインイン」のような具体的な言葉のほうが良いことがあります。

5秒テスト

タイトルと本文を隠して、ボタンだけを読みます。それでも各ボタンが何をするか分かるなら、ラベルは正しい。分からないなら、そのラベルは質問に意味を肩代わりさせています。

プロダクト内のすべてのダイアログ、トースト、各フォームの1つのボタンで試してください。数分で終わり、チームにできる最も安いコピー変更です。そもそもダイアログとシートのどちらを選ぶかについては、モーダルとボトムシートを参照してください。

FAQ

OKの代わりにボタンには何と書くべき?

質問の中の動詞です。「この写真を削除しますか?」と尋ねるダイアログなら、ボタンには「削除」と書きます。OKが合うのは、知らせるだけで判断を求めないアラートだけです。

ボタンにはい・いいえを使うのは悪いこと?

たいていはそうです。答えを文に当てはめ直させ、「保存せずに離れますか?」のように読み違えさせます。行動には動詞を、取りやめにはキャンセルを使いましょう。Appleのガイドラインも、アラートでははい・いいえを避けるよう言っています。

キャンセルといいえ、どちらを使う?

キャンセルです。常に「取りやめて何も起きない」を意味します。いいえは、質問の言い回しによって意味が変わります。

ボタンの文言は何語がいい?

1〜2語です。「アカウントを削除」や「$24.00を支払う」のように結果を名指しし、説明は上の本文に書きます。

送信がダメなボタンラベルなのはなぜ?

送信はフォームが何をするかを述べていて、人が何を得るか、何を使うかではありません。「$24.00を支払う」「メッセージを送る」「アカウントを作成」のようなラベルは、結果と、必要なら金額を名指しします。

OKボタンについてAppleは何と言っている?

AppleのHuman Interface Guidelinesは、純粋に情報提供のアラートでない限り、OKをデフォルトボタンのタイトルにするのは避け、タップした結果を表す動詞を優先するよう言っています。

出典

  • Apple Human Interface Guidelines, Alerts:ボタンを選んだ結果を表す1〜2語のタイトル、アラートの文章に直接関連する動詞と動詞句、OKは情報提供のアラートのみ、はい・いいえを避けること、アラートの操作を取り消すボタンにはキャンセルを使うこと。また、純粋に情報提供のアラートでない限り、OKをデフォルトボタンのタイトルにするのは避けるとも述べています。
  • 上記のダイアログと注文概要は、当サイト独自の例です。5語の「Yes, Delete My Account Forever」を含む語数は、表示したラベルから数えています。
  • もともとはUX Brainyでカルーセルとして公開しました。

Want every button, dialog and error in your product to say exactly what it does? Our team designs app UI and writes the words inside it.

Get Started

More from Brainy Papers

Keep reading