Connecting Information

I’ve been using Basecamp more and more for the new company, and milestones are the one area that I’ve always struggled with in terms of efficiently entering and interpreting information. There have been some improvements, but I’ve never been comfortable with how the information is displayed. Today, I realized one of the reasons as I was making note of some milestones. The calendars on the right force you to look at the list on the left and lookup a milestone. There’s no visual cue, or even a name on hover to help you make the connection between the milestone and the date.

While there are plenty of solutions, I thought the most elegant one would be to simply reuse the information that’s already there. All I really wanted was a more visible connection between the date and the tasks associated with it. My suggestion is to highlight the associated milestones when you hover over the date in the calendar on the right.

There are some drawbacks here. First, you won’t always be guaranteed that the milestone and associated calendar date will fit within the browser window. However, in this case, you don’t lose anything. You simply just don’t gain the benefit. I also felt that this is scenario would be rare enough that it’s not worth worrying about.

Figure 1 Information doesn’t have to displayed in close proximity in order to communicate a relationship.

Next, it is possible to have multiple milestones on the same date. However, they would always be listed together since they’re sorted by date, so the simple solution there is to highlight them all. In fact, the mockup includes multiple milestones for the same date. It would still create a straightforward and understandable visual relationship be the date an all associated milestones.

Figure 2 A highlighted version helps make it easier to see the changes.

This isn’t meant to be the only example, but since I was going to write a support e-mail requesting it, I thought was worth mocking up. I also think a quick and dirty solution might be to add title tags or a div that appears on hover. Both of those solutions would require changes to the markup, and the solution I chose could most likely be accomplished with some progressive enhancement JavaScript. Plus, I really liked the idea of recycling content that already existed on the page.