web-dev-qa-db-ja.com

リスト内の要素が「新しい」ことを示す方法

リストの要素がnewであることをどのように示すかについての賢いアイデアがあるかどうか疑問に思っていました。

私の場合、ドキュメントのリストを表示しており、そのページに最後にアクセスしてからどのドキュメントが新しいかをユーザーに確認してもらいます。

私は2つの方法を考えることができます:

  • 「新しい」ラベルまたはバッジを追加することで(ただし、それは避けたい)
  • テキストを太字にして背景を他のドキュメントよりも明るくすることで、目立つようにします。たとえば、前回から新しいメールを表示するためにGmailが行うことです。
  • それらのアイテムに別の背景色を選択する。私の場合、色は本当に限られています...

他に何か考えられますか?示す例はありますか?

私の場合、新しい要素は常にリストの一番上になります。

どうもありがとう

26
Raphaëlle M

ドキュメントに追加属性(列)として「追加日」を表示し、新しいエントリの日付に色を付けることをお勧めします。

enter image description here

あるいは、太字の日付のテキストを設定できます。

24
Simon

Gmailインターフェースで発生するように、未読メールの「新しさ」は、数秒後に非表示になる一時的な「新しい」タグによって区別されます。これが、昨日の未読メールとは別に、Gmailが今日の未読メールを通知する方法です。ただし、これはお客様のケースには適用されません。

私の心の解決策は、たとえば「2時間前」など、各行に表示される単純なタイムスタンプです。背景色のバリエーションが役立ちますが、それらはそこから最もアクセスしやすいオプションではありません。

とにかく最新のメッセージを一番上に置くので、タイムスタンプはアイテムがどれだけ新しいかを区別するのに役立ちます。

最後の「新しい」アイテムの下の単純な水平線も、新しいものと古いものを視覚的に区別するのに役立ちます。あなたのケースでは、ユーザーがアイテムを操作する必要はなく、ページが更新されると「新しさ」は失われると思います。

6
Adnan Khan

「セックスしたいなら言って」

A caricature of a couple in bed, with the women telling the man "If you want sex, just ask - there is no need to preface everything with 'in the light of recent events'"

または言い換えると、(n次のセマンティクスを使用するのではなく)最も明確で最も直接的かつ簡潔な方法で情報を伝達します。

視覚的特徴は、n次のセマンティクスを構成します。

あなたは、新しいドキュメントが常にリストの一番上にあると述べました。新しいドキュメントが本当にユーザーにとって本当に興味深いものである場合は、それをユーザーに提供します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

4
Izhaki

私はこの方法が大好きです:要素の背景を明るい黄色に変換し、数秒後にデフォルトの背景色にフェードします。

Highlight new item animation]()![On add item, the new item in the list gives a highlight for some time

2

頻繁にアイテムを追加するリストの更新されたアイテムに十分な価値を追加しない「新しい」を使用することには反対です。 「1h」、「2d」などのタイムスタンプを使用することが標準になるので、人々はそれを認識できます。Facebook、Twitter、Gmailなどのソーシャルネットワークアプリでも同じ経験があります。この表現フォームもAndroidおよびiOS。リストアイテムのタイトルの横にあるこの機能を使用することで、これが新しいこと、および他のアイテムよりも新しいことをユーザーにすばやく知らせることができます。 2文字だけの貴重な情報:「1s」(1秒前)

2
aliesifar

色あせた背景のアニメーションを使用できます(Wordpressは管理パネルで使用していると思います)。

次のように機能します。

  1. ユーザーがページにアクセスした
  2. リストの新しいアイテムは背景色(そしておそらくラベルnew)でハイライトされます
  3. 3秒(またはそれ以下)を超えると、ハイライトと新しいラベルが、二度と見られない他のアイテム(おそらく白)の背景色にフェードします。

次に、ユーザーはリストと対話して、すべてのアイテムが視覚的に等しくなり、新しいアイテムが通知されます。

これは短期間のメモリの成功に大きく依存するため、リストに含まれるアイテムの数、追加される新しいアイテムの数、ユーザーが新しいアイテムを覚えておくことがどれほど重要かによって異なります。

1
user11449

ユーザーへのnewの定義に問題がある可能性があります。

ユーザーは通常、投稿の日時と鮮度シールを理解します。

それとは異なるnewを定義することはできますが、ユーザーに同じように表示することは期待できません。製品の所有者がそれを望んでいない場合は、問題になる可能性があります。 newを意味します。

それを複雑にしすぎると、混乱してしまうかもしれません。牛乳を買うみたいだと聞いたことがあります。

  • 開かれましたか?
  • 有効期限は?

有効期限が切れていない場合を除き、最も関連性の高い日付、受け取った日付、または出荷された日付を使用してください。

今日届いたものの色分けのアイデア、または関連する日付が今日の場合に日付部分をTodayに置き換えるのが好きです。

その鮮度シールについては、私は人々が慣れ親しんでいるものをそのまま使います。 Outlook、iphoneメール、Gmail、または受信トレイを参考にしてください。あなたは直感的になりたいと思っており、直感的であることは通常、主要なプレーヤーが確立した期待に一致することと一致します。

1
Andrew Hoffman

「新しい」ラベルまたはバッジを追加することで(ただし、それは避けたい)

さて、「古い」ラベルまたはバッジを追加して、それをその他すべてのドキュメントに適用できます。

真剣に、とにかく新しいドキュメントを最初に表示する場合は、「古いドキュメント」というラベルの付いた垂直方向の仕切りを使用できます。または、ラベルのない単純な縦の仕切り。ユーザーの99%が、サイトを数回使用しただけで、それが何を意味するのか理解できると思います。

0
Atsby

アプリケーションによって異なります

以下は、コンテンツが新しいことをユーザーに示すために使用、混合、またはまったく適用できない手法の一般的なリストです。

  1. 太字を適用
  2. フォントサイズを縮小または拡大する
  3. 新しいコンテンツ間の間隔を調整、増加、または減少する
  4. 新しいコンテンツに「新しい」ラベルを追加または追加する
  5. コンテンツのリストごとの新しいアイテムの数を含むメッセージを追加または追加します
  6. タイムスタンプを、ユーザーの現在時刻に相対的でわかりやすい形式でフォーマットします

最初に尋ねるべき質問は、UIに「新しい」要素を最初から含めるかどうかです。ユーザーは、最近追加された新しいコンテンツを知ることから利益を得ますか?もしそうなら、どのような文脈で?ユーザーが新しいコンテンツを操作する方法は、アプリごとに異なります。ユーザーは、変更されたコンテンツに対する認識も大きく異なります。太字のテキストを「変更された」または「変更されたコンテンツ」と解釈するユーザーもいれば、まだ保存されていないコンテンツとしてテキストを解釈するユーザーもいます。さらに、一部のユーザーは、リストの項目間の変更に混乱したり慌てたりする可能性があります。

ユーザビリティ調査の結果、新しい要素を含めることが実際にユーザーに役立つと判断した場合は、特定のユーザーフローを解決します。いくつかのユーザーストーリーを分離してみてください。結局のところ、ユーザー調査を実行することに代わるものはなく、上記の手法の任意の組み合わせがユーザーにとって最も有益であることが判明する可能性があります。

方法6を採用している次の表を見て、最新のコンテンツをすぐに見つけられるかどうか自問してください。

relative timestamps

場合によっては、レコードの変更日を示すだけで、その「新しさ」を伝えるのに十分です。しかし、最終的には、最新のレコードの伝達はアプリケーションに依存します。

0
user1429980