Difference between revisions of "Notes2 Design NotesSidePane"

From Apache OpenOffice Wiki
Jump to: navigation, search
m (Added category Notes2)
(Added proposal "Notes Ruler Control" Proposed Designs)
Line 167: Line 167:
 
Please note: The graphic is simplified and does neither show Note Anchors nor Note Window scrollbars.
 
Please note: The graphic is simplified and does neither show Note Anchors nor Note Window scrollbars.
 
|}
 
|}
 +
 +
 +
=== Proposal "Notes Ruler Control" ===
 +
 +
This proposal extends the proposal "Side Pane".
 +
 +
At the moment, the user is forced to use the application menu to toggle the visibility of the Notes (e.g. Notes Windows, Notes Anchors). This proposal provides a control located in a currently unused part of the Writer ruler bar.
 +
 +
Advantages:
 +
* Visibility of Notes can be directly manipulated.
 +
* The caption "Notes" automatically explains the Notes Side Pane located below. (Some people do only know that there is some unwanted gray background).
 +
 +
Disadvantages/Challenges:
 +
* The visibility of the control is dependent on the visibility of the upper ruler. (This is okay, because the rulers are currently activated by default.)
 +
* The visibility of the control is dependent on the position and size of the current page area shown below. (The document may be zoomed, so that the control is outside the currently shown area).
 +
* The user is required to learn how to use this new UI element. (The design is based on the controls of docked windows, but has been adapted to fit the space requirements.)
 +
 +
 +
'''General Behavior and Implementation'''
 +
 +
* The size of the upper ruler bar is extended by moving the vertical scrollbar a bit down (please refer to the mockups below).
 +
* The new control is located next to the upper ruler with respect to the current Notes Side Pane position and size. (Current Notes Side Pane: Similar to the ruler, the position and size of the Notes Side Pane is dependent on the current document page size and orientation.)
 +
* If the user clicks on the active mouse area of the Notes Ruler Control, then the control changes its state (state: please see below).
 +
* If the user hovers the active mouse area of the Notes Ruler Control, then it is visually highlighted. (Highlighted: Like the Show/Hide button of docked windows like e.g. the Navigator).
 +
 +
 +
* The Notes ruler control has two states:
 +
** Expanded: The Notes are shown. This state is similar to "View -- Notes" being activated.
 +
** Collapsed: The Notes are not shown. This state is similar to "View -- Notes" being deactivated.
 +
 +
 +
* If the "zoom factor" is set to "optimal" and the Notes Ruler Control changes its state, then the current zoom is adjusted to show the document (new state: collapsed) or both the document and the Notes (new state: expanded).
 +
* The following descriptions do consider LTR documents with the Notes Side Pane located at the right side. If it is required to show the Notes Side Pane on the left side of the page (e.g. because of RTL text or "book mode"), then the control is mirrored accordingly.
 +
 +
 +
* The Notes Ruler Control does provide an explanatory caption:
 +
** Caption: "Notes" (English)
 +
** Font: Same as used in ruler for e.g. showing the numbers
 +
** Alignment: Dependent on the state (please see below).
 +
** Visibility: For special cases, please refer to "State: Collapsed".
 +
* Active mouse area: Please refer to mockup.
 +
 +
 +
* If the user hovers the active mouse area of the Notes Ruler Control, then an explanatory tooltip is shown (tooltip: behaves like other tooltips, e.g. using the same delay). The text is dependent on the current state of the Notes Ruler Control (please see below).
 +
 +
 +
{| class="prettytable" border="0"
 +
| [[Image:Notes2 DesignProposals SidePane RulerControl Expanded.png|512px|thumb|center]]
 +
|
 +
'''State: Expanded''' (Overview)
 +
|-
 +
| [[Image:Notes2 DesignProposals SidePane RulerControl Expanded Details.png|512px|thumb|center]]
 +
|
 +
'''State: Expanded''' (Details)
 +
 +
* Caption alignment: centered (reference: most inner box of the control)
 +
* Active mouse area: Please refer to mockup.
 +
* Tooltip text: "Hide Notes" (English)
 +
 +
|-
 +
| [[Image:Notes2 DesignProposals SidePane RulerControl Collapsed.png|512px|thumb|center]]
 +
|
 +
'''State: Collapsed''' (Overview)
 +
 +
Attention! Please note that the graphics shows Note Anchors which should not be shown. So please do only look at the ruler bar...
 +
 +
|-
 +
| [[Image:Notes2 DesignProposals SidePane RulerControl Collapsed Details.png|512px|thumb|center]]
 +
|
 +
'''State: Expanded''' (Details)
 +
 +
* Caption alignment: left
 +
* If there is few space (width) available and the caption cannot be fully shown, then the caption is ellipsed with '...'. (Examples: "Note...", "No...", "...").
 +
* Tooltip text: "Show Notes" (English)
 +
|}
 +
 +
 +
'''Additional Information / Open Points / Further Ideas'''
 +
 +
Additional Information:
 +
* The triangles that indicate the expanded or collapsed states should be consistent with the current ones in OpenOffice.org (Galaxy Style). Please ask Stella (sts) for more information.
 +
* The feature is accessible because it realizes exact the same behavior like the menu entry of "View -- Notes" which can be used instead.
 +
 +
Open Points:
 +
* For consistency reasons, the position of the scrollbars in the other OpenOffice.org modules should be adapted (e.g. Draw).
 +
 +
Ideas:
 +
* It would be a huge benefit for the User Experience point-of-view if toggling between the states could be smoothly animated. Details on request.
  
 
== Selected Design ==
 
== Selected Design ==

Revision as of 20:49, 16 November 2008

< Back to the Notes2 main page

Summary

The Notes information will be presented next to the document text. Therefore every page will get expanded by a Note Side Pane, an area which contains the Note Windows.

Rationale

One goal of the redesign of the Notes functionality is to provide a more direct access to the Notes Data.

Assumptions

  • The paper sizes “A4 portrait” or “Letter portrait” will generally be used.
  • The amount of Notes Data used on one page will usually fit into the height of the current document page.
  • The user does not want to be bothered too much, therefore the position and size of the Side Pane is determined automatically without any influence by the user.

Proposed Designs

Proposal "Side Pane"

Position

The following items describe the position of the Side Pane:

  • From the user's point of view, the Note Side Pane is an integral part of the document output because it is shown in the direct neighborhood of the writer page.
  • (Print Layout) If the side pane is shown, the complete width of the writer page and side pane have to be considered when centering the screen output inside the writer background. (For OOo 2.3 it is assumed that the document pages of the document are centered inside the Writer background.)
    • OpenPoint: How does the Writer behave if the document page width is smaller than the remaining screen space inside the Writer document window? Example: When changing the zoom level, does the Writer prioritize the visibility of the left page area (assuming left-to-right writing), or is it dependent of the current cursor position? Here, the document page itself should get prioritized when considering document page and notes side pane.
  • If the side pane is shown, the complete width of the writer page and side pane have to be considered when calculating the document width represented by the horizontal scroll bars.
  • If the side pane is shown, both writer page and side pane have to be considered when switching the zoom level to “optimal”. Some of the other zoom levels “page width” and “complete page”.
  • Location of the side pane:
    • For left-to-right text (GUI language), the side pane is located at the right side of the writer document.
    • For right-to-left text (GUI language), the side pane is located at the left side of the writer document.
    • In special cases (not considered at the moment), the side pane may be located both left and right of the document window.

Size

The calculation of the size of the Note Side Pane is mainly based on the size of the paper page which it is assigned to. For the view mode, the size of the Note Side Pane is dependent on the current zoom level of the document.

The width of the Note Side Pane is based on the amount of text that fits into one text line (amount of text: this is a bit simplified because we consider the width of the corresponding page and not the text line width):

  • Assumptions:
    • If using the same paper format, the side pane width does not change across documents or pages (At the moment, this should prevent using some super smart automatic functions which e.g. analyzes the amount of notes data inside the document).
    • If the user uses both portrait and landscape for the same paper size in one document (e.g. ISO A4), the user wants the same side pane width to have a similar look and feel for the notes.
    • Using larger paper format does not increase the side pane width linearly dependent to the page width. (This is because the user may use larger paper formats (e.g. ISO A2) for creating posters. Therefore the user may increase the font size too, which accordingly limits the amount of text on the document page. So we need not so much space for the notes information.)

As a result, the width of the side pane is calculated in two steps (exemplary for the physical value [cm]):

  • Step 1: Determine the side pane width at 100% zoom level in [cm]. These [cm] are similar to the shown document width in [cm]. The side pane does have a width of at least 4 cm. The calculation is done by (formula in OOo Calc syntax):
 sidepaneWidth_normalView = MIN ( (1.1 * SQRT(0,9 * MAX(currentDocumentPage_Width, currentDocumentPage_Height) ) ); 4)
  • Step 2: Determine the side pane width for the current zoom level [%].
sidepaneWidth_final = currentZoomLevel  * sidePaneWidth_normalView

The height of the Note Side Pane is based on the height of the Current Document page:

  • If no Note is inserted on the current page or if the inserted height of all Notes Windows fit into the height of the document page, then the height of the Note Side Pane is identical to the height of the current page.
  • If the sum height of the notes windows is larger than the height of the current document page, then the user requires access to all Note Windows on that page. Please refer to the other proposals on this page.

Please note: The height of several Note Windows does also include the necessary distance between Notes Windows. Please refer to the specification of the Notes Windows Notes2_Design_NoteWindow.

Example

Visualization of Paper Formats
The graphic shows different paper sizes (scaled) and the corresponding side pane width. It contains:
  • ISO A3 Portrait (height 297 mm, width 420 mm), Side Pane (width 67.6 mm), example for page border (distance 20 mm)
  • ISO A4 Portrait (height 210 mm, width 297 mm), Side Pane (width 56.9 mm), example for page border (distance 20 mm)
  • ISO A6 Portrait (height 148 mm, width 105 mm), Side Pane (width 40.1 mm)
  • ISO A10 Portrait (height 37 mm, width 26 mm), Side Pane (width 40.0 mm)

Graphical Representation (Colors, Line Styles)

  • The color of the Note Side Pane is used to reduce the brightness contrast of Notes Windows and the (generally) dark Writer background.
    • Color: Decimal R230, G230, B230, A255 (Hex: e6e6e6ff)
  • The line between page and side pane area marks the end of the physical page and delimits the notes windows (similar to page margin indication):
    • Width: 1 screen pixel
    • Color: Decimal R200, G200, B200, A255 (Hex: c8c8c8ff)
  • At the moment (OOo 2.2), the shadow is colored black and the shadow of the page seems not be dependent on the zoom level. Therefore...
    • Width: 3 screen pixels
    • Delta with reference to the document page: horizontal 3 pixels, vertical 3 screen pixels
    • Dark Color (beginning at page): Decimal R83, G83, B83, A255 (Hex: 535353ff)
    • Bright Color (ending at writer background, same color as writer background in current OOo): R150, G150, B150, A255 (Hex: 969696ff)
    • Please note that the shadow may be deactivated when the user edits the Notes User Data inside the notes windows. TO BE DEFINED LATER
  • The Note Side Pane does not implement any other border lines.
  • All colors mentioned here should be selectable for the user or dependent on the accessibility settings. TO BE DEFINED LATER

Proposal "Distribute Note Windows Across Side Panes"

This proposal extends the proposal "Side Pane".

Instead of limiting the distribution of Notes Windows along the page the Note Anchor is placed at, the Note Windows could easily be placed at the Note Side Panes of subsequent pages. The main problem is, that a Note Side Pane belongs to a certain Document page and represents that graphically (e.g. borders). The result is, that the Note Window will exceed those borders and be located at another page which has nothing to do with the Note at all ("belongs-not-to-here" problem).

Advantages:

  • Easy to implement
  • The other interaction elements work well with this solution (e.g. the scrolling of the Current Document)

Disadvantages:

  • The "belongs-not-to-here" problem (please see above)
  • Does not work for the "Web Layout" because there is "one" page only
  • Does not work for for different page layouts or view modes in "Print Layouts" (e.g. if there are pages of different page format or orientation)

Proposal "Expanded Side Pane"

This proposal extends the proposal "Side Pane".

If the Notes Windows does not fit to the height of the current page, the height of the Note Side Pane itself could be changed (without changing the actual size of the document page). Details:

  • The additional area which is caused by expanding the note pane height is evenly distributed above and below the document page.
  • The additional area above and below the document page will not contain any notes windows.
  • The expanded side pane requires more space for displaying the current page. To avoid any overlapping with other document pages, the the dimensions of the current page including the expanded notes side pane is used to calculate the position of the current page in a set of pages.

Advantages:

  • It will "feel natural" to the user and does not introduce any 'new' interaction for the user
  • The other interaction elements work well with this solution (e.g. the scrolling of the Current Document)

Disadvantages:

  • High implementation effort (has influence on the very comples page layout algorithm)
Normal Notes Side Pane Height
The graphic shows the normal Note Side Pane next to right side of the document page (Print Layout). It contains:
  • Note Side Pane (light gray)
  • Examples of other pages with normal side pane height

Please note: Graphic is not true to scale.

Expanded Notes Side Pane Height
The graphic shows the expanded Note Side Pane next to right side of the document page (Print Layout). It contains:
  • Note Side Pane (light gray). For improved visual clarity of this example, no Notes Windows are shown in the graphic.
  • Expanded Note Side Pane area at the top and bottom of the document page (hatched). This area will never contain any notes windows.
  • Examples of other pages with normal side pane height

Please note: Graphic is not true to scale.

Proposal "Scrollable Side Pane"

This proposal extends the proposal "Side Pane".

Instead of increasing the height of the Notes Side Pane on the screen, the Notes Side Pane could be made scrollable and therefore will theoretically provide infinitive space for the Notes Windows. With the appropriate scroll controls, the user is able to select the section of notes he is interested in. Details:

  • The upper and lower end of the Note Side Pane provides scroll buttons (only if necessary) which will be a "fixed" part on the Note Side Pane
  • The scroll buttons on both upper and lower end will contain the possibility to scroll upwards and downwards (UseCase: The user uses the upper Note Side Pane scroll button to scroll a bit down and look at the hidden notes. The user wants to go back one note and simply clicks on the scroll button upwards. He is not forced to scroll down the Current Document page to use the scroll buttons at the lower end of the Note Side Pane.)
  • The logic for scrolling is inherited from the "normal" scroll bar buttons (e.g. direction of scrolling, state of activation)
  • Every action at the Note Side Pane scroll button will move the content by one Note Window (action: e.g. click on the button) (tbd: Check if this is appropriate or if the content should move just 3 lines of Notes User Data)
  • The Note Anchor Lines of currently non-visible Notes Windows will be drawn until the scroll buttons to visualize that there is more to come (non visible Note Window: hidden in the non-visible section of the Note Side Pane)
  • The scroll buttons use different size according to their "importance". Technical and other design restrictions prevent us from providing good clues to the user concerning the scrolling direction (there is neither a scrollbar to indicate the scroll direction nor no smooth scrolling which is helpful for similar colored and equal sized Note Windows, ...). Therefore, the larger size of the buttons shall indicate that this button provides the same functionality like the button of a imaginary scroll bar at that position.

Advantages:

  • Implementation effort is relatively low
  • Should work well with all Page Layout view modes

Disadvantages:

  • The user may not feel comfortable, because another content scrolling is introduced and increases the overall complexity (Scrolling of: 1. Current Document, 2: Notes Side Pane, 3: Notes User Data (optional))
  • The additional scroll buttons may not be visible on the current screen viewport so the user may be forced to scroll down the Current Document first (may cause problems in Web Layout because this is logically just one page)
  • May introduce accessibility problems


Example:

Note Side Pane scroll buttons
The graphic shows the Note Side Pane full of Notes Windows and with the scroll buttons. It contains:
  • The scroll buttons at the lower end of the Note Side Pane
  • The structure of the scroll buttons at the upper side of the Note Side Pane are exemplary shown in the magenta area.

Please note: The graphic is simplified and does neither show Note Anchors nor Note Window scrollbars.


Proposal "Notes Ruler Control"

This proposal extends the proposal "Side Pane".

At the moment, the user is forced to use the application menu to toggle the visibility of the Notes (e.g. Notes Windows, Notes Anchors). This proposal provides a control located in a currently unused part of the Writer ruler bar.

Advantages:

  • Visibility of Notes can be directly manipulated.
  • The caption "Notes" automatically explains the Notes Side Pane located below. (Some people do only know that there is some unwanted gray background).

Disadvantages/Challenges:

  • The visibility of the control is dependent on the visibility of the upper ruler. (This is okay, because the rulers are currently activated by default.)
  • The visibility of the control is dependent on the position and size of the current page area shown below. (The document may be zoomed, so that the control is outside the currently shown area).
  • The user is required to learn how to use this new UI element. (The design is based on the controls of docked windows, but has been adapted to fit the space requirements.)


General Behavior and Implementation

  • The size of the upper ruler bar is extended by moving the vertical scrollbar a bit down (please refer to the mockups below).
  • The new control is located next to the upper ruler with respect to the current Notes Side Pane position and size. (Current Notes Side Pane: Similar to the ruler, the position and size of the Notes Side Pane is dependent on the current document page size and orientation.)
  • If the user clicks on the active mouse area of the Notes Ruler Control, then the control changes its state (state: please see below).
  • If the user hovers the active mouse area of the Notes Ruler Control, then it is visually highlighted. (Highlighted: Like the Show/Hide button of docked windows like e.g. the Navigator).


  • The Notes ruler control has two states:
    • Expanded: The Notes are shown. This state is similar to "View -- Notes" being activated.
    • Collapsed: The Notes are not shown. This state is similar to "View -- Notes" being deactivated.


  • If the "zoom factor" is set to "optimal" and the Notes Ruler Control changes its state, then the current zoom is adjusted to show the document (new state: collapsed) or both the document and the Notes (new state: expanded).
  • The following descriptions do consider LTR documents with the Notes Side Pane located at the right side. If it is required to show the Notes Side Pane on the left side of the page (e.g. because of RTL text or "book mode"), then the control is mirrored accordingly.


  • The Notes Ruler Control does provide an explanatory caption:
    • Caption: "Notes" (English)
    • Font: Same as used in ruler for e.g. showing the numbers
    • Alignment: Dependent on the state (please see below).
    • Visibility: For special cases, please refer to "State: Collapsed".
  • Active mouse area: Please refer to mockup.


  • If the user hovers the active mouse area of the Notes Ruler Control, then an explanatory tooltip is shown (tooltip: behaves like other tooltips, e.g. using the same delay). The text is dependent on the current state of the Notes Ruler Control (please see below).


Notes2 DesignProposals SidePane RulerControl Expanded.png

State: Expanded (Overview)

Notes2 DesignProposals SidePane RulerControl Expanded Details.png

State: Expanded (Details)

  • Caption alignment: centered (reference: most inner box of the control)
  • Active mouse area: Please refer to mockup.
  • Tooltip text: "Hide Notes" (English)
Notes2 DesignProposals SidePane RulerControl Collapsed.png

State: Collapsed (Overview)

Attention! Please note that the graphics shows Note Anchors which should not be shown. So please do only look at the ruler bar...

Notes2 DesignProposals SidePane RulerControl Collapsed Details.png

State: Expanded (Details)

  • Caption alignment: left
  • If there is few space (width) available and the caption cannot be fully shown, then the caption is ellipsed with '...'. (Examples: "Note...", "No...", "...").
  • Tooltip text: "Show Notes" (English)


Additional Information / Open Points / Further Ideas

Additional Information:

  • The triangles that indicate the expanded or collapsed states should be consistent with the current ones in OpenOffice.org (Galaxy Style). Please ask Stella (sts) for more information.
  • The feature is accessible because it realizes exact the same behavior like the menu entry of "View -- Notes" which can be used instead.

Open Points:

  • For consistency reasons, the position of the scrollbars in the other OpenOffice.org modules should be adapted (e.g. Draw).

Ideas:

  • It would be a huge benefit for the User Experience point-of-view if toggling between the states could be smoothly animated. Details on request.

Selected Design

  • The proposal "Side Pane" has been selected for implementation.
  • The proposal "Scrollable Side Pane" will be used if there is not enough space inside the Note Side Pane to show all necessary information. The proposal "Expanded Side Pane" is preferred by the User Experience team, but unfortunately the implementation effort would be very high and - hopefully - the need for such a solution very rare in the user's life.

Implementation

tbd

Code Changes

tbd

Outstanding Issues

tbd

Personal tools