web-dev-qa-db-ja.com

それを開くボタン自体に非常に重要な通知を表示するにはどうすればよいですか?

メッセージについて3つのケースがあります。

  1. Xさんからのメッセージはありません

  2. X氏による以前のメッセージ

  3. Xさんからのメッセージ

私はボタン自体にこれらの通知を次のように表示したいと思いました:

ケース1:メッセージがまったくない:

grey button with white text: "No Messages"

ケース2:以前のメッセージを表示:

orange button with white text: "Show Previous Messages"

ケース3:新しいメッセージ:

orange button with yellow text: "* A New Message from Mr. X!"

UIの経験はありません。私はバックエンド開発者です。これは許容できるデザインですか?それとももっと良いものが必要ですか?

PS:これはモバイルアプリケーションです。

17
joey rohan

ボタンのラベルは変更しないでください。これはユーザーを混乱させます。できることは、ラベルを一定に保ち、それに応じて追加情報でボタンを拡張することです。色を変更したり、グラフィックを追加したりできますが、ラベルは変更しないでください。

以下をお勧めします:

新しいメッセージが存在する場合、ボタンに赤い丸を表示します。サークルには新しいメッセージの数を入れます。

enter image description here

メッセージの送信者を知ることが非常に重要な場合は、最初のメッセージの送信者名を表示します。

enter image description here

「前のメッセージはありません」という情報は重要ではないので、省略することをお勧めします。ただし、「メッセージなしの状態」を表示する必要がある場合は、ボタンを無効にします。

enter image description here

34
DesignerAnalyst

マテリアルデザインガイドライン モバイルアプリ全体、さらにはPCウェブアプリケーション全体で設定されたパターンであるアイコンに通知を表示することをお勧めします。

インジケーターアイコンをタップすると、展開可能な通知が表示されます。アクションは、別の背景色と場所にテキストのみ(より多くの文字に対応)を使用して表示されます。

通知が到着すると、通知ドロワーに追加されます。

ボタンに通知を表示すると、パターンが崩れ、ユーザーエクスペリエンスが低下します。スケーラビリティについて考えると、それは最悪になります。

  • ユーザーがAさん、Bさん、Cさん……nさんからメッセージを受け取るとどうなりますか?
5
DPS

通知ドロワーのようにアプリのコンテキスト外に表示されることを意図した通知をユーザーに表示している場合は、@ Dipakが推奨する確立されたパターンに従うことをお勧めします。

アプリ内にユーザーボタンやリンクを表示している場合、これらは参考になるかもしれません。


  • ボタンと組み合わせたメッセージ

"文字列の情報" +[ボタンのアクション]

  1. "No messages"ここではアクションはなく、情報のみです。
  2. [Show previous messages]ボタン内のアクションをクリアします。ここには情報はありません(以前のメッセージ以外に存在します)
  3. "New message from Mr. X" [Show]:メッセージはアクションから分離されています。このようにすれば、スケーラビリティをより適切に管理できます @ Dipakの提案

  • リンク:アクションはGoまたはVisitであり、情報はリンク自体であるため、シナリオは異なります。

    1. "No messages"アクションがない(訪問先がない)ため、ここにリンクはありません。
    2. <Previous messages»>
    3. <New message from Mr. X>
3
Alvaro

これはボタン(アクションを開始する、またはフォームを完了するアフォーダンス)ではなく、ナビゲーション(ユーザーをどこかに移動するアフォーダンス)のようです。そのため、ボタンのように見えるべきではありません。

mockup

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

それが誰のものかを示す必要があるのか​​しら。それはメッセージをチェックしない理由を提供していないようではありませんか?リンクをクリックする前に送信者を知る必要がある場合は、ホバーに送信者をリストします。

2
Eric Stoltz