最適なCTAの作り方とは？
レイアウト講座やユーザーフロー講座を行うと、受講生から「CTA（Call To Action）のボタン設計は、”〜〜する”という文言にすべきですよね？」もしくは、「動詞で作るのだ。」と教わってきている方がいらっしゃいました。一つの考え方ですが、そういうものだ。と思い込みは良くないです。
CTAは、その名の通りユーザーに次のアクションに続いてもらうためのボタンやリンクを指します。そのため目立つ色にしがちなのですが、CTAだから目立たせるデザインと単調に考えてはNGです。
CTAを作る上で陥りがちな落とし穴
- 動詞で作るものと思い込むこと
- 優先順位を考えずに作ってしまうこと
- 目立たせないと駄目だと思ってしまうこと
行動を促すから動詞で作るべきか？
ユーザーフロー講座に受講した男性が「動詞でフローを考えるのですよね？」と言ってきました。考え方としてわかりやすいのですが、動詞にしなければならないという考えで進めていくと、ユーザー行動がどのようになるのか？という視点が落ちてしまうことがあります。
例えば、閲覧だけしたい場合は「もっと見る」などのボタンを実装できます。しかし、商品一覧の情報すべてに、「もっと見る」ボタンに入っているとウザく感じてしまう場合もあります。
言葉として表現されなくてもアクションできるデザイン設計があれば、必ずしも「〜する」という表現をしなければならないわけではないことを覚えておきましょう。
キャンセルするボタン
「〜する」という動詞でデザインすると、キャンセルボタンも「キャンセルする」という表現になります。もちろん、「キャンセルする」というボタンもあっても良いでしょう。
しかし、「もっと見る」ボタンや「キャンセルする」ボタンが羅列させるとコンテンツの邪魔になる可能性が高いです。
ユーザーに「キャンセル」の名詞だけでも行動が誘発できるのであれば動詞でなくても良いです。どこかで「〜する」という考え方はユーザー行動を促す意味で考え方として教えているのかもしれませんが、UIに必ずしも表わすものではないことを理解しましょう。
統一させることからはじめよう
品川区の図書館のサイトで書籍を予約しようとすると、ボタンのデザインが統一できていなかったり、ユーザー行動にあったボタン名になっていないため、 ユーザーの認知負荷を高めてしまっています。ひとつづつ見ていきましょう。
1）ユーザー行動と異なるボタン表示
図書館のログイン画面ですが、ログインしたいのに「送信」というボタンになっています。何を送信するの？ってユーザーは一瞬迷ってしまいます。
そして、「送信する」という動詞ではありません。
2）書籍を選択して予約する画面
書籍詳細には、[【予約カート】へ]というボタンがあります。ユーザーの行動をボタンの言葉にして[【~~】へ]の表現になっています。この表現をして統一しようと、すべてのリンクに[【~~】へ]としなければならない可能性が出てくるため、本当に[【~~】へ]にする必要があるか検討しましょう。
もちろん、必ずしもすべてを統一する必要がない場合がありますが、できるだけ表現を統一するのは１つのルールなので、その可能性が出てしまうことを理解して実装しましょう。
３）同じ行動にボタン表現が異なる
【予約カートへ】から遷移した書籍を予約をする画面です。書籍をどこで受け取るのか、どこに連絡するかを「登録する」して、予約を決定「予約する」という遷移です。そもそも、書籍ごとに受け取り場所が変わる想定は少ないはずなので、予約するたびに毎回受け取り場所を設定する必要があるかを検討しましょう。
また、ユーザーは書籍を予約したいのに「登録」という言葉は、ユーザーの認知負荷が高くなります。ユーザーが行いたい「予約」という言葉を採用して、システム上、登録の行動だとしても、ユーザー行動に合わせた「予約の登録をする」「予約の登録」の表現にしましょう。
4)登録後に予約画面に遷移
登録という表現からユーザーがしたい行動の「予約する」ボタンにやっとたどり着きました。パンくずを見てもわかるように4つのステップで手間が多いことがわかります。
説明文でなくUIでユーザーに伝えるデザインにしよう
少し余談ですが、「予約カート一覧」ページに、以下のような文言がありました。ユーザーにとって親切で記載しているとは思うのですが、私はほぼ読んだことなはないですし、言葉を読まなければならないUIデザインは良くありません。改善が必要となります。
予約を行わない資料があればチェックボックスにチェックを入れ、「キャンセル」ボタンを押してください。
図書館サイトの文言
順番予約を行う場合は順番通りに受け取りたい資料にチェックを入れ、「順番予約」ボタンを押してください。
順番予約を解除する場合は、解除したい順番予約にチェックを入れ、「順番予約解除」ボタンを押してください。
CTA設計のための優先順位
CTAを含む、リンク・ボタンの設計は優先度が大切です。それを考えずに作ってしまうと。色を多用してしまってギラギラなサイトになってしまいます。
CTAボタンの設計は、情報設計からと言っても過言ではありません。優先順位をつけずにとりあえずボタンを作ってしまい、デザインがバラバラになっているケースが目につくので、CTA設計のための優先順位の記事も合わせてお読みください。
