Hi! My name is Paulo José and I'm a Brazilian student that loves OpenSource software and design!
This is my personal page in the Document Foundation's wiki. Here you can some of my first projects and other things that I've been involved. For my current work, see my Blog.
I'm still learning how to use this wiki system right now, so this place is under construction... :D
Important note: My domain on English language is limited, so I'm sorry if you find some misspellings in this page.
- 1 Adding details to Christoph's Mimetype Icons @2011, jan 24-28
- 2 Improving the "Cross-Reference Window" UI in Fields dialog @2011, jan 21-28
- 3 LibreOffice User Interface [First Mock-ups] @2011, jan 17
- 4 References
Adding details to Christoph's Mimetype Icons @2011, jan 24-28
You can download the SVG source file right here: LibreOffice Initial Icons-Paulo.svg.
I also made some minor changes and details in the 128px version of all 16 icons:
The 128px version are also included in the file LibreOffice Initial Icons-Paulo.svg.
Improving the "Cross-Reference Window" UI in Fields dialog @2011, jan 21-28
First impressions @2011, jan 21
Björn Balazs call me to have a look on this threat: Fields UI rework at LibreOffice's mail listing. In its body, Cedric Bosdonnat talk about the need to start reworking the UI of Writer Fields dialog (triggered by Ctrl+F2).
Then I made a superficial analysis of usability, accessibility and design issues of the current Cross Reference tab, looking for answers and guidelines on the Help page. In the next image you can see a the result of my analysis and below some commentaries.
- There's no padding at box borders or between entries in the Type box. The same problem in input fields of Name and Value. An accessibility and usability problem.
- Empty space wasted in the Type box. A design and usability problem.
- Some fields become disabled when you select some types of cross-reference. It's good from semiotic point of view, but no from usability's. May be better ways to display these fields.
- The Selection field is a wide box showing vertical list. I think it's a design and usability problem.
- There's no resizing option in the window. This option could improve the usability, allowing the user to view more entries in list boxes.
Knowing the main issues, I prepared some mock-ups of how the interface could be. My first suggestion is to modify the Type option from list box to something smaller like a drop-down list. Despite increase one click of mouse to complete the task, the window gain more space for more important fields, like Selection. Providing a drop-down menu also allow contextualize the different tasks and take off some buttons when they aren't necessary. So for each Type entry, there's specific options.
See what I mean, for instance, for the task of "Set Reference":
I made some commentaries on the mock-up, then to keep them accessible, I'll reproduce them below:
Commentaries on "Set Reference" dialog:
- A drop-down menu for the Type reduces space usage and allow individual interfaces for each type.
- References box shows the existent references. It help the user in reference name's choice.
- Padding between entries and around the windows borders is bigger now and they have the default "disabled" format. Better usability, accessibility and semiotic.
- New group options allow organize references when it's necessary. When user doesn't select or create a group, the reference is created without a group.later, Reference Edition options should be create to allow to edit the reference's group also.
- When creating new groups, a pop-up window allow to re-name the new group.
- The disabled fields are showed for semiotic reasons. It allow the user initially "know" their existence, but also that they are not available now.
- There's an option for resize the window.
For the task of "Insert Reference", my proposal is similar, but the field of Name and Value was removed to free space and improve usability. No issues of semiotic, since these options are known from the Set Reference dialog.
Commentaries on "Insert Reference" dialog:
- Selection box shows the existent references.
- The entry's group is showed before (and in different style to emphasize) the reference's name.
- Filter option performs a search on Selection entries. Some sort of pattern matching algorithms allow find to find specific string inside words or even to correct misspellings. It may facilitate the user task.
- Filter by group just reduces the amount of entries by removing others groups from Selection box.
- Padding between entries is important to keep accessibility.
Headings, Numbered Paragraphs, Bookmarks, Footnote and Caption
My proposal is exactly the same for these dialogs:
No new commentaries here because the previous ones just fit to changes done. You can download the Inkscape SVG file that I worked on. Feel free to make changes and publish them in your personal page.
An Wizard to the "Field Dialog" @2011, jan 28
Discussing with Björn about commentaries made by him and others before, we figure out that a good solution for this issue would be analyze the Field dialog as a whole, not just the Cross Reference tab, and make an Wizard to manage all tasks that this dialog is related. Björn has gave great guidelines to do new mock-ups and go on with the threat. So I work in an Wizard in HTML and CSS to achieve visualize the interaction flow and make easier future changes. As proposed by Björn, now we are focused in a first step of design:
- 1. We need a wizard, that really helps the user to find the field he needs. This is basically the content included in the tabs and in the "Type" column. Also some content of the "Select" column would be of relevance (e.g. the Select column for Type==Sender or Type==Statistics should rather be included in the wizard, while the Select Column of Type==Date or Type==Author would rather be part of step 2.
So I made two mock-ups for this Wizard. The proposals are hosted in my personal website, where you can interact with them:
(Just tested in Firefox and Chrome, probably will fall in Internet Explorer)
The first proposal has in the first step just 2 task options: Set a field & Insert a field. The second step allow to set the field type and configure its proprieties. Done!
The second proposal has in the first step the choose of field type in each task (Set and Insert). The second step just allow to configure the field proprieties. Done!
Now we need keep the discussion and make it better! :)
LibreOffice User Interface [First Mock-ups] @2011, jan 17
- I made just some graphical abstractions about how the user interface could be. You can find them in my DeviantArt page.