ユーザー エクスペリエンスに関する一般的なガイドライン

はじめに

最初のアプリケーションの設計を開始したばかりで、デザイン エクスペリエンスがまだない場合は、アプリの設計方法に関するヘルプとガイダンスが必要になる場合があります。このページでは、アプリの構築に使用できる実用的な情報を提供します。

サンプル ファイル

デザインで使用できる要素を含む定義済みのサンプル ファイルをダウンロードして、便利で使いやすいユーザー フレンドリーな Web アプリケーションを作成できます。Apps Studio でサンプル ファイルを開き、デザインに必要な要素をコピー アンド ペーストします。

最初のデザインを開始する

最初のアプリケーションを構築する前に、作業の計画を立てておくことをお勧めします。まず、以下のことについて考えてみます。

• アプリケーションのコンテキストは何ですか?
• ユーザーは誰ですか?ユーザーの目標、職業、または専門は何ですか?
• 典型的な状況、または最も頻繁に発生するケースは何ですか?
• アプリケーションの成功度をどのように測定しますか。
• アプリケーションに期待されるプラスの効果は何ですか?

プランを作成したら、仲間と簡単にレビューして何らかの変更を加えることもできます。その後、次の手順へと支障なく進むことができます。

1. 低頻度のシナリオとエッジ ケースを分析して、他のケースを評価します。それらを書き留めて、優先順位を付けます。
2. 最適な結果を達成するための最適なメディアまたは形式を定義します。この手順では、ページ、Web サイト、または 1 つのページから開始するいくつかのウィザードが必要かどうかを、もう決めることができます。
3. 競合他社の製品を調査し、特定して、それらの長所と短所を評価します。類似の問題へのアプローチ方法を評価します。
4. アプリケーションの大まかなプロトタイプを作成します。同僚とプロトタイプについて検討することで、最適なソリューションに到達することができます。
5. プロトタイプをテストし、フィードバックを収集します。より的確なフィードバックと改善策を得るために、プロトタイプを潜在的なユーザーと共有することをお勧めします。
6. アプリケーションの最終バージョンの設計を開始します。

デザインの原則

使いやすいユーザー フレンドリーなアプリケーションを作成するには、多くの設計原則に従う必要があります。最適なユーザー エクスペリエンスを実現するためには、少なくとも以下の 2 つの原則に従ってください。

一貫性

• 可能なかぎり同じフォントとレイアウトを使用します。
• ユーザー エクスペリエンスを向上させるために、アプリケーションのページ全体でデザインの一貫性が保たれるようにします。

シンプルさ

• ジョブの実行に必要な要素のみを使用します。
• デザインには必要以上の要素が含まれないようにしてください。
• すべてを明確にし、ユーザーが検索する必要がある重要な情報を見逃さないようにします。

色

色の使用は、アプリケーションのデザインを作成する上で非常に重要です。最適なユーザー エクスペリエンスを実現するためには、以下のガイドラインに従ってください。

• 同じ種類の要素については、アプリケーション全体で一貫して同じ色分けを使用します。
• 必要な場合以外は、交通信号機の色は使用しないようにします。エラーには赤、警告には黄色またはオレンジを使用し、進捗が順調であることを伝えるには緑を使用することができます。

• 色分けのみで情報を表そうとしないでください。色の付いたオブジェクトの横に、テキスト形式の情報を必ず追加してください。

ヒント:

コンテンツと背景のコントラストが十分に高くなるような、最大のコントラストを実現する色を見つけます。そうすれば、弱視または色覚異常のユーザーも、テキストや非装飾画像を判読しやすくなります。

配置

要素の配置は、成功するデザインを作成するための重要なステップです。要素の位置がきちんと揃っていることを確認してください。

[スタイル] タブで要素を横方向または縦方向に簡単に配置できます。

例

以下に、要素の例と作成手順を示します。

手順	操作
1	既存のアプリケーションを開くか、新しいアプリケーションを開始します。
2	次のプロパティを持つ新しいコンテナーをデザインに追加します。 レイアウト: [水平]、[上]、[左] サイズ: 幅 - 100%、高さ - 自動または空白
3	次のプロパティを持つコンテナーを最初のコンテナー内に追加します。 レイアウト: [水平]、[下]、[左] サイズ: 幅 - 40%、高さ - 自動または空白
4	次のプロパティを持つラベル コントロールをコンテナー内に追加します。 テキスト: ラベル
5	次のプロパティを持つ 2 番目のラベルをコンテナー内に追加します。 テキスト: * スタイル: 色 - #c2320c
6	次のプロパティを持つ新しいコンテナーをメインのコンテナー内に追加します。 レイアウト: [垂直]、[左]、[上] サイズ: 幅 - 60%、高さ: 自動または空白
7	次のプロパティを持つテキストボックスをコンテナー内に追加します。 ヒント テキスト: ヒント テキスト
8	次のプロパティを持つラベルを同じコンテナー内のテキスト ボックスの下に追加します。 テキスト: このフィールドは必須です。 その他のプロパティ: 非表示 スタイル: 色 - #c2320c

注: エラー メッセージが非表示で、エラーが発生した場合にのみ表示されることを確認します。

上記の手順を実行すると、構造と要素は次の画像のようになります。