[UI/UX] On Enterprise application

[reboottime]

References

1. Customize The Command Bar In A Power Apps Model-Driven App
2. Carbon Design System: popover

---

Table

• Drawer vs Modal: Prefer Drawer
• popover vs modal: prefer to popover
• Row operations: Prefer command bars on table over adding row actions
• User hover effect: unless you are expecting user to view some very important informations, very carefully, usually we do not want striped effect on table
• memorize table row interactions on browser URL

An live example about table user experience

---

[reboottime]

Popover

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.

[reboottime]

Drawer

• Button groups: The primary button and cancel button are located at the bottom right of the screen, with the cancel button positioned on the left, an the primary action button positioned on the right.
• Drawer position: The drawer is positioned on the right side of the screen.

[reboottime]

Modal

When to use

1. Require an immediate response from the user
   Use a dialog to request information that is preventing the system from continuing a user-initiated process.

2. 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.

3. 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/

[reboottime]

Breadcrumbs

• Placement: Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.
• Place breadcrumbs at the top left corner of the screen, above the page title.
• In product, avoid using the topmost level of the hierarchy unless the navigation sidebar is collapsed.

Example:

1. ant design pro dashboard example
2. IBM carbon design system example
3. breadcrumb usage from atlassian

[reboottime]

Progress Indicator ( Stepper)

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:

1. 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

2. Performance matter: Memorize each steps with React.memo

General Patterns:

1. Elevate the data storage to parent component, the the form data submit handler accepts the value as a union type of each step's form data

[reboottime]

Workflow of filling information

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.