Just a button, how hard can it be ?
Do the details right.
Do you know what a button is ? Some people said something that can click. Or Some said a component that has an action after clicking it. Either way, when people see a button, they should know that what action will be triggered after they clicked it.
Click triggers action. Simple. But how to design a button ?
Have a look of the following,
So which one do you think is a good button ?
Sadly, I would say, none of the above. Each one of them has some issues with it. For example,
- Only the text is clickable, the user will think that the button doesn’t work when the user “accidentally” clicked on the coloured area instead of the text.
- It doesn’t have a proper mouse cursor displayed. It’s fine for mobile, but not for desktop.
- Icons might not be known for everyone around the world. You might need to ensure your target audience is on the same page.
- Apart from being a rectangle with a text label, you agree that it doesn’t feel like button right ?
You might ask, “how should a proper button look like then ?”
Try the button below.
This is a more proper designed button. It has,
- the mouse-over colour
- a clear text label
- a proper sizing and spacing
- a proper mouse-over cursor showed
- enough contrast from the background of the page
In addition, try to take advantage of the HTML tags to show a more structured code. Like <button> tag, you would expect a button, and a <a> tag would be words with action, or it would be applying action to non-clickable components, like images.
Every tag also has default styles which should be helpful when designing a new web page.
Thanks for reading! If you like this article, hit the ❤ button below to show your support and also click Follow button for latest updates (*´꒳`*)