Design/User Experience/Tools

    From The Document Foundation Wiki

    This page gives a short overview over tools that are useful for User Experience and Design work. While of course the tools you choose to work with depend on personal preference, it is important that we can work together easily. Therefore, a few tools on this page are marked strongly recommended.


    Research

    Know and understand LibreOffice users to better meet their needs.

    Name Description Used Examples
    OpenOffice.org User Feedback Program

    The OpenOffice.org User Feedback Program is a collection of tools to gather, transfer and analyse usage statistics by real users of OpenOffice.org. The use of dialogs, menus, toolbars and shortcut keys is counted and transferred to a central server if the user accepts an agreement. The collected data can be exported to simple spreadsheets or analysed in various ways. The User Feedback Program provides insight into the real use of functionality available in the office suite. It is shipped with OpenOffice.org since version 3.1. Please note that only usage data is collected; nor document content nor personal information are part of the gathered data.

    According to the intended audience - and sometimes due to inconsistent naming - the User Feedback Program is also called "Usage Tracking" or "OpenOffice.org Improvement Program".

    References:

    no Impress Click Map
    LimeSurvey.org

    LimeSurvey is an open-source survey application to provide online surveys which are hosted on an usual webserver. The surveys can be provided in different languages and with a customized design, e.g. for OpenOffice.org. The survey design and some analysis is available within the administration pages of the software.

    Website: www.limesurvey.org/en/

    no OpenOffice.org User Survey
    LibreOffice Help (Online)

    For those who don't download the LibreOffice Help Pack, the LibreOffice help has been made available in a wiki system. This wiki system features "popular pages" which might help to get insights what components or features cause the most questions - so people want to have a look at it. Please note that browsing through the pages does also affect the "page hits counter", so please be careful when analyzing the data.

    Website: LibreOffice Help Online

    yes LibreOffice Help Online, Popular Pages

    Design

    Generate and accumulate ideas to create innovative design proposals.

    Name Description Used Examples
    Inkscape

    Inkscape is a very powerful open-source vector graphics editor which uses the W3C standard Scalable Vector Graphics (SVG) file format. The created graphics can be exported to the PNG format so that they can be used in both the Wiki or LibreOffice.

    Recommended use: diagrams, GUI mockups, icons

    Advantages:

    • Versatile use (sketches and detailed designs are possible)
    • Bitmap graphics can be easily imported
    • Pixel perfect design (it's possible to adjust the vector graphics to the screen pixels, e.g. to design the real final dialog size)
    • Available for various platforms
    • Extensive documentation and tutorials available

    Disadvantage:

    • LibreOffice is not able to handle SVG files

    Website: www.inkscape.org

    yes Mockups for the print dialog
    The Gimp

    The Gimp is a very powerful open-source bitmap graphics editor. The created graphics can be exported in various formats so that they can be used in both the Wiki or LibreOffice.

    Recommended use: GUI mockups (especially modifying existing screenshots), simulation of color vision deficiency, image composition, very simple animations

    Advantages:

    • Pixel perfect design (it's possible to adjust the paint operations to the screen pixels, e.g. to design the real final dialog size)
    • Advanced drawing capabilities
    • View filter for simulating color vision deficiency
    • Available on various platforms
    • Extensive documentation

    Disadvantages:

    • Resizing / alignment of elements is sometimes time-consuming

    Website: www.gimp.org

    yes
    LibreOffice Draw / Impress

    Draw is the drawing application and Impress is the presentation application of LibreOffice. So why not use LibreOffice to design LibreOffice?

    Recommended use: GUI mockups, diagrams, clickable prototypes and animations (Impress)

    Advantages:

    • Flexible formatting styles concept
    • Simple file exchange

    Disadvantages:

    • Working with graphics elements is sometimes perceived to be cumbersome
    • Low quality of bitmap file export (e.g. size, spell checker markup)

    Website: www.libreoffice.org

    yes
    Paper and Pencil

    The "Paper and Pencil" approach is simply the use of a sheet of paper and a pencil to draw early sketches. It is named here, since its usefulness is often underestimated. Drawing is the most natural approach, since you don't need to consider the requirements of a certain software tool. Simply start drawing and don't think about about artistic skills - you only need boxes and some text. The "Paper and Pencil" approach is directly related to the well known method "Paper Prototyping".

    Recommended use: very early GUI mockups, diagrams

    Advantage: Fast and flexible design

    Disadvantages:

    • Changes are sometimes impossible (besides the eraser)
    • Post-processing is time-consuming (e.g. drawings need to be scanned)
    yes
    Pencil Project

    The Pencil Project is an open-source add-on for the Mozilla Firefox which uses the drawing engine of the browser.

    Recommended use: GUI mockups, diagrams

    Advantage:

    • Fast, flexible, clean results
    • Ui widgets direcly available
    • SVG output can be further amended in other apps

    Website: www.evolus.vn/Pencil/Home.html

    short test only none

    Evaluation

    Evaluate promising solutions and analyze the current design.

    Name Description Used Examples
    Colorblind Web Page Filter

    The Colorblind Web Page Filter simulates color vision deficiency on already existing websites. There are several sets of color blindness filters which can be applied to a user-defined URL. That makes it possible to simulate vision deficiencies with nearly any website. But, please keep in mind that there are some elements on the websites which cannot be re-calculated. You will find further information on the website.

    Recommended use: simulation of color vision deficiency

    Advantages: Fast and easy simulation

    Disadvantages:

    • Can only be applied on static content
    • Simulated website can not be exported to an image

    Website: colorfilter.wickline.org

    yes OpenOffice.org Website and "red/green blindness" (Protan)
    Contrast Analyser

    A contrast analyser is used to evaluate the contrast between foreground and background colours (in text, user interface controls, and images containing text). Make sure to check the Luminosity algorithm (which uses the algorithm from WCAG 2.0), not the outdated Colour brightness/difference algorithm.

    Advantages:

    • up-to-date with colour contrast algorithm from the Web Content Accessibility Guidelines 2.0 (the Luminosity algorithm in the tool);
    • colours can be picked both with the mouse and the keyboard;
    • free (though not open source).

    Disadvantages: only available for Windows and macOS, not Linux/Unix.

    Information:

    no none
    Portable Usability Lab

    A usability lab is used to check products with real end-customers. The Fedora Project currently develops a Portable Usability Lab which is rather cheap - compared to commercial solutions.

    Advantages: tbd

    Disadvantages: tbd

    Information:

    no none

    Support, Documentation and Development

    Name Description Link Examples
    Fidelity Matrix
    OOoUserExperience Tools FidelityMatrix TemplateExample.png
    Usually, it is really easy for viewers to mix up things like "visual design" and the "interaction design". In the literature, there has been a proposal to address such problems with an fidelity matrix which is supplied to each design artifact.

    Detailed information can be found in the blog entry "A Picture is Worth a Thousand Words!" by the UX Team.

    Fidelity Matrix Template (SVG)

    Personal Idea of a Welcome Center
    SVG Icon / Graphics Workflow There is a preferred workflow to extract individual icons (or other graphics) from one SVG file created via Inkscape.
    • To ease automatic extraction of the individual icons, they must be named in svg
    • Since the mimetype icons are so similar (in terms of gradients, borders, colors etc), it was considered a good idea to keep it in one source file - to permit automatic export/extraction, the area placeholders got labels - if you add new icons, you must add appropriate labels, too. It works like this: you make the "Size Placeholder Document Symbols" layer editable, and (for ease of handling) crank its opacity to 100%. For each column (like Writer), you select one of the placeholders, and set its Object Properties -> Label. For existing icons, you notice the naming scheme, e.g. "main_128_hc" or "main_128". Before running the script, of course you need to set that placeholder layer opacity back to 0, to not have it visible.
    Extraction script file cnvsvg.py LibreOffice Initial Icons Development
    OpenOffice.org Specification Project Software specifications are an essential part of the OpenOffice.org development process. Changes to OpenOffice.org be it adding new feature or enhancing existing ones will be done based on written software specifications. This is absolutely necessary as there are always multiple persons or groups involved in a change to OpenOffice.org Specification Project Specifications which affect all OpenOffice.org modules
    Git Version Control System Git is used to host the source code and additional data files for LibreOffice in a central repository. It also contains the artwork files (splashscreen graphics, icons, ...) that are directly used provide the visual experience for the user.

    You might want to know what files are located where - then use the cgit web frontend. And, if you regularly work with source code related artwork files, it makes sense to get used to git. A tutorial introduction for contributing changes to artwork in the source code is available.

    ? new links? github? directly in libosource tree?

    (none)

    Further Topic Ideas

    • OpenOffice.org Wiki
    • OpenOffice.org Writer / Calc
    • Issue Tracker
      • Keyword: usability (Issues referring to usability and ease of learning should have this keyword.)
      • Keyword: usagetracking (Usagetracking issues for Renaissance Project)
      • Assigned to: ???
    • Icon Test icon-test.com/en
    • ASCII Art ASCII artWikipedia logo v3.svg
    • Enthnographic studies
    • Focus groups
    • Contextual inquiries (User interviews, User observations)
    • Site visits
    • OpenOffice.org Uninstallation Survey (started with OOo 3.2)
    • Text analysis: