web-dev-qa-db-fra.com

Autre méthode d'affichage de l'alerte de notification à l'utilisateur avec des icônes maladroites

En raison de la nature maladroite de mon icône de notification, j'ai été obligé de régler avec un point rouge près de l'icône de notifications, ce qui semble moins qu'idéal du point de vue UX, en particulier parce qu'il n'est pas assez clair. J'ai essayé de le mettre en haut à droite de l'icône, mais cela n'a pas fonctionné, alors je voulais demander, les alertes de notification des utilisateurs peuvent-elles être affichées de meilleures façons?

Dans une situation où je devrais changer l'icône - j'accueillerais toute suggestion.

enter image description here

gui-designiconsnotificationmobile-application
3
methuselah

Je ferais 2 changements:

  1. Remplacez l'icône de notification par celle affichée sur la capture d'écran. C'est du thème Iconic. ( http://somerandomdude.com/work/iconic/ )

  2. Avoir 2 états pour l'icône:

    • Inactif: affiche l'icône blanche.
    • Actif: modifiez la couleur d'arrière-plan de l'icône et affichez le nombre de notifications. Je limiterais les nombres jusqu'à 3 chiffres. De cette façon, si vous avez plus de 99 notifications, affichez "+99".

enter image description here

5
mencina

Si les icônes et les libellés ne peuvent pas être modifiés, vous pouvez peut-être ajouter nombre de notifications nouvelles/non lues au point rouge?

[ICON]      # No unread notification
[ICON] (1)  # one unread notification
[ICON] (2)  # two unread notifications
…
1
unor

Que diriez-vous de remplacer simplement le point rouge par un numéro rouge dans un badge? Il s'agit d'un élément de conception assez courant; par exemple, voir Bootstrap badges: http://getbootstrap.com/components/#badges

les notifications iOS, par exemple, n'ont pas du tout de point rouge; seul le nombre de notifications est affiché.

1
Sherwin

La modification des couleurs d'arrière-plan et de bordure peut également être utile.

1
adam-asdf