17

I have 3 cases about the messages:

  1. No messages by Mr. X

  2. Some previous messages by Mr. X

  3. A new Message by Mr. X

I wanted to show these notifications on the button itself something like:

Case 1: No messages at all:

grey button with white text: "No Messages"

Case 2: Show previous messages:

orange button with white text: "Show Previous Messages"

Case 3: A new message:

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

I have no experience at UI. I'm a backend developer. Is this an acceptable design? Or is something better needed?

PS: This is a mobile application.

34

The label on the button must not change. This will confuse users. What you can do is keep the label constant and enhance the button with additional info accordingly. You may change the color, add additional graphics, but do not change the label.

I recommend the following :

Display a red circle on the button when new messages exists. In the circle put the number of new messages.

enter image description here

If it is very important to know the sender of the message then display the sender name of the first message.

enter image description here

I do not find the information "No previous messages" important so I recommend you to omit it. But if you must show the "no message state" then disable the button.

enter image description here

  • 7
    Well that looks like a better idea.I can understand how pathetic I can be at UX. – joey rohan Mar 17 '17 at 14:23
  • 8
    More importantly, not just the name but the function of the button must not change asynchronously. If it does, you create a race condition where the user's intended action at the time they acted to click/touch the button is not the action that's performed when the application responds to the input. – R.. Mar 17 '17 at 19:58
  • 3
    @joey rohan as a backend developer who has had to learn UX, it isn't so much pathetic as inexperienced. Do a lot of reading and you'll catch up. Ultimately, there is nothing that can replace an expert, but at least learn the top 25 things to do and not to do and you'll be off to a good start. – Guy Schalnat Mar 17 '17 at 20:06
  • "Badges" seem to be the better, more modern way to approach this kind of UI decision. Although a longer name my prove awkward for accessibility. – user98214 Mar 18 '17 at 10:01
5

The Material Design guidelines recommend showing notification on icon which is a set pattern across mobile apps and even on PC web applications:

Expandable notifications are revealed by tapping an indicator icon. Actions are displayed using text only (which accommodates more characters) on a separate background color and location.

When a notification arrives, it gets added to the notification drawer.

By showing the notifications on buttons will break the pattern, and turn out to be a bad user experience. It will become worst when you think about scalability:

  • What will happen when the user receives messages from Mr. A, Mr. B, Mr. C....... Mr. n?
  • In the case of "Mr. A, Mr. B, etc." it would be "New Messages from N Contacts" where N is the number of contacts we have new messages from. – Aaron Mar 17 '17 at 18:53
  • I agree with Dipak. However @Aaron, what if the sender's name is too large ? You don't have enough space to show the whole name, so it will be splitted too soon. I suggest only the badge approach, without the sender's name on it. – digulino Mar 23 '17 at 10:39
  • @digulino The senders name is irrelevant in the format I noted in my previous comment. The name is not included in the text. – Aaron Mar 30 '17 at 20:27
3

If you are showing the user a notification, which are meant to appear out of the context of your app like in a Notification drawer, I suggest you follow the established pattern recommended by @Dipak.

If you are showing the user buttons or links inside your app, these are some thoughts in case they are helpful.


  • Messages combined with buttons:

" Information in a string " + [ Action in a button ]

  1. "No messages" There is no action here, only information.
  2. [Show previous messages] Clear action inside the button. No information here (other than previous messages exist)
  3. "New message from Mr. X" [Show]: The message is separated from the action. This way you can manage scalability better as @Dipak suggests

  • Links: the scenario is different because the action is Go or Visit and the information is the link itself.

    1. "No messages" There is no action (nowhere to visit) so no link here.
    2. <Previous messages»>
    3. <New message from Mr. X>
2

It seems this is not a button (an affordance that initiates an action or completes a form), but rather navigation (an affordance that takes the user somewhere). As such, it should not look like a button.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I wonder if you need to show who it's from. Doesn't that seem to provide some reason for not checking messages? If you need to know who it's from before clicking the link, list the senders on hover.

  • The sender is just 1 person.(Same)Always. – joey rohan Mar 17 '17 at 17:34
  • Then I guess you don't need the sender's name! – Eric Stoltz Mar 17 '17 at 17:41
  • Well I need it as the name is related to the whole app.For EG If I'm Simon giving commands to others, It's important highlight the name. ' A new order from Simon !' – joey rohan Mar 17 '17 at 17:47
  • @joeyrohan could you share a screenshot of the whole layout so we can see where are this notifications displayed? – Alvaro Mar 17 '17 at 18:02
  • Sorry but I'm not in a position to do that – joey rohan Mar 17 '17 at 18:08
-1

As written above - material design gives a very distinct style for notifications . the pattern and interactions are very simple to follow and build .

follow this link for more information on notification patterns .

https://material.io/guidelines/patterns/notifications.html#notifications-anatomy-of-a-notification

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.