Buttons

Introduction

Use links when an action redirects user to another page. Use buttons when an action updates current view. Buttons and links are the bedrock of user interactions and they should always indicate clearly what the effect will be when interacted. A view should only present one primary action as the user flow is usually degraded by having multiple competiting primary actions.

 

Action button

 

Arrow button

 

Close button

 

Social

 

Play

 

On dark

 

Disabled

Variations

 

The view should ideally present only one primary action button

If there are many “primary buttons”, none of them is really primary. Also try to keep the number of secondary buttons in the view limited. Four to five at most. Too many options disturb the flow and increase the cognitive load. 

 
 

Keep in mind the action hierarchy while designing experiences and views

river.jpg

User will face the options for the secondary actions logically after the primary one(s)

It would make sense to provide the option for primary action before the secondary ones. Try not to break the hierarchy by mixing too many actions with varying degrees of importance.

Secondary button

production.jpg

Ideally the hierarchy of actions fits the needs of  both the user and the business providing the experience

Try to find the correct balance between of what the business would like the user to do and what she most probably finds interesting or critical for the task at hand.

Processing principles

 
 

Highlights are great way to drive users to the relevant content. However, try not to flood the experience with too many options

Tertiary buttons are coupled with highlights. Note the difference with the lighter quaternary button
Type of highlight | 11/17/2020 22:00:00

Tertiary buttons are coupled with highlights. Note the difference with the lighter quaternary button

Tertiary internal
Also pay attention to the image when designing flows for the users
Type of highlight | 11/17/2020 22:00:00

Also pay attention to the image when designing flows for the users

Tertiary internal
Presenting too many cards or banners in a page will make mobile experience suboptimal
Type of highlight | 11/17/2020 22:00:00

Presenting too many cards or banners in a page will make mobile experience suboptimal

Tertiary internal
 
 

Get the brochure

Download button is available in tertiary or quaternary versions.

Tertiary download

Visit the magazine

User will leave the site, so you need to use external button.

Tertiary external

Our environmental efforts

Use the internal button when you redirect users to internal pages.

Tertiary internal

 

 

Use quaternary buttons for supportive or least important actions. Keep the action hierarchy structured

Where to redirect the user?

 

Environmental efforts

Pick the quaternary button with the correct icon for the action.

Quaternary button to internal site

Research partner

Pick the quaternary button with the correct icon for the action.

Visit partner’s site

Sustainable report

Pick the quaternary button with the correct icon for the action.

Download the report