プロダクトの土台を作るUXライティングルールを定義してみた
ごあいさつ
こんにちはWcat 「技工くん」プロダクトデザイナーのますぐです。
今回は『技工くん』のバリデーションエラーの文言について議論が上がり、毎回議論するのはいかがなものかという事で、UXライティングルールを策定したプロセスについて書きたいと思います。
なぜ定義することになったのか
デザイナーからエンジニアへデザインをパスするときに説明責任みたいなものが生じます。
『技工くん』のフォーム入力でのバリデーションエラーでのパターンがデザインで可視化されていないパターンがあった際に毎回議論に上がっていました。
例えば、「印刷」or「印刷する」or「印刷をする」など
どれが正なのか迷ってしまう…
すべてのパターンを可視化するのもよいですが、共通の理解があればデザインが可視化されていない場合でもうまく実装に入ることが出来ます。
プロダクトチーム内でルールが合った方がよいのではないかという結論に至り、だったらバリデーションエラーの文言だけでなくプロダクトとして全てのUXライティングルールの策定した方がボタンやリード文に対しても適用することができるためプロダクトとしてUXライティングルールを策定するということになり、デザイナーの主担当である私が手を挙げ担当することになりました。
UXライティングルールのメリット
私自身フリーランス時代に、ライティングやコピーを作成してクリエイティブ広告やLPを作成する事が多かったのでなんとなくイメージはしやすかったです。
UXライティングルールを策定する事で、色々とメリットがあるのでまとめました。
UXの向上
UXライティングルールはユーザーの体験を向上させるための基本的な要素で、明確て簡潔な文章やユーザーに適した表現はユーザーがサイトやアプリケーションを利用する際にストレスを軽減し、スムーズな操作に移行しやすくしてくれます。
コンバージョン率の向上
適切なCTA（コールトゥアクション）や誘導的な文言を使用する事で、特定のアクションに誘導するのに役立ちます。ルールに基づいた一貫性あるライティングは、ユーザーが求める情報に迅速かつ効果的にアクセスできるようになり、コンバージョン率を向上させます。
ブランドイメージの構築
UXライティングルールは、一貫性を保つことでブランドのメッセージやボイス＆トーンを統一する手段になり、統一感のあるライティングは、「技工くん」というプロダクトのプロフェッショナルで信頼性のある印象を与え、ブランドイメージの構築に寄与してくれます。
ミスや混乱の軽減
ルールに基づいたライティングは、誤解や混乱を軽減します。明確で統一されたコンテンツは、ユーザーが迷子になることなく目的地にたどり着けるようにサポートします。
開発プロセスの効率向上
UXライティングルールが策定されていると、開発プロセスがスムーズに進行しやすくなります。開発者やデザイナーが統一されたガイドラインに基づいて作業することで、コミュニケーションの円滑化と効率向上が期待できます。
ユーザーテストと改善のしやすさ
UXライティングルールに基づいてコンテンツを作成することで、ユーザーテストの結果を解釈しやすくなります。ルールに従ったコンテンツは、問題点の特定や改善の実施が迅速かつ効果的に行えるようになります。
前提として
基本的にはプロダクトがグロースしていく上でUXライティングルールもブラッシュアップを前提に定義していきますが、大前提の土台を定義してさらなる効率化、ブランドイメージの構築、ユーザーのサポートを第一の目的として策定していきました。
定義するために参考にする資料
プロダクトのUXライティングルールを策定することは初めてだったので、参考の調査をしていきました。
参考記事まとめ
またブランドイメージの構築、プロダクトの統一性を入れ込むため、
ロゴのトーンをUXライティングルールに落とし込むため参考にしました。
UXライティングルール
ルール 1: 短く明確なタイトルと見出し
ルール: すべての画面やセクションに明確で分かりやすいタイトルと見出しを使用します。
例：タイトル： "新しい注文を作成する” → ”注文の作成”
セクション見出し: "患者情報を入力してください"→"患者情報を入力"
ルール 2: アクション指示
ルール: ボタンやリンクのテキストは、ユーザーに次のステップや期待されるアクションを明示的に指示するものにします。
動詞と名刺の使い分けに関する基準
例：名詞ユーザーアクションには名詞（体言止め）を使う（例: "送信"）。
情報提供や説明には名詞を使う（例: "製品情報"）。
ユーザーに自由な選択肢を提供するときは名詞を使う
（例: "言語選択"）。
例：動詞アクションの結果や選択肢に関する情報は動詞で説明
（例: "コピーを作成しました"）。
⚠️ 原則1,2だが、
・指示書一覧画面の「製作を依頼する」ボタン
・技工所一覧画面の「製作を依頼する」ボタン
・技工所選択画面の「製作を依頼する」ボタン は例外とする
技工くんは製作依頼を起点に様々な機能が連動してバリューを提供するサービスです。 つまり、製作依頼（受発注）はサービスの大動脈であり、生命線であるという認識です。 製作依頼なしにこのサービスは存続できません。 以上を踏まえて、敢えてこの部分のみ例外としてアクションを促す強めのワーディングとします。
ルール 3: エラーメッセージ
ルール: エラーメッセージは具体的でユーザーフレンドリーなものにします。
問題の原因と解決策を提供し、ユーザーが迷わず対処できるようにします。
例：エラーメッセージ：”予約日を選択してください”
ルール 4: ヒントと説明
ルール: フォームや入力フィールドの隣に適切なヒントや説明を提供し、サポートします。
例：フォームラベル："患者の氏名"
エラーメッセージ： "患者のフルネームを入力してください。"
ルール ５: ユーザーフィードバック
ルール: フィードバックフォームやお問い合わせページを提供し、ユーザーからの意見や問題を積極的に収集します。
例：フィードバックボタン: "ご意見やご質問がありますか？"
お問い合わせフォーム: ユーザーに氏名、メールアドレス、質問内容など
を入力させるフォーム。
ルール 6: ユーザーへの敬称
ルール：{ユーザー名} さまを付ける
様
さま ←⭕️
さん
例：2023年10月02日 15時21分に 山田太郎 さまにより既に依頼済みです。
ホワイト歯科医院 山田太郎 さま
ルール ７: 日時表記
ルール：日時の表記を統一する
2023年10月02日 15時21分
2023/10/02 15時21分
2023/10/02 15:21 ←⭕
例：セット日 2023/01/25 15:00予定ですが変更の可能性があります
納期日時 2023/01/25 14:00希望ですがご相談ください
ルール ８: 漢字をひらく
ルール：シンプルな表現。できるだけシンプルな漢字表現を選び、ユーザーにわかりやすい言葉を使う。
例：※右の歯車アイコンよりメニューを作成できます
バーコード読み取りを利用される組織はこちらをオンにしてください
ロゴのトーンを参考にした部分
ルール６：ユーザーへの敬称
ルール８：漢字をひらく
「様」と「さま」が混在していたが、「技工太郎 様」だと堅苦しくなりすぎてしまい、柔らかい表現を入れ込みたい。
また「〜して下さい」ではなく、「〜してください」にした理由はユーザーに負荷が掛かり、出来るだけシンプルな表現をして負荷を下げたいと考えた為このルールを定義。
ライティングルールを定義していざ運用していくと、現状の実装環境のラベリングや体験に違和感を感じていくと思います。
その時はルールを再定義していくかそのままなのかを議論するタイミングになるかという時期なので掘り下げて議論を進めていくとよりよいルールになっていくかなと感じました。
これからもブラッシュアップしていくことは前提ですが、UXライティングルールを策定する第一歩としてご参考になれば幸いです。
最後まで読んでいただきありがとうございます。