web-dev-qa-db-ja.com

お気に入りのインタラクションとしてマーク

私のクライアントは、デザインライブラリに基づいてWebページをデザインする大企業です。すべての内部アプリのカタログを作成しようとしています。何度か話し合った後、私たちはこの設計にたどり着き、それは受け入れられました。

enter image description here

ユーザーがお気に入りのアイコンをクリックしたときに、どのような相互作用が正しいのかと思っていました。最初のアプリが気に入ったときに、新しいセクションを作成することにしました。 enter image description here

正しい方法は何でしょうか?

少し後退した場合、クライアントは(SSO)を使用してログインするユーザープロファイルに基づいてリストされた内部アプリのクリーンなカタログを求めています。ユーザーが最近表示したものとお気に入りを一緒に表示できるようにするにはどうすればよいですか。

助言がありますか

2
Nodnin

自動的に移動しないでください。リストの半分まで来て、「ああ、これが好きだ!」星をクリックすると、見えなくなったら非常にイライラします。代わりに、「お気に入り」アイコンを入力して、ユーザーのお気に入りリストに追加されたというフィードバックを提供します。

さらに、お気に入りでフィルターする方法を提供します。見たいものがお気に入りに含まれているのがわかっている場合は、他の場所に移動しないでください。ただし、気にしないもの(お気に入り以外)は除外できます。

2
maxathousand

これは多くのショッピングWebサイトでかなり一般的なインタラクションであり、標準はほとんど常にあります。

  • ユーザーが開いているアイコンをクリックまたはタップした場合(デフォルト)、開いているアイコンを塗りつぶされたアイコンに変え、お気に入りに追加します。
  • ユーザーが塗りつぶされたアイコンをクリックまたはタップした場合、塗りつぶされたアイコンをデフォルトにして、お気に入りから削除します。

インタラクション中に製品を別のセクションに移動すると、非常に耳障りな経験になり、間違いを修正するのが難しくなります(たとえば、ユーザーが意図しないアイテムを誤ってお気に入りに追加した場合、削除するために新しい場所で見つける必要があります) )。

また、何かが発生したことを示す明確なインジケーターを示す中間状態を追加することもできます。たとえば、2秒以内に消えて消えるメッセージなどです。

favorites states

@maxathousandが言ったように、ビューを切り替えて、お気に入り、最近使用した、またはすべてのアプリケーションのみを表示する方法を提供します。これは、同様の目標を達成するため、おそらく検索フィールドと同じ階層に移動するはずです。

2
dekaliber

アイテムが選択されていないときに♡を追加し、お気に入りになったらこの♥のようなアクションカラーを与えます。

緑や黄色など、テーマやテンプレートで機能する明るい成功色を使用します。ユーザーがクリックしてトランジションやアニメーションを追加すると、輪郭が描かれたハートに色がなじみ、イベントが発生するときにユーザーがイベントを登録します。

ハートのアイコン=ほとんどのウェブサイト/アプリの標準のお気に入りアイコン

1
UX.DevDude