Calendar:Improving the Calendar Views: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 3: Line 3:
* [http://cjansen.com/lightning-demo/accordion.htm Tab-box UI Prototype]
* [http://cjansen.com/lightning-demo/accordion.htm Tab-box UI Prototype]
* {{bug|327783}}
* {{bug|327783}}
* [[Calendar:Improving_the_Calendar_Views-Archive Archive]]
* [[Calendar:Improving_the_Calendar_Views-Archive Archive, (Old Designs)]]
== Current Issues (Lightning 0.3)==  
== Current Issues (Lightning 0.3)==  


Line 13: Line 13:
# I can't drag an event from one calendar into another.
# 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.
# 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.
# 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.
# I want to switch between E-Mail and Calendar easily.
# Why am I seeing the mail tree when I'm working in the Calendar?
# Why am I seeing the mail tree when I'm working in the Calendar?
Line 75: Line 75:
== Improved Views ==
== Improved Views ==


Idea 1 to 3 document the design iteratiation I went through before comming up with my prefered concept which is shown below:
Idea 1 to 3 document the design iteration I went through before coming up with my preferred concept which is shown below:




=== Mail ===
=== 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 ===
== Initial View ==


  <nowiki>
  <nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| C A L E N D A R - - T O O L B A R                           |
| M A I L -- T O O L B A R + Today button          [Search ] |
|---------------------------____________-----------------------|
| 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  < > ||___________________________________________|
| All Folders < > || Hello      xyz@abc.com                  |
|`````````````````||                                          |
|`````````````````|| ...                                      |
| 0 This Week    ||  [-] Do Car Wash                          |
| - Account      || Hello      xyz@abc.com                  |
| 0 My Tasks      ||     sdnsdsd fcfdf ffdf dfdf             |
|  - Inbox        || ...                                      |
| O Next Seven Da ||     ds fcfdf hhj wew                    |
|  - Sent        ||                                          |
| - Junk        ||-------------------------------------------|
|  + ....        || From: xyz@abc.com                        |
|                ||                                          |
|                ||-------------------------------------------|
|                 || Hi there!                                |
|                || cxcds  dfdf dfvdvf                        |
|                || dfldkf fff                                |
|                ||                                          |
|                 ||                                           |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||  [+] Do Project Planning                  |
|                ||                                          |
|                ||                                          |
|                ||  [+] GUI Planning XYZ                    |
|-----------------||                                          |
|-----------------||                                          |
| October 2006  ||                                          |
| [Mail] Cal Task ||                                          |
|  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>
  </nowiki>


=== Design Iterations ===


== Today Pane Switched On ==


'''IDEA #1: Vertical Tabs '''
<nowiki>
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                                     |
| M A I L -- T O O L B A R + Today button          [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
|   - Account    ||________________________________||Agenda X|
| All Folders < > ||________________________________|| Today X|
|     - Inbox    ||                                ||`````````|
|`````````````````||                                ||`````````|
|     - Sent      || Hello      xyz@abc.com        ||         |
| - Account      || Hello      xyz@abc.com        || Date    |
|     - Junk      || ...                            ||         |
| - Inbox        || ...                            ||`````````|
|--+  + ....      ||                                ||         |
| - Sent        ||                                || Event  |
|  |              ||--------------------------------||         |
|  - Junk        ||--------------------------------|| Event  |
|  |              || From: xyz@abc.com              ||        |
|  + ....        || From: xyz@abc.com              ||        |
| |              ||                                ||         |
|                 ||                                ||     +  |
| |              ||--------------------------------||---------|
|                 ||--------------------------------||---------|
| |              || Hi there!                      ||Todo   x|
|                 || Hi there!                      ||Tasks   |
|--|              || cxcds  dfdf dfvdvf            ||`````````|
|                 || cxcds  dfdf dfvdvf            ||         |
| |              || dfldkf fff                    ||         |
|                 || dfldkf fff                    || Task    |
| |              ||                                ||         |
|                 ||                                || Task    |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|-----------------||                                ||        |
| |              ||                                ||         |
| [Mail] Cal Task ||                                || New Task|
| |--------------||________________________________||_________|
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</pre>
</nowiki>


=== Calendar ===


'''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>
  <nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R                                     |
| C A L E N D A R - - T O O L B A R               [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
| M A I L    < > ||___________________________________________|
| Calendar    < > ||   < > February 26 - March 02, 2007    CW 9|
|`````````````````||                                           |
|`````````````````||   |Mon |Tue | Wed | Thu | Fri | Sat | Sun |
| - Account      || Hello      xyz@abc.com                  |
| February 2007  ||---|----|----|-----|-----|-----|-----|-----|
| - Inbox        || ...                                      |
| X X X X X X    || 8 | // |    |    |    |    |     |     |
| - Sent        ||                                           |
| X X X X X X X  ||---|-//-|----|-----|-----|-----|-----|-----|
| - Junk        ||-------------------------------------------|
| X X X X X X X  || 9 | // |    |    |    |    |    |    |
| + ....        || From: xyz@abc.com                        |
| X X X X        ||---|----|///-|-----|-----|-----|-----|-----|
|                 ||                                           |
|                 || 10|    |/// |     |     |     |     |     |
|                ||-------------------------------------------|
|                ||---|----|----|-----|-----|-----|-----|-----|
|                 || Hi there!                                |
|-----------------|| 11|    |    |    |    |    |    |    |
|                 || cxcds  dfdf dfvdvf                        |
| [X] Work        ||---|----|----|-----|-----|-----|-----|-----|
|                 || dfldkf fff                                |
| [ ] Private    || 12|    |    | /// |    |    |     |     |
|                 ||                                           |
| [X] NFL        ||---|----|----|-///-|-----|-----|-----|-----|
|                 ||                                           |
| [ ] Team        || 1 |    |    |    |    |    |     |     |
|                ||                                           |
| [ ] Birthdays  ||---|----|----|-----|-----|-----|-----|-----|
|________________ ||                                           |
|                || 2 |    |    |    |    |    |    |    |
| C A L E N D A R ||                                           |
|                 ||---|----|----|-----|-----|-----|-----|-----|
|-----------------||                                           |
|-----------------|| 3 |    |    |    |    |    |    |    |
| T A S K S      ||                                           |
| Mail [Cal] Task ||---|----|----|-----|-----|-----|-----|-----|
|-----------------||___________________________________________|
|-----------------||___________________________________________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</nowiki>
=== Calendar ===
<nowiki>
+---------------------------------------------------------+
+---------------------------------------------------------+
| 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>
  </nowiki>


Line 290: Line 176:
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| T A S K S - - T O O L B A R                                 |
| T A S K S - - T O O L B A R                     [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
| T A S K S  < > ||___________________________________________|
| Calendar    < > ||                                           |
|`````````````````||                                          |
|`````````````````||  [-] Do Car Wash                          |
| 0 This Week    ||  [-] Do Car Wash                          |
| February 2007  ||      sdnsdsd fcfdf ffdf dfdf              |
| 0 My Tasks      ||      sdnsdsd fcfdf ffdf dfdf              |
| X X X X X X    ||      ds fcfdf hhj wew                    |
| O Next Seven Da ||      ds fcfdf hhj wew                    |
| X X X X X X X  ||                                          |
| X X X X X X X  ||  [+] Do Project Planning                  |
| X X X X        ||                                          |
|                ||                                          |
|-----------------||  [+] GUI Planning                        |
| 0 This Week    ||                                          |
| 0 My Tasks      ||                                          |
| O Next Seven Da ||                                          |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||  [+] 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 ||                                          |
| Mail Cal [Task] ||                                          |
|-----------------||___________________________________________|
|-----------------||___________________________________________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
  </nowiki>
  </nowiki>

Revision as of 08:56, 21 February 2007

References

Current Issues (Lightning 0.3)

The table below lists users feedback regarding the usability of the main Lightning UI.

Issues:

  1. The calendar below the email accounts is disturbing and to big if you also use the "contact sidebar" extension.
  2. After starting Thunderbird I don't know in which calendar I'm working in.
  3. I can't drag an event from one calendar into another.
  4. All the different colors in the week view are confusing me. Especially same things are highlighted differentially.
  5. The three buttons (New../Edit../Delete) are somehow strange. I think these buttons are good for creating/changed/deleting events.
  6. I want to switch between E-Mail and Calendar easily.
  7. Why am I seeing the mail tree when I'm working in the Calendar?
  8. I don't want to see Saturday and Sunday. I use my calendar only for my work.
  9. The left side looks very cluttered.
  10. How can I switch into a different view?
  11. 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),
  • 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:

  1. Mail Account Tree
  2. Agenda
  3. Mini Month
  4. Todo
  5. Calendar


For the task "Create Event" the order is different:

  1. Calendar
  2. Mini Month
  3. Agenda
  4. Todo
  5. 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:

Mail Pane Calendar Pane
* Mail Account Tree * Mini Month
* Calendar Subscriptions


Improved Views

Idea 1 to 3 document the design iteration I went through before coming up with my preferred concept which is shown below:


Mail

Initial View

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R + Today button          [Search  ]  |
|--------------------------------------------------------------|
| All Folders < > || Hello       xyz@abc.com                   |
|`````````````````|| ...                                       |
| - Account       || Hello       xyz@abc.com                   |
|  - Inbox        || ...                                       |
|  - Sent         ||                                           |
|  - Junk         ||-------------------------------------------|
|  + ....         || From: xyz@abc.com                         |
|                 ||                                           |
|                 ||-------------------------------------------|
|                 || Hi there!                                 |
|                 || cxcds  dfdf dfvdvf                        |
|                 || dfldkf fff                                |
|                 ||                                           |
|                 ||                                           |
|                 ||                                           |
|                 ||                                           |
|                 ||                                           |
|-----------------||                                           |
| [Mail] Cal Task ||                                           |
|-----------------||___________________________________________|
+--------------------------------------------------------------+


Today Pane Switched On

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R + Today button          [Search  ]  |
|--------------------------------------------------------------|
| All Folders < > ||________________________________|| Today  X|
|`````````````````||                                ||`````````|
| - Account       || Hello       xyz@abc.com        || Date    |
|  - Inbox        || ...                            ||`````````|
|  - Sent         ||                                || Event   |
|  - Junk         ||--------------------------------|| Event   |
|  + ....         || From: xyz@abc.com              ||         |
|                 ||                                ||      +  |
|                 ||--------------------------------||---------|
|                 || Hi there!                      ||Tasks    |
|                 || cxcds  dfdf dfvdvf             ||         |
|                 || dfldkf fff                     || Task    |
|                 ||                                || Task    |
|                 ||                                ||         |
|                 ||                                ||         |
|                 ||                                ||         |
|                 ||                                ||         |
|-----------------||                                ||         |
| [Mail] Cal Task ||                                || New Task|
|-----------------||________________________________||_________|
+--------------------------------------------------------------+

Calendar

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| C A L E N D A R - - T O O L B A R                [Search  ]  |
|--------------------------------------------------------------|
| Calendar    < > ||   < > February 26 - March 02, 2007    CW 9|
|`````````````````||   |Mon |Tue | Wed | Thu | Fri | Sat | Sun |
| February 2007   ||---|----|----|-----|-----|-----|-----|-----|
| X X X X X X     || 8 | // |    |     |     |     |     |     |
| X X X X X X X   ||---|-//-|----|-----|-----|-----|-----|-----|
| X X X X X X X   || 9 | // |    |     |     |     |     |     |
| X X X X         ||---|----|///-|-----|-----|-----|-----|-----|
|                 || 10|    |/// |     |     |     |     |     |
|                 ||---|----|----|-----|-----|-----|-----|-----|
|-----------------|| 11|    |    |     |     |     |     |     |
| [X] Work        ||---|----|----|-----|-----|-----|-----|-----|
| [ ] Private     || 12|    |    | /// |     |     |     |     |
| [X] NFL         ||---|----|----|-///-|-----|-----|-----|-----|
| [ ] Team        || 1 |    |    |     |     |     |     |     |
| [ ] Birthdays   ||---|----|----|-----|-----|-----|-----|-----|
|                 || 2 |    |    |     |     |     |     |     |
|                 ||---|----|----|-----|-----|-----|-----|-----|
|-----------------|| 3 |    |    |     |     |     |     |     |
| Mail [Cal] Task ||---|----|----|-----|-----|-----|-----|-----|
|-----------------||___________________________________________|
+--------------------------------------------------------------+

Tasks

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| T A S K S - - T O O L B A R                      [Search  ]  |
|--------------------------------------------------------------|
| Calendar    < > ||                                           |
|`````````````````||  [-] Do Car Wash                          |
| February 2007   ||      sdnsdsd fcfdf ffdf dfdf              |
| X X X X X X     ||      ds fcfdf hhj wew                     |
| X X X X X X X   ||                                           |
| X X X X X X X   ||  [+] Do Project Planning                  |
| X X X X         ||                                           |
|                 ||                                           |
|-----------------||  [+] GUI Planning                         |
| 0 This Week     ||                                           |
| 0 My Tasks      ||                                           |
| O Next Seven Da ||                                           |
|                 ||                                           |
|                 ||                                           |
|                 ||                                           |
|                 ||                                           |
|-----------------||                                           |
| Mail Cal [Task] ||                                           |
|-----------------||___________________________________________|
+--------------------------------------------------------------+
Retrieved from "https://wiki.mozilla.org/index.php?title=Calendar:Improving_the_Calendar_Views&oldid=49677"