Open reboottime opened 1 year ago
A popover is a UI component that displays additional information or options when a user interacts with a particular element, typically by clicking on it. You can use a popover when you need to provide users with additional context or functionality related to a specific element on the page, without cluttering the interface with too many visible options or distracting the user from their current task.
Usage scenarios where you might consider using a popover:
Displaying additional information: If you have a button or link that provides a summary of some information, you can use a popover to display more details about that information when the user clicks on it.
Providing options or actions: If you have an element that has multiple actions or options associated with it, you can use a popover to present those options in a compact and unobtrusive way.
Presenting user controls: If you have a form or input field that requires additional user controls or options, you can use a popover to provide those controls without taking up too much space on the page.
Overall, popovers can be a useful tool to improve the user experience of your web application or website by providing additional context or functionality when needed, without overwhelming the user with too much information at once.
Require an immediate response from the user Use a dialog to request information that is preventing the system from continuing a user-initiated process.
Notify the user of urgent information Use a modal dialog to notify the user of urgent information concerning their current work. Modal dialogs are commonly used to report system errors or convey a consequence of a user’s action.
Confirm a user decision Use a modal dialog to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a transactional danger modal.
Reference: https://carbondesignsystem.com/components/modal/usage/
Example:
Define: A progress indicator is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.
UI sample ( from Mantine UI):
Common Challenges:
Challenge: How can you save the data of each step in a large workflow with many forms, each containing different data, while ensuring that the functionality to preserve form data when the page is refreshed is supported?
1) Server side solution: cache each workflow step's data on server side and prune data periodically or ask user to clean up draft data, each step has a unique id related to the workflow id. 2) Session storage solution: similar as servers side solution
General Patterns:
Depending on business needs or backend validation requirements, we may prioritize certain information and ask users to provide it early in the process to ensure a smooth and efficient workflow.
In general, it's a good practice to prioritize important information and ask users to provide it early in the process. This can help to reduce the risk of errors or delays in the workflow, and ensure that the necessary information is available when it's needed.
References
Table
An live example about table user experience