web-dev-qa-db-ja.com

リストアイテム固有のアクションをデフォルトで非表示にし、ホバー時に表示するか、常に表示する必要がありますか?

リスト(それ自体が美しいもの)をデザインするたびに、削除などの一括アクションではないリストアイテム固有のアクションをどのように処理するかについて疑問に思っています。

例を挙げましょう。レポートのリストがあり、リストのすべてのレポートは必要に応じて編集または実行できます。リスト内の3つの連続したレポートの場合、アクションが常に表示されると、次のようになります。 http://cl.ly/image/091k290d0E2i –これは機能するオプションですが、アクションを非表示にするオプションもありますが、ユーザーがリストアイテムにカーソルを合わせると、リストアイテムがアクティブになり、次のようにアクションボタンが表示されます。 http://cl.ly/image/001S3K28431Y

私は本当に楽しんで、尊敬する設計者によって設計されたさまざまなWebアプリケーションの両方を見てきました。また、あなたの個人的な正直な意見にも感謝します。

常に表示するアプローチについて私が個人的に気に入っているのは、それが誰にでもできることであり、ユーザーに行動を促すことです。一方、同じボタンを何度も繰り返して、ユーザーが必要としない多くの要素を表示することは、美的に非常に心地よく見えません。

ホバー表示のアプローチについて私が気に入っているのは、リスト項目自体にインタラクティブなコンテキストを追加し、必要な場合にのみ表示されることです(ユーザーが取得した場合)。それは本当に必要のないものを隠します。また、見た目もよくなり、リストの重量が減ります。一方で、これはイライラさせられ、常に表示するアプローチほど有効ではないかもしれません。

これについてあなたの考えとテストされた結果に興味があります。

ありがとう!

4
Thierry M.

ホバー効果のアイデアが気に入っています。ボタンを何度も繰り返すと、ボタンが雑然として見えるからです。ただし、ホバー効果はタッチデバイスでは機能しません。

他の解決策があります:

小さいアイコン

enter image description here

これらはボタンよりも小さく、見た目がすっきりします。編集には、クラシックな鉛筆アイコンを使用できます。 「レポートを実行する」には、飛行機(画像の右上のアイコンで視覚化しようとしたようなもの)または他の何かを使用できます。


オプションアイコン

enter image description here

このオプションでは、古典的な矢印を追加し、オプションを一種のドロップダウンに追加します。これにより、雑然とした外観も最小限に抑えられます。

3

アプローチを選択するときに考慮すべき主な質問が1つあると思います。 要素はリスト内の各アイテムに対して反復的ですか?そうであれば、要素にはコンテキスト情報を提供する状態変化がありますか?

トピックとしてメールの受信トレイを使用してみましょう。

受信トレイには通常、アイテムのリストにお気に入りのコントロールがあり、アイテムにお気に入りのフラグを付けることができます。ここではアイテムの存在が繰り返され、フラグが立てられているかどうかにかかわらず、2つの異なる状態で表示されます。このようなシナリオでは、各アイテムの値をユーザーに明確に提示するため、要素は永続的である必要があります。

受信トレイは通常、添付ファイルインジケーター要素などの非繰り返しコントロールも備えています。この要素は受信トレイリストのすべてのアイテムに存在するわけではないため、リストのすべてのアイテムに永続的に表示されるように動機付けられているため、ユーザーは直接操作して手動で添付ファイルを含むメールを見つける必要がありません。

私の考えでは、永続的な視覚要素を必要としない最後の例は、削除コントロールです。ユーザーは、個々のメッセージを削除できること、必要なメッセージを削除できること、および各メッセージに削除できることをユーザーに通知させることにより、リストがビューを乱雑にする必要がないことを知っています。ホバーにコントロールを表示するだけで十分です。さらに、アイテムとアクション(OPでも言及)の間の優れたマッピングも提供します。

上記のシナリオでは、3番目の例に最も近いと思います。リスト内のすべてのアイテムで使用できる一連のアクションがあるため、貧弱なUXがリスト内のすべてのアイテムに対して永続的に表示される可能性があります。

1
AndroidHustle

ユーザーエクスペリエンスから、私はほとんどが行ごとのアイコンオプションに精通していると思いますので、これは安全な機能です。いくつかの思慮深いデザインのタッチデバイスを使用すると、非常に美的に楽しいIMHOにすることができます。 代替案

リストの実装については、UXガイドをご覧ください。

  1. Android
  2. Microsoft
  3. アップル

結局のところ、いくつかのロギングツールを使用して、人々が実際に各行に何を使用しているかを確認し、人気のあるものだけを残すことができます。

0
Jamie Clayton

たまたま、私が目にした多くのリストでは、複数のアイテムに対して同じアクションがあり、それらのアクションがリストの一番上にリストされています。次に、実行するアイテム(またはこの場合はレポート)を選択して、[レポートの実行]ボタンをクリックします。これでうまくいきますか?

enter image description here

0

ボタンの束で煩わされることなく、ユーザーがアクションを実行できることをユーザーに知らせたいようです。

アイテムがたくさんある場合は、無駄な形や情報を追加するため、ボタンを表示しない方がいいと思います。それ以外の場合、短いリストがある場合は、それぞれのボタンを表示しても問題ありません。

Scoop.itが使用している他のソリューションがあります。それぞれのコンテンツには、右上にアイコンが付いた緑色の四角があり、展開して「Scoop.it!」という単語を表示します。ホバー時(下のスクリーンショットを見てください)。ユーザーがアイテムを操作できるという事実をユーザーに無視させたくない場合は、このようなものを追加してみてください。

Scoop.it button on hover

0
Gabin