Buttons vs Links - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

Buttons vs Links

Buttons vs Links

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs, Forms, Toolbars, etc. The distinction between buttons and links matters:

  • Links are used when you’re navigating to another place, such as: “view all” page, “Roger Wright“ profile, etc.
  • Buttons are used when you are performing an action, such as: “submit,” “merge,” “create new,” “upload,” etc.

STASHED IN:

5

MORE IDEAS FROM THE SAME ARTICLE

  • Normal — communicates that component is interactive and enabled.
  • Focus — communicates that the user has highlighted an element, using a keyboard or other input method.
  • Hover — communicates when a user has placed a cursor above an interactive element.
  • Active — or press...

Most common are rectangular buttons with rounded corners, that are easily identifiable and look good next to the input field.

Choosing the right style for the button will depend on the purpose, platform, and guidelines. Here are some of the most popular style variations:

Gestures let users interact with the application using touch. Using touch as another way of performing a task can save time and give tactile control. 

As some gestures like swipe to trigger contextual actions, double-tap to like or long-press, being used more widely every d...

Pressing a button should be a simple task and if a user is unable to successfully tap on a button or in the process tap on a neighboring element by mistake, it will lead to a negative experience and loss of time.

For most platforms, consider making touch targets at least 48...

Consistency improves speed and accuracy, helps avoid errors. Create predictability that helps users feel in control and capable of achieving their goals in your product

When you creating primary, secondary and tertiary styles try to find some common elements like color, s...

Styles are primarily used to differentiate more important actions from less important ones. 

Create a hierarchy of actions that will guide the user where there are multitudes of choices. Usually, you can have a single prominent button(that style is often called “primary...

Generally, you want to make the most commonly selected button the “default” (use primary styles) and put it in a focused state. This helps the majority of users finish their tasks faster and points them in the right direction.

The exception is when all choices are e...

Keep in mind how important it is to make the interface obvious for users, not creating puzzles or mazes

Based on years of using various devices and other products, we have formed a certain expectation of how buttons look and function. A big deviation from what is cons...

What your buttons say is as important as how they look. Using the wrong label can cause users confusion, loss of time, and possibly some big mistakes.

A good button label invites users to take action. Best to use verbs, and label the button with what it actually does. It's like the button i...

Both are just choices, and designers can argue for hours about their preferences.

  • Having OK action first supports the natural reading order. It may help to save some time if we know that most likely this is what uses will select. Windows puts OK first
  • Listing ...

Disabled controls are used to indicate a component is currently noninteractive but can be enabled in the future. Disabled buttons are used because removing the button from its native location and revealing it in a later context could confuse users.

Discover and save more ideas by creating a

FREE

Deepstash account.

Develop a

reading habit

, save

time

and create an amazing

knowledge library

.

GET THE APP:

MORE LIKE THIS

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify ...

1

STASHED IN:

5

The Most Common UX Deliverables

The UX design process typically follows an approach similar to a design thinking, which consists of five basic phases:

  • Empathize with the users (learning about the audience)
  • Define the problem (identifying users’ needs)
  • Ideate (generating ideas for design)
  • Proto...

2

STASHED IN:

5

Prototypes can help you visualize and test your designs before they reach development, help you understand how users interact with your work and help you spot issues in the flow of your designs.

STASHED IN:

2