Calendar:Improving the Calendar Views-Archive
From MozillaWiki
Concept 1 - Dec, 2006
Contents
Current Issues (Lightning 0.3)
The table below lists users feedback regarding the usability of the main Lightning UI.
Issues:
- The calendar below the email accounts is disturbing and to big if you also use the "contact sidebar" extension.
- After starting Thunderbird I don't know in which calendar I'm working in.
- I can't drag an event from one calendar into another.
- All the different colors in the week view are confuses me. Especially same things are highlighted differentially.
- The three buttons (New../Edit../Delete) are somehow strange. I think these buttons are good for creating/changed/deleting events.
- I want to switch between E-Mail and Calendar easily.
- Why am I seeing the mail tree when I'm working in the Calendar?
- I don't want to see Saturday and Sunday. I use my calendar only for my work.
- The left side looks very cluttered.
- How can I switch into a different view?
- I have 3 calendars. One for work, the other are subscribed ones. Which means that I don't have write access on these. I don't know how many times I tried accidentally to create an event in one of the read only calendars.
Proposal
Most of the issues stated above can be fixed by focusing on the following areas:
Rearranging already existing UI elements
At the moment, Lightning 0.3 combines very important information on the left hand side. From an users point of view these are:
- Access to the E-Mail account (Mail Account Tree),
- Calendar (Mini Moth),
- Agenda List (Agenda Tab),
- Todo List (Todo Tab)and
- List of Calendars (Calendar Tab)
The problem with that solution is that 70% of the visual information is placed on 30% of the screen.
Depending on the task users want to fulfill, each element of the left hand pane has a different importance level.
For the tasks "Write or Read Mail" the order could be:
- Mail Account Tree
- Agenda
- Todo
- Mini Month
- Calendar
For the task "Create Event" the order could be as follows:
- Calendar
- Mini Month
- Agenda
- Todo
- Mail Account Tree
To reduce visual clutter I'd like to propose to split Mail, Calendar and Tasks into three separate modes.
- One view which focuses on mail
- One calendaring.
- One tasks
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | M A I L -- T O O L B A R | |--------------------------------------------------------------| | M A I L < > ||________________________________||Agenda X| |`````````````````|| ||`````````| | - Account || Hello xyz@abc.com || | | - Inbox || ... || | | - Sent || || | | - Junk ||--------------------------------|| | | + .... || From: xyz@abc.com || | | || || | | ||--------------------------------||---------| | || Hi there! ||Todo x| | || cxcds dfdf dfvdvf ||`````````| | || dfldkf fff || | | || || | | || || | | || || | |________________ || || | | C A L E N D A R || || | |-----------------|| || | | T A S K S || || | |-----------------||________________________________||_________| +--------------------------------------------------------------+
Calendar
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | C A L E N D A R - - T O O L B A R | |---------------------------____________-----------------------| | Calendar < > ||___Day__|Work WEEK |_Month______||Agenda X| |`````````````````|| |Mon | Tue | Wed | Thu | Fri ||```````` | | Work ||---|----|-----|-----|-----|-----|| | | Private || 8 | // | | | | || | | NFL ||---|-//-|-----|-----|-----|-----|| | | Team || 9 | // | | | | || | | Birthdays ||---|----|-///-|-----|-----|-----|| | | || 10| | /// | | | || | | ||---|----|-----|-----|-----|-----||---------| |-----------------|| 11| | | | | ||Todo X| | October 2006 ||---|----|-----|-----|-----|-----||`````````| | X X X X X X || 12| | | /// | | || | | X X X X X X X ||---|----|-----|-///-|-----|-----|| | | X X X X X X X || 1 | | | | | || | | X X X X ||---|----|-----|-----|-----|-----|| | |________________ || 2 | | | | | || | | M A I L ||---|----|-----|-----|-----|-----|| | |-----------------|| 3 | | | | | || | | T A S K S ||---|----|-----|-----|-----|-----|| | |-----------------||________________________________||_________| +--------------------------------------------------------------+
Tasks
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | T A S K S - - T O O L B A R | |--------------------------------------------------------------| | T A S K S < > ||___________________________________________| |`````````````````|| | | 0 This Week || [-] Do Car Wash | | 0 My Tasks || sdnsdsd fcfdf ffdf dfdf | | O Next Seven Da || ds fcfdf hhj wew | | || | | || [+] Do Project Planning | | || | | || [+] GUI Planning XYZ | |-----------------|| | | October 2006 || | | X X X X X X || | | X X X X X X X || | | X X X X X X X || | | X X X X || | |________________ || | | M A I L || | |-----------------|| | | C A L E N D A R || | |-----------------||___________________________________________| +--------------------------------------------------------------+
Design Iterations
IDEA #1: Vertical Tabs The main idea here is to have tabs located on the left hand side of the left pane.
'Pros:'
- Tabs need not too much horizontal space.
- Switching views would happen nearby the views
'Cons:'
- Vertical Labels are hard to read.
- More than 3 tabs would look to cluttered
- An icon-only solution would be too small.
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | M A I L -- T O O L B A R | |--------------------------------------------------------------| | - Account ||________________________________||Agenda X| | - Inbox || ||`````````| | - Sent || Hello xyz@abc.com || | | - Junk || ... || | |--+ + .... || || | | | ||--------------------------------|| | | | || From: xyz@abc.com || | | | || || | | | ||--------------------------------||---------| | | || Hi there! ||Todo x| |--| || cxcds dfdf dfvdvf ||`````````| | | || dfldkf fff || | | | || || | | | || || | | | || || | | | || || | | | || || | | | || || | | | || || | | |--------------||________________________________||_________| +--------------------------------------------------------------+
IDEA #2: Horizontal Tabs
The tabs are now located on top of the left pane.
'Pros:'
- Good readability
- Switching views would happen nearby the views/context
'Cons:'
- Labeled Tabs need much space
- An icon-only solution would be appropriate.
- Two sets of tabs.
- One for switching between Calendar/Mail
- One set for switching between Day/Week/Month
Simon's (sipaq) approach
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | M A I L -- T O O L B A R | |--------------------------------------------------------------| | M A I L < > ||___________________________________________| |`````````````````|| | | - Account || Hello xyz@abc.com | | - Inbox || ... | | - Sent || | | - Junk ||-------------------------------------------| | + .... || From: xyz@abc.com | | || | | ||-------------------------------------------| | || Hi there! | | || cxcds dfdf dfvdvf | | || dfldkf fff | | || | | || | | || | |________________ || | | C A L E N D A R || | |-----------------|| | | T A S K S || | |-----------------||___________________________________________| +--------------------------------------------------------------+
Calendar
+---------------------------------------------------------+ +---------------------------------------------------------+ | C A L E N D A R - - T O O L B A R | |---------------------------------------------------------| | Calendar < > || | Mon | Tue | Wed | Thu | Fri | |`````````````````|| | | | | | | | Work ||---|------|------|------|------|------| | Private || 8 | //// | | | | | | NFL ||---|-////-|------|------|------|------| | Team || 9 | //// | | | | | | Birthdays ||---|------|-////-|------|------|------| | || 10| | //// | | | | | ||---|------|------|------|------|------| |-----------------|| 11| | | | | | | October 2006 ||---|------|------|------|------|------| | X X X X X X || 12| | | | | | | X X X X X X X ||---|------|------|------|------|------| | X X X X X X X || 1 | | | | | | | X X X X ||---|------|------|------|------|------| |________________ || 2 | | | | | | | M A I L ||---|------|------|------|------|------| |-----------------|| 3 | | | | | | | T A S K S ||---|------|------|------|------|------| |-----------------||________________________________|___________| +---------------------------------------------------------------+
Tasks
+--------------------------------------------------------------+ +--------------------------------------------------------------+ | T A S K S - - T O O L B A R | |--------------------------------------------------------------| | T A S K S < > ||___________________________________________| |`````````````````|| | | 0 This Week || [-] Do Car Wash | | 0 My Tasks || sdnsdsd fcfdf ffdf dfdf | | O Next Seven Da || ds fcfdf hhj wew | | || | | || [+] Do Project Planning | | || | | || [+] GUI Planning XYZ | |-----------------|| | | October 2006 || | | X X X X X X || | | X X X X X X X || | | X X X X X X X || | | X X X X || | |________________ || | | M A I L || | |-----------------|| | | C A L E N D A R || | |-----------------||___________________________________________| +--------------------------------------------------------------+
