Last night we added a calendar picker to Backpack’s Reminder form. You don’t need to choose a date or time for Reminders if you use the preset options like “Tomorrow morning.” However you can select “At a specific time…” and set the exact date and time yourself. Before today, you had to use pulldowns for the day, month, and year to do this. Here’s the old design:
Now you can use a little calendar to visually select the date:
Let’s take a look at the design process. We had the idea to replace the pulldowns with a calendar picker because we did exactly that in Basecamp a few months ago. Here’s the calendar picker on Basecamp’s New Milestone screen:
First Sam converted Basecamp’s calendar picker into a Rails plugin so we could use it in Backpack without duplicating our efforts. After he inserted the calendar picker into Backpack, it looked like this:
It was good to see the picker in place, but it didn’t look right. There are too many borders and shades of grey. It looked fine on the Milestone form because the calendar is surrounded by white space. Reminders are a different story. The Reminders form is already shaded blue and contained in a box, and the calendar picker appears in a smaller white box that appears and disappears based on the pulldown above. Our challenge was to simplify the calendar design to make it fit more seamlessly into the busier Reminders form.
This redesign was an exercise in making differences count. The main function of our eyes and brains is detecting differences in color, in shading, in weight, in grouping. Therefore we make it easy on the eyes and brains of our customers when we consider every line, shade, and color. Clarity and simplicity come from questioning each pixel to ask if it’s doing work. Try paying more attention to differences on your next design and kick out those lazy pixels.