[Week 6] MicroCal, Future Work

Important factors to consider for further development are how to display overlapping events and choosing the right colors for the color coding of events, to avoid problems for users with vision impairment/color blindness. Also our idea with using icons/graphics as a complement to the color coding/color segments will continue to be discussed and explored. That may aid the visually impaired users, making it easier to recognize tasks without analyzing the color.

[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.

[Week 6] Some Pre-design Thoughts

This week's assignment requires us to design a Micro-Calendar that displays our daily schedules in a small space.

Since it is a small space we are talking about, we need take into account that not too many features can be packed inside.

Traditional calendar apps in the iPhone as well as Google Calendar follows a fixed structure that is widely accepted - displaying a simple calendar that fills up with events that the user inputs.

They also have one thing in common - colour coding. As mentioned in the lectures, colour may not necessarily be the best way to categorise information, as it excludes people with varying degrees of colour-blindedness.

My idea of the MicroCal will be something that follows the traditional calendar display, but with icons to represent different categories of events for the day. The design should be kept as simple as possible to avoid looking cluttered.

Examples of icons we can use:

Work: 
Kids: 
Friends: 

More discussion will be done and stay tuned for our final design of the MicroCal!