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?
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.
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.
Hope this helps!
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
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.
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.
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.