Final Dialogs
Double Confirmation Dialog
Destructive Dialog
Non-Desctructive Dialog
Sign Post
Research & Audit
What are Dialogs?
A big stop sign that interrupts a destructive or permanent action that the user has taken. Allows for a second chance to consider before proceeding.
I Audited Existing SportsEngie Dialogs
I audited dialogs across SportsEngine and found major inconsistencies:
Some had headers, others didn’t.
UX copy varied widely in tone and formatting (especially bolding).
Designers were improvising, leading to visual and functional confusion.
Examples of Varied Needs
Gaurdianships
Deleting an account meant losing high-value user data.
Season Management
User can delete items that will remove data, but not necessarily delete it. There are varied levels of risks, requiring a more nuanced warning
Industry Research and Best Practices
I explored best practices from trusted sources like Windows' Guidelines, Nielson Norman Group, and Material Design on dialog use cases. A key insight: dialogs should match the severity of the action. The more permanent the consequence, the more caution the interface should prompt.
Created Guidelines For Different Dialog Use Cases
I identified three main types of dialogs to address different levels of destructive actions. During the brainstorming process, I considered the diverse needs within SportsEngine. For example, in Guardianships, deleting account profiles results in the loss of valuable data. In Season Management, deleting items removes data but does not necessarily destroy it. These dialogs account for varying levels of risk.
I presented these guidelines to the team, and they were approved.
I presented these guidelines to the team, and they were approved.
Wireframing and Feedback
UX Writing
The Issue
Different guidelines recommended different things. Some stated that using phrases like "Are you sure?" and "Do you want to?" are unnecessary and undermine the user's confidence. Others stated that these questions encourage caution. I had to decide whether the header should be succinct or focus on slowing the user down and making them consider their actions.
Writing Feedback
I consulted the UX team to gauge if anyone had strong opinions, and then based my decision on what everyone preferred, which was my other idea of using a more direct “Delete [item]”.
Users should understand the dialog and their choices based on the title and button text alone. The copy must be succinct and efficient.
Iterations and More Feedback
Feedback for the Double Confirmation Dialogs
Using a checkbox reminded us of terms and conditions agreements, which users often click without second thought. Therefore, we all decided to use typing ‘delete’ as a double confirmation would be more effective at stopping the user. The caution icon denotes extra danger and is better practice than using "Warning!" for accessibility.
Component Design
I outlined the dialog type variants, booleans, and size variants for implementation into my new dialogs. Then I designed the dialogs from scratch.
