✍️

「UXライティングの教科書」から学んだことを実践してみた

5 min read

はじめに

個人でSushi Workというオンラインコワーキングスペースを運営しているimaと申します。

https://zenn.dev/imaginelab/articles/eb5b19db6f9b0b

「UXライティングの教科書」はいいぞ

たまたま書店で見つけた「UXライティングの教科書」を読んでみたところ、これが大当たりな本でした。WEBサービスの文言作成は、他のサービスを参考にしたり、一般的に使われている文言を使っていたりと、完全に自己流でした。この本を読んで、どうすればもっとユーザー体験を良くできるかにフォーカスしたライティング技術を学べました。

WEBサービスやネイティブアプリを作っている人は、読んで損はないと思います。個人的には「リーダブルコード」を読んだ後の読後感と似たものを感じました。薄々こうした方がいいんじゃないかと感じていたノウハウが整理されて提示され、背中を押される感じ。読んだ後は、これでいいんだと少し自信を持ってコードや文言を書けるようになります。

なので、UIの文言を迷いながら決めている人には、とてもおすすめな本です。

前提

この記事では、「UXライティングの教科書」を読んで、実際にSushi Workのどこを改善したのかの事例を紹介します。UXライティングって、こんな感じなのかということが分かってもらえればと思います。

本来、UIを変更する際、仮説を立案し、その仮説を定量、定性的に計測し、検証するべきですが、まだそこまでできていません。今後の課題となっています。

実践内容

エンプティステート

エンプティステートとは、表示するべき情報が何もない状態のことを言います。例えば、検索結果が何も得られなかったときなどです。

表示するべき情報が何もない状態のとき、本来この画面で何を得られる可能性があるのか、どうしたらそれらを得られるのかを手助けする言葉があると親切です。検索結果が空なら、検索方法のTipsを載せるなどの工夫をすると、ユーザーの目的に沿った支援を行うことができます。

Sushi Workは、最大5人のメンバーが集まるオンライン・コワーキングスペースです。最初に入室したユーザーは、他に誰もメンバーがおらず寂しい思いをするという問題がありました。そこで、ユーザーが一人しかいない時に、メッセージを出すという対策を追加しました。

問題を和らげる効果はあると思いますが、抜本的な対策にはならないので、これについては機能的な解決策も検討中です。

ちなみに、スクリーンショットのゴースト機能の説明文もエンプティステートになっています。

書籍では、「カートが空で注文履歴もない状態のエンプティステート」、「検索結果画面のエンプティステート」の参考例が掲載されています。

ソーシャルプルーフ(社会的証明)

人々は自分の行動を周囲の人々の行動に合わせて決めるという心理的傾向があります。人々はさびれたレストランよりも、人気のレストランに行きたくなるものです。

周囲の人々の行動結果を表示することで、それがソーシャルプルーフになります。ソーシャルプルーフはコンバージョン率を高めるという研究結果があり、コンバージョンを高めたいボタンの近くに配置すると有効です。

ということで、トップページにソーシャルプルーフを追加してみました。「コワーキングに参加する(無料)」がユーザー登録画面へのリンクなので、コンバージョンのボタンと考えてもらえればと思います。

今回は、「数の説得力」と書籍に書かれていたタイプのソーシャルプルーフを追加しています。1日の利用者数、累計の利用者数、実際に利用された回数、現在の参加人数を追加してみました。

説得力と言えるほどの数値ではないので、逆に載せない方がいいかなとも思いましたが、誰もいないサービスと思われるよりはマシと思い載せています。この辺は効果検証が必要だと思います。

その他にも、以下の種類のソーシャルプルーフがあります。

  • 具体性・・・直近にそのサービスを利用した人物の名前
  • 他のユーザーからの意見、感想、推薦
  • 格付け
  • 公式なアワード、プレスの好意的なレビュー
  • ソーシャルメディア・・・シェアやいいねされた回数
  • 他のユーザー・・・利用顧客のロゴや名前

サインアップ時にユーザーを安心させるメッセージを追加

Googleアカウントで会員登録時に、安心して登録してもらえるようにメッセージを追加しました。

Googleアカウントの名前、プロフィール画像は一切使用いたしません。本名、顔写真を設定していても安心してお使いいただけます。

ソーシャルログインだと、そのサービスで不要な個人情報まで取得されているかもしれないと思うと、ちょっと嫌なんですよね。Sushi Workでは、Googleアカウントの名前やプロフィール画像は一切使わないので、それを明記しました。

エラーメッセージ修正

Before

よくありがちなエラーメッセージ。エラーなことは分かるけど、その後、何をすればいいかよく分かりません。

After

エラーが発生した後、どうすればいいかを明示しました。さらに、トーンもお寿司屋さんトーンにして和らげてみました。ページフッターのよくある質問に、エラー時の対処方法を詳しく書いています。

改善はしたと思いますが、文章が長すぎます。また、これは汎用エラーメッセージですが、エラーごとにもっと詳しいエラー原因を書いた方が親切です。伸び代があるので、さらに改善していきたいと思います。

書籍ではエラーメッセージの役割として以下の3つが挙げられています。

  1. 問題が発生した事実と、その問題の性質を、簡潔にわかりやすく説明する。
  2. 解決策を提示し、ユーザーがすぐに元に戻って操作を完了できるようにする。
  3. 操作の遅れを、できるだけ好ましい経験に変える。

こちらの記事を読むと、さらに理解が進むと思います。

https://www.kotobaux.com/blog/the-art-of-the-error-message

コンバージョンボタンの文言改善

ユーザーの行動を促すためのボタン(コンバージョンボタン)では、モチベーションを高めるライティングが役立ちます。

行動の方法ではなく、行動することの価値を伝えます。書籍に掲載されていた一例を挙げます。

こうではなく: 中古車の新しい購入方法
こう書きます: 次の車を買いましょう、この方法なら安心です
または: 中古車購入 - 面倒な手続きはゼロ、保証は万全

「"どうやって手に入れるか" ではなく "何を手に入れるか"」をボタンのラベルに使います。

Before

「アカウントを作成する」と書くと、あー、このサービスは使う前にアカウント作成が必要なのか、面倒だな、とユーザーの頭の中で想起されてしまいます。

After

そこで、このサービスの価値である「コワーキングに参加する」をボタンのラベルにすることで、価値を伝え、ユーザーのモチベーションをアップさせるボタンに改善しています。

また、コンバージョン率を高めるためには、ABテストが重要と、書籍で強調されています。

404ページの修正

Sushi Workは、ページ数も少ないので、404ページが表示されることはほとんどないですが、修正してみました。

Before

とりあえず404ページを作りましたよという状態。

After

脱出先であるトップページへのリンクを貼り、ちょっとしたユーモアを加えました。

書籍では、404ページに来て落胆しているユーザーに共感を示すメッセージを入れると良いと書いてありましたが、いい言葉が思い浮かばず、こうなっています。これも思いつき次第、改善したいところ。

また、404ページからの脱出方法を提供することが推奨されています。検索ボックスを設置したり、おすすめのカテゴリや記事のリンクなど、特に紹介したいページに移動できるようにしたりすることで脱出方法を案内できます。

終わりに

UXライティングの教科書」は具体例も豊富で、どう書いたらいいかが分かりやすく示されています。僕が実践してみた箇所以外にもたくさんの具体例があるので、興味を持った方は書籍を読んでみてください。

今後もどう文言を書こうか迷ったときは、この本を読み返したいと思います。

宣伝

  • 自宅で作業をしているが集中できない
  • ポモドーロテクニックを実践しているが、うまく活用できていない

そんな方はぜひ、みんなでポモドーロテクニックができるSushi Workを使ってみてください!

https://zenn.dev/imaginelab/articles/eb5b19db6f9b0b

Twitterより