ユーザー インターフェースのコンテンツ作成に関する推奨事項

この Power Platform Well-Architected エクスペリエンスの最適化チェックリストの推奨事項に適用されます:

XO:09 コンテンツは理解しやすく、明確な指示を提供する必要があります。 タスクの完了を容易にする、親しみやすく、一貫性のある、プロフェッショナルな表現を使用します。

このガイドでは、ユーザー エクスペリエンスに合わせた効果的なコンテンツを作成するための推奨事項について説明します。 コンテンツはユーザー インターフェイスにおける主要なコミュニケーション モードとして機能し、視覚的な要素だけよりも複雑なアイデアを伝える力を持っています。 アプリケーションで使用する語句は、プロセスを通してガイドする場合でも、重要なシステム情報を共有する場合でも、ユーザーがアプリケーションをどのようにナビゲートし、認識するかに影響を与えます。

主要な設計戦略

ユーザー インターフェイス (UI) 設計の一部であるコンテンツの作成は、技術であると同時に科学でもあります。 これらのコピーライティングのベスト プラクティスとビジュアル デザインのベストプラクティスを組み合わせると、ユーザーエクスペリエンスが向上します。

コンテンツを読み取りやすくする

ビジネス アプリケーションを使用する場合、ユーザーは UI の機能に関心がなく、華やかな言葉で楽しんでいるわけでもありません。 タスクの完了に重点を置いています。 短くて読み取りやすいブロックで記述してください。 テキストを短い文と段落に分割します。 過度に大げさな表現は避けてください。 ユーザーは特定の目的を念頭に置いて UI にアクセスすることが多く、コンテンツはそれらの目的の達成に向けてユーザーをシームレスに導く必要があります。

簡潔に。 コンテンツは簡潔で要点を押さえたものである必要があります。 簡潔とは制限を意味するのではなく、効率的であることを意味します。 意味を保ちながら、できるだけ少ない単語を使用します。 コンテンツのすべての単語が目的を果たしていることを確認します。 必要な情報だけを適切なタイミングで提供します。 コンテンツが多すぎると読まれる可能性が低くなります。 Mark Twain のアドバイスに従ってください: 「書くことは簡単です。 間違った単語を消すだけでいいのです。」

最も重要な情報、つまり価値提案から始めます。 スペースが許せば、重要な順に詳細を記載した簡潔な段落を 1 つか 2 つ追加します。 さらに説明が必要な場合は、「続きを読む」リンクを使用します。 場合によっては、最初にメッセージの本文を書いてから見出しを書く方が簡単な場合があります。

可能な限り具体的な動詞を使用します。 一般的な動詞よりも、具体的な動詞の方が人々にとって意味があります。 「取得」、「更新」、「選択」、「変更」などの特定の単語を使用することで、ユーザーが利用可能なオプションや必要なアクションをすぐに理解できるようにします。複数の意味を持つ単語を排除することで、混乱を避け、曖昧さを減らすことができます。

状況に応じた、タスクに重点を置いた内容にする

ユーザーに必要なことを伝えます。 コンテンツは、ユーザーがタスクを完了したり、UI 内で情報に基づいた決定を下したりするために必要な重要な情報を提供する必要があります。 ユーザーはコンテンツに依存して対話をガイドし、ニーズを満たす明確で関連性のある情報を期待します。 コンテンツは決して混乱やフラストレーションを引き起こすものであってはなりません。

小さなチャンクは自然な流れを生み出します。 ユーザー、実行されるアクション、次に期待できるかものに焦点を当てます。 フラストレーションや認知的な負荷を避けるために、無関係な情報や当面のタスクから気を散らす情報は含めないでください。

アクションや機能よりもメリットを優先します。 このアプローチでは、メリットを最初に説明することで、ユーザーがタスクを迅速に完了する能力が向上します。 アクションを完了すると、どのようなポジティブな結果がもたらされるでしょうか? アクションを起こすよう指示する前にメリットを説明し、理由を説明する前にアクションを求めることは避けてください。

タスク レベルのコンテンツでは、妨げになるような方法で企業ブランドを強調することに注力しないでください。 例えば、「Microsoft Connector シャトル サービスは、2:15 PM にキャンパスの場所に到着します」ではなく、「シャトルは 2:15 PM に到着します」を選択します。

わかりやすい言葉で話す

不必要な専門用語や技術用語を使わず、対象ユーザーが理解しやすいシンプルで明確な言葉を使用します。 ユーザーはコンテンツを難なく理解でき、混乱や誤解の可能性を減らし、最終的にエンゲージメントを向上できる必要があります。 読解レベルは 10 年生以下に維持します。 適切な読解レベルを維持することで、アクセシビリティと包括性を高め、より幅広いユーザーに対応します。

25 単語以下の文を含めます。 文章は短く簡潔にする必要があります。 情報量の多い短い文章は理解を促進し、内容が読みやすく理解しやすくなります。

専門用語や頭字語は避けます。 ほとんどのソフトウェア エンジニアでさえ、シンプルで技術的でない言語を好みます。 エラー メッセージでは専門用語を避けることが特に重要です。 また、一般的なフレーズの多くは口語表現であり、すべての人にとって意味があるとは限らないことを覚えておくことも重要です。

過度に専門的な単語をより簡単な単語に置き換えます。 「構成」、「アクティブ化」、「無効」などの単語は、不必要に専門的です。 シンプルにします。 ユーザーがよく知っている頭字語のみを使用します。 各ページで最初に言及される頭字語を省略せず綴り、括弧付きの参照を含めます。 たとえば、「行動喚起 (CTA)」です。頭字語を省略せず綴ったバージョンが文字数制限を超える場合は、その語句を囲んで記述することを検討してください。

二重否定は避けます。 二重否定は認知的な負荷を高め、メッセージを解読するのに余分な時間を費やすことになります。 直接的でポジティブなアクションに焦点を当てます。

丁寧でフレンドリーなトーンを使用する

礼儀正しく、しかし過度に取り入ることのないようにします。 ユーザーはプロンプトを表示され、行動することを期待しています。UI 全体で「お願いします」を使用する必要はありません。 「お願いします」や「申し訳ありません」などの言葉は慎重に使用し、負担の大きいタスク、自分のミスによるタスク、または深刻な結果をもたらすタスクにのみ使用します。 ただし、UI コンテンツにおいて失礼で、厚かましく、傲慢で、または冷笑的であることは決して良い習慣ではありません。

ユーザーに直接話しかけるかのように記述します。 二人称では代名詞「あなた」をよく使います。ユーザーに焦点を当てることでフレンドリーなトーンをサポートし、受動態を避けるのに役立ちます。 代名詞と付随する助動詞を省略し、文を動詞から始めます。 繰り返しになりますが、「あなた」または「あなたの」を使用してつながりを作ることに焦点を当てます。

認知的な負荷を軽減するために、一人称の所有格 (「私のダッシュボード」) と二人称の言語を混在させないでください。

製品またはアプリケーションがユーザーに対応する場合は、「当社」または組織の名前を使用します。 誰が発言または行動しているのかを明確にして、混乱を避けます。 たとえば、「私はこれらの結果を見つけました」ではなく、「当社はこれらの結果を見つけました」を使用します。「当社」を使用すると、UI がより人間らしく感じられ、システム エラーに対する責任を示すことができ、すべてのステップでユーザーの重要性が強調されます。 ただし、ユーザーのニーズから逸れる可能性があるため、「当社」を使いすぎることは避けてください。 ユーザーに焦点を当て続けるために、「当社」はシステム エラー、ステータスの更新、およびその他のシステム関連の問題のために取っておきます。

"it's"、"you're"、"that's"、"don't" などの一般的な短縮表現を使用して、フレンドリーでカジュアルなトーンを作り出します。 会社名を所有格で使用しないでください。また、短縮形での使用も避けてください。 "there'd" や "what're" などのあいまいな短縮形は避けてください。UI 内で短縮形や省略せず綴った単語を混在させないでください。不整合が生じ、信頼性が低下します。 一般的な短縮形の代わりに省略せず綴った単語を使用すると、不必要な形式が生じます。

スタイルの一貫性を保つ

エクスペリエンス全体で特定のアクションを指す場合は、一貫して 1 つの単語またはフレーズを使用します。 たとえば、インターフェイスのある領域で予約を確保するプロセスを「予約」と呼ぶ場合、他の領域で「計画」や「スケジュール」と呼ばないでください。 一貫性を保つために、組織全体での単語の使用状況を確認してください。 チームが参照できるスタイル ガイドの合意された用語のリストを作成します。

適切な大文字を使用します。 たとえば、UI 全体でセンテンス ケースを使用して、文の最初の単語のみを大文字にし、固有名詞 (人、場所、一部の製品の名前) は常に大文字にすることに同意します。 小見出し、ボタン、ハイパーリンクには、句読点を使用せずにセンテンス ケースを使用します。 疑わしい場合は、大文字にしないでください。 役職名 (最高財務責任者)、組織名や部署 (人事)、ブランド製品やプログラム、人名と場所の名前には、タイトル ケースを使用します。 いかなる状況においても、すべて大文字は推奨されません。 テキストを強調する必要がある場合は、すべて大文字にする代わりに、サイズ、フォントの太さ、色などのさまざまなタイポグラフィ スタイルを使用することを検討してください。

正しい構文を優先する

アプリケーションに対する人々の反応や感じ方は、文章の質や全体的な態やトーンにある程度左右されます。 一般に、文章を書く場合、文 (または構文) には 4 つのタイプがあります。 通常、UI コンテンツは、コンテンツの目的と製品の性質に応じて、4 つのうち 3 つを使用します。

  • 通常は 宣言 文を使用します。 コンポーネントの機能の説明は、宣言文を使用する場合の例です。
  • 命令形 を自由に使用してください。 これらはプロンプトとコマンドです。 たとえば、ユーザーに変更を確認してから送信するように要求します。
  • 疑問 文には注意してください。 これらは質問です。 ユーザーが選択を行う必要がある製品フローでは許容されます。 ソリューションを見つけたり、ユーザーのニーズを明確にしたりするのに役立ちます。
  • 感嘆 文は、使いすぎるとポジティブな影響が薄れてしまうので、控えめに使用してください。

能動態を使用する場合を把握する

能動態では、主語は文の動作を行います。 例えば、「いくつかの文字を入力してください」は、ユーザーにアクションを実行するための単純かつ直接的な要求です。

受動態では、主語は動作を (実行するのではなく) 受け取ります。 動作動詞の過去分詞は、何らかの形の動詞 "to be" ("has been"、"will be") に続きます。 受動態は動作主体を曖昧にしたり省略したりするため、文章が直接的でなくなり、場合によっては曖昧になります。 たとえば、「数文字入力してください」という文は明確さと正確さに欠けます。

能動態と受動態の例

アクティブです 中立者
「[送信] ボタンをクリックして変更を保存します。」 「変更内容は、[送信] ボタンがクリックされると保存されます。」
「メールアドレスを入力して更新プログラムを受け取ります。」 「更新プログラムは、メールアドレスが入力されると届きます。」
「ドロップダウン メニューから優先する言語を選択します。」 「優先する言語がドロップダウン メニューから選択できます。」
「フォームに連絡先情報を記入します。」 「フォームには連絡先情報を記入する必要があります。」
「手続きを進める前に、契約条件を確認します。」 「契約条件は、手続きを進める前に確認する必要があります。」
「画像をクリックするとフル サイズで表示できます。」 「画像はクリックすることでフル サイズで表示することができます。」

これらの各例では、能動態が、取るべきアクションを指定することにより、ユーザー (主語) に明確な指示を示します。 この明確さは、より適切な方向性を与えるため、ユーザーが何を行う必要があるかをより効率的に理解するのに役立ちます。 受動態の例では動作主体が示されていないため、主語に対して誰が動作を行う必要があるのかは不明です。 ユーザーは、いつ行動を起こす必要があるかを認識する必要があります。

受動態は、メッセージを和らげたり、エラーが発生した場合などに直接的になりすぎないようにするために使用できます。 例えば、非難や責任の所在を明らかにするのではなく、起こったことに関する情報を伝えることに重点が置かれている場合などです。 誰が悪いかにかかわらず、失敗はイライラするものです。 決して非難をほのめかしたり、ユーザーを非難しないでください。

アクティブです 中立者
「パスワードを正しく入力していません。」 「パスワードが正しく入力されませんでした。」
「ファイルを見つけることができませんでした。」 「ファイルが見つかりませんでした。」
「フォームを送信しました。」 「フォームは送信されました。」
「要求の処理中にエラーを検出しました。」 「要求の処理中にエラーが発生しました。」
「変更を保存しました。」 「変更が保存されました。」

ベスト プラクティスと標準については、能動態を使用してください。 ただし、一般的なガイドライン (特に、回避すべき事項やをエラー メッセージを示す場合) には、受動態を使用します。

支援技術に必要なコンテンツに注意する

アクセシビリティには、障碍のあるユーザーを含むすべてのユーザーが、コンテンツを認識し、操作可能で、理解できるようにすることが含まれます。 画像の説明的な代替 (alt) テキストなどの機能により、支援技術に依存するユーザーが UI コンテンツにアクセスし、簡単に理解できるようになります。 alt テキストは、画像とともに使用され、スクリーン リーダーにテキストの説明を提供するのが一般的ですが、Webページ上のテキスト以外の要素にも使用できます。 例えば、ビデオ、音声ファイル、チャート、グラフ、ボタンやアイコンなどの対話型コンポーネントなどです。

alt テキストを作成するときは、コンテンツの目的と内容を伝える簡潔で説明的なテキストを使用します。 明確で、情報を提供する、画像のコンテキストに関連している必要があります。 過度に専門的な言葉や不必要な詳細は避けてください。 画像に関する主観的な解釈を避けながら、主要なオブジェクト、アクション、視覚要素などの重要な情報を伝えることに重点を置きます。 スクリーン リーダーが効率的に読み取れるように、簡潔にしてください。 alt テキストの最大長の標準的な推奨値は通常 125 文字前後であることに注意してください。 中立的なトーンで書き、内容が文法的に正しいことを確認してください。

国際的なユーザー向けに作成する

世界中で使用されるアプリケーションのコンテンツを作成する場合は、文化の多様性と感受性に配慮して、さまざまなバックグラウンドを持つユーザーの包括性と関連性を確保します。 グローバルなユーザーが簡単に理解できる、文化的に中立な表現を使用します。 口語表現、スラング、または文化特有の言及は避けてください。 これにより、異なる地域や言語背景を持つユーザーを誤って排除したり、不快にさせたりすることはありません。 ユーザー エンゲージメントと理解を高めるために、各対象ユーザーの言語と地域言語の設定に合わせて翻訳されたインターフェースのローカライズ バージョンを提供します。

国際的なユーザー向けにコンテンツを設計するときは、文化的規範、価値観、優先傾向を理解します。 文化が異なれば、コミュニケーション スタイル、マナー、社会的規範が異なり、ユーザーの行動や期待に影響を与えます。 ユーザーの心に響くインターフェースを作成するには、色の象徴性、図像、各文化に固有のコンテンツの表示形式などの要素を考慮する必要があります。 さまざまな文化的背景を持つユーザーにとって意味のあるアイコンや画像などの視覚要素を選択します。 ある記号は普遍的な意味を持つかもしれませんが、他の記号は文化的規範や信念によって解釈が大きく異なる場合があります。 設計およびローカライズのプロセス中に現地の専門家と協力したり、ユーザー テストを実施したりすることで、貴重な分析情報を得ることができ、インターフェイスが対象ユーザーの文化的ニュアンスや好みを反映していることを確認できます。

エクスペリエンスの最適化のチェックリスト

完全な推奨事項セットを参照してください。