Calendar:Improving the Calendar Views-Archive: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Concept 1 - Dec, 2006
Concept 1 - Dec, 2006
== 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




Line 59: Line 115:
|-----------------||________________________________||_________|
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</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 ===
<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>


Latest revision as of 07:26, 12 September 2007

Concept 1 - Dec, 2006

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 confuses 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),
  • 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:

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


For the task "Create Event" the order could be as follows:

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


Mail

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| 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

Mail

+--------------------------------------------------------------+
+--------------------------------------------------------------+
| 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 ||                                           |
|-----------------||___________________________________________|
+--------------------------------------------------------------+
Retrieved from "https://wiki.mozilla.org/index.php?title=Calendar:Improving_the_Calendar_Views-Archive&oldid=68267"