Context

Problem

How do we create predictable behavior for opening an object from a grid cell? How can we clearly communicate all possible actions to a user?

Approach

Goals

Business goal

Build trust with our customers through predictable interactions

Design goal

Set visual standards for a key interaction of a high-impact component

User goals

• Recognize behavior by visual inspection alone

• Beginner and power users can both easily navigate link cells

Measuring Success & Constraints

Problem Discovery

Side Panels were created to address a pain point of users having to navigate to a new page in order to drill down into an object.

Our cell navigation problem arose while creating the side panel design spec. It came from three areas of concern:

• App is grid-heavy

• Prominent use case of user opening a preview from a grid cell

• No design standards set around opening objects or actions from grid cells

Understand & Define

What currently existed: 

LinkCell in a grid row

• Grid row can support zero or more LinkCells

• LinkCell: opens link into full page

New:

Integration of side panel preview functionality in LinkCell

• The caveat: Not all LinkCells have side panel previews (defined by use case & team resources). How do we differentiate LinkCells with side panel previews (called Preview LinkCells) vs. LinkCells without side panel previews?

This informed our problem statement:

How do we create predictable behavior for opening an object from a grid cell? How can we clearly communicate all possible actions to a user?

Design Iterations:

Exploring Interaction Methods and Patterns

Interaction Methods + Patterns = Interaction Patterns

First, I explored other interaction methods for opening links from cells.

Interaction Methods + Patterns = Interaction Patterns

Exploring options that define the 2 actions in link cells with a side panel preview

I opted for Option 2, because it retains the primary interaction for LinkCells without a side panel. After exploring interaction methods and patterns, I tackled how to set the component interaction pattern.

Design Iterations:

Exploring Interaction Patterns V1 and V2

Interaction Methods + Patterns = Interaction Patterns v1

How do we show the user if a LinkCell has a “preview” option? I explored some options such as clickable tooltip, cell icon button, and a 2-option clickable tooltip.

v2

In the next iteration, I came across the problem of how we can visually differentiate Preview LinkCells and LinkCells. An exploration of visual solutions are shown on the right. Throughout this process I worked with other designers to ensure I received feedback and to make sure I wasn’t missing any details or edge cases.

Design Iterations:

Final Interaction Pattern

v3 Final solution: a clear, visually distinct interaction model

Final solution

Outcome

Users trust our system and build a mental model of our grid cells through visual signifiers. We received feedback from users for ease of use, especially the shortkey navigation.

“This is exactly what we need in order to do our tasks efficiently… being able to view & take action on additional data from my main workspace. The added data density is vital for our jobs.”
–Trader at Navellier & Associates