web-dev-qa-db-ja.com

6つのボタンを回避するのに最適なUXは何ですか?それをよりユーザーフレンドリーにする方法は?

シナリオ1

  • Financial Webアプリケーションに取り組んでいます。アプリケーションでは、セクションは親レベルであり、グループはそれらのセクションの子です。親レベルのユーザーがすべてのグループを表示できる場合。これらのグループをカテゴリにマッピングしたい。

    そのグループ名の後に、カテゴリにマップするためのアイコンがあります。 1つのグループを多くのカテゴリに、多くのグループを多くのカテゴリにマッピングしたい。アイコンをクリックすると、この画面が表示されます(画像1と画像2)

シナリオ2

  • この画面には「グループ」と「カテゴリ」があります。灰色はグループの選択を示しています。次をクリックするとグループ4が選択され、前の選択ではグループ2が選択されます。グループごとにカテゴリを選択でき、追加ボタンをクリックしてカテゴリを追加できます。フッターに3つのボタンがあります。

    • 保存して前へ-保存して前のグループに移動
    • 保存して存在-この画面を保存して終了します
    • 保存して次へ-保存して次のグループに移動

シナリオ1

  • グループをカテゴリにマッピングするエレガントな方法は何ですか?一度に1つのグループを使用し、次に次のグループをマッピングする必要がありますか?(画像2に示すように)

このシナリオについて何か良い提案はありますか?

すべてのグループのヘッダーにどのように表示すべきですか? -すべてのグループをタイトルとして表示する必要がありますか、それとも明示的にフローを完了する必要があります。

2つのシナリオ

  • ユーザーがこのレイアウトに戸惑うかもしれないので、私は多数のボタンを避けたいです。

  • このデザインにはもっと良いUXがありますか?

画像1 enter image description here

画面を変更しました。その画面について何か提案はありますか?

画像2 enter image description here

8

一般的な原則として、多くの「ボタン」に問題はありません。メニューは基本的に、グラフィックデザインの異なるボタンがたくさん集まったものです。リンクやタブのバンクもそうです。それらはすべて同じことを実行します。ナビゲートするか、コンテンツに対して他のコマンドを実行します。 「ボタン」が適切にラベル付けされ、整理され、区別できる限り、同じページに100を置くことができます(「一時的に非表示のボタン」としてプルダウンメニューを含める場合)。

あなたがあなたのデザインに直観的に取り入れている問題は、「識別可能な」部分の問題だと思います。迅速なワンクリックアクション(称賛に値する目標)のために、ユーザーに微妙な違いのある複数のオプションを提供しているので、混乱する可能性があります。解決策は、クリックを最小限に抑えながら、機能をより個別の重複しない機能に分解することです。場合によっては、機能に優先順位を付けることを意味します。まれなシナリオでは、2回以上のクリックが必要になる場合があります。

たとえば、ユーザーが[前へ]と[保存して前へ]をクリックするのはいつですか。変更がなかった場合、それらは事実上同じです(保存に時間がかかる場合は、グループに変更があった場合にのみ保存するようにアプリにインテリジェンスを提供します)。したがって、[前へ]をクリックして[保存して前へ]をクリックするのは、ユーザーがグループへの変更を破棄したいときだけです。

「変更を破棄する」と言う「前へ」については何もないため、これは少し問題があります。事実、一部のユーザーは、変更によってnotが単に移動するだけで破棄されると想定する場合があります。保存せずにウィンドウを閉じるだけで変更が破棄されることを期待している場合があります。

また、めったに必要とされない機能でもあります。ユーザーは通常、間違いを犯しません。さらに、この場合、問題が発生した場合の対処は比較的簡単です。チェックボックスをクリックして気が変わった場合は、チェックボックスをもう一度クリックします。おそらく、作成された新しいカテゴリごとに[削除]ボタンがあるため、ワンクリックで元に戻すこともできます。したがって、ユーザーがPreviousを必要とするのは、実際に物事を引き起こし、正しく設定する方法を思い出せないときだけです。それは本当にエッジケースです。したがって、変更を破棄して次または前のグループに移動するのにクリック以上の時間がかかっても問題ありません。

これは、保存が暗黙的である場合に可能です。 Reset button below check boxes, and no Save and Previous/Next

終了、前、次のすべてを保存します。ユーザービリティテストで、Exitが保存できないと思ってユーザーがためらう場合は、Exitに「OK」または「送信」というラベルを付けることを検討してください。これは、アプリ/ページの保存と終了を意味します。テストでユーザーが作業を失うことを恐れている場合にのみ、「保存して前/次へ」というラベルを付けます。私のポリシーは、テストが必要であると示した場合にのみ、混乱を追加することです。

[リセット]ボタンは、ユーザーが取り返しのつかないほど混乱した場合に備えて、ユーザーがグループに到着したときの状態にグループを戻します。ただし、このボタンが実際に必要になることはほとんどないので、省略することを検討してください。これは、ユーザーの作業を1回の誤ったクリックで破棄できる地雷です。または、それをUndoボタンにして、一度に1クリックでグループへの変更を元に戻します。はい、大きなネジを修正するために何回もクリックする可能性がありますが、それは非常にまれです。

次に、[前へ]ボタンと[次へ]ボタン自体を検討します。コメントで最大数が示唆するように、ユーザーがグループラベル(リンクまたはタブとして表される)をクリックするユーザーに対してどのような利点がありますか?これにより、ユーザーは、前後のグループだけでなく、任意のグループにワンクリックでアクセスできます。 「前へ」と「次へ」を含めることの唯一の利点は、ユーザーがすべてのグループを順番にすばやくページングして頻繁に確認する場合です。次に、次へ(場合によっては前へ)を使用すると、マウスを動かさずにそれを行うことができます。それが一般的なタスクではない場合は、次のボタンを削除します。 No next and previous buttons. Undo button below check boxes

1

これは実際にはあなたの質問には答えませんが、あなたの問題を解決すると思います。ユーティリティのマルチページウィンドウにあるボタンのより一般的な質問に対処するために、 その他の回答 を残しておきます。ただし、あなたのケースでは、次のような追加の説明を考えると、おそらくウィンドウがまったく望ましくないでしょう。

ユーザーはグループのリストを表示し、[各]グループ名の後に、カテゴリをマッピングするためのアイコンがあります。そのアイコンをクリックすると、このポップアップが開きます。

プライマリ(親)ウィンドウに既にグループのリストがあります。グループリストを再現するダイアログを作成するのは、おそらく不要な複雑さです。代わりに、各ウィンドウのカテゴリを、プライマリウィンドウの既存のリストから選択します。ユーザーが2つの異なるグループのカテゴリを変更する場合は、プライマリの異なるグループに移動します。

2つの可能な設計:

プライマリウィンドウの各グループにカテゴリチェックボックスをリストします

主ウィンドウに十分なスペースがある場合は、主ウィンドウの各グループのカテゴリチェックボックスを含めます。これで、ユーザーは、ナビゲートするボタンやリンクがなくても、すべてのグループのカテゴリーを一度に表示して変更できます。アイコンも必要ありません。

メニュー項目を切り替えるメニューボタンを使用します

アイコンをクリックしてもダイアログは開きませんが、代わりにメニュー項目を切り替えるプルダウンメニューが表示されます。

Menu lists category, plus Add New Category

[新しいカテゴリを追加…]メニュー項目をクリックすると、ユーザーが新しいカテゴリを指定するための簡単なダイアログが開きます。

このデザインでは、メニュー項目の選択時にメニューが閉じるため、ユーザーは2回クリックするだけでカテゴリーを変更できます。これを行うには、ユーザーがダイアログを明示的に閉じる必要があるため、ダイアログは3回クリックする必要があります。メニューボタンを使用してグループの2つのカテゴリを変更するのは4回のクリックです。これは、ダイアログを使用して2つのカテゴリを変更するのと同じクリック数です。ダイアログは、ユーザーが一度に3つ以上のカテゴリを変更する必要がある場合にのみ利点があります。たとえば、3つのカテゴリの変更は、メニューボタンの場合は6、ダイアログの場合は5です。

数学的には、ユーザーがグループに対して一度に1つのカテゴリを変更し、次にグループに対して一度に3つ以上のカテゴリを変更する可能性が大幅に高い場合、メニューボタンのデザインは平均してダイアログデザインよりも効率的です。ユーザー調査で答えがわかりますが、私はそうだと思います(たとえば、ユーザーは1つのカテゴリを50%の確率で変更し、2つのカテゴリを25%の確率で変更し、3つのカテゴリを12.5%変更するなど)。

ある意味でこれはあなたの質問に答えると思います。ボタンの数を減らすには、ボタンを配置するダイアログはありません。

0

チェックボックスをチェックするたびに、またはカテゴリを追加するたびに、バックグラウンドで保存してみませんか。

その場合、「保存」という概念はもうありません。直前、次、そして閉じるだけです。

ユーザーが保存されていることを確信していない場合は、「変更が保存されました」という小さなテキスト通知を受け取ることもできます。

たとえば、Googleドキュメントでは、保存する必要はなく、テキスト通知があります。

enter image description here

同様の答えはかなりあります。これを見てください 別のUX.SEの質問からの優れた回答 、または これは自動保存に関するものです

0
icc97