You Can’t Argue With Results

I created a side-drawer UI component as part of a new feature for Farebox, and I liked it so much that I decided to open source it. We rely on literally thousands of open source projects for our product so I was excited to have something that I could make available for you to use! Read on to learn about what we built and the design problems it solves.

About the component

The pitch is pretty straightforward — a mobile-friendly drawer component built for Vue.js that probably works great with your favorite design system. It has smooth animations, a simple API, and is free to use. It’s called Gaveta.

Here’s a look at Gaveta from the demo page:

If you’re not familiar with drawers, they are similar to modals in that they pause the current workflow while focusing the user on a new task. What sets them apart is generally that they’re more mobile-friendly just by virtue of their tall format, and can comfortably hold robust and long scrolling UI. Material design would call this a side sheet.

Are you really just here for the code? Check it out on GitHub: https://github.com/farebox/gaveta/

What problem Gaveta solved in Farebox — and how it might work for you

We built Gaveta with two use cases in mind — customising automatic email messages and sharing a reservation with customers.

Customizing email

We provide the ability to schedule reminder emails at multiple intervals in the days leading up to reservation, and each reminder’s message can be customized to fit with your business and messaging style. Each message can be turned on or off, the subject and body can be customized, and the message can be previewed as a customer would actually see it.

When prototyping this feature it was tempting to simply put all of the interface elements mentioned above in a card, and then create a list of cards labeled with a title. Like this:

Once we had done this, 3 things were clearly not quite right:

1. How does a user see an overview of which message are or are not active?
2. How could a user keep track of which fields were edited for which messages?
3. The page was very tall (there are 7 possible emails) with repetitive UI. Even with clear card headings, how could we help prevent users from getting a little lost and editing the wrong field?

All of these questions seemed to point to using a modal to pull the repetitve UI out into a template that only shows the one message you’re focusing on. That allowed the main page to be a summary like we implied with question 1, plus a modal would force a user to either save or cancel changes when editing a specific message, answering question 3 outright and reducing the cognitive load to the point that question 2 is no longer relevant. Something like this:

All this sounds great, except that in practice the modal component supplied by our design system left us with problems when trying to put all the real sized UI into a card on mobile. Being more than the height on some screens while being vertically and horizontally centered leads to subtly but annoying problems with partially hidden elements, hidden scroll bars, and overall a sloppy look when the modal header and footers were persistent but the content in being scrolled. We didn’t love this solution, and you can probably remember more than one site with a bad modal that ruined your mobile experience.

Drawers to the rescue

We got inspired by a mixture of the excellent side drawers in Miro and the side sheet implementation of comments in Google Docs, so decided to code up a simple (mostly css) prototype. Our component library (Bulma and Buefy) didn’t have a drawer component built in already, so why not roll up the proverbial sleeves for an afternoon to see what comes of it?

The results seemed obviously promising. Most of the things there are to like about modals, but without the centering issues. The side animation grounds the entire experience (was it there the whole time?) while the verticality gets rid of the sloppy feeling of having a model end with bottom patting but then the interior content still scrolls.

Applying this to the share sheet

Once the side drawer was built for automatic email messages it was time to apply it to sharing a reservation. This is when the code for the drawer was pulled into a dedicated component with customization options and when open sourcing the whole thing started making sense.

The share sheet has even lower density than the email panel at first glance (though it can get much more dense), and it still worked beautifully:

The share sheet was able to take advantage of the new pattern with minimal code changes, which is great for such a long standing feature.

The finished Product

Here’s what the drawer component, now Gaveta, looks like on the automatic emails page when responding to different screen sizes. As you can see the component is fully responsive and includes a screened background. Other touches are the ability to replace the close button with something custom and having it be driven by events.

I opted here for a fixed size at larger screen sizes with a variable width on smaller screens. Below is a nearly finished version within Farebox.

Other aspects of the design that round things out are using hardware accelerated (3d transform) properties to create a smooth and responsive animation, slots for passing through your own content, and easily overriden CSS variables for deeper levels of customization.

Seriously, go check it out on GitHub: https://github.com/farebox/gaveta/

More about Farebox

Farebox is the best way to manage your passenger transportation fleet. We provide all the tools you need to create great experiences for your users, and include features like resource scheduling, GPS tracking, online payments and more. Check us out today at farebox.io.