Design/User Experience/Tools

TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

• Wiki Home
• Development
• Design
• QA
• Events
• Documentation
• Website
• Localization
• Accessibility
• Marketing
• Diversity
• Wiki Help

• Design Home
• Whiteboards
• Development Blueprints
• UX Principles
• UX Guidelines
• Artwork Resources
• Branding Guidelines
• Meetings

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: Results: Usage tracking results (part of OOo Project Renaissance) Documentation: OpenOffice.org User Feedback Program	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	Mockup for improved Navigator notes integration Color vision deficiency simulation (UX blog posting) Idea for contextual information in print dialog Animated mockup for Writer notes focus visualization
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	Mockups for Writer notes distribution Templates for Renaissance Design Proposal Collection
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	Ideas for the print dialog Ideation... (GullFOSS blog posting)
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: Website: Contrast Analyser (Paciello Group) Working with the Colour contrast analyser by the Paciello group, by Ben Logan, 17 February 2009.	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: Blog postings by Máirín Duffy The Fedora Usability Lab (Wiki)	no	none

Support, Documentation and Development

Name	Description	Link	Examples
Fidelity Matrix	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 art⁠
• Enthnographic studies
• Focus groups
• Contextual inquiries (User interviews, User observations)
• Site visits
• OpenOffice.org Uninstallation Survey (started with OOo 3.2)
• Text analysis:
  • GATE General Architecture for Text Engineering gate.ac.uk
  • RapidMiner rapid-i.com