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?
-
"Login" and "Register" both look clickable to me. Is there something else you're talking about?– Ken MohnkernSep 11, 2018 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!– maxathousandSep 11, 2018 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.– mrchaarlieSep 12, 2018 at 14:45
Add a comment
|
5 Answers
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.
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
-
1Would 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. Sep 11, 2018 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 larkSep 11, 2018 at 20:49
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.
