web-dev-qa-db-ja.com

ウェブアプリに適切なポップアップメッセージをデザインするためのガイドラインは何ですか?

アラート/ポップアップメッセージを作成するときに参照するガイドラインを作成しようとしています

以下に関して推奨される「ルール」はありますか?

  1. 内部レイアウト-メッセージのコンテンツを中央揃えにするか左揃えにするか?
  2. 私の主なアクション(ボタン)は右または左のどちらにするべきですか?
  3. 画像/ GIFの使用は推奨されますか、それとも禁止されますか?それは何を含むべきですか?私を励ますための何か(a'lla Mailchimp)またはメッセージの内容に関連する場合のみ
  4. 含まれる単語の量、および1行あたりの単語の量。

あなたが考えることができる他の何か。

私が聞いた素晴らしいヒントは、メッセージの内容を書くとき、常に結論から始めることです。

このすばらしいフォーラムで私の最初の質問を本当に失敗したように思えたので、私がこの質問を適切に書いてくれれば幸いです。

2
Nir Bentia

1)このためには、完了のパスを考慮する必要があります。基本的に、ユーザーがやりたいことを探す必要なく、完了までの道筋をできる限り簡単にする必要があります。 Luke Wroblewski の例:

完了までのパス-前: Paypal - path to completion 1

完了へのパス-後: Paypal - path to completion 2


2)他の多くの例と同様に(上記の例と同じように) Luke Wroblewskiの素晴らしいフォームの例 を見てください。基本的に、完了までの道筋が明確であり、一次アクションと二次アクションが明確に区別され、一次アクションにさらに重点が置かれるようにする必要があります。ボタンの配置については、デバイスプラットフォームの規則に従ってください。

視覚的区別の例:

Actions with visual distinction


3)画像などを使用することは禁止されているとは言えませんが、同時に、ユーザーに何をしようとしているのかからフォーカスを奪ってはなりません。それは、ブランドに伝えたいことにも依存すると思います(配色/気分/アイコン/使用されているグラフィック...たとえばMailChimpの場合のように)。


4)指示はできるだけ簡潔にする必要があると思いますが、同時に失礼ではありません。ユーザーを責めないでください。明確な指示を提供します。また、 はい/いいえ、OK /キャンセルボタン を避け、代わりに直接動詞を提供します。必要がない限り、ユーザーがダイアログのテキストを読まないことを常に想定してください。

ダイアログボックス-前:

Dialog box - before

ダイアログボックス-後:

enter image description here

2

モーダルダイアログについて話していると仮定します:

  1. これはより個人的な好みです。メッセージが1行の場合は、中央揃えが機能します。複数行のテキストの場合は、読みやすくするために、左に配置することをお勧めします。私はそれが読みやすく、目に喜ばれるべきであるということ以外に、ハードで速い答えがあるとは思いません。
  2. 多くの人は、一般的に使用されるアクションを左側に配置し、その後に一般的でないオプションを配置するように指示します。どの順序で配置するかにかかわらず、すべてのダイアログの配置を統一して、左側に送信ボタンがあることに慣れているユーザーが誤ってキャンセルをクリックしないようにしてください。
  3. これはコンテキストベースです。なぜ画像を使いたいのですか?あなたのメッセージを伝えるのに役立ちますか?ユーザーがダイアログを理解するのに役立ちますか?それはあなたのブランドを強化し、ユーザーを笑顔にするのに役立ちますか? Mailchimpは、メッセージングと一緒に画像を使用することを非常に意図しており、ユーザーがタスクに集中する必要があるときにnot画像を使用することも非常に意図しています。
  4. 一般的に言って、アラートのメッセージはできるだけ明確かつ簡潔に保つようにし、対象者に適した言語を使用するようにしてください。メッセージを効果的に配信し、だれも読まないような長いとりとめのないテキストを避けます。
1
Sullivan