Difference between revisions of "Notes2"
m |
(→Proposals/Discussion: Scrollbar section added.) |
||
Line 220: | Line 220: | ||
The notes window is designed in such a way, that it can be extended by a title bar for e.g. use in other components of OpenOffice.org. | The notes window is designed in such a way, that it can be extended by a title bar for e.g. use in other components of OpenOffice.org. | ||
+ | |||
+ | ==Scrollbars== | ||
+ | |||
+ | In some cases, the space available in the side pane will not be sufficient to show all the notes information. At the moment it is proposed to first use scrollbars in the notes windows and - if many notes have to be presented - the height of the side pane will be adjusted accordingly (please refer to [[#Design and Look of the Notes Side Pane in the Document Window]]). (A detailed proposal how to deal with that will be provided soon). | ||
+ | |||
+ | Due to the fact that the notes windows is scaled in the same way like the document page, it is necessary to scale the scrollbars too. Using "original" scrollbars of the graphical environment (e.g. Microsoft Windows) will lead to following disadvantages: | ||
+ | * Users are not used to scrollbars of the operating system that can be adjusted continuously. | ||
+ | * Scrollbars of the operation system are not designed to work at low scale (neither function nor look of scaled scrollbars). | ||
+ | * They may look alien. At the moment, it is proposed to use the notes windows' background color to represent the author of the note. So, gray or light blue scrollbars are not aesthetically pleasing. | ||
+ | |||
+ | Consequently, we propose an own implementation for the notes. But what are scollbars used for? | ||
+ | * There is some information that cannot be shown completely (existence of the scrollbar). | ||
+ | * Provide the functionality to scroll up or down (arrow buttons). | ||
+ | * Feedback on the position of the shown fragment (bar, active/inactive arrow buttons). | ||
+ | * Additional features (less related to the function itself): feedback on mouse over, feedback on mouse click, mouse wheel support, ... | ||
+ | |||
+ | {| class="prettytable" border="1" | ||
+ | | [[Image:Notes2_DesignProposal_Scrollbars.png|180px|thumb|center|Design Proposal for the Scrollbars]] | ||
+ | | The graphic shows the proposed scrollbar design with two alternatives for at low scales. | ||
+ | |||
+ | It shows: | ||
+ | * The same scrollbar at different scale factors in normal view (for users which are not visually impaired) and a proposal in high contrast (for e.g. visually impaired users). | ||
+ | ** 100%, 75%: Scrollbars with arrow buttons and bar | ||
+ | ** 50%: Simplified scrollbar with arrow buttons | ||
+ | ** 25%, 10%: A placeholder which does not not have any functionality. | ||
+ | |||
+ | * It may be possible that the implementation of "placeholders" or "buttons only" are not accepted. An alternative is shown at the bottom of the graphic which shows a step sequence to show the functionality: | ||
+ | ** Step 1: A button is shown with on inactive arrow (top position). | ||
+ | ** Step 2: Click on the button. | ||
+ | ** Step 3: A full-featured scrollbar is shown, similar to the one of 100% zoom level. It additionally contains a shadow to indicate that this is a "temporary" control for that notes window. | ||
+ | ** Step 4: After finish the scrolling the button of Step 1 is shown again. In this example, the user has scrolled a bit down. | ||
+ | |||
+ | Please note:The option button below the scrollbar is intended to exemplary show the size and the distance between the controls inside a real note window. | ||
+ | |- | ||
+ | | [[Image:Notes2_ScrollbarsInsideNotes_NotesWindowsExample.png|180px|thumb|center|Mockup of Notes Window ]] | ||
+ | | The mockup shows a notes window at 100% zoom level. | ||
+ | |} | ||
+ | |||
+ | Due to the high implementation effort, the proposed scrollbar design may eventually not be provided in the first release of the implementation (we have to ensure that e.g. accessibility is guaranteed). | ||
==Look of the Connectors and Anchors== | ==Look of the Connectors and Anchors== | ||
(proposal will be provided soon) | (proposal will be provided soon) | ||
+ | |||
+ | In the meantime, please refer to the mockups graphics in section [[#Mockups and Screenshots]]. | ||
==Layout algorithm for Overlapping Notes== | ==Layout algorithm for Overlapping Notes== |
Revision as of 23:19, 22 September 2007
Contents
- 1 Introduction
- 2 Requirements
- 3 Proposals/Discussion
- 4 Roadmap
- 5 Status
- 6 Implementation Considerations
- 7 Other Ideas
Introduction
Notes2 is a new project started as one accepted project in Google's Summer of Code 2007 (GSOC). It will be also worked on after the GSOC is over.
Notes 2 addresses the revision of the notes functionality in OpenOffice.org Writer to improve its usability and accessibility. Main goal is to resolve the main issues of the current implementation, which are reported by users. Furthermore, the notes implementation should at least provide the functionality of the competitors in the same class. In long term considerations, it is intended to consistently implement the notes functionality in the other OpenOffice.org modules. The main target audience is the Small-Business-User.
Please note that the information in this Wiki is work in progress and may change.
The team working on the feature (in alphabetical order):
Name | OOo nickname | Role |
---|---|---|
Mathias Bauer | mba | GSOC Mentor, Development |
Uwe Fischer | ufi | Documentation |
Christian Jansen | cj | Mentor, User Experience |
Christoph Noack | christophnoack | User Experience |
Maximilian Odendahl | mod | GSOC Student, Development |
Éric Savary | es | QA |
Requirements
Scope of the Work
- Provide direct and easy editing of notes to get rid of the old notes editing window.
- Establish good accessibility for disabled users by providing keyboard shortcuts or using appropriate colors.
- Integrate the new functions in the existing functionality, e.g. the OpenOffice.org Navigator.
- Respect the needs for advanced text editing, e.g. spell checking, rich-text formatting or sorting/filtering of notes.
- Create both fresh and usable visual design of the notes.
More detailed requirements have been collected and will be published here later.
Issues and Requests for Enhancements
The work will address the issues and request for enhancements: 767, 1981, 4964, 5487, 6193, 9776, 23465, 32232, 45788, 48150, 62625, 63759, 74157, 61644 and 80135.
You can use a Issue Tracker query to see all issues.
Competitive Analysis
During the development we did some investigation on software applications of competitors.
Microsoft Word 2003 (word processor)
"White paper background" gets extended; doesn't look nice. Allows to attach notes to a text selection. Allows spell checking in comments. Round corners. | |
Apple Pages 2 (word processor)
Nice looking color, color gradient makes it even nicer. Connectors partially barely visible, no anchors; this together makes it hard to see where a note is attached to. Has at least some rich text editing capabilities. Author/Date above the text, closer looks disturbing. Notes can also be attached to pictures. Notes have a "sidebar" like common background in light gray; darker than the document and lighter than the typical window background. This reduces the contrast and mediates between the different areas. | |
Softmaker Textmaker 2006 (word processor)
Word clone but separates the "notes" area better from the text. |
Proposals/Discussion
Design and Look of the Notes Side Pane in the Document Window
Position
- From the user's point of view, the 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 side pane is mainly based on the size of the paper page which it is assigned to. The size of the side pane is dependent on the current zoom level of the document. Assumption: Usually the paper formats “A4 portrait” or “Letter portrait” are used.
Width
The width of the 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:
- The side pane width is determined automatically. The user has no influence on it.
- 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:
- Assumption: The physical [cm] is used in this example.
- 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
Height
The height of the side pane is based on the height of the page and the number of notes present of the current page.
- If no note is inserted on the current page or if the inserted notes windows fit into the height of the document page, then the height of the side pane is identical to the height of the current page.
- If the height of the notes windows is larger than the height of the current document page, then the height of the notes side pane is adjusted to the height required for displaying the notes windows.
- 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.
Note: Please refer to the specification of the notes windows and the minimum necessary distance between the notes windows.
The graphic shows the normal side pane next to right side of the document page. It contains:
Please note that the graphic is not true to scale. | |
The graphic shows the normal side pane (light gray) next to right side of the document page. It contains:
Please note that the graphic is not true to scale. | |
The graphic shows different paper sizes (scaled) and the corresponding side pane width. It contains:
|
Colors
- The color of the 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), 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 sidebar 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
Design and Look of the Notes Window Itself
The text for the notes will be (mainly) displayed and edited in the notes windows. The following text gives an overview on the structure of the notes window (a more detailed specification is available).
The graphic shows the general structure of the Notes Window.
It includes:
|
Some notes on the option button: One of the goals of the new notes functionality is to provide direct access for the user. Generally, we can not be sure if the user is aware of the availability of a context menu (Usability tests show that many people do not know how to access the context menu. Besides that, for the progressing Mac Port it is desirable to provide direct access to the functions without forcing the user to use the modifier keys.). In contrast to our competitors, we do not plan to provide a direct "delete" or "hide" button inside the note. Any functionality will be available in the drop-down menu. This makes it possible to provide (later!) access to more advanced functionality like rating the priority of the note or to digitally sign it.
The notes window is designed in such a way, that it can be extended by a title bar for e.g. use in other components of OpenOffice.org.
Scrollbars
In some cases, the space available in the side pane will not be sufficient to show all the notes information. At the moment it is proposed to first use scrollbars in the notes windows and - if many notes have to be presented - the height of the side pane will be adjusted accordingly (please refer to #Design and Look of the Notes Side Pane in the Document Window). (A detailed proposal how to deal with that will be provided soon).
Due to the fact that the notes windows is scaled in the same way like the document page, it is necessary to scale the scrollbars too. Using "original" scrollbars of the graphical environment (e.g. Microsoft Windows) will lead to following disadvantages:
- Users are not used to scrollbars of the operating system that can be adjusted continuously.
- Scrollbars of the operation system are not designed to work at low scale (neither function nor look of scaled scrollbars).
- They may look alien. At the moment, it is proposed to use the notes windows' background color to represent the author of the note. So, gray or light blue scrollbars are not aesthetically pleasing.
Consequently, we propose an own implementation for the notes. But what are scollbars used for?
- There is some information that cannot be shown completely (existence of the scrollbar).
- Provide the functionality to scroll up or down (arrow buttons).
- Feedback on the position of the shown fragment (bar, active/inactive arrow buttons).
- Additional features (less related to the function itself): feedback on mouse over, feedback on mouse click, mouse wheel support, ...
The graphic shows the proposed scrollbar design with two alternatives for at low scales.
It shows:
Please note:The option button below the scrollbar is intended to exemplary show the size and the distance between the controls inside a real note window. | |
The mockup shows a notes window at 100% zoom level. |
Due to the high implementation effort, the proposed scrollbar design may eventually not be provided in the first release of the implementation (we have to ensure that e.g. accessibility is guaranteed).
Look of the Connectors and Anchors
(proposal will be provided soon)
In the meantime, please refer to the mockups graphics in section #Mockups and Screenshots.
Layout algorithm for Overlapping Notes
(proposal will be provided soon)
Colors for the Notes
Color is used for one main reason: it shall it make easy to distinguish notes from different authors. Consequently, it makes sense to harmonize the colors with the ones from OpenOffice.org Writer change tracking feature which also uses color to highlight changes in the document text.
The picture shows the colors from the current OpenOffice.org Writer and the main competitor Microsoft Word 2003. Additionally, it includes the proposal for the new implementation of the notes functionality. The following criteria have been checked when selecting the new colors:
The colors have been selected from several sources: the OpenOffice.org Writer current change tracking feature, the new Galaxy Style palette, the new Chart default color palette. | |
The picture shows the colors in simplified notes windows to:
Please note that not anchors are shown here and the notes windows are simplified! | |
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 reduced to non-distract the user from working with the main document text in Writer. Please note that we do not use transparency for notes windows' background, because we do not want to alter the colors. (It is needed to provide colors for nine different authors. The use of transparency for the notes background color could have a negative impact on the ability of the user to differentiate the - sometimes similar - colors). |
Roadmap
The functionality will be implemented step-by-step. A first release of the revised notes functionality is planned for OpenOffice.org 2.4 around February 2008. A first release of a specification draft can be expected at the end of August 2007.
Functionality Expected in the First Release
The basic functionality which is present in the current version of OpenOffice.org will be available in OpenOffice.org 2.4. It is planned to implement:
- Viewing and editing notes next to the document page
- Accessibility support
- The functionality which is already available in current version of OpenOffice.org
- Improved integration with the Writer change tracking feature (e.g. use the same colors for the authors of the document)
- Time information for the notes (besides the already available date information)
- Online help
- Support for the OpenOffice.org Testtool
At risk for the first version:
- Rich-text editing (e.g. bold text, numerations)
- attaching comments to a selection of text (ODF 1.2 will support this feature)
Functionality Expected in Later Releases
- Improved printing
- Improved print preview
- Search for text inside of notes
- Improved integration with the OpenOffice.org Navigator
- Improved PDF export of notes
Status
The following table lists the topics currently worked on.
Topic | Description | Status | More Information... |
General Interaction | Interaction with the notes anchors and windows inside the Writer document window. This includes design decisions to make the notes functionality be as robust as possible. | Proposal in discussion. Implemenation started. | n/a |
Design of the Notes Sidepane | The notes sidebar will extend the document pages to contain the notes windows. | Proposal in discussion. Implementation started. | n/a |
Design of the Notes Windows | The notes window will contain the notes text and further information like the author's name and time and date information. | Proposal in discussion. Implementation started. | n/a |
Design of the Notes Anchor | The notes anchor is the markup inside the document text to show that there is some notes information present. | Early proposal in discussion. | Please refer to the mockups at the end of this page. |
Design of the Connector Line. | The notes connector line is the visual connection between the notes anchor and the corresponding notes window. | Not started yet. | n/a |
Colors of the Notes Windows | Colors for the notes windows. These colors are shared with the Writer change tracking feature. | Proposal in discussion. | n/a |
Distribution of the Notes Windows | Placement of the notes windows inside the notes sidepane (e.g. size, position). | Proposal in discussion. Implemenation started. | n/a |
Keybindings | Keybindings for the interaction with the notes (e.g. insert notes). | Proposal in discussion. Implemenation started. | n/a |
Rich-Text-Formatting | Use of attributes to markup the notes text (e.g. bold text). | Election of requirements. | n/a |
Implementation Considerations
Choice of Implementation
The implementation has to be able to handle at least the following items:
- scrollable
- able to handle richtext to include text with attributes
- spell checking
- different position, sizes and background colors
- able to be drawable inside the right margin
After discussion with several people, there seem to be two different possibilities:
implementation | advantages | disadvantages |
---|---|---|
OverlayTextObject using the drawing layer | possible use of GUI gimmicks such as transparency, animations etc. | large implementation effort
tight interaction with drawing layer neccessary no scrollbars |
own window | code nicely seperable from other OO code
no extra implementation effort for scrollbars |
maybe alien look in rare cases |
Both implementation will use the EditEngine as well as an OverlayObject for a connection line from anchor point to the note itself
Update: Decision was made to go with a seperate window first
Collection of Topics to be Considered
Several questions related to the appearance and usability have to be decided:
- main color of notes
- Suggestion: natural color of physical postit notes)
- when to show vertical scrollbars if all notes need it due to a full page: if we show them,it could be confusing to the user and could look alien, if we don't, user might not be aware of the full length and miss text
- what about meta information such as date and author
- permantly inside the note
- in the tooltip
- inside the navigator
- titlebar
- different colors or intensity when editing a certain note
- appearance of connection line from anchor point to note
- could be a dotted line turning into a full line while editing or always a full line
- flashing object
Mockups and Screenshots
Mockup shows the mode for "viewing" the notes:
| |
Mockup shows the mode for "editing" the notes:
| |
Mockup shows the mode for a "hidden notes" pane (just an early idea):
| |
It shows:
|
Decisions Made
The following list covers some of the decision which may be of general interest:
- Naming: We will keep the name "notes" instead of using the term "comments" which is used in Microsoft Word.
Other Ideas
This section contains other ideas for e.g. usability improvements, organizing the notes, or advanced text editing functions. These topics can be discussed, if you like. At the moment we want to make sure that no idea is lost (besides the information already available in the issues).
Date Raised | Source | Short Description | Long Description |
---|---|---|---|
2007-05-01 | christophnoack | Chat-like Icons | Do not only use colors or text to indicate the notes' author. It would be nice to enhance this information by a little picture of the author like in chat programs. Implementation Example: Today, many systems provide pictures for the entries in the adress book of the user. This adresss book can be accessed by other programs (e.g. Evolution Data Server in Gnome). Use the pictures of the address book entries. |
2007-05-01 | christophnoack | Status Icons | Use small icons in the notes window to indicate special status (e.g. priority, work status, digitally signed). |
2007-05-12 | christophnoack | Colors | Same Colors for The Same Authors
|
2007-05-07 | cj | “Handwritten Notes” | Use some kind of additional layer inside the Writer to display notes on top of the document. This would enable a more “direct” handling of notes information. |
2007-05-13 | christophnoack | Notes Property Data (Missing User Data) | In many cases, the user do not complete the form of the user data (Extra – Options – General). Then, we do not have sufficient information to display the author's name inside the notes.
|
2007-05-13 | christophnoack | Notes Property Data (Select Author) | My friend of mine told me, that she wished to choose the authors name in the actual document. I don't like the idea, but I have to admit that in many cases, the people do not login with different user names and therefore do have the same user ID for the notes. This may be true even for small business users.
|
2007-05-01 | Issues | Sort And Filter Notes | Sorting and filtering of notes information on the basis of user defined criteria. This has been a request in several issues.
At the moment there exist two main ideas with its own advantages and disadvantages:
Please note that this are really early mockups which are primarily intended to show the general idea!
|
2007-05-01 | Issues | Task Management | Notes often contain information on remaining tasks inside the document (e.g. “re-structure this section“). From experience, many users do not delete these kind of notes when they finish the task. Or, the users want to have an overview on the remaining tasks inside the document. But how to deal with that? Maybe it would be nice to provide a small (!!!) task management. Insert a small task management with e.g.
|
2007-05-03 | christophnoack | Reply to Note | If a several users work on one document, they want to respond to other people's notes information. Currently, they are forced to create another note (which does not have any information that it is related to another note) or they edit the original note (Problem 1: What to do with the notes property data like author and time/date?; Problem 2: This is not possible if e.g. a note is digitally signed). It would be nice to provide some functionality to reply to somebodies note (also mentioned in Issue 6193, zerohalo Wed Aug 22 2007). The following simple mockup (the first one I have ever created for this project) should this make clear. |
2007-05-06 | christophnoack | Automatically Create Notes Information | Automatically create a note when other content gets inserted in the current document. It could be used to provide information on the source document, e.g. “Diagram was inserted by Wai Lin on 06/03/2008. Name of the source document is StealthCoating.xls which was created by Elliot Carver.” |
2007-05-06 | christophnoack | AutoAbstract for Notes | Enhance the auto abstract function to send a question concerning one or several notes inside the document. Use Case: The current editor (Joe) of the document has some question concerning a special topic inside the document or a note which has been inserted by another author (Sarah). Joe clicks on “ask Sarah via email” inside the notes option menu and Writer creates an email which already includes the notes text and the document text which surrounds the current note. Joe adds his special question and sends the email. |
2007-05-06 | christophnoack | AutoAbstract for Notes | Realize or enhance an auto-abstract-functionality for the notes (similar to the already existing auto-abstract for the document text). It could be used to extract the notes user data (text) and the document text which surrounds the notes anchor. |