Better Boards
Four years ago, Asana launched Board view, giving users a simple, more visual way to plan, prioritize, and track anything they’re working on.
We’ve made many improvements to Board view over the years, but we knew we could make it easier to use and even more powerful. So, we looked through all our Board-related customer feedback to understand what people love, what they’re struggling with, and what workflows we weren’t supporting.
We learned that, above all, people love the simple, visually appealing nature of Board view, so we made sure to invest a lot of time and attention in the layout, interactions, and aesthetics of all parts of the interface. While Board view is simple on the surface, we learned that it also powers some pretty robust workflows. To better support these workflows, we focused on top user requests: subtasks, an expanded task actions menu, bulk actions, and a new task pane interface.
Let’s go through these improvements, one-by-one. Along the way, I’ll provide a glimpse into our design and research process at Asana, and how we rejected false trade-offs to solve some tricky problems.
Task cards
Task cards are the fundamental unit of Board view, so we tackled them first. We updated the styling and placement of icons, text, and other card elements. Custom field pills are now larger, less aggressively truncated, easier to read, and arranged more thoughtfully. You can complete and like tasks right from the card!
One of the most delightful features of Board view is how task attachments automatically appear on cards. A few bright images can make even the most mundane projects come alive. To help these images really shine, we pushed them to the edges of the cards (a “full-bleed” treatment).
This full-bleed treatment works great with high-contrast images like the one above. But when we stress-tested this approach, we noticed that certain low-contrast images (like the ones below) can be difficult to see on the Board’s gray background.
To solve this problem, we needed to determine the point at which an image is sufficiently dark enough to create a sharp distinction between it and the background. But what exactly is “sufficiently dark”? To get an idea, we tested cards of progressively darker shades, until a sharp-enough distinction between the card edge and the background emerged. We figured that cards with around an 85% average lightness value and below looked best.
So, if the average lightness value (the “L” in the HSL color format) of an image’s border pixels is <85% for each side, we apply the “full-bleed” treatment on cards; otherwise, we give the images a white border, just as we were doing before. Here’s an illustration showing how this works:
We partnered with our talented engineering team to put this theory into practice. In just a few days, they came up with an Average Border Lightness model, shown below. When we apply this model to a variety of images, they look great, no matter their contrast.
Subtasks
Subtasks are great for breaking up a task into smaller parts or dividing the work among multiple people. Until now, Board cards only had an icon to indicate the presence of subtasks; they didn’t contain the subtasks themselves. This wasn’t working for our users that rely heavily on subtasks for their workflows.
Now, we display subtasks right on the card. Simply click the subtask indicator to show or hide them. From this expanded state, you can also create new subtasks, complete them, and give them assignees and due dates.
Task actions menu
Throughout research, when we prompted users to take certain actions on Board tasks, one of the first places they looked was in the triple-dot “more” menu that appears when you hover on cards. So we figured this was a great place to add more task actions without cluttering up the task card with any extra UI cruft. Before, this menu contained just four options. Now, there are eleven, each with a matching icon. It’s easier than ever to add cover images to tasks, duplicate them, and create follow-up tasks.
Bulk actions
Several Asana power-users told us that dealing with a large number of tasks on Board view can be cumbersome, so we set out to make it much easier. Now, you can simply ⌘-click or drag a bounding box around multiple tasks, and choose one of many options from the slide-in toolbar that appears at the bottom of the screen. Anything you can do to one task can now be done to dozens just as quickly.
Slide-in task pane
Of all the changes we’ve made, the new slide-in task pane is probably the most noticeable — and impactful. Before, when you selected a task on Board view, it would open in a modal, obscuring everything behind it. In interviews, users said that they found it difficult to get reoriented on the Board when they were pulled in and out of context with every task opening and closing.
To solve this problem, we adopted a pattern from List view: the slide-in task pane. Now, when you select a task on Board view, the details slide in from the right, so it’s easy to jump between tasks without losing your place on the Board. You can even use your keyboard arrow keys to jump from task to task in a flash!
We think you’re going to love a more polished, more powerful Board experience. These improvements are now available to all Asana users, for free. A big thanks to the Asana Board users who have given us feedback over the years, and the teams at Asana who brought these features to life.
Like what you see, or want to send us feedback on this work? Tweet us @AsanaDesignTeam. We’d love to hear from you!
