ボタンの文言についての学び

Posted at 2023-12-25

はじめに

現在社内の基幹システムを開発している中で、「このボタンってこの文言でいいのかな」という疑問が湧くことがありました。

というのも、ボタンの文言に統一感がなかったり、一文が長すぎたり、確かに認識の齟齬は起きないけどもUI的にこれでいいのか？と感じることがあります。

デザイナーでもなければ、UI / UXについての知見も深くないため、ちょっとした疑問を解決したいと思い記事にまとめました。

開発を始めた当初は、なるべくシンプルで使いやすいものをという思いから、「ボタンの文言はなるべく簡略に」と思っていました。

実際文字数が多いと認知不可は高まります。
一方で目的に応じて使い分けないとユーザーに混乱を招きます。

例えば、現状開発しているシステムでは「送信する」「確定する」「追加する」など、明らかに体言止めできる文言が数多くありました。
しかし、そのボタンを押したことによる次のアクションによって使い分けることが重要だと学びました。

例　ユーザー（オブジェクト）がマイページにログイン（タスク）するとき
　　メール（オブジェクト）を送信（タスク）するとき

例　追加する（タスク）を押して契約期間（オブジェクト）を決めるとき
　　稼働を開始する（タスク）を押して稼働先（オブジェクト）を選択するとき

簡単に言うと、 「押下するボタンの文言自体がタスクか、押下した先にタスクがあるのか」 によって使い分けが必要ということです。

もちろん例外もあり、重要なタスクは動詞を省略せずにそのまま記述することもあります。
身近な例だとAppleのゴミ箱を空にするときのアクションですね。

以上のことを開発で意識的に実践していくと、「違和感なく使えるな」と感じることも増えました。

自分が携わっているシステムにも考慮されていない箇所はあるので、気づいたところから修正していこうと思います。

ページ遷移とかモーダルとかでよく「戻る」とか「閉じる」とか使います。

「戻る」と「閉じる」の違いはわかるけど、「閉じる」と「キャンセル」って意識的に使い分けてるかな、と自分でもちょっと不安になりました。

開発していく中でも結構混同していたので、自戒も込めて言語化していこうと思います。

用途：元々いた画面が完全に見えなくなる（またはほぼ見えない）ときに多く使用
画面：ページ遷移、フルスクリーンモーダル等

用途：画面を覆っているものに対して、ユーザーに非表示にさせたいときに使用
画面：モーダル（最近はよく使われるハーフモーダルとか）等

用途：「いいえ、そのアクションを行いません」という意味を持つ（Yes/NoでいうNo）
　　　　基本的にはタスクとなりうるものがボタンとして1つ以上がある場合のみ使う
　　　　例）送信 - キャンセル、削除 - キャンセル、保存 - 更新 - キャンセル
画面：モーダル等

自分的な「閉じる」と「キャンセル」の違いは、対比となるアクションがあるかどうかだと思います。

「閉じる」は単に表示されているものを非表示にするとき、「キャンセル」は対となるアクションがありNoを選択させたいとき使うのがいいと感じました。

もちろんこれは、前後のアクションによって使い分ける必要があるため、一概にこれが正しいとは言えませんので、一つの考えとして見ていただけますと幸いです。

ボタン文言の修正って、小さいタスクに見えて意外と奥が深いんだなと感じました。

単に、見た目がいいからとかシンプルなものがいいからとか、そんな薄い理由で文言を決めちゃいけないですね。
文言にはきちんと根拠をもって提案していこうと思います。

拙い文章にも関わらず、最後までお読みいただきありがとうございました。