Buttons are an essential component of an interaction design. They play a
major role in delivering an action. They may seem like a very simple
component but they are still one of the most important ones. Take an
example of a switch, its color, position (which varies from country to country),etc may look simple things but their actions can be dangerous or maybe one of the best things discovered.
Generally, buttons are used when an action is needed to perform. It may look
simple to add button but there are certain principles one should remember to
make it effective.
First, we should know what we understand when we say button, how we have
seen it from the past in the digital world. The button is one element which looks clickable and on clicking it performs a certain action. When we use the term “Clickable” it means we have to make it look clickable.
20 years ago or more when we were using the Windows 95–98. There was something called START. That button was a revolutionary button back in the days. That START button gave us an option to explore all the magical applications within a single click. Although there have been many changes in Microsoft logo from the past but we still can see today in Windows 10.
That Microsoft symbol have made such an impact in our lives that we still can see in every Windows machine’s Keyboard.
How important is the shape of a button?
We have seen the button generally in basic geometrical shapes from the past.
So to be on safer side using those shapes are best and easy. You have to bold and confident in your design thinking when you are making changes in that.
Here are few used geometrical shapes for buttons. By adding
filled color, outline color, adding shadows etc can be done to iterate.
When placing a button we should always try to give more white space near to it. Understanding the buttons become easier when given more white space.
Although keep in mind overdose can be cautious. Lets see some examples.
With the images shown above we can see the placement of button in 2nd image is better than 1st and 3rd image.
If you see the iteration of the 2nd image, the submit button can be placed in left, middle or right as shown in 4th, 2nd and 5th image respectively. In this case, it depends upon the other elements placed near to it.
Another example, If you see in the above image the placement of “BUY NOW” button is towards left and the app wants us to concentrate in creating an account rather than “FIND MORE”. In this case, color can also play a big role which we are going to discuss in the next part.
Button’s color depends on the action it does. Colors are known to express
feelings. For example, We have always seen red as a danger color as may be
due to the color of our blood, death etc. That does not mean red is always represented as a danger, if you see love which is expressed as red. It depends on the occasion that we are using.
Here in the above picture if you see the red color is giving a warning that the
the album is going to be deleted, pictures are sometimes priceless and can be very important.
If you see in the above image, the app is trying to focus our attention on “Learn More”. In this case, purple is completely in contrast to white so that user can easily see the purple button which is making us to click that button.
If both the screen and button color was white, a user might have missed the
button or may not be interested to clicking the button.
Sometimes this is not with every case. If you see the google.com website,
the buttons are not in complete contrast colors. Google wants us to see the
box which is added with shadow and shows a feeling to explore anything
within the box.
Button’s size depends on what you want the user to do. Button’s size also depends upon the device your using. If your using the phone the button size should be easy for our fingers to click. For example, When making a health app targeted for adult or old people the button should be of the average size of a human finger.
When the app is targeted for children in that case, button size can be smaller but should not be very small.
Labels in Button
A button is understandable, When we know what it does. Labeling the button is as important as the size and color.
The above images shows how the position of elements, its color, labeling can make a difference in design.