It is more and more often when I visit some website and no matter how great or bad they look, one thing catches my attention almost immediately. States for buttons and links. Some of those websites does not use any styles or whatever to help user differentiate between default, hover and active state. If you are asking why am I doing such big deal around that, I will explain it in lines below…
This “no states” situation is mostly applied to social media buttons or links and so it does no big harm. However, imagine following scenario: You are about to fill form on a some website. All fields are filled in and you move to submit button. You hover over it and nothing happen. Who cares, right? Click … Nothing happen. Click. No matter how many times you try, form is not submitted and nothing is sent on the server. Where is the problem? Did you forget something? Is button broken or some script blocked? As a web designer or developer you quickly bring in the element inspector and found out that button is really broken (php file is missing or whatever).
I know that this is rare to happen, but still it can. Because of your skills, you know where to look and understand what is the problem – this does not have to apply to other users. Not every user is front-end developer, web designer or programmer. You have to switch your view and look at it from perspective of average users. His typical reaction on not working button will probably be few clicks and then leaving the site. In long-term this may cause the owner of site a lot of troubles with decreasing time span of visits and possibly also search ranking.
Another case can be if you enhance your website with icons for sharing content on social media. In default, they are styled in some way, but you can override these styles very easily and quickly through their classes or HTML elements. Now, think about plain like button. For whatever reason you change the default states and forget or just don’t want to style hover and active or visited state. After you got rid of all default styles, then the only thing that differs between default and “liked” state is the text. If you went deep into detail and override even this basic behavior, there is no way to recognize if you clicked (liked) on that button or not. It is just a plain box on the page, one between many. No difference.
This was well discussed subject when flat design took over the web. Some people were complaining on missing shadows and gradients that were previously used to differentiate between non-interactive content and buttons. Good solution came in using different colors and background properties for different states, so the button behave somehow and allow you to understand that: “This is indeed button.”
Now, we got rid of this solution via colors and backgrounds. What the f***?! What will be next? Will we get rid of icons and text so we can play “guess which icon is this”?
Summary
When designing a website we should think about buttons not only from visual point of view, but also from perspective of UX. Those nice color effects and transitions have some meaning and function. They are not a stupid decoration, so don’t think about them only in that way.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
