Difference between revisions of "Dialogs"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
Line 1: Line 1:
[[Category: Containers]]
[[Category: Containers]]
==Alert dialogs==
These are dialogs specifically to let the user know the status of something. They come in four flavors:
* Confirmations and positive information - "save was successful" or "your message has been sent". While there are fewer of these in the system than the other types, in a perfect world users see these far more often than the other types.
* Warnings - "if you do X then Y may happen" or "this thing is offline". Generally, these require the user to choose to take action to resolve an issue, but are not hard stops. (In fact, that's what differentiates them from errors!)
* Chicken messages - "Are you sure you want to...?" These are a subcategory of warnings generally used when the user is about to do something destructive to confirm the action.
* Errors - "You can't do x because of Y". These are hard stops, either because the user has done something the system can't accept or because the system has failed.
* Information messages - "Did you know x?" These are extremely rare as dialogs and caution should be taken before using them.
==Single-step forms==
These are dialogs that contain a single form. 
The general rule of thumb is that these should be as short as possible. If the form requires the user to scroll significantly to complete it, consider a base page instead. Similarly, if the form requires any complex logic to provide alternative fields depending on previously-chosen information, consider a wizard instead.
==Wizards==
These are dialogs that contain a multi-step form. In most cases, we use wizard when the flow through the form has logic-based branches in the flow. In other words, choosing something on the first step of the wizard impacts what displays for the second step.
==Additional Resources==
* [https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92 Modern Enterprise UI design — Part 2: Modal dialogs] by James Jacobs
* [https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92 Modern Enterprise UI design — Part 2: Modal dialogs] by James Jacobs

Revision as of 15:14, 1 June 2020


Alert dialogs

These are dialogs specifically to let the user know the status of something. They come in four flavors:

  • Confirmations and positive information - "save was successful" or "your message has been sent". While there are fewer of these in the system than the other types, in a perfect world users see these far more often than the other types.
  • Warnings - "if you do X then Y may happen" or "this thing is offline". Generally, these require the user to choose to take action to resolve an issue, but are not hard stops. (In fact, that's what differentiates them from errors!)
  • Chicken messages - "Are you sure you want to...?" These are a subcategory of warnings generally used when the user is about to do something destructive to confirm the action.
  • Errors - "You can't do x because of Y". These are hard stops, either because the user has done something the system can't accept or because the system has failed.
  • Information messages - "Did you know x?" These are extremely rare as dialogs and caution should be taken before using them.

Single-step forms

These are dialogs that contain a single form.

The general rule of thumb is that these should be as short as possible. If the form requires the user to scroll significantly to complete it, consider a base page instead. Similarly, if the form requires any complex logic to provide alternative fields depending on previously-chosen information, consider a wizard instead.

Wizards

These are dialogs that contain a multi-step form. In most cases, we use wizard when the flow through the form has logic-based branches in the flow. In other words, choosing something on the first step of the wizard impacts what displays for the second step.

Additional Resources