Redesigning decision modals for a cohesive, user-friendly experience
Timeline: October 2019 - Present
Class: Product Designer
The Problem
Our company's organization management software Pinnacle suffers from UX inconsistencies that confuse users and turn decision-making into a gamble. Misleading modals increase the risk of users performing unintended, potentially destructive actions that are difficult or otherwise impossible to undo.
These modals live in the same system, but it's difficult to tell where they belong or what they're supposed to address.
Our Solution
I dug up every decision modal I could find in the system, compared them, and designed a new schema based on UX best practices. I then reworked each modal using my framework.
Key Players
Pinnacle users
Therapists and their supervisors who use the system to make assessment materials, record work performance, and monitor progress towards advancing their professional rank.
For more detailed information on these users, check out the Key Players section on the Pinnacle Experience Tracker page.
the audit
I collected 35 decision modals containing insufficient contextual info, ambiguously-worded buttons, and counterintuitive color schemes. If I triggered a modal, walked away from my computer, then came back without being able to remember what the modal was asking me to do, I put it on my naughty list.
These modals are pitfalls that don't ask users a descriptive question, don't provide the necessary context for users to make informed decisions, and don't effectively tell users the results of any given choice. The decision a user makes should be intentional and informed, not a coin flip.
defining a set of design guidelines
What makes a good decision modal? Here's the new ruleset I made based on what I saw and what I wanted to see:
Modal titles should be descriptive, succinctly summarizing where the user is ("you are here") and what they are being asked to make a decision about ("here is the question...")
Any and all information that is immediately relevant to the user's current decision (nature and scope of action consequences, changes to the system state, etc.) should be present and clear
Modal body text should contain a full version of the title's question text and, if relevant, a second paragraph providing further details to aid the user in making an accurate, informed decision
Decisions that involve specific details, such as proper nouns, should include these details in the modal text
Decision modals should always house the escape/"passive" option on the left and the "active" option on the right
Modal buttons should follow consistent color coding, especially for "active" options. Constructive/positive options should be green, destructive/negative options should be red, and neutral actions should be dark gray. All of these colors must have sufficient contrast to meet accessibility guidelines.
Map of the rules
I designed some visuals to illustrate the rules for easy reference:
A component's form should enable its function. If a modal isn't built to convey information effectively, it can't empower users to take informed, meaningful action.
Some decision modals need to be larger to accommodate contextually-relevant information and present it in a concise, easy-to-read manner. This variant seeks to reduce the risk of users glossing over important details or getting lost in a big block of text.
Examples of modals following these rules
Rules are important but so are examples. I took each modal from the original audit list and updated it based on my new rules. This gives developers a concrete idea of how old modals need to be changed and new ones need to be made going forward.
The old modal (left) puts the onus on the user to remember the context of the question. It also associates vague language and a counterintuitive color to a destructive action (in this case, discarding user input). The new version (right) provides any and all relevant contextual information to the user and presents them with a clear set of actions.
The old modal (left) condenses information into a single block of text. It doesn't read smoothly and makes it difficult to parse out details. The new version (right) breaks up this information to ask the same detailed question in a comfortable cadence of speech.
Once these guidelines are implemented, users should encounter fewer errors and feel more confident using the system. Users should never be punished for the system's faults.
Next Level
I'll be working with our developers to ensure they understand how to implement these new guidelines for decision modals. I've provided them with mockups for updating the old modals and reference materials for creating new modals.
