I've been working on some complex web applications recently that require a lot of user input, including a credit card payment application and an energy monitoring application. Since reducing the amount of user input isn't an option (though it would be nice), we began utilizing the flyout (also called a side panel, off-canvas content pattern, aside, etc.) to better help our users complete tasks and view related information.
We Didn't Start with Flyouts*
Flyouts are not commonly seen at this point in web applications, but they're starting to pop up (pardon the pun) more and more. They are already used heavily in native apps, and are sometimes used for navigational elements on websites, but the extra depth that the flyout offers only recently came to my attention in this Medium article.
This was a mind-blowing find for me. Up to this point, I had used all of the old UI tricks: accordions, tabs, modals, etc. - but in my projects I felt like the user's path was still not very clear. Accordions required lots of scrolling, a modal can sometimes feel intrusive, and I wasn't very happy with the end result. For complex processes like expense management, my design worked, but I wasn't happy with it.
So I did some more digging into this new/old design pattern.
Well, the clients loved it! They thought it made the process much clearer, instead of the previous endless seas of accordions. My back-end developer coworkers were not quite as thrilled to partially recode a few pages, but I keep bringing them food offerings to win them back over.
Roll Your Own Flyout...
The best way to describe is to show. Here's my CodePen on the subject.
The flyout element is positioned off the page with the
transform: translate3d() property.
If you need to support olderish browsers, you'll also need to set some
overflow-y: scroll or
overflow-y: auto to the flyout in order to scroll within it. This sucks sometimes because you'll see a double scroll bar. If you are a lucky SOB who can use flexbox, set the flyout element to
display: flex; flex-direction: column;. Only the body text of the flyout will scroll in this case.
Warning, Warning! Watch out for these:
- Shit gets weird when you are positioning other items on your page
relatively. I keep my flyouts at the top of my code so it is always positioned relative to my wrapper or body.
- The parent element of the flyout should also have
overflow: hidden;or else you can get some weird widths greater than 100%.
...Or Make It Easy on Yourself
If you're using Angular, AngularStrap has an "aside" directive. Pretty sweet! The only headache is dealing with pesky ol' Bootstrap. Sigh.
What We're Using It For
Much like Mikkel's article, one use of our flyouts is to guide the user through a process (note that all of these graphics are mockups in various states of completion).
In this first example, the user adds expenses to a report:
The use of buttons instead of a dropdown make the process quicker for a user on a small device.
The next example is editing details for an expense transaction:
Flyouts in the Wild
Since these came to my attention, I've started seeing flyouts more often.
Kayak uses them for their iPad and iPhone web users. Here is their badass datepicker (I am terribly jealous):
And here's how they utilize a flyout for hotel detail data:
Google also uses a flyout for date functionality in their Google Photos service:
*(reminds me of this song)
So what do you guys think of this design pattern? And where else have you seen it used on the web?