ユーザーはファイルアップロード要素に混乱していますか？
私は1つの標準的なファイル入力要素を含むかなり標準的なプロファイル編集ページ（パスワード、電子メールなど）を持っています。ファイル入力フィールドはフォームの最後の編集可能なフィールドであるため、送信ボタンは直後にあります。 Webサイトには、自動的に送信/保存する単一のフォームはありません。私が経営陣から受け取ったフィードバックは、それが「混乱」していることであり、フォームを送信する必要があるか、ファイルがアップロードされないことをユーザーに知らせるメモを追加することを要求しました。
複数の画像のアップロードを処理する別のページがあり、これも自動的に送信されないが、同じ混乱はないようです（画像プレビュー、進行状況でJSが強化されていることに加えて、単一の標準ファイル入力要素もあります）バーなど）。
ユーザーは、ファイル入力要素がどのように機能するかについて本当に混乱していますか？
更新（誰もが質問の精神に混乱しているように見えるため）：私は方法にあまり興味がない改善できる私のフォームですが、ユーザーがファイル入力要素を持つフォームがどのように機能するかについて混乱するかどうかは関係ありません。それらが混乱している場合、何が混乱の原因ですか？この特定のプロジェクトのUXは、経営者によって何ヶ月も実行されており、この特定のインスタンスにおける平均的なユーザーのインテリジェンスを過小評価していると私は確信しています。プロジェクトがまだ開始されていないため、実際のユーザーはいないため、実際に実際にが私の腸をバックアップするためにどのように動作するかを示すデータはありません。
はい、人々は混乱します！
変更のために、私はいくつかの実際の証拠で答えることを光栄に思っています：
前回のユーザビリティテストで、かなりの数の人が混乱しました。彼らは確実にファイルをアップロードしましたが、実際にはパスを選択し、「アップロード」ボタンを逃しました。
2つの主要な問題により、これらの結果が生成されました。
- ファイルのアップロードはポップアップダイアログで行われます：ダイアログには[OK]ボタンがあり、閉じるだけです。ダイアログ内には、パスのテキストボックスの通常のコンポーネント、「参照」ボタン、「アップロード」ボタンがあります。ユーザーは最後のものを逃し、単に「OK」をクリックしました。彼らは彼らが彼らの仕事を完了したと確信していました（これはあなたが「OK」をクリックしたときに何が起こるのでしょう？）
- ファイルがアップロードされたかどうかにかかわらず、フィードバックは提供されませんでした：ダイアログを閉じた後、画面には何も変化がなかったため、ユーザーにファイルのステータスを通知するものは何もありませんでしたダイアログ内に非表示」）。
私が学んだ教訓は、可能な場合はポップアップダイアログを避け、ファイルのステータス（特にファイルが空の場合）について明確なフィードバックを提供することです。
デフォルトのファイルアップロード要素は、初めて見る可能性のある非パワーユーザーを混乱させる可能性があります。 Facebookのように、ユーザーが正確に何をしているかをユーザーにわかりやすいものに再設計する必要があります。「画像をアップロード」というリンクがあり、クリックするとファイルをアップロードするためのOSウィンドウが表示されます。
また、投稿した写真を見ると、ファイルアップロード要素でユーザー（パワーユーザーでさえ）が混乱している可能性があることがわかりました。ユーザーがそれをクリックします。 「アバターをアップロードする」などのラベルを付ける必要があります。
編集：写真をアップロードするために[送信]をクリックする必要があることを本当に理解できないかどうかを尋ねました。そうだと思います。多くのWebサイトは、特別な場合を除いて、画像を選択した直後にフォームを送信する傾向があります。 Facebookに写真を投稿する-しかし、そのような場合、ユーザーにフィードバックを提供して、次のステップを実行する必要があることをユーザーに理解させます。何かを書くか、アップロードを確認します。
ユーザーは、ファイル入力要素がどのように機能するかについて本当に混乱していますか？
ユーザーに固有の質問に答えられるのはあなただけです。誰かがファイルを選択してからフォームを保存しなかった回数を記録するために、ログ記録の背後にいくつかを添付してみることができます。特に、ファイルを選択した場合、保存せずにナビゲートすると、正確なものを選択するために戻ってきます同じファイルですが、今度は[保存]をクリックします。それらの番号を取得します。
彼らが実際にそうであると仮定すると、あなたは何かをする必要があります。
ファイル入力フィールドはフォームの最後の編集可能なフィールドであるため、送信ボタンは直後にあります。
簡単なことの1つは、アバターの事物がフォームの最後の編集可能なフィールドにならないように、フィールドのシーケンスを並べ替えることです。両方ともユーザーを他のユーザーに示すために使用されるため、カスタムURLフィールドの横に適切な場所があるかもしれません。
さらに、現在のアバターが最初に表示され、次に[ファイルの選択]コントロールが表示されるように、アバター入力コントロールを調整できます（[アバターの置換]のラベルが付いています）。ユーザーにそこで何が起こっているのかを説明するにはこれで十分です。
最後に（これはすべてのフォームに適用されます）、[Save]を右側にバンプし、すぐ下に、上のフィールドと一致するようにします（vsはラベルと垂直に配置されます）。これにより、ユーザーの視線追跡パスは、左側に隠れることなく、最後のフィールドから[Save]ボタンに直接進みます。
これらの変更はそれぞれ行うのが簡単であり、最も単純なものが機能する場合はそれで十分であり、<input type=file>コントロールのスタイルを変更するために トリッキーな追加作業 を実行する必要がありません。
Twitterでヘッダー写真のアップロードをテストしました。使用したいファイルを選択すると、自動的にアップロードされます。したがって、送信ボタンはありません。 Googleは、Facebookと同様に、アバターに対してこれを行います。アバターのアップロードでそれを引き出すことができる場合（ユーザーが「送信」をクリックする前に結果を確認できるようにする場合）、おそらく最高のユーザーエクスペリエンスが提供されます。
これは役立つかもしれません そしてそうかもしれません this 。
Ross Aikenのあなたの質問へのコメントに同意します。ボタン送信フォームの一部であるファイルアップロード要素のデフォルトの動作は、平均的なJoeを混乱させます。
あなたの場合、コンテキスト内のファイルがプロファイル画像である場合、プロファイル設定の保存とプロファイル画像の保存のフローを分離することは理にかなっています。あなたはプロフィール写真を保存するために保存ボタンを押すことを強制する必要はありません。
例えば。
この背後にある考え方は、フォームをdbスキーマの代表として厳密に考えないことです。アバターを含むプロファイル設定のすべての列を更新するために単一のフォームを作成する必要はありません。代わりに、共通のプロパティを表す要素に異なるUXを提供します。
独自のUXでプロフィール画像の更新を抽出することを提案したように、機密情報の更新を別のタブ/ページで抽出することもお勧めします。たとえば電子メールIDがユーザー名として機能する場合、またはカスタムURLが非常に機密である場合、またはパスワード変更などの他の重要な部分の場合、これらのフィールドを選択し、現在のパスワードを入力することによってのみ更新できる個別のフォームを用意する必要があります。
ここでの混乱は、古典的な「定義の完了」問題です。
2つの要因があります。
- ボタンのクリック-ユーザーがフィールドに入力し、ボタンをクリックしました。これは通常のフォーム入力です。続行して別のボタンをクリックする必要がない
- フローの一時停止-アップロードが同期の場合、ファイルアップロードの「終了」には、他のフィールドでの入力の終了よりも時間がかかります。
これもページの最後のフィールドであるため、ユーザーは待機を「フォームの保存」待機と間違えます。
それを簡単に示す2つの方法：
- ファイルのアップロードを非同期にします-ファイルを非同期でアップロードしている間、ユーザーがファイルに入力してすぐに続行できるようにします。 「choose」が「submit」と同じスタイルのボタンとしてスタイル設定されていない場合は、これの方が適しています-フラットまたは入力フィールドの一部。
- 現在のフォームのステータスを示すステータスインジケーターを表示します。ページの左側にある赤いバー。ユーザーが「保存」をクリックした後にのみ表示されます。
奇妙なことに、これに問題があるユーザーのことを聞いたことがない...特に、選択したファイルがまだ通常の入力フィールドに表示されている場合...
「Are you sure？」ポップアップで保存せずにページを離れようとしているユーザーをキャッチできるかもしれません...
Googleをすばやく検索すると、次のようになりました。
または、「保存」を「変更を保存」に変更すると役立つ場合がありますか？
はい、現在のバリアントはユーザーを混乱させます-ユーザビリティ調査を実行する必要はありません。
どうして？ユーザーが選択した直後に写真がアップロードされていると考えているため。そして
ユーザーがファイルを指定した直後にアップロードすることをお勧めします。これは現在、標準の事実上の事実だからです。
これを実行する方法を次に示します。ユーザーが「ファイルを選択」をクリックし、ファイルを選択した後、サーバーにアップロードして、最後に写真をプレビュー領域に表示します。
はい、ファイルのアップロードに混乱しています。
彼らが特に混乱しているのは、アップロードを確認した時点です。
記載されていないことの1つは、人々が編集フォームであることです。電子メールなどの別のフィールドを変更する場合、人々が正常に保存できれば興味深いでしょう。あなたは、人々がそれを変えることに問題を報告したかどうか言っていません。
このフォームは、ユーザーがデータを追加するのではなく編集しているという点で、サイトのフォーム間で一意である可能性があります。すべてのフォームが「変更を保存」ではなく「保存」と言うのを知っていますが、他のフォームが変更を保存しているかどうかは言いませんでした。
プロファイルとアバター編集を別々のフォームに分け、アップロード時にアバターを自動保存することをお勧めします。
あなたの質問に確実に答えられるのはあなただけです。 （推測できますが...）
簡単なユーザビリティ調査を実行します。 5人のユーザーを取得し、彼らがプロファイルを作成および編集する様子をご覧ください。実際のテストからの実際の結果は、「ウェブサイトで優秀で魅力的な人々にたくさん質問して、彼らが考えた...」よりも、経営陣に説得力があります。
簡単な調査の設定についてサポートが必要ですか？ このページ には便利なリンクがたくさんあります。
あなたのためにそれを行うオンラインビジネスがあります。 （ serTesting.com を参照してください。）
フォームを通過した後、アバターセクションはより混乱します。以下のようにフォームを再設計しました。これにより、ファイルのアップロード要素が明確になります。アップロードアクションが完了すると、プレースホルダーに画像が表示されます。
混乱に影響を与える要因は
- フォームの配置が明確でない場合
- ユーザーが入力に対する出力を受け取っていなかった場合
- ユーザーが次に何をすべきかを理解できない場合
- ユーザーが方法を理解できない場合
- 用語が認識できない場合
。
データを保存していないときに、ページ上に実際にバーを作成するフォームやWebサイトをたくさん見ました。
特に、入力するフィールドが多い場合は、非常に便利です。
