ステータスインジケーターとアクションボタンの違いについてユーザーが混乱
最近、データを表示する現在の方法についてユーザーテストを行いました。テーブルにアイテムのリストがありました（そうですね、私たちのソフトウェアは現在テーブルを頻繁に使用しています）。片側にアイコンがあり、それを使って物事をオフまたはオンにできます。上には、何をすべきかを説明するテキストがありました（「アイコンをクリックしてアクティブ化してください！」など）。私たちは3人のユーザーをテストしましたが、3つすべてが、アイコンはアクティブ化する必要があるものではなく、ステータスインジケータであると考えていました。
私はテスターにアイコンをホバーするためにマウスを使用するかどうかを尋ねました。おそらく、ホバー状態のあるものをもっとはっきりさせると、彼らはそれらをクリックするだろうと思いましたが、実際にはクリックしませんでした。どうやら、彼らはテーブルを見て、何もしようとせず、アイコンを見て、「オン」または「オフ」になっているのを見ました。
どうすればいいのかよくわかりません。私は最初に、もっと大きくて親しみやすいテキストと、何をすべきかを指し示す矢印を使って、それをさらにはっきりさせることができると思った。または、初めての訪問時に何らかの種類のJavaScriptオーバーレイをガイドして案内したり、他の方法でアイコンを強調表示したりすることもできます。しかし、それが単なる絆創膏であるかどうか、さらに深い問題があるかどうかはわかりません。
アクティブ化アイコンにはどのアイコンを使用していますか？ オン/オフスライダー または 電源スイッチ を使用できます。アクティブ化/非アクティブ化を表すために色だけに頼るのではなく（カラーブラインドユーザーを考慮）、2つのアイコンは異なる状態を示すために色の違い以上のものを必要とします。最初のアイコンは、「オン」と「オフ」という言葉があるため、はっきりしています。 「アクティブ化」および「非アクティブ化」ラベルを使用して、自分をカスタマイズできます。
それでもユーザーが概念を理解していない場合は、各行の先頭にチェックボックスを追加し、表の上部にアクティブ化/非アクティブ化ボタンを提供できます。または、次のように、アクティブ化/非アクティブ化を示すテキストを含むアイコンを実際のボタンに追加することもできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは興味深いUX問題だと思います。
私の頭の中での典型的な例は、再生/一時停止ボタンとミュート/ミュート解除ボタンの違いです。これらのボタンは、アクションとステータスインジケータの両方です。しかし、それらは逆の振る舞いをします。ビデオの再生中は、ボタンに「一時停止」と表示されます。オーディオがミュートされている場合、アイコンはミュートされていることを示します。
ですから、すでに期待に矛盾があります。
これらのアイコンをアクションとして使用しないことをお勧めします。アクションを独自の（より明白な）UIのビットで維持します。ドロップダウンメニューのようなものです。そのため、ユーザーは各アイテムで使用可能なアクションのセットが表示され、ステータスなどのデータのクイックアイコンを参照できます。これが私の意味です：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
スクリーンショットはとても役に立ちますが、それでも私は写真を撮ります。
アイコン/画像をアクションアイテムとして設定しようとする場合、いくつかの要因があります。 1つはaffordanceで、このアイテムが実行可能であることをユーザーに伝えます。使用されるアイコンがユーザーのアイコン語彙の一部である場合、これは簡単です。 viz、取り消し、やり直し、保存、ゴミ箱アイコン。これらを見ると、これが実行可能であるという手がかりが得られます。
アクション可能なアイコンとして何か新しいものを作成した場合、もう1つの重要な側面は、ユーザーに動作を教育するためにどのような正確な手順を実行したことでしょうか。これには常にトレーニングが含まれるわけではありませんが、視覚的に、状況に応じて、システムに新しい要素があるかどうかをユーザーが理解するのに役立ちます。
アプリケーション/ Webサイトのデザインパターンとトーンは、ユーザーが期待することにおいて大きな役割を果たします。エンタープライズアプリケーションの場合、ユーザーは標準のアイコンとアクションを期待する傾向があります。よりクリエイティブなWebサイトの場合、ユーザーは探索したいと思うかもしれません。したがって、標準の期待から逸脱したい場合は、ドメインを検討する必要があります。
スクリーンショットやその他の情報を追加していただければ、回答をさらに明確にして具体的にすることができます。
これは、インターフェイスを作成するときに、より多くの設計者が自問してほしい質問です。ユーザーは、ページ上で「できます...これをクリックしてもいいですか？」と思わせる要素に常に遭遇します。そして発見プロセスが始まります。ステータスインジケータとは何か、機能を実行するボタンとは何かを区別するためにできることはいくつかあります。
デザイン：
これは、ステータスインジケーターの背景が透明であるのに対し、ボタンの背景色が確実であることを意味します。境界線、ボックスシャドウ、またはその他のものをいじって、2つの項目間で異なる視覚標準を作成することもできます。
語彙：
ボタンをクリックすると、常にボタンが表示されます何が起こるか。ステータスインジケーターが通知するはずです既に発生したこと。つまり、インジケーターには「編集済み」などの単語を使用し、ボタンには「編集レコード」などの単語を使用します。
配置：
ステータスインジケーターを見つける場所に関する一連のルールを作成します。次に、ボタンについても同じようにします。ユーザーが期待するすべてのものを見つけた場合、何が何であるかについてはあまり問題になりません。
動作：
ステータスインジケーターがホバー効果またはフォーカス効果を持つ必要はほとんどありません。これはボタンと同じではありません。ユーザーは、最初にそれが何であるかを理解しようとするときに、何かの上にカーソルを置きます。ボタンには何らかのホバー効果があり、ステータスインジケーターよりも多くのインタラクティブ機能が含まれることを期待しています。
それは多くの異なるものになる可能性があります。たとえば、次のようになります。
- アイコンの色によって、アイコンは相互作用できるものではなく、静的なインジケータのように見えます
- アイコンは「アクション」を示していないようです
おそらく、さまざまなUIオプションを使用してモックアップを試し、さまざまなユーザーでもう一度テストする必要があります。
ユーザーがアイコンを操作できるテキストまたは「ヘルプオーバーレイ」で説明を続けなければならない場合は、問題があるようです。
スクリーンショットを私たちと共有すると、レイアウトを確認できるので役立つ場合があります。
私もテーブルを多用したソフトウェアを設計しています。ある段階でアイコンを使用していることがわかります。編集の場合でもアイコンを使用しているため、ユーザーが理解したアクションが必要です。アイコンの種類と使用場所は非常に重要です。テーブル内の列内またはテーブルの上部にアイコンを使用すると効果的ですが、アイコンをテーブルの横または下部に配置すると、まったく理解できなくなります。 
機密情報なのでデータを削除しました。