web-dev-qa-db-ja.com

アクションの切り替えボタン

このWebアプリケーションには、複数のアクションをスケジュールできるアイテムのリストがあります。アクションが利用可能でも選択されていない場合は、灰色のボタンとして表示されます。ユーザーがクリックすると、ボタンが色に変わり、アクションがスケジュールされていることを示します。ユーザーがもう一度クリックすると、アクションはキャンセルされ、ボタンは以前の状態に戻ります。このようなボタンは、アクションごと、アイテムごとに1つ表示されます。

例:

enter image description here

私のチームはいくつかの懸念を提起しました:

  • 灰色は、ボタンが無効になっているとユーザーに思わせる場合があります。

  • ユーザーがもう一度クリックしてアクションをキャンセルできるかどうかは、ユーザーにはわかりにくいかもしれません

特にツールチップを使用する場合(StackExchangeの「投票」と「回答を受け入れる」機能は同じ方法で実装されます)、これは問題ではないと思いますが、これらのアクションボタンの使いやすさを改善する方法はありますか?

7
Tony the Pony

長年にわたって、トグルボタンはリストに状態を表示するためのものではないことを学びました。つまり、トグルボタンはそれ自体の場合にうまく機能します。再生/一時停止ボタンのようなものです。

ただし、チェックボックスは、アイテムのリストで状態を示す優れたインジケータとして機能します。視覚的に明確で、不動産をあまり使用していません。チェックボックスのラベルは、リストのすべての行で繰り返す必要はありません。列ヘッダーに配置するだけです。

また、ユーザーがリストを簡単にスキャンできることが心配な場合は、チェックボックスが選択されているときに、太字や背景色などの視覚的な手掛かりを追加できます。

7
Denzo

明確にするために、ボタンがアクティブになったときにボタンにアイコンを追加できます。これは、アイデアの大まかなドラフトです。

Button with tick

Jensコメント後の更新:

DenzosとAllansの両方の回答には有効な点があると思います(ボタンの代わりにテキスト付きのチェックボックスを使用する/エンボスボタンを使用する)。しかし、どのソリューションがプロジェクトについて詳しく知らなくても最適に機能するかを判断するのは困難です。以下の2つの投稿を読むことをお勧めします。これらはあなたの意思決定に役立つ可能性があります。

Philがお役に立てば幸い

9
Phil

これは主にUIの規則に依存しますが、エンボス(クリック可能のように見える)およびクリックされた状態で、実際にボタンのように見せることを検討できます。

enter image description here

5
Allan Caeg