MicrotextおよびUX通信
1)マイクロテキストが何で、なぜ必要なのか
Microcopy-インターフェイス内の短いコンテキストフレーズ:フィールドキャプション、プロンプト、ロード状態、エラー、確認、CTAボタン、空の画面など。彼らの仕事は、不確実性を取り除き、行動をスピードアップし、認知負荷を減らすことです。よいmicrotext:- 「今起こっていること」と「次に何をすべきか」を説明します。
- エラーとサポートを削減
- 変換と信頼を高めます。
2)基本原則
1.Clarity> wit。 No曖昧さやスラング。
2.コンテクストチュアリティ。今ここで役に立つものを正確に書いています。
3.素晴らしさ。意味を犠牲にすることなく、不要な言葉を削除します。
4.アクティブな音声とアクション動詞。保存、続行、ドキュメントの送信。
5.詳細とランドマーク。何、なぜ、どのように修正するには、どのくらいの時間がかかります。
6.用語のシーケンス。1つの用語は、製品全体で1つの意味です。
7.ブランドの声と状況のトーン。フレンドリーですが、親しみがありません。ストレスの多いステップで-中立と穏やか。
8.アクセシビリティ。明確な言語、大声で読解可能性、スクリーンリーダーとの互換性。
9.ローカリゼーションファースト。文字列の長さ、数字、時間のトークンを設計します。文化的に敏感なジョークを避けること。
10.倫理と責任。条件の透明性、正直な期待、操作はありません。
3)マイクロテキストポイントマップ
ナビゲーションとCTA:アイテム名、ボタン、無効状態。
フォームとCCM/登録:ラベル、プレースホルダ、マスク、プロンプト、インライン検証、エラー、確認。
空の状態と「ゼロ」画面:それが何であり、どのように開始するか。
ステータスと進行状況:ダウンロード、キュー、ステップ、待ち時間。
システム通知:トースト、バナー、フラフ、電子メール/受信トレイ。
検索とフィルタ:サンプルクエリ、ゼロ結果、ソート。
支払い/結論:データ要件、期限、手数料、制限。
設定とセキュリティ:パスワード、2FA、セッション、リスクアラート。
インターフェイスのヘルプ:ヒント、ツールチップ、FAQの挿入、ヘルプへのリンク。
4)キーゾーンパターン(例)
4.1 CTAとアクション名
原理:button=user action+object。
前: OK→後:変更を保存
前: 「詳細を見る」→後:「ボーナスルールを読む」
Before: 「Send'→」After: 「Send document」
良い:簡単に、具体的には、場所で。悪い:抽象的、冗談、あいまい。
4.2ラベルとプレースホルダ
ラベルは必須です;プレースホルダはフォーマットの例です。
Before:ラベルなしのプレースホルダー「Ivan Ivanov」→After:ラベル「FULL NAME」、プレースホルダー「Ivan Іvanov」。
期待をフォーマット: "DD。MM。 YYYY"、 "Min。 8文字、1桁"
4.3インライン検証とエラー
エラーメッセージ式:何が間違っているのか+修正方法+(why/constraint)。
前: "Error 400"→After:"無効な日付形式。DDを使用します。MM。 YYYY"
前:"読み込みに失敗しました"→"後:ファイルが大きすぎます(最大10 MB)。より小さなファイルを選択してください。
開いたりロックしたりするには:[要件を表示]リンクを横に追加します。
4.4空の状態
目的:価値を説明し、行動を提案する。
テンプレート: "[アクション]を実行するとすぐに[結果/ストーリー]が表示されます。[Step Button]
例: "保存された支払い方法はまだありません。カードを追加する-これは支払いをスピードアップします。[マップを追加]"
4.5ダウンロード、進行状況、待っている
何が起こっているのか、どのくらいの時間がかかるのかを報告してください。
別のオファー: 「ウィンドウを閉じることができます-すべてが準備ができたら通知します。」
4.6検索結果ゼロ
例: 「Nothing found for「ライブブラックジャック。「blackjack」を試すか「、Provider: X」フィルタを削除します。[フィルターをリセット]"
4.7通知(トースト/バナー/プーチ)
成功: 「アプリケーションが終了しました。私たちは、電子メールで決定についてお知らせします。」
情報: 「制限を増やすためにアドレスの検証が必要です。」
注意: "セッションは1分で終了します。更新しますか?[更新][終了]"
エラー:"支払いは銀行によって拒否されました。別の方法を試してみるか、銀行に連絡してください。
4.8支払い、制限、締め切り
手数料/用語について明確に書く: "1の手数料。5%はプロバイダによって保持されます"、"支払い-最大15分"
失敗の理由を説明してください:"この方法は、プロバイダのルールのためにあなたの地域では利用できません。
4.9安全性と敏感なステップ
ニュートラルトーン、ゼロジョーク。
例:"新しいデバイスからの入り口に気づきました。それはあなたですか?[はい、それは私です][いいえ]。
5)調子および様式: 状態に調節すること
正常な流れ:友好的、簡潔。
学習/オンボーディング:サポートとやる気。
ストレス/エラー/支払い:中立、穏やか、特定。
法的/条件:正式に透明、マーケティングの約束なし。
- 私達は使用します:「please」、 「ready」、「心配しないで」、「check」。
- 私たちは避けます:"oh"、 "oops'、" hack"、"magic"、sarcasm、 diminative。
6)ローカリゼーションと国際化
線長マージン(DE/UKより長い)を設定します。
数字/通貨/日付-ローカル形式。
ユーモア/メタファーで意味を暗号化しないでください。
用語とトーンマップの用語集を言語で保存します(各状況のサンプルフレーズのセット)。
7)空室状況(A11y)
エラーと重要なステータス-aria-live。
WCAGレベルでのコントラストと可読性。
意味は/aria-labelラベルにあり、プレースホルダだけではありません。
アイコンのテキスト同等:「削除」「、パスワードを非表示」。
タブの順序=意味の順序。
8)内容プロセスおよび設計システム
コンテンツパイプライン:brief→draft→UX review→legal/compliance(必要に応じて)→localization→tests→release。
設計システムのマイクロコピー部品:- 状態ライブラリ(成功/情報/注意/エラー)
- フィールドタイプ別のエラーパターン
- CTA名によるガイド;
- トーンマップと用語集;
- 長さの「ディスペンサー」(状態の最大文字)。
- テキストのバージョン管理:コード/コンポーネントの横に行を保存し、キーと説明を使用します。
9)メトリクスと実験
主な指標:ステップ変換、CTA CTR、完了までの時間、タイプ固有のエラー率、スクリプトのNPS/CSAT、トピックに関するサポート呼び出しの頻度。
研究:UXインタビュー、ユーザビリティテスト、読み上げ、ブラインドスポット検出のためのアイトラッキング、空の状態クリックマップ分析。
Microcopy A/Bテスト:1つの意味因子を一度にテストします(動作動詞、用語特異性、誤差定式)。
10)アンチパターン
重要なステップでユーモア(「upsik!」支払いエラーの場合)。
アクションオブジェクトなしの抽象CTA (「OK」、 「Next」)。
翻訳なしのテクニカルコード(「サービスは利用できません」の代わりに「エラー500」)。
ラベルの代わりにプレースホルダ。
隠された条件と理不尽な期待(遅延があるときに「即座に」)。
次のステップなしで空の状態「ゼロ」。
受動的担保と非人格的な構造(「満たされなければならない」)。
11)フレーズパターン(取られ、挿入することができます)
フォームエラー:- 「+380の形式で電話番号を入力してください……」
- "パスワードが短すぎます。最低8文字"
- "文書はぼやけています。よりクリアな写真をアップロードする"
- "完了しました!書類の確認(2分まで)と通知を送信します"
- "支払いは受け付けています。領収書は電子メールで送信されました"
- "最初の補充後の取引履歴がここに表示されます。[詰め替え]"
- "私たちはプロバイダを接続します……それは通常30秒までかかります"
- "私たちは、慣れない場所から入る試みをブロックしました。これがあなたなら-アプリケーションで確認してください"
12)チェックリスト
マイクロテキストをリリースする前に:- ユーザーが次に何をすべきかは明らかですか?
- フォーマット、制限、用語、原因/効果などの詳細はありますか?
- 用語は用語集と一致していますか?
- 調子は状況に適していますか?
- メッセージは320 px画面で大声で読み取ることができますか?
- 可用性:ラベル、アリア属性、フォーカス、コントラスト。
- オプションはローカライズ(文化トラップなし)の準備ができていますか?
- メッセージは理由を説明していますか?
- 修正を示唆していますか?
- ユーザーを非難しませんか?
- 不要な技術的詳細が明らかにされていませんか?
13)例の前後
1.支払いが拒否されました
宛先: 「支払いエラー」
後: "支払いは銀行によって拒否されました。別のカードを試してみるか、銀行に連絡してください。料金は請求されていません"
2.あいまいなボタン
前: 「続行」(正確には不明)
After: 「身分証明書に行く」
3.ゼロサーチ
前: 「何も見つかりませんでした」
後: "ルーレットのライブでは何も見つかりませんでした。「「High-limit only」フィルタを削除するか「、ルーレットを試してみてください。「[フィルタのリセット]」
4.空のウォレット
前: 「ここは空です」
後: "開始するには、カードや財布をリンクします。これは補充と支払いをスピードアップします。[支払方法の追加]"
14)プロダクト仕事のマイクロコピーを埋め込むこと
デザインとロジックと同時にテキストを計画します。
「row bank」をリポジトリとデザインシステムに保管します。
スクリーンのコピーのテキストのテストの段階を置いて下さい。
文書の決定:処方が選ばれる理由、どの仮説がテストされるか。
ショートチートシート
意味→アクション→Word。最初に何をすべきか、そしてそれをどのように言うべきか。
1つの画面は1つの目標です。Microtextはステップの目的を果たします。
より多くのコンテキスト-より少ないサポート。時間とケースについて説明してください。
UIと同じように単語をテストします。テキストはインターフェイスの一部であり、装飾ではありません。