無効化されたリンク/ボタンの動作はどうあるべきですか？

Question

無効状態を設計するためのベストプラクティスは何ですか？一般に、無効な状態は操作できません。ユーザーが無効化/グレー表示されたリンクまたはボタンを操作したときにホバーまたはクリックでツールチップ/ポップアップを表示することについての意見。

Answer 1

ボタンが無効になっている理由をユーザーに通知するツールチップを追加することは、不満を減らすための良い方法です！

ユーザーが通常無効にされたボタン/オブジェクトを操作できないため、ボタンを無効にすると、多くの場合ユーザーを苛立たせ、混乱させる可能性があります。オブジェクトが無効になっている理由をユーザーに案内するツールチップを追加することは、ユーザーの不満を軽減する相互作用の1つの方法です。

この例を見てみましょう：すべての必須フィールドが入力されるまで、コースの追加ボタンは無効になります。ボタンがホバーされると、ツールチップが表示され、ボタンがまだ無効になっている理由が説明されます。

-注：すべての必須フィールドに入力すると、ツールチップの内容を変更してボタンの機能を説明したり、不要になった場合は単に表示しないようにすることができます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

更新：この answer を見つけてアイデアをサポートしました。

Answer 2

個人的に、私は常に次の2つのことから無効状態を知ることができます。

1. 要素は、他のアクティブな要素と区別するために、何らかの方法で「グレー表示」されています。 （あなたが言及したもの）
2. 要素にカーソルを合わせると、「ポインタ」カーソルが表示されません。

マテリアルデザインガイドライン は無効な状態に関するいくつかの良い情報を持っていますが、完全にボタンの操作を無効にすることから始めます-クリックしても何も起こらない、ホバリングしても何も起こらない、など。

ホバーやクリックでポップアップを表示しないこともお勧めします。これは、ユーザーを現在のエクスペリエンスから非常に不快な方法で削除するためです。ポップアップは通常、即時の優先度の高いフィードバックに使用する必要があります。