web-dev-qa-db-ja.com

着色ボタン

予定に関する情報をユーザーに提示し、提示された情報に基づいてユーザーが決定するさまざまなアクションのいずれかをユーザーが実行できるようにするアプリケーションがあります。

たとえば、アクションは次のとおりです。

  • 予約をキャンセル
  • 訪問者にアイテムを持参するよう通知する
  • アプレットを他の場所に再スケジュールする
  • 訪問者の情報を調整する
  • 訪問者に情報を持って来るように促す
  • 紹介者に連絡
  • 他のプロバイダーとapptをスケジュールする
  • 誤報
  • 指定どおりOK

アクション（ボタンで指定）は、電子メールを送信します（ボイラープレートとパラメーターはそれぞれに提供されます）。現在、これらは可能な限り多く許可していますが、使用できるのはそれぞれ1つだけです（これはこの質問の要点ではありませんが、質問したりコメントしたりできるはずです）。

私が目にするユーザビリティの問題は、非常に多くの可能なアクションをどのように区別するかです。私が見る（必ずしも相互に排他的ではない）オプションは次のとおりです。

  • 各ボタンの色を変える
  • ほとんどのボタンの色は一方向ですが、「OK」、「誤警報」、「キャンセル」はそれぞれ異なります
  • 各ボタンに同じ色を付ける
  • アイテムの注文（最初と最後で最も重要）
  • アルファベット順

どれが一番いいですか？これら（もしあれば）より良いものは何ですか？

buttonscolor
2
Mitch

多数のアクションを提示する最良の方法は、それらをグループ化して、異なる位置に配置することです。それらをすべて並べるだけではいけません。

たとえば、次のことができます。

  • 右下隅にメインアクション（OK、キャンセル/誤報）を置く
  • 左下にある別のグループに2番目のアクション（訪問者への通知、再スケジュール、情報の編集、誤報など）を配置する
  • 他のアクションのコンテキスト化（例：）
    • リファラーがリストされている場合は、名前の横に連絡するためのボタンを配置します（またはリンクにします）
    • 「編集」ボタンの代わりに、情報のインライン/ライブ編集を許可する
    • 右上隅に「誤報」/「キャンセル」を「X」として配置
    • 単に別の場所のスケジュールを変更する場所をクリックして、場所を変更する行為

また、多くのWebメールクライアントの機能を実行し、あまり使用されないアクションをドロップダウンメニューまたはドロップダウンリストで非表示にすることもできます。

結局のところ、色はそれほど重要ではありません（そして、ChrisFによって言及された理由のためであってはなりません）。 UIに虹のような色は必要ありません。色を区別マークとして控えめに使用します（つまり、2番目のオプション、または色を使用してメインアクションをグループ化します）。

6
Lèse majesté

多くのアクションがあり、いくつかのアクションは予定で提供された情報に非常に関連しています。たとえば、再スケジュールは予定の現在の日付/時刻に関連し、「訪問者の情報を調整する」は現在の情報と非常に関連しているようです。これらのアクションのボタンを情報の近くに配置します。

だから少しドラフトして：

 Date: Jan 1st 2011 [reschedule]
 Customer: John and Jane Doe [adjust information]
 ------- 
 Items to be brought:
 * item 1
 * item 2
 * [remind customer to bring items]
 ------ 
 [OK as specified] [X Cancel appointment]

...など

要約すると、予定の特定の部分に関連するアクションを、その部分に関する情報がある場所に近づけます。予定全体を含む主なアクションは一番下に移動します。または、リストが非常に長い場合、最も使用されるアクションは一番上、識別情報のすぐ下または横に移動することもできます。 （キャンセルするための赤いXは最も明白な選択ではないかもしれません。赤い十字は「ここから出してください」と認識されます-予定の編集のキャンセルは、予定自体のキャンセルとはまったく異なるものです。ユーザーが混乱しないようにしてください。二。

情報を提供するために色に大きく依存することはありませんが（情報を提供する唯一の方法ではないことは間違いありません）、それは役立つヒントです。落ち着いた色調（ライムグリーンと明るい赤で簡単にインターフェイスを混雑させる）と限られた色のセットを維持します。

また、いくつかのバリエーションのいくつかの廊下テストの優れたケースのようです。

3
Inca