|
|
| (41 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| == References == | | == References == |
| [[Calendar:Calendar_View|Calendar View Proposal]] | | * [http://cjansen.com/lightning-demo/accordion.htm Tab-box UI Prototype] |
| | * {{bug|327783}} |
| | * [[Calendar:Improving the Calendar Views-Archive]] (Old Designs) |
|
| |
|
| | == Specifications == |
| | * [[Calendar: Mail View Integration|Today Pane]] |
| | * [[Calendar: Calendar View |Calendar:Calendar_View]] |
| | * [[Calendar: View Switch Toolbar| Mode Switch Toolbar]] |
| | * [http://spreadsheets.google.com/pub?key=plCAueWeXt4jIoK2sb3c0QQ&output=html Toolbar Content Specification] |
| | * [[Calendar:Thunderbird_Menu_Integration|Menu Specification]] |
| | * [[Calendar:Context Menu Specification|Context Menu Specification]] |
| | * [[Calendar:Mail-Event-Task_Conversion| Mail, Event, Task Conversion]] |
|
| |
|
| == Current Issues (Lightning 0.3)== | | == Proposals == |
| | ''' Calendar Mode ''' |
| | * [[Calendar: Crossing Day Boundaries|Crossing Day Boundaries]] |
| | * [[Calendar: Calendar_Mode_Invitation_handling|Invitation Handling]] |
| | ''' Task Mode''' |
| | * [[Calendar: Task Mode|Task Mode]] |
|
| |
|
| The table below lists users feedback regarding the usability of the main Lightning UI.
| | ''' Events and Tasks''' |
| | * [[Calendar: Improved Events and Tasks|Improved Events and Tasks]] |
|
| |
|
| == Issues: == | | = Modes = |
| # The calendar below the email accounts is disturbing and to big if you also use the "contact sidebar" extension.
| | == Mail == |
| # 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 confusing me. Especially same things are highlighted differentially.
| |
| # The three buttons (New../Edit../Delete) are somehowe strange. I think these buttons are good for creating/chageng/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 ==
| | [[Image:Mail-view-default.jpg]] |
| Most of the issues stated above can be fixed by focusing on the following areas:
| |
|
| |
|
| === Rearranging already existing UI elements === | | == Today Pane Switched On == |
|
| |
|
| At the moment, Lightning 0.3 combines very important information on the left hand side. From an users point of view these are:
| | [[Image:Mail-view-today-vertical.jpg]] |
| | |
| * Access to the E-Mail account (Mail Account Tree),
| |
| * a Calendar (Mini Moth),
| |
| * an Agenda List (Agenda Tab),
| |
| * a Todo List (Todo Tab)and
| |
| * a 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
| |
| # Mini Month
| |
| # Todo
| |
| # Calendar
| |
| | |
| | |
| For the task "Create Event" the order is different:
| |
| | |
| # Calendar
| |
| # Mini Month
| |
| # Agenda
| |
| # Todo
| |
| # Mail Account Tree
| |
| | |
| To reduce visual clutter I'd like to propose to split the Mail/Calendar pane into two separate parts.
| |
| * One pane which focuses on mail reading/writing,
| |
| * the other on calendaring.
| |
| | |
| The table below lists the items of each pane:
| |
| {| border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; border: 1px #cccccc solid; border-collapse: collapse; width: 100%"
| |
| |-
| |
| | bgcolor="#dddddd" | '''Mail Pane''' || bgcolor="#dddddd" | '''Calendar Pane'''
| |
| |-
| |
| | * Mail Account Tree
| |
| | * Mini Month
| |
| |-
| |
| |
| |
| | * Calendar Subscriptions
| |
| |}
| |
| | |
| | |
| | |
| == Improved Views ==
| |
| | |
| Idea 1 to 3 document the design iteratiation I went through before comming up with my prefered concept which is shown below:
| |
| | |
| | |
| === Mail ===
| |
| <nowiki>
| |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 || || |
| |
| |-----------------||________________________________||_________|
| |
| +--------------------------------------------------------------+
| |
| </nowiki>
| |
| | |
| === Calendar ===
| |
| | |
| <nowiki>
| |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 ||---|----|-----|-----|-----|-----|| |
| |
| |-----------------||________________________________||_________|
| |
| +--------------------------------------------------------------+
| |
| </nowiki>
| |
| | |
| === Tasks ===
| |
| | |
| <nowiki>
| |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 || |
| |
| |-----------------||___________________________________________|
| |
| +--------------------------------------------------------------+
| |
| </nowiki>
| |
| | |
| === 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.
| |
| <pre>
| |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 || |
| |
| | | || || |
| |
| | | || || |
| |
| | | || || |
| |
| | | || || |
| |
| | | || || |
| |
| | | || || |
| |
| | | || || |
| |
| | |--------------||________________________________||_________|
| |
| +--------------------------------------------------------------+
| |
| </pre>
| |
| | |
| | |
| '''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 ==
| |
| | |
| === Mail ===
| |
| <nowiki>
| |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 || |
| |
| |-----------------||___________________________________________|
| |
| +--------------------------------------------------------------+
| |
| </nowiki>
| |
|
| |
|
| === Calendar === | | === Calendar === |
|
| |
|
| <nowiki>
| | http://wiki.mozilla.org/images/a/a0/Week-view.png |
| +---------------------------------------------------------+
| |
| +---------------------------------------------------------+
| |
| | 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 ||---|------|------|------|------|------|
| |
| |-----------------||________________________________|___________|
| |
| +---------------------------------------------------------------+
| |
| </nowiki>
| |
|
| |
|
| === Tasks === | | === Tasks === |
|
| |
|
| <nowiki>
| | [[Image:Task-mode-w-accordion.png]] |
| +--------------------------------------------------------------+
| |
| +--------------------------------------------------------------+
| |
| | 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 || |
| |
| |-----------------||___________________________________________|
| |
| +--------------------------------------------------------------+
| |
| </nowiki>
| |
