Link to article: https://support.driveshops.app/support/solutions/articles/70000565625-user-interface-and-experience

The user interface includes the elements that the user interacts with, while the user experience encompasses the overall experience that the user has while using the app. There are common elements and actions that can be found across different apps, and the skills learned in one app can be applied to others. This article will delve into the user interface and experience for Drive's suite of apps.

The Top Bar

Along the top of the page is a bar that does not change and is visible in every app.

Starting with the left side:

• Clicking the 3 bars will collapse the menu to give the user more screen real estate.

• (For MSO and Account level only) The Location Selector allows MSO shops to switch between their shops.

• Clicking the next icon will display all assignments sent to the user.

• The clock allows users to clock in.

• The profile picture and the user name of the current user is displayed. Clicking it allows toggling light and dark mode as well as password management.

The App Selector

The App Selector (The Rubix Cube) allows the user to seamlessly transition between all of Drive's apps.

Since each of Drive's apps look similar, the name of the currently selected app is visible in the left corner.

The Menu

The Menu will appear on the left side of the screen and will display all tabs available in that app depending on the user's permissions and rights.

The Grid

Most apps have a menu tab with a grid and three ways to search for the desired entry(s).

Sort:  Clicking on the column name will sort that column in order and clicking on it again will sort it in reverse order.  Right-clicking the column gives the option of choosing the sorting order and clearing the sorting altogether.

Filter:  If the column has a filter icon next to it, the user can click the filter to select what categories they would like to have selected for that column.  Multiple columns can be filtered at the same time.

Once a column is filtered, the filter icon will turn red.

Search:  Grid search allows you to search through any fields in the grid.

Actions

Each grid has an action column to perform an action for the selected row, while other grids have the additional option to perform batch actions for multiple entries.

If the grid has batch actions available, the batch action button will be displayed in the top right above the grid.  First, select the rows desired for the batch action by checking the box to the left of the row. Next, click batch actions and select the desired action for the row(s).

Common Grid Buttons

Grid buttons are universal actions for the grid that can be found in the top right corner above the grid.

Export:  Export all or selected rows to an Excel file.

Column Chooser:  This gives the user the option to add and remove columns to customize the grid to the user's liking by dragging and dropping the column header.

Refresh: Refreshes the grid instead of refreshing the entire web page.

Reset: Resets the grid to its original settings.