お気に入りから追加/削除するためのアイコン：状態とアクションの表示
ユーザーがお気に入りのアーティストを検索してお気に入りに追加できるモバイルアプリがあるとします。新しいアーティストを探している間、おそらくそのうちの何人かはすでにお気に入りリストに入っています。
上の画像には2つの例があります。
- 左側の星は、アーティストのstateを示しています。現在、お気に入りに追加されているかどうかを示します。
- Xと+は、アイコンがタップされたときに発生するactionを意味します。アーティストは削除または追加されます。
テキストのないアイコンのみを使用する場合、アイコンの主な焦点は状態またはアクションですか？また、お気に入りリスト（すべてが既に追加されています）と検索リスト（ほとんどのアイテムはお気に入りに追加されていません）には異なるデザイン（アイコンの表示または非表示）を使用する方が良いでしょうか？
私は言わなければならないが、私はそれがあなたの最善の策になると思うほど十分に標準的なホロー対ゴールドスターの状態アプローチである。直感的になるだけでなく、状態とアクションの両方として機能します。ユーザーは「これをタップしてお気に入りに追加します-ほら、ゴールドになり、お気に入りに追加されました」にかなり慣れています。これは、制御と情報を1つにまとめた素敵で簡潔なパッケージです。活用してください。
まず最初に、少し概念化します状態はアクションから来ます。空の場所は何もない、空っぽです。アクションを実行できる可能性のある空の場所は、絶対に何でもかまいません。
上記の概念は、このような問題が発生するたびに異なるパスを決定するのに役立つため、重要です。
さて、あなたの特定の質問に戻って、いくつかの情報が不足していると思います（おお、恐ろしい「コンテキストはすべてです」）。たとえば、アクションがアイテムをお気に入りに追加/削除するのか、それを保存/削除するのかはわかりません。類似点はありますが、お気に入りは基本的にブックマークであり、データベースエントリへのショートカットです。したがって、クラウド環境で保存されたアイテムと同様に機能する可能性があります。ただし、保存とは、デジタル形式であっても、クラウドの独自のセグメントであっても、ユーザーが実際にアイテムを持っていることを意味します。
これを念頭に置いて、提案されたアイコンはあまり明確ではありません。星は通常、評価に使用されるため、少し摩擦があります。お気に入りアイテムにハートのアイコンを使用できます。ただし、より重要なのは、アイコンの追加/削除セットです。それらをfavアイコンの横に配置することにはかなりの摩擦もあります。そのため、favアイコンを使用して状態を通知する代わりに、アクショントリガーとして使用して、他の2つのアクションアイコンを取り除くことができます。たとえば、ハートを使用する場合、アクションが実行されていない要素に中空のハートを使用できます（上記の空の場所を思い出してください）。追加アイテムの塗りつぶされたハート。これらは州です。
次に、アクションについて、クリック時に条件付きを設定します：
if emptyItem (click) --> filledItem
elseif filledItem (click) --> deletedItem
else continue
そして、deleted itemの失恋を使用して、遊び心のある雰囲気を追加できます。 「中空に戻す」とは言っていませんが、削除済みとしてマークを付けて、ユーザーがアイテムを操作したことと、アイテムを削除したことをユーザーに知らせるようにしてください。あるいは、アイテムとして削除を追加するメニューを使用して、幸せなキャンピングカーになることもできます。
そして、これはすべて言われています：ラベルを使用。常に。ラベルが優れたUXである理由があります
他の回答で述べたように、空の星/塗りつぶしのスタイル（および星自体）は非常に一般的であるため、ユーザーの間で認知度が高くなる可能性があります。これを裏付ける適切な統計はありませんが、確かにたくさん見たことがあるとは言えません。 「いいね！」ボタンと「嫌い」ボタンは同じように機能するので、Webサイトがどのように処理するかを確認することもできると思います。
統計がない場合は、大企業がこの問題をどのように処理しているかを調べることができますが、その背後にある調査の利点があるかもしれないいくつかの情報を入手できます。
マイクロソフトは現在、OSの多くのバージョンのお気に入りを表すために星を使用していますが、Windows 7でわかるように、優先するための実際のボタンがないため、これは私たちにはあまり関係がありません。 Internet Explorerでは、スターを使用してお気に入りバーを切り替えるだけで問題が発生します。お気に入りバーからユーザーがページをお気に入りに追加したり、お気に入りからページを削除したりできます。
私の開発ツールに目を向けると、2015 Visual Studioのアイコンセットを確認してお気に入りに関連するアイコンを確認すると、お気に入りに追加アイコンと、塗りつぶされた空の星のアイコンがあります（これらは星の評価には使用できません;ハーフスターのセットもあるので、明確な答えはありません。
参考までに、Visual Studioの[お気に入りに追加]アイコン： 
（このスタイルのボタンは、ページに星が表示されている理由がわからない人にとっては許容できる譲歩ですが、これが望ましいかどうかは、ターゲットユーザーとアプリの全体的なレイアウトによって異なる場合があります。 ）
Appleに公平を期して、私はOSXの機能をすばやく検索しましたが、ファイルエクスプローラーの横にあるペインを信じているようです（間違っている場合は修正してください）。 。一見実際には関係ありませんが、アーティスト名をタップまたはタップアンドホールドして、お気に入りに追加するように促すことができるかもしれませんが、これは視覚的に明白なアクションの目標と実際には一致していません。あなたが目指していること。
一方、Googleは、お気に入りなどの2つの状態の概念に対して、アクションとしてのボタンを選択します。 Youtubeの「いいね！」ボタンと「いいね！」ボタンが良い例です（チェックすると青くハイライトされ、そうでないとくすんだ灰色になります）。彼らのChromeブラウザは別のものです。アドレスバーの右側に空の星があり、すでにお気に入りになっているページにいるときに塗りつぶされます。彼らがすることは、あなたが星を打った後に視覚的なフィードバックと編集ステージを提供し、ユーザーがお気に入りがどのフォルダーにあるか、タイトルなどを指定できるようにすることです。
そのようです：
これは、ユーザーがコンピューターの読み書きができない場合に、ユーザーがボタンを押したときに何が起こったかが明確であることを意味します。
モバイルの場合、これは、消えてしまう前に、「お気に入りに追加されました！」と言って、アプリの下部にダイアログポップアップを短期間表示するだけの簡単なものです。
写真はありませんが、AndroidのYouTubeアプリでは、カテゴリに動画を追加したときにこの動作が実行されます（後で見る、または実際にお気に入りなど）（ただし、ボタンを1回押す操作））、またはビデオの「いいね」/「嫌い」/「嫌い」/「嫌い」です。小さな通知がポップアップしてから消えます。Chrome for Android（お気に入りアイコンは右上のサンドイッチメニューにあり、アクションスタイルとしても状態です）、デスクトップバージョンのようなオプションのあるウィンドウの代わりに短い通知を選択します。この動作は維持されていると思います謝辞に関するGoogleのマテリアルデザイン基準に基づいて（私はそれをリンクしますが、悲しいことに、私は2つに制限されています）、次のように述べています。
謝辞は、システムが行っている暗黙の操作に関する不確実性を取り除きます。アクションを元に戻すオプションと組み合わせることができます。
[アクションが実行されたとき] ...トーストの形で確認が表示され、数秒後に消えます。
この最後のオプションにしばらく触れているので、あなたは私のバイアスを言うことができるかもしれませんが、私はそれが賢明だと思います（そして何が起こったのかを明確にします）、特にミスするのが難しいため、誤って操作を実行することはありません損傷を引き起こし、元に戻すには、ボタンをもう一度タップするのと同じくらい簡単です。
認められました。これはユーザーの認識に関する統計の代わりにはなりませんが、少なくとも、このアプローチは重要ではない対象者に適しているとGoogleが考えていると推測できます。
私はあなたが状態パラダイムを使用する現在のWebインターフェイスの大部分と一貫しているべきだと思いますたとえば、chromeお気に入りボタンは、ユーザーからのアクションを求めるのではなく、状態を表示しています。
また、YouTubeも同じパラダイムを使用しています。
したがって、違反を回避するには、アクションではなく状態パラダイムを使用します 一貫性ユーザビリティヒューリスティック 。