3

This question already has an answer here:

I always notice that my designs look good but buttons and other clickable elements don't look clickable. Can you provide any tips or links that can help me?

enter image description here

marked as duplicate by maxathousand, Andrew Martin, locationunknown, Shreyas Tripathy, Wanda Sep 13 '18 at 8:54

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • "Login" and "Register" both look clickable to me. Is there something else you're talking about? – Ken Mohnkern Sep 11 '18 at 13:22
  • Hi @Naren, I believe several answers to this other question I marked might include strategies that might be able to solve your problem. If not, feel free to edit your question to clarify any other concerns you have that aren't addressed there. Thanks! – maxathousand Sep 11 '18 at 13:24
  • > "I always notice that my designs look good." Alright there, that's both subjective (even debatable) and irrelevant. Not to be rude, but you can leave that out of your questions and try to focus on the problem by providing some examples of your own work and research. – mrchaarlie Sep 12 '18 at 14:45
4

The buttons lack affordance (wikipedia).

In your case, I'd start by putting a diffuse box shadow on the button and see if that gives you what you need.

If you want to be sure that you've made a button feel clickable, you need to find a way to make it look like it's visually raised above the background. The idea is that it needs to feel like you can press it down.

Some techniques to do this include:

  • box shadows
  • gradient effects on the button to imply a light source
  • darkening two borders to give a sense of height.
  • drop shadows

There's some additional information in this answer

There are other styles of button that don't rely on affordance to make them feel like buttons, but they normally work within design systems where there's already a convention on what is and isn't a clickable object. (e.g. text buttons in material design, ghost buttons in flat design)

Don't try to use these types of button by themselves, they only work when they're part of the design system they're designed to work within.

1

Please look this buttons guide for some ideas: https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6

Also in current case I'll use rounded rectangular button. The same approach is partly used for Register button

  • Would you mind including some relevant excerpts from that source in your answer? In the event that the link breaks in the future, at least we'll have the important pieces included here. – maxathousand Sep 11 '18 at 13:15
  • As for me all article is good to read but in current case think we can save follow information: "Usually, you’ll want to make buttons square or square with rounded corners, depending on the style of the site or app. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element." – Alx Lark Sep 11 '18 at 20:49
1

I think your design looks good. And the button looks clickable too. A login in a rectangle after Username and password is a button and the users have evolved from the stone age of the Internet. (PUN)

As @Racheet covered nicely in the reply, about the affordance, the one improvement you can bring in is the rounded corner to the button.

Many affordances work to identify clickability:

  • Subtle change in shape (Not present here)
  • Change in color/shade (present here)
  • shadow indicating 'press me' (Not present here)
  • slight dark borders (not present here)

    I have tried to include some of the affordances listed above and not present in your present designs.

Option 1 with change in color of the button (Loud)

With a drop shadow

Option 3 with same button in grey color scheme

Hope this helps!

0

It doesn't seem like the rest of your UI is using shadows, so if you want to keep it flat and greyscale, the easiest way would be using a border of a darker shade, slightly rounded corners and barely-there gradient, or any combination of at least two.

A good example of such buttons is the pre-material Gmail interface.

enter image description here

That said if there's a primary action behind the button, many otherwise flat user interfaces will use drop-shadow to create a sense of importance and hierarchy, making the button look like it's floating above the rest of the elements.

0

There's a bunch of good comments about shape and some basic skeumorphism, but I believe that if you want to keep your shapes, you could achieve a lot by changing the colour. Grey is probably your biggest enemy in that regard. It looks like you're going for a very clean look, if you want to avoid very bright colours, consider black / very dark grey instead.

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