The NSW Government Logo

Digital NSW community

A place for NSW Government digital creators to collaborate, share and learn.

Collab space: Dialogue

This is an open space for collaborating on a dialogue pattern. To join in the conversation please add a comment below.

Overview

Dialogues make a user stop and think by presenting them with a critical action or piece of information required to continue.

When to use dialogues

Use dialogues to:

  • Notify a user of an immediate response required to continue
  • Confirm a user’s action when it cannot be undone
  • Notify a user of urgent information that affects their current process

Do:

  • Ensure the headline and buttons are clear and reflect the action
  • Clearly explain the potential consequences of the action
  • Use danger dialogues for destructive or irreversible actions
  • Where applicable, give the user an option which will close the dialogue with no change - ** Great to hear feedback on when a close button would be required/used over the secondary action button, or where they would perform different actions **

Do not:

  • Over use dialogues as this will cause disruption to the user

Types of dialogues

  • Transactional - Alert a user to urgent information they must acknowledge before continuing
  • Danger - Alert a user to a destructive or irreversible action they must confirm before continuing

Interaction Design & Usability Research

Dialogues should:

  • Have a clear message
  • Focus on a single task
  • Where possible, contain no more than two actions (primary and secondary).

UI Design

Accessibility

  • When a dialogue is opened, keyboard focus should move automatically to the dialogue container.
  • Keyboard focus should cycle through the dialogue content and should not leave until dialogue is closed.
  • Pressing the ESC key or selecting an action that cancels the process should close the dialogue and return user to the underlying page.
  • When closed, keyboard focus should return back to the component that launched the dialogue.

Credits

These awesome collaborators have contributed insights, knowledge, and time to the information above:
Future Friendly

3 Likes

Thank you, @amy.howard this looks great. I’m dropping a comment now to follow the progress. Will modal dialog include ways to prompt user entering more details before they choose an action?

Hi @tnafoo great! When it comes to users entering details, we would recommend using forms instead of a dialogue to collect user info. Once the details have been provided via a form, the dialogue would then be triggered in response to their action (“Submit” for example).

1 Like