João Guerreiro Designer & Developer
Current Status:

User Experience (UX)

Confirmation Dialogs

The anatomy of a confirmation dialog box

  1. Close button
  2. Headline
  3. Description (optional)
  4. Confirmation Input Box (optional)
  5. Buttons

1. Close button

Always include a close button. This allows users to easily exit the dialog without making a selection.

2. Headline

The headline should clearly ask or inform about the main action to be reconfirmed. It must be simple, clear, and unambiguous, typically phrased as a dichotomous question.

3. Description (optional)

Only provide an explanation if it adds new information beyond the headline. Use additional descriptions for actions that trigger other significant actions. For example:

  • Deleting linked items: Users might not know this will delete additional linked items.
  • Contradicting actions: Modifying a setting may unintentionally change another setting.
  • Exiting without saving: Users might lose unsaved work if they exit an incomplete form.

The more critical and irreversible the action, the more emphasis should be placed on the explanation. Use design elements like colors and spacing to highlight important information.

4. Confirmation input box (optional)

For highly destructive actions, include a confirmation input box where users must type a specific phrase or keyword to proceed. This ensures they fully understand the severity of the action.

5. Buttons

When creating buttons for confirmation dialog boxes, follow these guidelines:

  • Distinguish clearly: Make buttons highly distinguishable from each other with clear, distinct options. A well-phrased headline helps present clear, dichotomous responses.
  • Add context: Avoid generic buttons like Yes and No, as they can confuse users. Instead, provide context-specific buttons like “Yes, delete” or “Leave anyway” for clarity. For Yes/No questions, use “Yes” before the verb or “anyway” after it to enhance understanding.
  • Connect the headline and the buttons: Use the same verb in both the headline and buttons to create a clear connection.

Examples

  • Proceed with checkout?
    Ensure all your order details are correct. You will not be able to make changes after proceeding.
    Buttons: Yes, proceed with checkout; Cancel
  • Cancel your subscription?
    Cancelling your subscription will result in loss of access to premium features and content.
    Buttons: Yes, cancel subscription; No, keep subscription
  • Delete your account permanently?
    This action is irreversible. All your data, settings, and content will be permanently deleted.
    Buttons: Yes, delete account; No, keep account
  • Overwrite existing file?
    This will replace the existing file with your current changes. The previous version cannot be recovered.
    Buttons: Yes, overwrite file; No, keep existing file
  • Unsubscribe from newsletter?
    You will no longer receive updates, news, or special offers from us. You can re-subscribe at any time.
    Buttons: Yes, unsubscribe; No, stay subscribed
  • Do you want to log out?
    You will be logged out from all sessions. Make sure to save any unsaved work.
    Buttons: Yes, log out; No, stay logged in

Pagination

Types of Pagination

  • Classic Pagination
  • Load More
  • Infinite Scroll

1. Classic Pagination

Classic paginations involves dividing content into discrete pages with navigation links, usually numbered, allowing users to jump to a specific page.

Advantages:

  • Provides a clear structure and sense of progress.
  • Easy for users to understand and navigate.
  • Allows users to skip to a specific page.

Disadvantages:

  • Can be cumbersome for users if there are many pages.
  • Requires reloading the page, which can interrupt the user experience.
  • Highest interaction cost of all types of pagination.

Use Cases: Ideal for content that benefits from structured navigation and where users may need to access specific pages. Suitable for sites or application with extensive content archives or where precise navigation is crucial.

2. Load More

Displays a set amount of content initially, with a “Load More” button at the bottom to reveal additional content without reloading the page.

Advantages:

  • Combines the benefits of infinite scroll and classic pagination.
  • Provides user control over loading more content.
  • Can be less overwhelming than infinite scroll.

Disadvantages:

  • May still become cumbersome if there are many items to load.
  • Higher interaction cost than Infinite Scroll.

Use Cases:

  • Provides a middle ground, offering a balance between user control and continuous content loading.
  • Suitable for when users might want more content but appreciate the option to control when it loads.

3. Infinite Scroll

Loads more content automatically as the user scrolls down the page, without requiring any interaction.

Advantages:

  • Creates a seamless, continuous browsing experience.
  • Reduces the need for user interaction to see more content.

Disadvantages:

  • Can be overwhelming if there is too much content.
  • Hard to navigate back to a specific point.
  • Can impact page performance and increase load times.
  • Potentially problematic for accessibility and usability, especially for users relying on screen readers.

Use Cases:

  • Best for content that is continuously updated or where users benefit from a seamless flow of information.

Summary

There is no universally superior solution that fits every scenario. The best choice depends on the specific circumstances and the goals users want to accomplish. To determine the optimal solution, consider the advantages and limitations of each of the four options.