私たちのアプリには、ユーザーがバッチアクションを実行して、オンラインストアでいくつかの製品を一覧表示する画面があります。 UIで、リストから製品を選択し、「リスト」ボタンをクリックします。
このバッチアクション中に、問題が発生する可能性があります(たとえば、価格などの一部の情報が不足しているため、製品をリストできません)。したがって、一部の製品は問題なくリストされ、他の製品はそうではありません。
これをユーザーに伝える方法を知りたいですか?現時点では、接続できなかった製品がリストされたエラーが報告されます。しかし、いくつかの製品が上場されたとは言えず、はっきりしないと思います。
私が下に持っていたいくつかのアイデアを添付しました。アプリでこれを行う他のインスタンスがあり、ページは最終的に信号のようになり、成功、警告、エラーメッセージが表示されます。それはすべて非常に不明瞭です!
オプション3を使用します。両方を別々のメッセージとして表示します。
その理由は、ユーザーのアクションの結果として2つの異なるシステム状態があることをユーザーに明らかにするためです。
Jakob Nielsenの 10 Usability Heuristics の1つは、システムステータスの可視性です:
システムは、適切な時間内に適切なフィードバックを通じて、ユーザーに何が起こっているかを常に通知する必要があります。
2つのステータスメッセージ(1つは成功、もう1つは失敗)があるため、個別の要素として表示する方がはるかに明確です。各メッセージには異なる視覚的品質があるため、ユーザーはテキストのブロックを読み取ってその意味を解析する必要なく、何が起こったかをすばやく知ることができます。
ユーザーは実際にテキストを読むのではなく、スキャンします。緑色のボックスは、テキストが部分的に成功した場合でも「成功」を意味し、赤いボックスの場合はその逆です。したがって、緑色のボックスが表示された場合、ユーザーはすべてが成功したと見なす可能性があります。
本当に単一のメッセージが必要な場合に考慮できる4番目のオプションは、3番目の状態を導入することです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
どちらの場合でも、重要なのは、部分的または完全な障害状態が発生した場合にIS問題があることを明確にすることです。
私はあなたの3つの選択肢のどれも好きではありません。利用可能な情報を確認したい場合は、ユーザーに作業を依頼する必要があります。ユーザーを働かせないでください。秘密の4番目のオプションを使用します。
ユーザーが最初に手動で表示するためにクリックする必要がないようにデザインを変更します。完全に入力されなかった情報についてのメッセージを表示する代わりに、通常の結果のリストの最後に部分的な結果を含めてください。フィールドの1つが情報を返さなかった場合は、表示の対応する場所での失敗に注意してください。オプションを使用すると、ユーザーが説明をクリックして説明を表示できます。
私は次のようなものを意味します:
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
編集:これはモックアップを作成する最も速い方法だったので、上の表に示しましたが、Amazon.comに表示されるようなものを考えています。ここでは、各製品に関連付けられているボックスがあり、その箱から何かが欠けている場合は目立ちます。たとえば、このAmazonのスクリーンショットでは、newブックの2番目のエントリに画像がなく、3番目のエントリに著者がなく、価格がないことがわかります。 (使用のみ)、しかしそれらはすべてシームレスに適合します。
多くの色が役に立たないため、メッセージを混乱させます。ユーザーにとってより重要な情報は何ですか。 ...それは何が問題だと思います。
したがって、図のような灰色のグリッドと色を使用した提案の間の解決策を想像できます。
このソリューションでは、適切なラインを灰色で表示し(ユーザーがクリックして詳細を表示しないようにする必要があります)、エラーのあるラインに赤い記号を追加して、ユーザーが処理の悪いラインを簡単かつ迅速に識別できるようにします。
グリッドの上部にあるステータスフィルターを想像して、ユーザーがエラー行のみをフィルター処理できるようにすることもできます。