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

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 59: Line 59:
|-----------------||________________________________||_________|
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</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>


Revision as of 08:55, 21 February 2007

Concept 1 - Dec, 2006


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=49676"