Design/Whiteboards/Color Handling

    From The Document Foundation Wiki
    Gnome-document-open-recent.svg

    This page was marked as inactive and is retained for historical reference.
    Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as one of our mailing lists.

    Summary

    Improve the usability of color handling in LibreOffice and prepare the UI for more complex features. The design applies to all of LibreOffice's color pickers and dialogs, including the drop-downs in formatting dialogs and toolbars, tab colors in Calc, and the Appearance tab in Options.

    Status

    Call for Proposals Analyzing Proposals Shaping Tentative Design Implementation in Progress Implemented

    Scope

    In Scope Out of Scope
    • Fix usability issues
    • Easier color management (adding/changing/deleting colors)
    • Gradients and patterns
    • Palettes
    • Improved color palette data structure
    • List document-specific colors
    • Create new UI technology

    Relevant Bugs

    Definition of Terms

    • Highlighted color: The color which has been temporarily highlighted by the user (not selected yet)
    • Selected color: The color which is currently active for the selected item (e.g. text)
    • Recent color(s): The color(s) that have been recently selected by the user (e.g. within the document)

    Discussion

    Redmine

    LibreOffice design list

    Personas

    • Brad: A professional designer. He wants his documents to always look good. He'd like to be able to easily create and save custom colors.
    • Francine: Manager. Part of her work involves preparing documents and presentations. She needs to use a palette with her company colors within LibreOffice.
    • Terry: Senior. Gets easily frustrated by complex UIs.

    Tentative Design

    Color picker

    The tentative design tries to map the possible evolution of the new color picker implementation. Its goal is to present the default palette as well as quick access to recently applied colors. These recent colors are document colors, just in reverse order and just enough to fit a single row.

    Proposals

    Older Tentative Design

    Mockups

    Color picker

    SVGZ source

    Description

    Color Preview

    The box at the bottom of the pop-up shows the color to be applied (the one that is hovered over or the one being set under "Custom color") or, if no color meets these conditions, the current object color.

    The label on the box is shown either in black or white, depending on whether the previewed color is dark or light. The label should always use common nouns that should be easily translatable.

    Colors in Use

    The "Colors in Use" section lists all the colors that are used somewhere in the current document.

    Recent

    The "Recent" row of 6 colors shows colors that have been recently applied, no matter if they are still in use.

    Scrolling

    Scrolling, if necessary, would be done with a down and an up button within a single row below the dropdown menu.

    Document colors

    Document colors would be shown in a separate palette.

    Possible variations

    Alternative scroll idea by Manas

    Color picker scroll.png

    thumbnail|Alternative|scroll idea

    Proposal by Mirek2

    Mockups

    - source file, licensed CC0

    Description

    The top toolbar

    The toolbar up at the top of the picker always contains an "Automatic" button, which applies the default value (either no fill, denoted by a cross, or a certain color, same as in LibreOffice now), and an "Edit palettes" button. If applicable, it also contains "gradient fill", "pattern fill", and/or "image fill" buttons, in which case a "color fill" button shows up as well, to the right of the "Automatic" button.

    Color fill
    Color grid

    The color grid is spaced in such a way as to be usable on touch devices, something that will both ease conversion to an Android port as well as make LibreOffice more comfortable for tablet users of operating systems tweaked for tablets (OS's with Gnome Shell, Windows 8, the upcoming Ubuntu for tablets).

    It's true that this decreases the amount of colors that the picker can present. However, as users typically need only a bright, dark, or "medium" shade of a color and as custom colors would now be accessible directly from the dialog, three shades per color should suffice.

    Custom colors

    The "Custom color" item of the dropdown menu allows the user to apply a custom color temporarily. This color will then appear in the "Recent colors" box that appears below the pop-up and in the "Document Colors" palette (unless the user removes it from the document).

    New palette

    To save custom colors or to create a custom palette that could also be exported, the user would use the "New palette" item from the drop-down menu.

    "Edit palette" mode

    The "edit palette" mode, triggered by the pencil icon in the top toolbar, would allow the user to add, edit, or remove colors from palettes.

    Proposal by Android272

    Mockups

    Description

    The first drop down (from the left)
    default color picker with LibreOffice newly installed.
    The second drop down (from the left)
    once the user has added colors to their custom colors the "Custom" section will be appended.
    The third drop down (from the left)
    once the user changes the text color from the default color or edits a document that has different colors from default color, the :"Document Color" section is appended under the "Custom" section. if the Custom section has not been made, and the user makes it :after the Document color section, then the Custom section will be appended in between Standard and Document Colors.
    The fourth drop down (from the left)
    The Document Color of text does not effect the Document Color of any other color picker (e.g. the Highligh color)
    Text
    document colors appear in the order in witch they appear in the document.

    Proposal by Medieval

    Mockups

    Proposal by Camillem

    Find the original proposal at this link.

    Mockups

    Description

    Custom colors

    Clicking "Other" should open a redesigned color dialog, which would merge the current color dialog and the color picker.

    Proposal by Jeff van Schendel

    Find the original proposal at this link.

    Mockups

    Proposal by Maggie T.

    Mockups

    Description

    Color picker

    Color picker allows user to choose from a preset number of colors. Custom colors display in separate row (same for Recent colors). On hover, the name of the current color appears.

    Custom color picker

    Custom color picker allows user to create new colors. Depending on the color model selected, the features display modify (ex. in CMYK, an additional text box appears to take in values for the Key value). User can either use the color wheel to create a color or enter in the wanted values. Sample text displays on a light and dark background to preview how the color would look on text.

    Open problems

    Amount of colors

    6 columns per palette 9 columns per palette
    • Works well with touch input
    • Easier choice
    • Easier to create documents with a nice color scheme
    • More choice

    Final decision: 6 columns per palette

    Editing palettes

    Inside the pop-over In a non-modal dialog In a modal dialog
    • Makes it possible to add or edit palette colors on the fly
    • Doesn't interrupt workflow
    • Makes it possible to add or edit palette colors while working on the document
    • More room for UI elements
    • Can be reused in other parts of the UI
    • Won't close by accident
    • Most room for UI elements
    • Won't close by accident
    • Can be reused in other parts of the UI

    Final decision: Work on mockups for the dialogs.

    Presentation of document colors

    As a palette Under the popover
    • Works well even with a large number of document colors (especially relevant in Draw).
    • Doesn't overload the pop-over.
    • Makes document colors available no matter what palette the user is viewing.

    Final decision: Document colors would appear as a separate palette. The "Recent colors" section would list the 12 last document colors if there were no recent colors to list yet.

    "Document colors" behavior

    Consistent across objects Different for each object type

    Relevant Art