[Design] Collection icons

[Mimi Yin]

For 0.6, we've decided to get rid of specialized icons for each  
collection and instead, only offer a checkbox, thereby simplifying  
the design.

In 0.7 we will have to address how to bring the collection icons back  
in without cluttering up the sidebar. (Please scroll to bottom for  
more on how we might do this.)

As Chandler proceeds beyond calendar, the collection icons will  
become crucial in communicating key information both about how the  
faceted sidebar works (as in the App areas filter the collections in  
the sidebar)

For example, the name of the "My" collection at the top changes as  
you move between App areas. "My items" turns into "My mail" turns  
into "My tasks" turns into "My calendar". The collection icon should  
change accordingly as well to reinforce the name change.

We also need to provide visual feedback to differentiate between the  
out of the box collections and the user-defined collections because  
there are crucial behavioral differences between the two. Users can't  
delete the OOTB collections. Users can't rename them. Users can't  
remove items from them without moving those items to the trash  
(because they are considered Library collections.)

Also, when we are able to apply specific semantics to individual  
collections (aka facetizing collections), collection icons will be  
needed to differentiate between the different collections types. This  
is a Project: Foo collections versus a Location: New York collections  
versus a Timeframe: Next week collection versus a Who: Jeannie  
collection.

All in all, collection icons will have to come back in some way.

I've started some informal drive-by usability exercises, my main  
worry is not so much with the visual disparity between the collection  
icons and the checkboxes, but more that most users won't GET that the  
"thing to the left of the collection name" is a checkbox at all  
(simply because it does not look anything like the system  
checkboxes). We originally wanted to use system checkboxes, but  
decided that that would be REALLY visually jarring.

The user I tested last night (someone who falls in the "Mom"  
category, but is also a small business owner who is dying for a read- 
write shared calendar) didn't get the checkboxes at all (not even the  
ones next to the user-defined collections and tried to overlay the  
calendars by dragging and dropping one calendar onto another in the  
sidebar. (Granted she was a Mac user and as a rule tries drag and  
drop for everything).

However, the very real problem of not understanding that you should  
"click" on the icon on the left means that we have to be as explicit  
as possible about checkbox-ness. As a result, we considered and  
rejected several options that might have solved the "visually  
jarring" problem, but would have failed to communicate "click on me  
to check me off". Things like:

1. Overlaying a checkmark on top of the collection icon.
2. Overlaying a dot on top of the collection icon.
3. Making the collection icon look depressed when it's checked.

This is particularly problematic given our performance problems. A  
user could click and check the collection and click again to uncheck  
the collection before the calendar they've checked has had enough  
time to appear.

The question we have to ask ourselves is...at the point when the user  
rolls over the collection and reveals the rollover state...do they  
understand they need to click on the icon on the left to make the  
calendar "stick" and overlay.

-------------- next part --------------
A non-text attachment was scrubbed...
Name: sidebar_checkboxes.png
Type: image/png
Size: 73484 bytes
Desc: not available
Url : http://lists.osafoundation.org/pipermail/design/attachments/20051027/3be92ece/sidebar_checkboxes.png
-------------- next part --------------

I have put together an animated gif that shows how we might continue  
to tweak the visual design of the collection icons, to bring them  
more in line with the checkbox icons. In the example below, I've  
simply aligned the colors so that the Red in the Trash icon is the  
same as the Red in the checkbox circles. I've also removed the darker  
border around the checkbox circle.

There are dozens of such tweaks we could experiment with to improve  
the visual feel to make it more consistent, including making all the  
icons monochrome grey except for the checked state, etc...



Please drag gif below into a browser to view animation.


-------------- next part --------------
A non-text attachment was scrubbed...
Name: checkbox_rollover.gif
Type: image/gif
Size: 2160 bytes
Desc: not available
Url : http://lists.osafoundation.org/pipermail/design/attachments/20051027/3be92ece/checkbox_rollover.gif
-------------- next part --------------

Mimi


On Oct 24, 2005, at 2:59 PM, Philippe Bossut wrote:

> Hi,
>
> I've been dogfooding Chandler since a month now and started to take  
> notes of my experience (available here: http:// 
> wiki.osafoundation.org/bin/view/Journal/Dogfooding06)
>
> One thing that bugs me is the current collection icon in the  
> sidebar. I describe what I think is annoying in the current  
> implementation in the here above mentioned document. In a nutshell  
> though,IMHO, the current hover/checked icons for the My Calendar  
> and Trash (most notably) is confusing. We should either have  
> different icons for those or question the superposition of icons  
> (which relates to identity) and checkness (which relates to status).
>
> Anyway, I thought I'd ask if other users of Chandler have the same  
> feeling or if I'm the only one...
>
> Also, if anyone else is keeping dogfooding notes, I think everyone  
> on this list will be interested to read them, so, don't be shy,  
> please share your notes... :)
>
> Cheers,
> - Philippe
> _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
>
> Open Source Applications Foundation "Design" mailing list
> http://lists.osafoundation.org/mailman/listinfo/design
>