非アフォーダンスをどのように示しますか？
バッジやステータス画像を使用して情報を表示する傾向がありますが、これらのバッジは、ボタンなど、操作する他のアイテムのように見えることがよくあります。
アフォーダンスとその表示方法については多くの情報がありますが、非アフォーダンスを表示する方法についてはどうですか？
背景：アイテムのステータス（AppStoreでのアプリのリストを考える）を非アクティブとして表示する必要があるモバイルアプリに取り組んでいます。これを行う最もエレガントな方法は、ステータスアイコンを使用することですが、一部の人々はアイコンを操作しようとします。だから私はそれが相互作用するものではないことを明確にする方法を探しています。しかし、答えが一般的に保たれていれば、質問は他の人々にとってより役立つでしょう。
この問題を調べる方法は2つあります。やり取りすることなくオブジェクトを作成することをお勧めします。もう1つは、オブジェクトが非インタラクティブであることをユーザーに積極的に示唆することを示唆しています。
要素との相互作用を提供するために通常使用される手法を回避する。ここで行っているのは、シェーディング、onHover状態、対照的な色など、さまざまなデザインの手がかりを追加することではありません。
ほとんどの人が同意できる1つの要素は、通常、非インタラクティブであり、色付けされていないプレーンテキストです。このような要素の単純な（または欠如した）スタイルは、目立たないことを意味します。また、ユーザーはインターネットのメンタルモデル（一般的なWebプラクティスから構築されたもの）を持っています。これは、プレーンテキストは通常何もしないことを示唆しています。たとえば、ステータスメッセージがある場合、それらをプレーンテキストでレンダリングし、主要なスタイルやアニメーションを与えないようにすることができます。この方法でそれらを提示することにより、あなたは彼らと一緒に行動する余裕はありません。
ファンキーな色、影、アニメーション、onHover効果、ボタンのような枠線、マウスカーソルの変化など、アフォーダンスの他のさまざまな属性を回避できます。要素を平易に保つことは、ユーザーがアクションを実行できると信じる理由が少なくなることを意味します。
もう1つのテクニックは、より明確にインタラクティブなコンポーネントであるものを提示することです。ステータスメッセージを表示している場合は、メッセージを非表示にするか、他のアクションを実行するコントロールを追加することができます。アフォーダンスがより明確になるため、ユーザーが優先的に操作する可能性が高くなります。これは、ユーザーに複数の選択肢が提示されたときにユーザーに実行してほしいアクションに視覚的な重みを与えることを示唆する同じ原理です。
2番目を満足することはより困難ですが、例があります。 コンポーネントが非アクティブであることを積極的に示唆する多くの手がかりがあります。これを行うことで、非アクティブな状態で同様のアイテムに遭遇したユーザーの記憶に依存しています。
非アクティブなアイテムは、デザインから遠ざかるか、またはそれに調和するように見えます。これの一般的な例は、グレー表示されたアイコンまたはテキスト（または、より一般的には、アクティブなアイテムよりもコントラストが低い要素）です。彼らはまた、アクティブアイテムが持っている他の様々なアフォーダンスを欠いているでしょう。
特に、アイコンやバッジは、自己完結型のオブジェクトのように見えないように、周囲のコンテンツと混ざることがあります。ボタンは押しやすいです。ボタンが含まれているため、ボタンを押すだけの余裕があります。ボタンを閉じ込めないでください。アイコンを操作する機会が大幅に減ります。たとえば、これを試してください：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
他にもいくつかの方法がありますが、これらは概して、何かが非アクティブであることを直接示す最も一般的な方法です。
そしてもちろん、より深い問題に対する他の解決策を調査する価値があります。他の人が示唆しているように、アフォーダンスを有利に使用して機能を追加することは、アイコンの存在が解決よりも多くの問題を引き起こす場合にアイコン自体を完全に削除するのと同じように、1つの解決策になる場合があります。
私はあなたのサイトを見て、アフォーダンスが現在どのように表示されているかを確認する必要があると思います。また、ユーザーがアイコンを操作しようとしていることをどのように知っているのか知りたいと思っています。観察した場合、理由を尋ねることができますか？これを有利にする方法はありますか？アイコンをインタラクティブな要素にすることでUXを改善できますか？
私はあなたがこの声明で頭に釘を打ったと思います：
これはモバイルアプリです。Androidの一般的な例を見てください。シンプルなフラットアイコンが「ボタン」として使用されています。
問題は、このアイテムのアフォーダンスの不足ではないかもしれません。アフォーダンスが必要なアイテムにはない可能性があります。このアイテムからアフォーダンスを削除するだけでなく、インターフェースのアクション可能なアイテムにアフォーダンスを追加することも検討する必要があります。
クリックアフォーダンスは、このようなものを変更することによって影響を受ける可能性があります。
- 色-鮮やかさ、明瞭さ、コントラスト
- Opacity
- 効果-光沢、変色、反射
- 大胆さ
- 動き-頻度、カバレッジ、デルタ
- 国境
- 背景
- 高さ/深さ-エンボス、フラット、エレベーテッド、シャドウ
- 一意性-他のアイテムとは異なり、実用的な推論に欠けているアイテム。
- レイヤー化-実行不可能な要素と実行可能な要素のオーバーラップ。
- 配置-他のアクション可能なアイテムの近接。
- 画像-押しピン、チェック、ラジオ、鉛筆
私はAndroidを使用していませんが、「淡色表示」（=前の回答者が言ったようにコントラストが低い）ですか？
エンボスの深さを少なくしたり、シャドウを短くしたりすることについても話したかったのですが、これを言うときはいつでも、Androidのチェックされていないチェックボックスウィジェットを確認する必要があります。これは無効化されていません：これはチェックされていないチェックボックスです... ".
昔の白黒のMac OS時代には、この点線の概念があり、前景から2番目のピクセルを削除していました。
私は今試しましたが、それでもまだかなりの障害を示していると思います。
しかし、それはPPIとユーザー自身の視力に依存します...私にとってはそれは機能しますが、私はここに異なるAndroidデバイスの大きな束を持っていません...
ぼかしも試しましたが、小さな画面ではうまく機能しないと思います。
（そして、これが元の画像の link です。正確にするために、フェアユースの対象であることを願っています。つまり、Androidの設定のスクリーンショットです...）