Asana - Error States
We analyzed 8 examples of how Asana handles error states across their product, spanning 4 different approaches: inline validation, modal dialog, full-page error, banner notification.
Modal Dialogs
Asana — My tasks
Modal dialog warning that the user's trial ends in 3 days, shown over the My tasks list view with an hourglass illustration
Asana — My tasks > Task detail
Modal dialog informing the user that a file attachment could not be uploaded because it exceeds the 100 MB size limit
Inline Validation
Asana — Settings > Profile
Profile Settings modal showing an inline validation error after attempting to upload an invalid photo format
Asana — Goals > Share modal
Share goal modal showing inline validation error when an invalid email address is entered in the invite field
Asana — Settings > Profile
Profile Settings modal showing inline validation error when the required full name field is left empty
Full-Page Errors
Asana — Task (restricted)
Full-page access denied screen shown when navigating to a task the user does not have permission to view, with a key/lock illustration
Asana — Goals (restricted)
Full-page access request screen shown when navigating to a goal the user does not have edit access to, with a message field and request button
Banner Notifications
Asana — Task detail view
Task detail view showing two stacked banners: a grey banner indicating the task is private, and a red/pink banner indicating the task has been deleted with undo and permanent delete options