Item Details

Our application’s drawer components are becoming overloaded as we add more information to them. How might we accommodate our user’s needs as the platform grows in size and complexity?

Current State

←

Current Item Detail View

Inventory

Cons of the Current State

Our web application provides a variety of tools for network management. Various items throughout the application, such as individual assets listed in an inventory view, need what we call an “item detail” view. Currently, these are displayed in a side panel.

An overhaul of our application’s visual design brought to our team’s attention a number of issues with the current Item Detail designs used throughout our application.

Other areas of the application are already utilizing more full-width screens to display information

Limited horizontal space for content, action buttons, etc

Areas like Assets are cramming a ton of information into a small space

Proposed Solution

I created a set of explicit criteria for using either a Side Panel or a Full Width screen for a particular design.

OR

Full Width

Side Panel

Examples of Full Width In Use

I took side panels in production and reimagined their content in the Full Width format.

Examples of Side Panels In Use

These side panels will remain side panels, with some small formatting adjustments.

Adoption Lifecycle

Admin

Recommendation: Shrink the Width of the Side Panel

By limiting when and where side panels are used, the remaining side panels are ones currently with a lot of white space. Shrinking the width creates a more efficient use of space for the average side panel and improves text line length.

576px (recommendation)

800px (current side panel size)

Recommendation: Side Panels should reach the top of the page.

By reaching the top of the page, not just below the header, we save on vertical space. We also avoid strange formatting that may take place when scrolling outside of the side panel.

The new template has enabled the design and development of a variety of new features in the application that are of top priority to our users such as licensing, subscriptions, and orders.

UX Lead

Current State Examples

Only use a Side Panel if...

Recommended Usage for each Facet

Our customer-facing application is divided into five facets, plus an Admin settings section. Through a thorough analysis of all side panels currently in production, the recommended usage of the two template types is as follows: