Notes2 Design Visualization of Focus

From Apache OpenOffice Wiki
Jump to: navigation, search

< Back to the Notes2 main page




It should be possible for the user to clearly identify or to distinguish:

  • Notes Windows that belong to a certain Notes Anchor which is selected
  • a currently edited Notes Window
  • the currently edited Document Text



Proposed Designs

Proposal "Adjust Intensity of the Text Color"

The picture shows the visualization of the focus (e.g. when selected, edited) in simplified Notes Windows: The color intensity of the text in the left Notes Window is decreased to reduce the distraction of the user from working with the main document text in Writer.

The colors that identify different authors should not be altered, therefore no transparency is used for Notes Windows' background. The use of transparency for the Notes Windows background color could have a negative impact on the ability of the user to differentiate the - sometimes similar - colors.

Notes2 2007-09-04 ColorsForTheNotes FocusVisualization ForWiki.png

Proposal “Highlighting When Hovering The Anchor”

The following proposal show a moderate animation of the Notes Windows when the mouse pointer hovers the Notes Anchor. The goal of this kind of highlighting is to guide the view of the user towards the Note Window. So the user is not "forced" to follow the thin connector lines. This kind of highlighting is shown only one time.


  • The view of the user is guided towards the Note Window.
  • After showing the animation, the Note Window is shown in the common look.


  • Maybe some users will get a bit annoyed.
Please open the graphic to view the full animation

Proposal "Increased Shadow"

The following proposals describes the use of Note Window shadows to distinguish the different states (e.g. Note Window edited, Note Window highlighted). The style of the Note Window shadows are derivated from the shadow of the document's pages.


  • It remains the color concept of the Note Window all the time (important for identifying the author)
  • It is a very subtle effect and fits into the concept of shadow for editing the notes


  • It is a very subtle effect and may be overlooked
  • The effect is only visible at the bottom of the Note Window. For long notes, the bottom may be hidden by the current viewport area. (This is true if we ignore changed connector line).


The following mockups show examples of the functionality.

Sligthly more shadow
Sligthly more shadow and additional line at the bottom


Sligthly more shadow
  • The following descriptions of the shadows consider the Note Window to be displayed in the document at 100% zoom level. Similar to the Notes Window itself, the shadow is dependent on the zoom level inside the document.
  • Color dark gradient: base color R83 G83 B83 (Hex: 535353), from alpha 255 to 0
  • Color bright gradient: base color R180 G180 B180 (Hex: b4b4b4), from alpha 255 to 0
  • State "Normal" of the Note Window:
    • If the Note Window is neither "Viewed" nor "Edited" (please see below), then the state of the Note Window is "Normal."
    • Element N1: width same as Note Window, height 2px, color linear bright gradient
  • State "View" of the Note Window:
    • If the Anchor of a Note is hovered by a) the text cursor in the Writer document window or b) hovered by the mouse pointer, then the state of the Note Window is "Viewed".
    • Element V1: width same as Note Window, height 4px, color linear bright gradient
  • State "Edit" of the Note Window
    • If the text cursor is placed inside the Note Window, then the state of the Note Window is "Edit".
    • Element E1: width same as Note Window, height 4px, color dark gradient linear
    • Element E2: width 4px, height 4px, color radial dark gradient
    • Element E3: width 4px, height dependent on Note Window height, color linear dark gradient
    • Element E4: width 4px, height 4px, color radial dark gradient
    • Element E5 (placeholder for area without shadow): height 2px
    • Please note that this kind of visualization ignores the "real" behavior of shadow. Normally, the shadow for the whole Note Window has an offset in both horizontal and vertical position. Here, the Note shadow starts directly at the lower left side of the Note Window. (Otherwise we will not have a smooth transition between the states "View" and "Edit". Changes of the visualization of "Normal" and "View" do not look good, therefore their appearance is kept.)

Assumptions / Open Points

  • The current proposal assumes that the document pages do have a more pleasant shadow in comparison with the current 3px solid one.
  • If possible, the user's experience could be strongly enhanced by smooth transitions of the shadows between the single Note Window states (e.g. natural transition like the sine function, duration 200 ms).

Proposal "Increased Shadow (adapted to technical limitations)"

This proposal extends the proposal "Increased Shadow".

Due to technical limitations of the framework it is neccessary to adapt the specification of the "ideal solution" until it is possible to overcome those limitations.

State "Edit" of the Note Window:

  • Limitation: It is currently not possible to deactivate the shadow of the document in an easy way.
  • Specification change: Only Element E1 is used, the Elementes E2 ... E5 will not be considered. As a result, the shadow will just get darker if the Note changes from state "View" to "Edit".

Proposal "Simple Color Change of the Note Window Background"

Because of the low implementation effort, Max proposed another kind of focus visualization. If mouse pointer hovers the Notes Anchor or the Notes Windows, or the user edits the Note User Data inside the Note Window, then background of the Note Window is changed.

The following background colors could be used:

  • bright background color (e.g. change the yellow gradient of Author 1 to a bright yellow)
  • dark background color (e.g. change the yellow gradient of Author 1 to a darker yellow)
  • slightly darker background gradient


  • Is known by a large competitor (please refer to the comment below)


  • If the color is changed, the Note Window will not clearly represent the corresponding Author (Reason: Different background colors/styles in different Note Windows will refer to the same author.)
  • If a darker background is used, then it is more difficult to read the Note User Data (Reason: lower contrast between background color and foreground text color; please refer to the comment below)

Please note: The application Microsoft Word shows a rather bad behavior in this case, because it darkens the color of the notes background. That leads to less contrast in the case the note is viewed or edited by. This should be avoided under all circumstances.

Proposal "Change the border color/width of the Note Window"

Preamble: I, Mathias Michel , subscribed to the UX discuss list, has arrived there through a thread talking about Notes2. I make this proposal:

If the Note is selected for viewing, we should help the user to locate the Note.

  • If the Notes Pane is On, we may bold the border of the note (something like 2.5pt width) and so the line of the link. The bolded line of the link will help to "carry" the eye of the reader to the Notes Pane at the right place (in case of vertical shifting).
  • Else we may use a special visual aid to notify the user: something like a dashed underline using the color of the author. then context-menu could be used to preview the note.

When Editing the Note we can use a bolded border with a static color that is not in the palette of backgrounds (something like bright red #f00) to stand out. If this is not enough, we may change bolded to double-lined borders.

Advantages (append any if needed):

  • Border is one format element that is not used for now in Notes (while background colors are)
  • It does not modify the contrast and so the ease of reading.
  • The effect remains while we have the focus

Inconvenients (append any if needed):

  • Since I am not a dev, i don't know how difficult it will be to implement

If you want to get in touch, either post on discuss@ux.OO.o or use <my_login>

--Mmichel 00:59, 22 May 2008 (CEST)

Hi, thanks for your comments! Some short thoughts from my side:

  • The increased width of the Note Connector Line is a good idea. When we started we had something like this in mind, but it currently doesn't look nice (aliasing effects).
  • More information on the Note Connector Line specification is located [[1]].
  • Changing/adding a border line to the Note Window may appear strange, if we stay with the current Note Window design (to save space, the Note Window is terminated by the page border and the page shadow). We also had this problem when we discussed Change Tracking visualization for deleted Notes (we also thought of border lines for different reason).
  • Sorry, I don't understand the dashed line and the preview in the context menu. If you like, let's discuss this on ux-discuss.

--ChristophNoack 01:08, 24 May 2008 (CEST)

Selected Design

The selected design for the Visualization of Focus is "Increased Shadow (adapted to technical limitations)".



Code Changes


Outstanding Issues


Personal tools