みんなでUXライティングを改善してみた

UXライティングの勉強会を開いてみたら、思ったより楽しくプロダクトを改善することができました。改善した内容の共有と勉強会のふりかえりを兼ねて、UXライティングの重要さとコラボレーションして学ぶことの楽しさをシェアしたいと思います🥳

この記事は勉強会に参加したNulab Appsエンジニア、Typetalk PdM、Cacooエンジニア、Cacooテクニカルサポート、カスタマーサポートのみなさんとの共同執筆です🙌

UXライティング / マイクロコピーとは

書籍「UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方」から引用すると以下のように書いてありました。

ユーザーインターフェースに付与するちょっとした言葉や短文のこと。これはユーザーが起こす行動に直接影響を与える。
・行動を起こす前にモチベーションを向上させる
・行動に伴って指示させる
・行動の後にフィードバックを返す

僕はUXライターではなく開発者なのですが、日頃から開発におけるライティングの難しさは体感していました。開発をしていくうえでアプリの状態に応じて文章を付け足したくなる場面があるからです。例えばエラーメッセージなどです。

勉強会の始まり

勉強会が開かれたきっかけは、なにげないTypetalk上のやりとりでした。 チームメンバーが「UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方」という本の発売を楽しみにしていると呟いていて、興味をもった僕は読書会を提案してみました。

Typetalk上でのUXライティングについてのやりとりTypetalk上でのUXライティングについてのやりとり

あまり何も考えずに気軽な感じで声をかけましたが、その結果、上に挙げたように12人の方が集まってくれました。しかも普段は接点が少ないチームの方も含めて5チームの方々です!!週に1回ワイワイガヤガヤ読書会をすることになりました!!

それからは毎週楽しかったです!

1章づつ読み進め、Cacooに各々が思う「本の感想・学んだこと」と「プロダクトの改善アイデア」を書き込み、意見交換をしたのですが、毎週そこに面白い学びと実践的なアイデアが溜まっていきました👍👍

cacooでの勉強会風景Cacooでのアイデア出し

プロダクトの改善へ

そして、すべての章を読み終えたころ、自然とこんな声があがりました。

「せっかくならプロダクトを改善してみましょう!」

当初Typetalkで呟いたときは予定していませんでしたが、いろんなチームのみんなで改善できるのは楽しそうと思ってだんだんとワクワクが盛り上がっていきました。

会のメンバーにはカスタマーサポートチームの方がいたので、お客様からお問い合わせをいただくなかでプロダクトのわかりにくいところがどこにあるかを具体的にシェアしてもらいながらみんなで改善案を考えました。

今回は、以前から問合せの多かった契約者情報の入力フォームを題材に改善を実施しました。

改善前

まずbeforeです。

契約者フォーム改善前契約者情報入力フォームのBefore

このフォームだとこんな課題がありました。

  1. どんなフォーマットで入力するべきか迷う
  2. 郵便番号を入れると住所が補完されることがわからない
  3. 住所に何をどこまでいれればいいのかわからない
  4. 法人の代表者名とはなにかわからない

改善後

4点の課題に対して、それぞれ以下のように改善を行ってみました。

契約者情報入力フォームのAfter契約者情報フォームのAfter


1. どんなフォーマットで入力するべきか迷う

入力項目に例を追加してユーザーがフォーマットに悩まないようにしました。
このとき、プレースホルダーは使わないようにしています。プレースホルダーはユーザーが入力を始めると見えなくなってしまうため、ユーザーにとって必要な時に情報が与えられない可能性があるからです。

どんなフォーマットで入力するべきか迷う

2. 郵便番号を入れると住所が補完されることがわからない

郵便番号欄を左端に配置して最初に入力してもらいやすくしました。
実は郵便番号から住所を補完する機能があるのですが、先に郵便番号を入力してもらうことでよりスムーズに入力してもらえるようになりました。

郵便番号を入れると住所が補完されることがわからない

3. 住所に何をどこまでいれればいいのかわからない

ラベル名の統一や具体化で入力項目をわかりやすくしました。また、①と同じく入力項目例の追加もしています。

住所に何をどこまでいれればいいのかわからない

4. 法人の代表者名とはなにかわからない

法人の代表者名に説明を追加しました。どうしても説明に必要な文章が長くなってしまうため、ツールチップの中に文章をいれるようにすることでデザインを崩さずに必要なユーザーに情報を補足できるようにしました。

 法人の代表者名とはなにかわからない

さいごに

実際に改善をしてみて、ふりかえりも行いました!そこで出た声を少し紹介したいと思います!

  • 本をみんなで読んで効率よく学べた
  • 学びを活かしてプロダクトを改善できた
  • もらったデザインに対してマイクロコピーを入れられた。普段の業務に活かせた。
  • エラーメッセージ改善、Empty Stateを実践した
  • デザインを見るときの観点が増えた
  • 他のチーム、サービスに展開したい
  • プロダクト横断でトーンを合わせられるともっとよくなりそう

楽しく改善活動ができてよかったという声と、今後は社内の他のチームやサービスにもUXライティングの重要性を広めていきたいという声が多く聞こえてきました!

僕的には会として属人的な作業がなく、個々人の時間が拘束されなかった点がよかったかなと思いました。毎週の限られた時間の中でモブ作業できたので持続的でした😊

UXライティング勉強会のみなさんみなさんありがとうございました

なにげないTypetalkのつぶやきからはじまった今回の改善ですが、Nuice WaysにもあるTry firstを大事にするあたたかい雰囲気の中で楽しく活動でき、Nulabのブランドメッセージである「このチームで一緒に仕事ができてよかった」を体感しました!!また楽しくみなさんとコラボレーションできたらいいなと思っています:nuice:

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる