Design/User Experience/Tools

From The Document Foundation Wiki
Jump to: navigation, search

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.


Know and understand LibreOffice users to better meet their needs.

Name Description Used Examples User Feedback Program

The User Feedback Program is a collection of tools to gather, transfer and analyse usage statistics by real users of 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 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 " Improvement Program".


no Impress Click Map

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 The survey design and some analysis is available within the administration pages of the software.


no 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


Generate and accumulate ideas to create innovative design proposals.

Name Description Used Examples

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


  • 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


  • LibreOffice is not able to handle SVG files


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


  • 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


  • Resizing / alignment of elements is sometimes time-consuming


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)


  • Flexible formatting styles concept
  • Simple file exchange


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


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


  • Changes are sometimes impossible (besides the eraser)
  • Post-processing is time-consuming (e.g. drawings need to be scanned)
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


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


short test only none


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


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


yes 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.


  • 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 Mac OS X, not Linux/Unix.


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


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 LibreOffice Initial Icons Development Specification Project Software specifications are an essential part of the development process. Changes to 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 Specification Project Specifications which affect all 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?


Further Topic Ideas

  • Wiki
  • 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
  • ASCII Art ASCII art⁠Wikipedia logo v3.svg
  • Enthnographic studies
  • Focus groups
  • Contextual inquiries (User interviews, User observations)
  • Site visits
  • Uninstallation Survey (started with OOo 3.2)
  • Text analysis: