Good Action buttons - how can we design them

Action buttons on a web page or software are the controls that help the user's to take decisions and move in the task flow. We can compare action buttons as the cross roads in the street where the cab driver decides which turn to take and based on his decision he reaches to the next junction in the town. Taking the same example when the user clicks on a action button he is posed the next screen and he can move on to complete his task on the website or software.

Types of action button, I can say broadly we can have below 3 types of action buttons.

1. Call to action button - these are the action buttons that stand out on the landing pages of many websites and encourage you to join the site or create an account. The main purpose of these buttons is to keep you in focus and make you sign up. In PET design these action button is trying to achieve the big P - persuasion element. These buttons you can also see on video sites which encourages you to click on to view video.

intense-debate

songbirdimage

2. Action buttons - these action buttons you will encounter when you are doing the task and they comes and helps you to take an important decision. For example when you are writing the blog, there are action buttons in the editor which helps you to either save the blog or publish button.

balanced action button

3. Action Links - we can not call them as action buttons, but they work similarly as action buttons. The designer can not include so many buttons at one place so he makes some of them as action links, these makes the design looks clean. Most of the times the action links will be the secondary actions the user usually takes.

image

Saying this, what will help if the user is not provided with intutive and effective action buttons- the obvious answer is that he will be taken to a different task flow and he may fail to complete his tasks in given time. Now let us focus our energies to design effective action buttons.

Some tips based on my design experiences.

1. Verbose - Instead of using the action button with "Yes" "No" "Delete", make it more verbose. The words that are used in action button has big impact in making the user in taking the right decision.The windows action button are not so intuitive, see how Gtalk implements Verbose action buttons so effectively.

wrong action

verbose action button

2. Alignment - The text written used in the action button should be centered in the middle. It is a minute check which takes the user experience to the next level. It is good to balance the action button with proper alignment of words in it.

wordpress

3. Contrast - The contrast between the words and the background used should be chosen with care. A combination of warm and cool colors should be used. Care should be taken that the words used should stand out and be legible.image

4. Break the rule - Who said that action buttons should be in rectangular shapes of a rectangular box. Experiment and analysis is the key. Experiment with shapes as shown below.

buttons action button

5.Positioning - Place the action button below the form, i suggest if you are planning to show the next page of the form, then it is advisable to place the action buttons on the right hand side. As the users read from left to right, it will be a good place to suggest the forms are flowing.

image

6. Spacing - If there are two different action buttons and the result of clicking them is completely opposite then it is good to have a good amount of space between them. Chances are there by mistake the user will click on the other one, and get disappointed.

balance

7. Balance - The action button which the user will click least, you can decrease the importance of this button by making it a action link. In this way chances are less for the user to click on the less preferred action as user's eyes will stay focused on the action button.

action button modified

I am sure the above guidelines and best practices can help you develop more conversion rates on the website by GOOD Clicks by users.

Need more help in design of action buttons please drop an e-mail to smartsanjaykumar@gmail.com

Post a Comment