There are many elements that make the difference between a web design and a good web design and one of the main factors is the care of each of these design elements involved.
We must not only take into account the user experience (although it is one of the main factors) to design a good web structure. But there are certain elements that we have seen on some occasions. They have a key role so we have to take care of every single detail, and one of them are the buttons.
In general terms we have spoken on several occasions of them, their shape, their clarity … But given the importance of the same, we felt it necessary to make an article just for them, to see everything we have to take into account in the design thereof.
In the end, they are one of the most important elements in a web, as they often accompany us while browsing through them and are responsible for guiding our attention, making easier navigation and also getting different processes.
So here we go!
Button analysis
Surely you will wonder how an element that may seem small has many factors to consider; but the reality is that it is quite a complex element of the design of each of these factors that will get our user remains with us or not.
I think we are not able to imagine a web without buttons and therefore, they must be well designed. In general there are three points we have to take into account:
1. Decide how many buttons will be and the hierarchy among them: What text will contain each? Make an outline about what buttons you need and for what.
2. Define the qualities of the button, colours, borders, text situation…: Everything carries with design, taking into account their situation.
3. Know how the buttons will behave when we do hover over them and also when clicking on them: A button has different positions and all must be designed.
So, to make all these decisions, we have to study well all aspects of it and make the decision that fits the best.
Here is an example of all the elements that we must take into account and must be perfectly thinking. It no longer seems a simple item, does it?
1. Definition of the types of buttons and text thereof
Normally, we do not only use a button type, but based on the same design, we can create different hierarchies, for example just changing the size. If we have a list in which all items carry the same button, try to make these clearer, avoiding the user get lost in a forest of buttons.
The buttons are generally used to draw attention one way or another, so it is very important to be understood, namely giving importance to each of them.
In the same way, choose the text of the button. Search the keywords that make your users know exactly where and why will be clicking right there. In the end, a button is a wakeup call so we have to get it.
Once we have different types of buttons that we need and the text that will hold each of them, we can take the next step and decide its design.
2. Button design according to their qualities
We know how many types of buttons we need so let’s start with the design.
When you set the colour button, in addition to obviously take into account corporate colours and try to introduce these in the elements of the web and therefore the buttons, we must be clear about the different positions that this would occupy within the web, specifically different background colours.
It is very important to consider the background colour, because we need to generate contrast to the button. We cannot allow that there is no contrast, even if we have to use a new colour that was not first among corporate colours.
Thus, we must be clear if the buttons will be stuffed or will be edge and this decision is very close to point 3, the decision button behavior in its different positions.
We must also know the text to be included within it, but also those words or phrase cannot be randomly placed inside the button, but instead must be optimal for the user’s view to focus on. They have a particular position, and if they appear jumbled so will our view.
3. Button operation
It is very important to know that a button on a web is not only what we see at first glance, but has different positions that must be designed. The button is not the same when you click on it or when you do hover.
Each position requires a different design which differs of course the last to make that difference and operation status.
And clearly each of these positions should have a particular design relate to the overall design. It would not make sense that the button on hover has a completely different design than the button for clicking.
We must define the different positions of the button and set the design thereof, always with the objective of an overall design.
General design tips
In general, following the above tips, when we are designing a button we must be clear what we are doing it for, and of course design it for that purpose, knowing the place it takes and making it performs its function without falling into design errors.
Sometimes we want to minimise and get a completely flat design, so we tend to make buttons and links almost equal. However they are two very different elements that need special differentiation. They are not the same and therefore the design cannot be the same.
In the end, we are designing an element within a set, so without losing sight of the global, we must achieve that the button design draw attention and get your purpose. Do not leave aside elements that can help you achieve your purpose.
