ボタンのラベルを考える

Webサイトには必ずといっていいほど配置されているボタン。

立体的なビジュアルで押しやすいもの、周囲に埋もれてしまい押しにくいもの、目立つように色を変えたり、大きさを変えたり、Webサイトごとにいろいろな工夫がされている場合もあります。

例えば…

• CTA（Call to Action）ボタン
• フォーム送信ボタン
• 確認ダイアログの実行＆キャンセルボタン

などなど。

もうお気づきかもしれませんが、Webサイトに何げなく設置されているボタンは、れっきとしたUI要素です。

単にサイト内に設置しておけばよいというものではありません。

そしてボタンにおいて、色や形、大きさと同じくらい大切な要素が「ラベル」です。

ラベルとは、ボタンに付いているテキストのことを指します。

業界用語的にはこれを決めることを「ラベリング」と言いますが、実はすごく気を使わなくてはならない要素です。というのもユーザーを混乱させないために、適切なラベルを使用しなければならないからですね。

というわけで今回は、ボタンのラベリングにおけるポイント4つを紹介します。

1：動詞を使う

動詞、つまり「〇〇する」です。

ボタンはそもそもユーザーに何かしらのアクションを起こさせるための要素です。

そのユーザーに求めるアクションを、動詞にして使用すると、こちらが意図した行動をしてくれる可能性が高くなります。

■例：「変更を保存しますか？」という確認ダイアログに配置するボタンのラベル

「はい／いいえ」でも通じます。しかし動詞がないので、何のことを言われているのかユーザーは一瞬わからなくなり、ボタンを押す前にダイアログの文章を読み返す必要が出てきます。

このとき、変更しますか？と聞かれていると読み間違え、これ以上変更する必要がないと判断したユーザーが「いいえ」を選択した場合、どうでしょうか。

ユーザーは保存されていると思っているはずですが、実際は変更した内容が反映されていません。

こうした誤解とそれに関連するミスリードを防ぐ意味でも、ここでは「保存する／破棄する」が適切なラベリングです。

こうすればボタンを見るだけでアクションが想像しやすくなりますね。

2：特性を表す言葉を使う

特徴的な機能を持ったボタンにも関わらず、ラベルがあまりにも一般的すぎるとユーザーの混乱を招くことがあるため注意が必要です。

■例：テスト環境で作成したブログ記事を本番環境に転送するボタンのラベル

フォームなどのデータを送る際のボタンでは、「送信」とか「送信する」などのラベルを使用するのが一般的でわかりやすいように思えます。しかし同時に「記事を送信してどうなるのか」「このあと何が起きるのか」の想像がつきにくい、あいまいなラベルとも言えます。

ここでは「投稿する」「公開する」「アップロード」などのより特性を表すラベルが適切です。

「送信」よりもボタンを押した後の未来がより具体的に想像できるため、ユーザーも安心してクリックすることができるでしょう。

ちなみにソーシャル・ネットワーキング・サービスのTwitterでは、投稿するためのボタンには「ツイートする」というラベルが使用されています。Twitterの中だけで効果を発揮する特別なラベルと言えるでしょう。

3：ユーザーにとって能動的な言葉を使う

行動を促すために動詞を使うと先ほど言いましたが、それに加えてユーザー目線に立った能動的な言葉を使用するとさらに効果的です。

他人事ではなかなかアクションにつながりませんが、当事者意識をユーザーに持ってもらえれば行動は変わってきます。

ボタンを押すことによって発生する事象が明確になれば、ユーザーの意思決定を助けることもできるわけです。

これは特にCTA（行動喚起）ボタンのラベルにおいて注意したいポイントになります。

■例：企業のWebサイトに載せる、無料相談に誘導するボタンのラベル

「無料で相談に乗ります」という企業目線のラベルでは、ユーザーにとってはなんだか他人事のように感じられます。

しかしユーザー目線に立った、能動的な「無料で相談する」に変更すればどうでしょうか。なんだか相談したくなる気持ちに駆り立てられますよね。

また、よく「ここをクリック」というラベルがありますが、これではボタンを押した先がどうなっているのか不明確でユーザーを不安にさせてしまいますし、これは当事者意識を持ちづらいので、NGです。

4：シンプルな言葉を使う

最後にもう一つ。シンプルな言葉を使いましょう。

〇〇を閲覧する、××の▼▼を読む、閲覧したページに戻るなどなど、冗長すぎたり、ラベルが長すぎたりするとユーザーはしっかりと文言を「読む」必要が出てきてしまいます。これはユーザーをイライラさせたり、ページから離脱したりする要因になるので避けましょう。最小限の単語で簡潔な言葉を使用することが基本です。

まとめ

ここまで見てきましたが、ボタンはれっきとしたUI要素です。ボタンの見た目にこだわりすぎて、ラベルに気を配るのを忘れていませんか？ぜひご自身のWebサイトをチェックしてみてください。