背景:
ユーザーは、提供するSoSプラットフォームに基づいてインターネットショップを運営しています。特に、デスクトップアプリ(Windows)を提供します。これは、基本的に、選択したサプライヤーからのオファーをアップロードすることにより、このストアの棚を積み上げます。
アップロードプロセスは、いわゆるデバッグモードで実行できます:オファー内のすべての製品で停止し、製品をインポートする前に確認を求めますストアに(まだストアにない場合)、またはそのデータを上書きします(既にインポートされている場合)。
ウィンドウにはいくつかの簡単なプレビューが表示され、決定を求められます。ユーザーがデバッグモードを終了する場合は、「他の製品ではこの選択を記憶する」をクリックできます。これにより、キューに残っているすべての製品を承認または拒否します。 (ファイルコピーダイアログボックスのようなもの)。
現在のUI:
したがって、4つのオプションがあります。
[緑、チェックボックスなし]この製品をインポートします(そして質問し続けます)
[赤、チェックボックスなし]この製品をインポートしないでください(そして、質問を続けます)
[緑、チェックボックス]この製品と残りすべてをインポートします
[赤、チェックボックス]この製品も残りもすべてインポートしないでください
タスク:
新しい(5番目の)オプションが追加されます: "ignore product"。
これにより、ユーザーは特定の/選択した製品を考慮から除外することができます。
ユーザーが一部の製品にignoredのマークを付けると、ウィンドウ内の他のすべての設定や選択に関係なく、この特定の製品に煩わされることはありません(まで)無視された製品のリストをリセットしますが、そのオプションは他の場所で利用できます)。
質問は次のとおりです:この追加オプションをユーザーに提示する方法は?とてもシンプルですが、難しい...
この新しいオプションの意味は透過的である必要がありますが、現在のレイアウトがかなり「フィールド」にあることを考えると、慣れてきているユーザーを混乱させないようにする必要もあります。
彼らはかつて緑のものと赤のものを持っていました-そして私は彼らに余分な赤いものを投げ入れて今考えさせることをしたくありません;なぜ、どっちがどっち?等.
最初のプロジェクト:
右側に別のボタンを追加します。古いコントロールを境界線でグループ化して、既存のオプションと追加されたオプションを区別します。
問題:
"この製品を無視する"は、実際に左側のペイン(右側のものではない。何もない場合もある)ので、明らかにそれから離れすぎている。
また、モックアップではそれほど耳障りに見えないかもしれませんが、実際のウィンドウは少し広すぎます。
ソリューション:
2番目のプロジェクト:
問題:
奇妙に見えます。
「更新しない」と「無視」は異なります。 ( "更新しない"は "...今回は"を意味します "無視"は「今回は、いつでもない」を意味しますが、このウィンドウはそれを伝えていないようです)。
ソリューション:
問題:
これらの2つのオプションを提示する方法は?ポップアップフォームで?コンボボックス? Webスタイルのスライドフレームはありますか?
もっとクリックする必要があります。長い一連の迅速な決定(y/n)を行うデバッグモードを駆使した人は、「いいえ」ごとに1回ではなく2回クリックする必要があります。新しいオプションが邪魔になっています。
さらに重要なことに、チェックボックスは、動作が変更されるボタンから分離されています。チェックボックスの状態は、「今すぐ更新しない」(古いオプション)にのみ適用され、「これまで更新しない」(または製品を無視します。新しいオプション)。これは直観に反し、誤解を招くようです。
私はUXデザイナーではありませんが(私があなたにそれを伝える必要がある場合...)、しかし私たちのチームは小さいので、何かを考え出すのは私次第であり、私の野心は正しい解決策を見つけることです:)
あなたは何を提案しますか?
PS。
ここでは、英語の表現とオプションの名前は主要な問題ではありません。いずれにしても、アプリの主要言語は英語ではありません。 UIアドホックを翻訳しました-後で他の誰かがローカライズを担当します。言い直しに関する提案があれば、それがケースを助けるのであれば歓迎します。
提供されるオプションのセット(非常に複雑で、議論の余地があるかもしれません)も、この時点では議論の対象ではありません。
これが Balsamiq Mockup からエクスポートされた私のXMLのモックアップです: http://pastie.org/4642609 -誰かが試してみるのに十分親切だった場合。
コメントや洞察をいただければ幸いです。
はい、そうです。
"Ignore"を "Forget for forever"に少し変更してみましょう。 "ignore"は "Don"に近すぎるためです更新してください。
ところで、ここには、Nice balsamiqボタンがあります。また、常駐のBalsamiqエキスパートもいます;)これで、XMLをコピーして、組み込みのbalsamiqに貼り付けるだけです。 :)あなたが私のものを変更する必要がある場合、私の画像のすぐ下に "上記のモックアップを編集する"があります。この機能のためにThxをBalsamiqに、UX.SEに特別に:)
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
グループ化は簡単です。幸い、私たちのモニターは2次元であり、ポインターも2次元です。そのため、最初のオプションを固定したい場合は、簡単に設定できます。
また、短期的な決定は、受信製品ではなく、現在のアップロードに関するものです。すでに店頭にある商品の下に置いてみよう!
色コードについては:「更新しない」の赤をドロップします。その理由は2つあります。
このアイデアを気に入っていただけたら幸いです。あなたの意見は?