The new collapsible left pane: Happier laptop users and a streamlined experience
October 21st, 2013
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?
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.
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.
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 firstname.lastname@example.org if you have any feedback or questions.