The Controllability principle in UX design ensures users feel in control of the system rather than being controlled by it. This means the well-designed interface should allow users to initiate and complete actions, cancel or redo them, and correct mistakes as needed.
In the context of our Usability Principles, user control is just one part of Controllability, alongside Error Management. However, in some usability discussions, the term for a similar concept is “user control”. While these terms are sometimes used interchangeably, in our opinion, Controllability takes a broader approach.
To design a truly controllable user experience, interfaces must effectively accord to 2 key sides:
- User Control and Freedom of Action – giving users autonomy over their interactions.
- Error Management – helping users prevent, understand, and correct mistakes.
Core aspects of Controllability are:
3.1. User Control and Freedom of Action
3.1.1. Users Initiate Actions
3.1.2. Information Necessary for Performing Actions
3.1.3. Maximum Freedom and Flexibility of Actions
3.2. Error Management
3.2.1. Error Prevention
3.2.2. Comprehensive Error Messages
3.2.3. Easy Error Correction
Let’s dive deeper into each of these areas with best practices, UX tips, and examples of Controllability in action. We’ll analyze different user interfaces, including web and mobile apps, websites, and desktop applications, to see this principle applied across various platforms.
3.1. User Control and Freedom of Action
3.1.1. Users Initiate Actions
Users should have control over initiating actions within the interface rather than simply reacting to system behaviors. A well-designed UX interface allows users to decide when and how to perform actions, avoiding unexpected or automatic triggers. For example, a button should only execute an action when explicitly clicked, rather than being triggered automatically by the system.
A key aspect of user control is predictability – users should always know what will happen before they take an action. According to user control and freedom of action, interfaces should provide “emergency exits,” allowing users to easily leave an unintended state. This means including clear navigation paths, undo options, and confirmation prompts to give users confidence in their user-system interactions.
Tips for Allowing Users to Easily Initiate Actions
- Avoid automatic triggers; for example, forms should submit only when users explicitly press a “Submit” button, not when they simply move to the next field.
- Offer multiple interaction paths; allow users to initiate actions through clicks, keyboard shortcuts, or gestures based on their preference.
- Avoid manipulations; users should actively choose settings or preferences instead of being automatically opted in to actions like newsletter subscriptions or any other consent check boxes.
- Give users control over dynamic content; autoplay videos or carousels should have manual controls, allowing users to start or pause them as needed.
Project: BCU Financial, corporate website
Platform: Desktop
❌ The live chat pop-up opens automatically, interrupting the user’s journey.
To improve controllability and user control, it is better to let users trigger the chat manually. Use a discreet chat icon in the corner that expands when clicked. Additionally, consider context-aware triggers, such as offering chat assistance only when users spend a certain time on a page or demonstrate “confusion”.
Project: Waze, navigation software
Platform: Mobile
❌ Key actions on Waze are call-to-actions (CTAs) that auto-progress, meaning the action executes automatically after a set time. This reduces the user’s sense of control over the system.
Allow users to manually confirm actions instead of relying on auto-progressing CTAs. Provide a clear countdown timer with an option to extend or cancel the action. Additionally, offer persistent on-screen controls so users can easily pause or modify their choices at any time, ensuring they stay in control of their navigation experience.
Project: Uber Eats, food delivery app
Platform: Mobile
❌ After placing an order, Uber Eats gives users only 7 seconds to verify the order details, limiting their sense of control and freedom. A better approach to user control would be to allow users to review and modify their order within a reasonable timeframe or until the restaurant starts preparing it.
3.1.2. Information Necessary for Performing Actions
In complex UX interfaces, users need clear, relevant, and timely information to perform actions in the correct order and comprehensively. Make sure your users understand what they are doing and why, for a predictable and stress-free experience.
Tips for Providing Users with the Necessary Information
- Use clear labels; buttons, form fields, and interactive elements should indicate their purpose explicitly (e.g., “Upload Profile Picture” instead of “Upload”).
- Include contextual tooltips and hints; provide explanations when users hover over an unfamiliar option or enter data, for better controllability.
- Use inline validation, give users real-time feedback on their inputs, such as confirming a valid email or phone number format.
- Break complex actions into smaller step-by-step instructions, using onboarding flows, wizards, or numbered progress bars.
- Keep important details visible, don’t hide necessary information behind modals – users should see what they need upfront.
Project: CoastCapital, corporate credit union website
Platform: Desktop
✅ The debt repayment calculator on the credit union website includes a tooltip that guides users through filling out the form. It ensures users enter the correct information with ease and keep the control over the process.
Project: Strava, fitness app
Platform: Mobile
✅ Strava provides a clear explanation of why users need to enter their date of birth, ensuring that necessary and relevant information is shared during the registration process.
Project: Airbnb (host flow), travel & accommodation rentals app
Platform: Mobile
✅ Airbnb clearly explains why and when a specific location details will be shown to guests during their browsing and booking process. It gives hosts a sense of user control and understanding what happens to their sensitive information.
3.1.3. Maximum Freedom and Flexibility of Actions
A well-designed system provides users with the tools to adapt their experience, making user-system interactions more efficient and personalized. This means allowing customization, adaptable processes, multiple interaction options, like changing interface settings, modifying workflows, or choosing input methods.
This is particularly important in professional software and platforms serving diverse user groups. When users control how they interact with a system, they feel more engaged.
Tips for Giving Users Maximum Freedom and Flexibility
- Allow users to customize settings; offer adjustable preferences like themes, font sizes, notification controls, and shortcuts.
- Support multiple ways to complete tasks; for example, let users drag and drop, use keyboard shortcuts, or navigate through menus.
- Enable workflow adaptability; provide features like saved filters, customizable dashboards, personalized reports or rearrangeable UI components.
- Let users pause and resume actions for better user control; allow saving drafts, continuing forms later, or restoring session progress.
- Ensure flexible navigation; allow users to move between sections without being forced through a linear path.
Project: Slack, communication platform
Platform: Desktop
✅ Slack provides the ability to customize the navigation menu and other preferences to match personal needs of each user. It gives maximum freedom and flexibility in the interface.
Project: Lifelight, journal and note taking tool
Platform: Mobile
✅ Lifelight app offers a ‘Tap to Blur’ option that allows users to blur specific messages (e.g. when sharing screenshots).
Project: Revolut, banking and fintech
Platform: Mobile
✅ In the Revolut app, users have the ability to customize the home screen by changing the order of widgets.
Project: Airbnb (host flow), travel & accommodation rentals app
Platform: Mobile
✅ Users can save their progress and exit the form at any time while adding an appointment. The “Save & Exit” option in this interface gives users control and flexibility over their progress, allowing them to pause and return later without losing data. This reduces frustration, especially for lengthy forms, and ensures users don’t feel pressured to complete everything in one sitting.
3.2. Error Management
3.2.1. Error Prevention
The second part of the Controllability usability principle is a stress-free Error Management. Error prevention tops the list.
An interface should proactively prevent user errors by guiding users toward correct actions and minimizing opportunities for mistakes. Instead of relying solely on error messages after an issue occurs, preventive design helps users avoid errors in the first place.
Tips for Preventing Errors in UX Design
- Implement input masks; format phone numbers, credit cards, and dates automatically to prevent invalid entries.
- Use clear guidance on allowed or required characters (e.g. a mix of uppercase, numbers, and symbols).
- Offer real-time validation; highlight errors as users type.
- Disable unavailable actions; grey out buttons when required fields aren’t filled.
- Use confirmation dialogs for critical actions; e.g. before submitting payments or deleting data.
- Set smart defaults; pre-fill common options based on previous selections.
- Use tooltips and inline hints; guide users on required formats and expected inputs.
Project: Tesco, eCommerce
Platform: Desktop
❌ Tesco presents a long list of password requirements, which forces users to create complex passwords they won’t remember later. A better approach would be to provide real-time validation as users type, highlighting which requirements are met. Also, offer an optional password suggestion or allow passphrase-based passwords for easier recall.
Project: American Eagle, eCommerce
Platform: Desktop
❌ The form lacks real-time validation, causing users to discover errors – like a missing or incorrectly formatted phone number – only after clicking “Review Order.” This forces them to backtrack, increasing frustration and delaying checkout.
It’s better to implement real-time validation that immediately highlights errors as users type. Provide clear formatting hints (e.g., “Enter your phone number in the format 123-456-7890”) and use inline error messages to help users correct mistakes without disrupting their flow.
Project: Gmail, email service
Platform: Desktop
✅ Gmail detects common email mistakes, like mentioning an attachment but not including one, and prompts users before sending. This helps prevent errors and improves communication.
Project: Figma, collaborative design tool
Platform: Desktop
✅ Figma’s registration pop-up includes inline validation for email input, detecting common typos and offering a quick correction option. This reduces user errors and enhances the sign-up experience.
Project: Sports Direct, eCommerce
Platform: Desktop
✅ The “Expiry Date” field in Sports Direct’s checkout form uses an input mask that matches how it appears on credit cards. This makes it easier for users to recognize the required format and enter the information correctly.
3.2.2. Comprehensive Error Messages
Users should receive clear, informative, and actionable error messages that help them understand what went wrong and how to fix it. A good error message formulae is:
Describe the problem + Identify the cause + Provide the solution
A generic message like “Something went wrong” only frustrates users. A better way to handle interface issues would be:
Login Issue: “Incorrect password. Make sure you’re using the right credentials or reset your password [here].”
Form Submission Error: “Phone number format is incorrect. Please enter a 10-digit number without spaces or special characters.”
Payment Failure: “Your payment was declined due to insufficient funds or an expired card. Try a different payment method or update your card details [here].”
Tips for Writing Comprehensive Error Messages
- Be specific about the issue; instead of “Invalid input,” say “Your password must be at least 8 characters and include a number.”
- Use a friendly and reassuring tone; for example, “Oops! Looks like your email is missing the ‘@’ symbol. Try again!”
- Highlight the problematic field; if a user enters an invalid phone number, mark the input field in red and provide inline guidance.
- Suggest a quick fix; for a failed login, say “Incorrect password. Try again or reset it here.”
- Offer alternative solutions when possible; for example, if a payment fails, suggest trying another payment method.
- Avoid technical jargon.
Project: Icici Prudential, insurance corporate website
Platform: Desktop
❌ The error message not only breaks Controllability principle, but what’s more it blames the user instead of providing clear, constructive guidance. It states what not to do without explaining why or offering a solution.
In such cases, try to be helpful and action-oriented. For example, “Your password can only include letters, numbers, and special characters. Please remove any unsupported characters.” This makes the issue clear and gives the user a direct path to fixing it.
Project: Groww, financial services platform
Platform: Desktop
❌ The investment platform doesn’t provide clear and relevant information about the error. The “something went wrong” message doesn’t help users understand what happened and how to fix it.
Project: Slack, communication platform
Platform: Desktop
✅ Slack provides an informative error message with a positive emotional charge when a user uploads a photo that is too large.
Project: Lowe’s, eCommerce
Platform: Mobile
✅ The form provides a clear and specific error message when the ZIP code doesn’t match the selected state. This helps users quickly identify and correct the issue, improving form completion process.
Project: Baymard Institute, research institute website
Platform: Desktop
✅ The “No results” page on the site provides clear feedback while also offering actionable solutions, such as refining the search, browsing alternative options, or contacting support. This improves UX by guiding users toward the next steps.
3.2.3. Easy Error Correction
The final key to Controllability is Easy Error Correction.
Users should be able to quickly and effectively correct errors without losing progress. Instead of forcing users to start over, interfaces should support undo actions, auto-save progress, and provide step-by-step instructions to resolve issues. When error correction is easy, users are more likely to remain engaged and complete their tasks successfully.
Tips for Easy Error Correction
- Allow users to undo actions, like deleting files, sending messages, or making edits. For example, Gmail provides an “Undo Send” option after sending an email, deleting files preventing irreversible mistakes.
- Save user input during errors; if a payment fails, retain the entered card details so users don’t have to retype everything.
- Provide in-line suggestions; if an address input is invalid, show a corrected suggestion like “Did you mean 123 Main St, Springfield?”
- Enable users to retry actions quickly; for instance, when a file upload fails, allow users to re-upload without starting from scratch.
- Offer multiple correction methods; for login failures, suggest password reset, biometric login, or logging in with a backup method.
- Use real-time validation; show users errors as they type (e.g., password requirements turning green when met), reducing frustration at submission.
- Keep deleted items recoverable; let users restore accidentally deleted files from a “Trash” folder instead of losing them permanently.
Project: National Geographic Kids, children’s educational website
Platform: Desktop
❌ The children’s website displays an unhelpful eligibility message without explaining why the user is ineligible or what they should do next. A better approach would be to clearly state the reason (e.g., age restriction) and guide the little user to ask a parent for assistance.
Project: Walmart, eCommerce
Platform: Desktop
✅ After entering the data to create an account on the Walmart website, a verification code is sent to the entered phone number, but there is an option for users to change the number at this stage and then they will be directed to a step back, but all input fields except the phone number will remain filled in.
Project: Leocard, public transport app
Platform: Mobile
❌ LeoCard’s interface makes it nearly impossible for users to register. Even though the user is on a mobile device (as shown in the screenshot), the app fails to recognize it and displays an error: “The registration can only be completed from a mobile phone.”
It seems that registration requires the app (not the browser version), but there’s no prompt to download it. As a result, users get stuck in a loop, unable to figure out how to sign up.
