2

I been making this message box's for my app, and i started thinking about how they presented to the user, if they are dominant enough that the user could easily understand what are the purpose of the button. Example :

enter image description here enter image description here

What the correct guidelines for this kind of message box's that mostly relays on two main Colors?

Roi Mulia
  • 879
  • 5
  • 19
  • Agree with Benny. I also recommend giving a little shadow about 2px to separate it from background. –  Dec 24 '15 at 04:31

2 Answers2

3

Buttons are buttons, regardless of which UI element they are placed in. In your case you use two colors that are equally intense, and it's difficult for the user to know that the button is in fact a button. Using less intense color on the background will make your button stand out.

Make Buttons Appear Clickable

There’s a few ways to make buttons appear nice and clickable.

Let’s go through some considerations that Gabrielle Gosha outlines in her excellent Sitepoint article:

  • As we said above, color is an important part of making a button stand out. It’s also useful in making a button clickable. If the button blends too much into the background, a user won’t realize that it’s something you can press.

  • Buttons should also contain text that provide the user with further visual clues to direct action. Text can be used to clearly direct the user, such as “sign up”, “join now”, or “get started.”

  • Give the button some room to breathe. When placing a button below a chunk of text, we’d recommend adding a margin that’s roughly ⅔ the height of the button.

  • ... Size matters when it comes to buttons. You want to consider how big the button is in relation to the other elements on the page. Too small and it’ll go unnoticed. Too big and it may overwhelm users.

Source: The Ultimate UX Design of the Perfect CTA Button

Community
  • 1
Benny Skogberg
  • 54,996
  • 22
  • 140
  • 241
3

Good affordance is really just mimicking how something would look in the real world.

How do I know what a button looks like?

  • Mechanical button normally sticks out a little, so there might be a 3D effect or some shadows.
  • Many devices no longer have buttons that stick out, so they rely on an action icon that people recognise (e.g. the power button symbol, a play / pause button, and arrow), and some back-lighting to give the buttons a distinctive colour.
  • Usually physical buttons are grouped together, look similar, and are located in the same area for different devices. Make sure that you have a standard way that buttons look in your app / on your site, and don't just dot them around at random. Have consistent look (same colour and shape) and positioning (each screen might for example have a button area). Once they discover that something is clickable they can easily find the other buttons.
Franchesca
  • 12,525
  • 3
  • 23
  • 36