送信したファイルが画像ではないことをユーザーにどのように通知する必要がありますか？
特定のWebアプリケーションで、ユーザーは画像をアップロードできます。現在、ユーザーが画像以外のものをアップロードすると、JavaScriptの警告ボックスに「画像ファイルのみを選択してください!!」というメッセージが表示されます。示されています。
これはUXの観点からの適切なフィードバックですか？
ユーザーが画像ではないファイルをアップロードするときのフィードバックは何ですか？
Stack Overflowで 元のコメント を参照して、この質問をさせました
さて、終わりから始めましょう。
「!!」
感嘆符を失います。ユーザーに怒鳴らないでください。失礼で侮辱的です。
”画像ファイル”
ユーザーは「画像ファイル」とは何か知っていますか？彼らは「イメージ」または「ファイル」を理解していますか？ユーザーテストを実施しますが、「画像」の方が適切だと思います。
whatは画像ファイルではありませんか？ユーザーがファイルを誤って選択した可能性がありますが、ユーザーは判別できないため、アプリが機能しないと想定します。たぶん彼らはたくさんのファイルを選択しましたが、1つは画像ファイル（誤った拡張子）と誤って命名されています。これで、どのファイルが問題であるかを見つけるために試行錯誤を徹底的に行う必要があります。
「選択のみ」
メッセージは問題を与えずに処方箋を与える。時々それで十分ですが、おそらくここにはありません。問題は、ユーザーが画像のみを貼り付けたMS Wordドキュメントをアップロードした場合はどうなりますか？問題が画像ファイルが破損している場合はどうなりますか？アプリがサポートしていないあいまいな形式の場合はどうなりますか？すべての場合において、「私はdid画像ファイルを選択すると、あなたはバカです!!」と言って腹を立てています。 （ユーザーはコンピューターで叫ぶことを許可されています。ええ、それは二重の基準です）。
"お願いします"
多分大丈夫。礼儀正しさは役立ちますが、ユーザーが3度目にメッセージを受け取り、その理由を理解していない場合にも不快になります。そして、それは言葉を追加します。メッセージボックスでは、単語数が多いほど、ユーザーは読みにくくなります。おそらくそれなしで良いでしょう。
ですから、問題を取り除いてください。元のメッセージはそのまま残ります。
代替案は次のとおりです。
「[ファイル名]に画像が見つかりません。」
この下に、二次診断または規範的なテキスト（サポートする形式など）を追加できます。または、状況依存のドキュメントへのリンクを利用して、ユーザーのトラブルシューティングに役立てることをお勧めします。
別の方法は次のとおりです。
はい、エラーメッセージはありません。代わりに、ファイルの選択をフィルター処理して、読み取り可能な画像ファイルのみを含めるようにします（拡張子など）。さて、破損したファイルや誤った名前のファイルのエラーメッセージは引き続き必要ですが、問題が発生する前に問題を解決するのに大いに役立ちます。
要約すると、エラーメッセージは次のようになります。
そもそもエラーを防ぐことができない場合にのみ使用してください。
ユーザーに怒鳴ることはありません。
ユーザーの言語を使用します。
具体的に–コンテキストから情報を提供します。
処方箋を与える以上に問題を説明してください。
簡潔であることを意味するとしても、簡潔であること。
状況依存ヘルプまたはトラブルシューティングドキュメントへのリンク。
通常のスタイルガイド（例： Windows および Apple ）は、エラーメッセージの記述に関する適切なアドバイスを提供します。
ほとんどの場合、メッセージボックスを表示することは適切な解決策ではありません（1）。
メッセージボックスに「画像ファイルのみ選択してください!!」などのメッセージが入っているとさらに悪い（2）。
また、アプリケーションによって画像として解釈されないファイルをユーザーがアップロードしている状況では、状況はさらに悪化します（3）。
メッセージボックスのジレンマ
メッセージボックスは、プログラマーにとって非常に簡単に実装できます。ほとんどのプログラミング言語では、1行のコードで行われます。これにより、プログラマーの間で特に人気があります。
メッセージボックスはユーザーにとって非常に煩わしいものであり、誰もそれらを読んでいないため、ほとんどの場合役に立たないという事実については触れていません。これにより、ユーザーの間で特に不評になります。
エラーメッセージ文字列
プログラマーの考えでは、ユーザーがnumberが予期されていたフィールドに「Twenty four」と入力した場合、ユーザーは馬鹿であり、次のようなメッセージ：
親愛なるユーザー、あなたはばかげています。数値を入力するように求められましたが、代わりに、数値として認められないものを入力しました。再試行。
ユーザーの心の中で、エラーメッセージは通常、欺瞞的で、無意味で、役に立たず、役に立たず、侮辱的です。だれも侮辱されたくないので、愚かであることをユーザーに常に伝えることは、あなたにできる最善のことではありません。 「Twenty four」は数字ではないというエラーメッセージは嘘です。
これで十分でない場合、一部のメッセージは、可能な限りイライラするように強く働きかけています。次のようなメッセージ：
モジュール5992 LIBRARY_NOT_FOUNDでの失敗
嫌われるためにできる限りのことをしている多くのメッセージは、アプリケーションが失敗しても本当に満足しているように見えます。なぜ：
画像ファイルのみ選択してください!! *
2つの感嘆符がありますか？なぜそれが1つでもあるのでしょうか？ファイル形式を理解できなかったという事実について何がとても興奮しているのですか？なぜ各単語に大文字があるのですか？
間違った犯人
数値を期待するフィールドの「24」の例では、障害はユーザー側ではなく、アプリケーション内にあります。アプリケーションがこの特定の入力を理解できない場合、それはアプリケーションの障害です。
アプリケーションは、他の人に嘘をついたり侮辱したりする代わりに、入力された内容を理解できないことをユーザーに謝罪し、いくつかのヒントを与えることができます。例えば：
申し訳ありませんが、「年齢」フィールドの値として「24」を理解できません。この値には数字がないようですが、0より大きい1桁または2桁の数字を想定していました。例：65。
表示：
画像ファイルのみを選択してください!!
ファイル送信のコンテキストでは危険です。アプリケーションが非常に多くの場合に存在する可能性があります。ユーザーがPhotoshop PSDファイルを送信し、アプリがそれを認識できない場合はどうなりますか？ IrfanViewなどでサポートされているすべての画像形式はどうですか？
形式を超えて、Microsoft Word文書にコピーアンドペーストされて保存された画像は、まだ画像です。ユーザーはサポートを気にしません。コンテンツを気にします。
では、無意味で嘘をついてイライラするメッセージボックスの代わりに何ができるでしょうか？
ページのどこかに表示される小さな通知はどうですか？
送信したファイルの形式は、<アプリケーション名>でサポートされている形式ではありません。サポートされている形式には、JPEG、PNG、GIFがあります。
これらの形式のいずれかに画像を変換する方法を知りたい場合は、当社の（画像変換ガイド）に興味があるかもしれません。
最後の3つの単語は、MacOS、Windows、Linuxで画像をJPEGまたはPNGに変換する方法を説明するページを指しています。
ここに：
- ユーザーの邪魔にならない：続行するためにクリックする「OK」ボタンはありません。
- あなたは自分の過ちを他人のせいにすることでユーザーを侮辱しない。ユーザーは大丈夫でした。アプリが多すぎるフォーマットをサポートできないというだけのことです。
- あなたは、ユーザーが理解できる画像を提出するために何ができるかについてのヒントを与えています。
コンテキストによっては、一部のテキストではなく、よりグラフィカルなソリューションも使用できます。たとえば、ドラッグアンドドロップ中のカーソルは、ファイルの拡張子に応じて変化する可能性があります。または、元のアップロードパネルで、サポートされている形式をそれぞれのアイコンで明示的に列挙する場合があります。
すべての場合において、上で提案された基本的なソリューションでさえ、元のメッセージボックスよりもはるかに優れています。
[開く]ダイアログのファイルタイプフィルターはすべてのブラウザーで機能するわけではありません であるため、エラーメッセージを表示する必要があります。
メッセージボックスを閉じた後、エラー自体が修正されていない間、エラーメッセージが消えるため、Javascript警告ボックスは適切な解決策ではありません。
したがって、エラーメッセージは、エラーが修正されるまで表示されます。また、ユーザーが間違った画像を選択すると、エラーが発生する可能性があります。したがって、画像のアップロード後にユーザーにサムネイルを表示することは良い解決策です。
許容できる場合は、エラーメッセージでいくつかのトリックを使用してユーザーのポジティブな気分をサポートすることができます。これは、ユーザーがタスクを中断せずにエラーを修正するのに役立ちます。
エラーメッセージを修正するように動機づけるエラーメッセージの偽の画像（ただし、倫理的であるべきです）を以下に示します。より使いやすい404ページに似ています。
「画像ファイルのみ選択してください!!」穏やかではありません。修正を促す間、ユーザーに優しくしてください。彼らがあなたのソフトウェアを使うとき、彼らは愚かに感じるべきではありません。一方、何かが長すぎて読めない場合はユーザーがスキップする可能性が高く、ランダムに何かがエラーの原因であると想定する可能性があるため、プロンプトも簡潔にする必要があります。
また、可能であればモーダルとポップアップを避けてください。可能であれば、アップロードボタンまたはユーザーがファイルをドラッグする領域のすぐ隣にメッセージを表示します。これにより、[OK]または[再試行]ボタンをクリックする余分な手順が1つ回避されます。
ユーザーが画像ではないものをアップロードした場合、次のように言うことができます。
画像のみ
サポートされている形式：.jpg、.png、.gif
または、アプリにマスコットがある場合、肩をすくめて、悲しい顔をしたファイルを表示できます。または、それが理にかなっている場合は、任意のランダムな顔です。
そもそもエラーの発生を防ぐことができるのに、なぜエラーメッセージを表示したいのですか？
ユーザーがアップロードを完了するのを待つか、画像以外のファイルを選択して[アップロード]をクリックする代わりに、ファイルの選択中に基準を適用できます。
ファイルタイプのアップロードを許可するのではなく、画像以外のファイルの表示を制限します。画像以外のファイルをグレーにすることもできます。ポップアップを使用するために、同じパラメータを使用して画像の投稿のアップロードを確認しているため、制限は簡単です。
ここでは、フォルダーとindesignファイルは色分けされていますが、他のファイルはグレー表示されています。
よりフレンドリーなメッセージを提示する必要があります。このメッセージは、ユーザーが間違ったパスワードを入力したときの通常の形式のように、アップロードの近くの単純なコンテキストフィードバックである可能性があります。このコンテキストフィードバックには、微妙な黄色のような警告色を付けることができます。
時には、最善の解決策が最も簡単です。ユーザーが画像をアップロードするのを待つのではなく、thenが適切かどうかをテストする代わりに、HTML <input>要素のaccept属性を使用してファイルをフィルタリングできます。その<input>要素でアップロードが許可されているタイプ。
属性値は、一意のコンテンツタイプ指定子のコンマ区切りのリストである必要があります。例えば：
<form enctype="multipart/form-data" method="post" action="process-form.php">
<label for="upload">Choose a picture from your computer:</label>
<input type="file" accept="image/*">
<input type="submit" value="Upload">
</form>
（image/* MIMEタイプを使用するには、HTML5を使用する必要があることに注意してください。それ以外の場合は、image/png、image/jpgなどの通常のMIMEタイプを使用してください。）