[Week 6] Innovative MicroCal! (Colored Bar View)

This week's assignment is to design the look of a micro calendar (see requirements here).

Have you ever noticed the volume info bar in your iTunes?

It shows the usage of disk storage by category. Each category is assigned a color with the legends below. It is a very good example of information representation using graphics.

As for our MicroCal, the idea is almost the same: using colored bar view to represent a calendar! An important reason for why we abandoned the normal cal view and chosed to work with color coding is that, people usually don't need so many printed numbers (dates) in grids to tell what day is it. They rather just recognize the positions. Also this design uses less space of the interface. From the beginning the calendar is represented by an icon on the desktop, if the icon is clicked, the calendar is expanded as a vertical, color coded bar.

So the basic idea is to fill a blank vertical bar with different color segments representing tasks/events or free time. More information isn't displayed unless a user mouse over the bar or clicks on it. Since it is of a bar look, it won't take much space on the desktop, which means it is a literary "micro" calendar adapted for small spaces.

Eventually, our prototype looks like this:

Day View (Mouse over to show time)

Day View (Click to see task/event details)

Month View (Mouse over to show date)

Month View (Click to see task/event detail)

Month View (Click to see task/event detail, another example)

Week View (Mouse over to show date)

Week View (Click to see task/event details)

Can run backstage. (Click to shrink/expand)

As shown above, the calendar has three type of views: Daily, Weekly and Monthly. Monthly Bar is relatively longer than Daily and Weekly and color segments are more clustered. This view is optional and can be changed by a right-click on the icon in the status bar. It is also by right-clicking the icon, a user can add/remove or change an event of the calendar.

When a user mouse over the calendar in a Weekly/Monthly view, the date of the day will be displayed and for a Daily view it is the time that will be displayed. When a user click on a color segment, a pop-out balloon show the details of the selected task/event.

The advantage of this application is its extremely simple look and possibilities to adapt to what ever size of a display. The calendar is also easy to reach within the interface and optional whether to be displayed/expanded or not.