Categories
Uncategorized

7 Powerful techniques to design great quality buttons!

The main thing about designing button is making it look that we can click on it. Adding some fain dark color will not do the job, a button needs to pop out from the background and significantly different from other elements such as text fields and boxes.

Buttons in any UI are important elements, designing a button is not just creating a square or rectangle. A button bridges the gap between user and the system. A good designer knows how to design a button.

The main thing about designing button is making it look that we can click on it. Adding some fain dark color will not do the job, a button needs to pop out from the background and significantly different from other elements such as text fields and boxes.

Types of Button states in UI Design –

If the user interact with system and they did not receive any feedback from the system may lead to the frustration button states are system response to an interaction from the user, its a feedback by the system to the user, for example if user hovers over the button the button goes into hover state.

List of button states –

  1. Active state
  2. Hover state
  3. Focus state
  4. Disabled state
  5. Loading state

Article in short –

Make button look clickable
Make button easy to reach
Give most emphasis to the most important button
Make sure to follow an order while arranging buttons
Properly label button
Avoid using buttons unnecessarily.

Make button look clickable

To make something look like a button, Designer needs to focus on making a button in rectangle also making sure to add few things such as visual elements that communicate the function of button in a glance. Use familiar shapes while designing a button.

Guides to make a button more clickable –

  1. Use subtle gradients – Use subtle amount of gradient can give your button elevation as the gradient effect simulates light
  2. Use Shadows – Use minimum amount of drop shadow to separate the button from the surface
  3. Use Borders – If your button is secondary, you can give it a shadow so that it won”t confuse user deciding the primary action

Button actions

Primary actions –

Even though a CTA button and a primary button seems identical, I think it’s important to treat them differently. CTA buttons are what the website or app wants you to do, while primary buttons are there to help you finish what you need to do. Primary buttons are used when you want to move on to the next step or finish something important.

Raised Button –

Raised buttons are typically rectangle which looks raised, using drop shadow the button seems elevated from the background. The drop shadow indicated that the button is clickable. Raised button uses shadows to give a z axis to the design.

Toggle Button –

Toggle button have 2 states for single button for example a like button before clicking the button is on its original state after liking the state changes this type of button can be used to create virtual on/off buttons.

Ghost buttons –

Ghost buttons are also important buttons but they are not primary buttons and if we give same style to primary button (It can be a CTA) as well as secondary button (it can be a know more buttons, this can confuse the user as to which action is more impotent in the website. To make the purpose of the action clear we use primary and secondary buttons, that’s the reason why we use ghost buttons.

FAB (Floating action button)

A FAB is a button which floats through the design as user scrolls on the website or app, its a floating button which has a fixed position in the design. FAB are mostly used in mobile app design. a FAB button does the most common action on the page, A FAB button is circular in shape and present on the bottom corners of the page.

while designing button designers need to check the size of the button, if the box surrounding the text is too large then user may confuse if it is clickable or not.

An example of this can be seen in Figure 3, which shows a website. While the page features four buttons

  • one main action and three secondary actions
  • the primary action button is so oversize that it no longer looks like a button.

Make button easy to reach

The location of the OK and Cancel buttons is a ever lasting debate. While the options will always come with some text or image for additional context in the form of image or text, if the text is asking to take a constructive action then add OK, Agree or Proceed button more reachable for user and that’s why you must always place OK on the right.

7 Powerful techniques to design great quality buttons!
7 Powerful techniques to design great quality buttons!

According to the medlineplus.gov

z85 to 90 percent of people are right-handed and 10 to 15 percent of people are left-handed.

so ideally keeping progressive button at the right will make it easy to reach

Give most emphasis to the most impotent button –

Every button that you provide on the screen leads you to different results. To keep the user on the platform or perform particular action which holds more impotence then the button must have more emphasis over the other buttons.

make the list of priority that you want user to follow. In the bellow fig signing up is your first priory and then skip for now. And in the other example where buy now is main priority followed by add to cart and least impotent is back button.

Make sure to follow an order while arranging buttons

While designing user interface keep in mind about the placement of the button, random placement of button may confuse the user.

for example in the picture below what do you guys think which of the image is making more sense? the right one is making sure that the progressive button is on the right and easy to reach out.

Always remember to keep ‘Next’ button on the right side and ‘Previous’ to the left side

Properly label button

Good copywriter can make or break experience, The other day while i was completing on boarding for a website a popup came up with some services on website with button saying “Awesome!”.

First of all where was no other option to disable that popup that just randomly showed up except to click on ‘Awesome‘ seems like the guys have already figured out that everyone who visit the site will be finding this distracting popup ‘Awesome‘.

this is very poor way to label a button, the could have just labeled it as ‘close’ which will made more sense!

By Hrushikesh Paygavhan

UX designer at Customer Capital. With 7+ years of Design experience, I belive in passing the knowledge to everyone. I help UX designers upskill themselves, and stay updated in the design field.

Leave a Reply

Your email address will not be published. Required fields are marked *