メッセージについて3つのケースがあります。
Xさんからのメッセージはありません
X氏による以前のメッセージ
Xさんからのメッセージ
私はボタン自体にこれらの通知を次のように表示したいと思いました:
ケース1:メッセージがまったくない:
ケース2:以前のメッセージを表示:
ケース3:新しいメッセージ:
UIの経験はありません。私はバックエンド開発者です。これは許容できるデザインですか?それとももっと良いものが必要ですか?
PS:これはモバイルアプリケーションです。
ボタンのラベルは変更しないでください。これはユーザーを混乱させます。できることは、ラベルを一定に保ち、それに応じて追加情報でボタンを拡張することです。色を変更したり、グラフィックを追加したりできますが、ラベルは変更しないでください。
以下をお勧めします:
新しいメッセージが存在する場合、ボタンに赤い丸を表示します。サークルには新しいメッセージの数を入れます。
メッセージの送信者を知ることが非常に重要な場合は、最初のメッセージの送信者名を表示します。
「前のメッセージはありません」という情報は重要ではないので、省略することをお勧めします。ただし、「メッセージなしの状態」を表示する必要がある場合は、ボタンを無効にします。
マテリアルデザインガイドライン モバイルアプリ全体、さらにはPCウェブアプリケーション全体で設定されたパターンであるアイコンに通知を表示することをお勧めします。
インジケーターアイコンをタップすると、展開可能な通知が表示されます。アクションは、別の背景色と場所にテキストのみ(より多くの文字に対応)を使用して表示されます。
通知が到着すると、通知ドロワーに追加されます。
ボタンに通知を表示すると、パターンが崩れ、ユーザーエクスペリエンスが低下します。スケーラビリティについて考えると、それは最悪になります。
通知ドロワーのようにアプリのコンテキスト外に表示されることを意図した通知をユーザーに表示している場合は、@ Dipakが推奨する確立されたパターンに従うことをお勧めします。
アプリ内にユーザーボタンやリンクを表示している場合、これらは参考になるかもしれません。
"文字列の情報" +[ボタンのアクション]
"No messages"
ここではアクションはなく、情報のみです。[Show previous messages]
ボタン内のアクションをクリアします。ここには情報はありません(以前のメッセージ以外に存在します)"New message from Mr. X" [Show]
:メッセージはアクションから分離されています。このようにすれば、スケーラビリティをより適切に管理できます @ Dipakの提案リンク:アクションはGo
またはVisit
であり、情報はリンク自体であるため、シナリオは異なります。
"No messages"
アクションがない(訪問先がない)ため、ここにリンクはありません。<Previous messages»>
<New message from Mr. X>
これはボタン(アクションを開始する、またはフォームを完了するアフォーダンス)ではなく、ナビゲーション(ユーザーをどこかに移動するアフォーダンス)のようです。そのため、ボタンのように見えるべきではありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
それが誰のものかを示す必要があるのかしら。それはメッセージをチェックしない理由を提供していないようではありませんか?リンクをクリックする前に送信者を知る必要がある場合は、ホバーに送信者をリストします。