User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

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

share|improve this answer
5  
Well that looks like a better idea.I can understand how pathetic I can be at UX. – joey rohan 10 hours ago
3  
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.. 5 hours ago
1  
@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 5 hours ago

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?
share|improve this answer
    
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 6 hours ago

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

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


From your examples, you are using informative messages combined with buttons. I think the pattern should be:

"Information" + [Action]

  1. "No messages": There is no action here, only information, so a button has no purpose.
  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

In the case of links the scenario is different because the action is [Go] or [Visit]. For links the cases would be:

  1. "No messages": No link here.
  2. <Previous messages>: No need to specify the action.
  3. <New message from Mr. X>: No need to specify the action.
share|improve this answer

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.

share|improve this answer
    
The sender is just 1 person.(Same)Always. – joey rohan 7 hours ago
    
Then I guess you don't need the sender's name! – Eric Stoltz 7 hours ago
    
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 7 hours ago
    
@joeyrohan could you share a screenshot of the whole layout so we can see where are this notifications displayed? – Alvaro 7 hours ago
    
Sorry but I'm not in a position to do that – joey rohan 7 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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