Design

The new collapsible left pane: Happier laptop users and a streamlined experience

Over the last few weeks, we’ve rolled out a new design for the left pane that makes always having just the right data on screen much more seamless. People using smaller screens can now focus and navigate much more easily, and now everyone has more ability to collapse the parts of the Asana interface they don’t need.

What’s new in the left pane?blog_animation
Today, we’ve made expanding and collapsing the left pane more obvious for all users (click instead of hover!). We’ve also added links to My Tasks and Inbox to the collapsed left pane. This allows you to focus on your tasks and reduce the number of options in your left pane from many (your whole project list) to just the ones you use most often. Additionally, the left pane will no longer pop open accidentally when you’re on a small screen.

The process: Designing Asana’s panes
One of the most exciting things about designing Asana is finding ways to elegantly resolve contradictory impulses. People praise Asana for putting everything at your fingertips and letting you move through all of your data quickly, but we also get a lot of feedback that Asana can seem overwhelming, particularly for new users. We constantly make tradeoffs between showing users everything that’s important to their work, while keeping the product easy to use and understand.

Asana’s standard view has three panes (left pane for project and team navigation, center pane for task lists, and right “task” pane for task details), but it can simplify to accommodate the many ways in which people use Asana:

  • For new users, we hide the right task pane so that people can focus on adding a full list of tasks without getting distracted by adding details for any individual task.
  • People trying to optimize their productivity can show only the task pane (via Tab-X) in order to focus on one task at a time and reduce distractions.

  • Users on small screens have the left pane automatically collapsed for them so there’s enough room to see the task list and details.

When we first designed this collapsed mode, we wanted to make it as easy as possible to access the list of projects in the left pane and move around in the product. The original design was clickless – when you hovered over the small portion of the left pane that was still showing, your content would slide out of the way to reveal your project list. This ultimately proved to be frustrating, since stray mouse movements would often make the pane slide unintentionally. In the new design, we wanted to remove this frustration by changing it so you have to click to show and hide the left pane.

But we don’t take requiring extra clicks in our app lightly: we wanted to balance making it more deliberate by reducing the number of times you’d actually have to switch between the two modes. As part of a hackathon several months ago, I brainstormed some ideas about what a much-simplified Asana would look like: only what was necessary would be on screen at any given time. Since people spend most of their Asana time in My Tasks or Inbox, there was an opportunity to make these stand out over the projects, people, and teams available in the left pane. We created two modes for the left pane – a slim, “collapsed” pane with icons representing common places in Asana, and the existing full pane. Having two views for the left pane would give the benefits of simplification while still keeping the information-rich left pane available when needed.

Left Pane Design

Ideas that sound good sometime stumble as you get further into the details, and we soon realized that our quest for simplicity had made these two views too different from each other. Favorited projects looked totally different in each view, and it wasn’t obvious enough that the full project list was just a click away when you were in the collapsed view. We also knew that this feature would only work if we could add animations to make the changes between the two views more seamless. Animations aren’t something we can draw with the design tools we use, so the next step was to feel the new design before we could even decide whether or not we wanted to build it.

For the next iteration of the design, we got this feature off of the paper. I made a prototype of this feature in CSS and JavaScript using sliced up screenshots of our product that I could apply different animations to. Rather than spending days of an engineer’s time only to tell him that we needed to make serious tweaks, we looked at different versions of the animations side by side by just copying a few files. Our Product Manager, Jennifer, also went around the office asking people to give feedback after playing with the new design for 5 minutes. To make these ‘usability studies’ feel as realistic as possible, Jennifer personalized the prototype for each participant with a screenshot of their Asana workspace. This proved to be a great way to catch issues with the design as well as resolve design debates. While we had initially been worried that people would be confused by the inability to see the top of the projects list in collapsed mode, we decided this wasn’t a serious concern after the testing and shipped the design as-is. As with any feature we launch, we’ll be keeping a close eye on how it performs. Jennifer and I have a bet going about whether or not this will turn out to be something users mention (the stakes being a batch of fresh-baked cookies).

The Result
We were able to combine two product ideas: a smoother left pane experience for people with small screens, and less clutter on the screen for everyone, and hone them into something we are pleased to launch. We hope all of you will appreciate the new behavior. Leave a comment here or reach out to Nick, Ryan, Josh, Brian, and Graham at support@asana.com if you have any feedback or questions.

Would you recommend this article? Yes / No