Action Bar
User Problems
• Users wanted the capability to perform actions on multiple items at a time.
• Users wanted to quickly locate available actions to be completed within the view.
Business Problem
As a part of the React migration work, we wanted to provide additional capabilities like bulk selection and deletion on tables.
"How might we streamline access to key actions and improve user efficiency in completing tasks within our application?"
Definition
An action bar component provides users a centralized area to access and perform key actions within a page’s view.
Anatomy
Actions Container
Displays the most common actions relevant to the use case, limiting to three. On small screens, the action labels get condensed as icons to accommodate space, and any additional actions are placed in an overflow menu at the end of the bar.
Items Counter
The item counter provides clear feedback to users, allowing them to easily see how many items will be affected by an action.
Safe click/touch zone
The action buttons are spaced 16px apart horizontally to avoid accidental clicks. This provides sufficient separation to distinguish each button visually and physically, reducing the likelihood of users inadvertently tapping or clicking the wrong button, especially on touch screens or smaller devices.
Purpose
• Displays available options for users to perform actions on one or more selected items in a table
• Facilitates navigation by including buttons for back, home, and other navigational functions
• Enables users to perform common actions such as saving, deleting, or editing content
Guidelines
• Action bar will be visible only when actions are available for a user to perform.
Eg: After a user makes one or more changes to a form, the action bar is displayed with options to save or cancel the changes.
• Can include up to three actions (primary, secondary, tertiary) to prevent visual clutter, ensuring users can easily identify and access the most important functions.
• Once triggered, it is either fixed to the bottom of the browsers’ viewport or relatively fixed to the bottom of it’s parent container.
• Can be used on full page layouts and full height slide out modals.
The Design
Component Variants
Basic
The basic variant of the Action Bar includes up to three actions, with at least one designated as a primary action
Delete
The Delete variant of the Action Bar features a destructive action and a secondary action for canceling the operation
Results Count
The Results Count variant includes an item counter displaying the number of selected items, along with one to three actions to perform on them.
Responsiveness
On narrow-width devices, the actions must remain on a single line without wrapping.
One way to maintain a responsive action bar without compromising its functionality is to shorten the action labels on small devices.
Additionally, the secondary and tertiary actions can be collapsed into a three-dot overflow menu.
Behavior
Fixed at the bottom
Persistent action bars always remains fixed to the bottom of the viewport or its parent component (such as a Slide-out Modal), staying sticky as the user scrolls through the page or component.
Slide-up animation from the bottom
The action bars triggered upon item selection smoothly slide up from the bottom of the page with a fluid animation, remaining sticky until all items are deselected or an action is completed.
Accessibility Guidelines
Keyboard Accessibility
Users can navigate to the action bar at the end of their form using the tab key, and then proceed to navigate through the actions within the action bar using the same key.
Space or Enter - Activates the intended action
Tab - Focus each Button element in the Action Bar
Screen Reader Compatibility
Provides descriptive labels and text for each action button to ensure users relying on screen readers can understand the purpose and functionality of each.
Color contrast
There were discussions about changing the action bar background color to blue, but I decided against it as it clashes with the button background colors and potentially compromise the color contrast needed for readability, particularly for users with visual impairments.
Breadcrumb
User Problems
• Users struggled to backtrack to previous pages, often relying on the browser's back button and needing to click it multiple times to return to the entry page.
• Users sometimes lost their sense of orientation after entering the site through various pages.
Business Problem
As part of our React migration, we introduced several new components, including step wizards and child pages within slide-out modals. These components required an intuitive way for users to navigate back to their original entry point.
"How might we enhance user navigation and orientation within our application's hierarchy, making it easier for users to backtrack and understand their context?"
Definition
A Breadcrumb component is a navigation aid showing the user's location within a website or app hierarchy. It appears as a horizontal list of links separated by symbols, allowing users to quickly navigate back to previous levels or the homepage.
Anatomy
Navigation Link
Each breadcrumb link allows users to easily navigate to higher-level pages without using the browser's back button, facilitating quick access to previously visited sections.
Separation Indicator
Uses arrow symbols to visually separate each level in the breadcrumb trail enhancing readability and clarity of the navigation path.
Purpose
• Helps users maintain their sense of direction within the website or app hierarchy, particularly when navigating from deep links or external sources, by clarifying their current location.
• Breadcrumbs reveal higher-level categories and sibling pages, encouraging users to explore more content, boosting engagement and discovery.
• Breadcrumbs provide a consistent navigational element that users can rely on throughout their journey, enhancing the site's usability and user satisfaction.
Usage Guidelines
Dos
• Limit breadcrumb links to essential hierarchy levels for streamlined navigation.
• Can be incorporated into full-page layouts or full-height slide-out modals, positioned directly above the page or component title for clear visibility and navigation.
Donts
• Don't include the current page in the link hierarchy.
The Design
Component Variants
Back to Page
Use the "back to page" variant when there is only one page in the user's navigation hierarchy.
Multiple page hierarchy
Use the "multi-path breadcrumb" variant when the navigation hierarchy includes more than two pages.
Responsiveness
On narrow-width devices, the breadcrumb links wrap onto subsequent lines.
Behavior
Placed directly above the title
Placing the breadcrumb component directly above the title facilitates quick navigation by providing users with immediate contextual information and intuitive access to higher-level pages.
Accessibility Guidelines
Keyboard Accessibility
Users can navigate through breadcrumb links using the keyboard alone, without relying on a mouse.
Tab - Focus each breadcrumb link in the hierarchy
Space or Enter - Activates the intended navigation
Screen Reader Compatibility
Provides descriptive labels via ARIA labels for each breadcrumb link to ensure users relying on screen readers can understand the purpose and functionality of each.