Email Interactions

June 03, 2020

Introduction

Years ago, I worked on an email client called Inky. Recently I was casually looking through old images and videos and thought I'd do some reflection on that work here. Some of it is still really cool!

Context-based Animation

We started building this client around the time Google's Material Design launched. We leveraged the idea of context-based animation where elements animate out of their original interaction point. In this case, the modal for a location card morphs out of the location card itself creating a less jarring transition than simply popping the modal up from the ether.

Drag and Drop

Drag and drop interfaces aren't that fancy anymore. Still, it's cool to see that we implemented this for rearranging folders.

Keyboard Navigation

One of the coolest parts of this interface is that it's 100% keyboard navigable. From the very start of the application, moving left to right, users can drill down into their inboxes with just arrow keys. While viewing an email, users could even full-screen emails or execute actions with the right arrow key.

Settings Search

The client had fairly complex settings. In many ways, settings was more complicated than the main email interface itself. A lot of love went into settings. One of the coolest features we implemented was settings search - as seen in Chrome and iOS today - where users could search for specific settings and watch the settings panel dynamically filter.

Sorting and Filtering

Sorting and filtering was done at the top of the inbox and a right sliding sidebar. The controls were fairly complicated and we had a really cool token based filtering mechanism setup. The goal was to give users the ability to play with the sorting and filtering settings and see how they impacted the inbox in real time.

Response Design

While the desktop app was for desktop users - width typically over 1024 pixels - we still wanted to give users the ability to downsize their window and still have a usable client. Because the entire interface was designed left to right, downsizing was really straightforward: simply collapse all columns except for the active one. We also retained animation context across viewport changes so a composition window returns back to it's origin button even after window resizes.

Calendar

We built a calendar too! I almost forgot about this part. Emails often come with calendar events and so we built a calendar to be able to handle that. From what I can remember it did handle real inbox calendar events and they could be sorted and filtered just like emails.

Zap!

This was just fun. Around the time we were writing this application an app came out called Yo! which simply allowed users to send single "yo" messages to each other with a tap. Often times with email, you simply want to let the sender know you got something. So I designed a zap button that when clicked would send a stock message letting the sender know you go it.