Libreoffice Design Session: Special Character

The Libreoffice UX team presents two proposals for an improved dialog to insert special characters. While the first option was designed with a good balance between effort and benefit in mind, the second solution would be really awesome.

The Libreoffice UX team discussed possible improvements for the dialog to insert special characters, in particular the feature of recently used items. But today we have more than one solution since the current dialog would still be technology-driven instead of user-centric.

Topic: Easing access to recently used special character

Bug Tickets/Feature Requests:

Bug 34882: “Special character favorites”

Issue/Problem

  • There is no way to quickly re-use recently-picked special characters, forcing the user to search in the whole character map, which has no filter to narrow down results.
  • People writing scientific/legal essays or reports frequently need to insert accented letters and other characters.
  • Technical POV to special characters (alignment 15 by 15) instead of natural organization
  • The subset is limited by presetting a special font (some chars cannot be found when the wrong font is set-up)
  • Search function is missing (should be available for name, id, symbol…)
  • Weird interaction with selection first followed by copy/paste from Characters
  • No individualization like store last subset, or define ‘my own subset’

Screenshots of current UI

20150322_SpecialChars-Legacy

Figure 1: Current dialog to add special characters.

Features/Functional Requirements

Basic solution

  • Provide quick access to recently used special character
  • List of recently used items should be easy accessible (limit the number of items)
  • Sorting by last in, first out; items from the list of recently used chars are sorted to the beginning if selected
  • Access to recently used items from the toolbar

Extended solution

  • Natural organization, user-centric according
  • Advanced search (fuzzy unicode name)
  • Draw symbol to find the representation (Google like)
  • Users should be able to “pin” their favorite characters so that they remain in a fixed position within the list.
  • Associate a shortcut to symbol

Constraints for the design

  • Two options:
    • easy hack to realize required features
    • advanced solution for maximal improvement of UX

New design/Mockup

Basic solution

20150320_SpecialChars-Simple

Figure 2: Proposal for a simple solution.

  • Add a grid with recently used items
  • Last used (new) char is added as left most item
  • Search by entering the unicode hex or decimal code (show as well the value of the selected item there)
  • Have a preview along with the unicode name
  • Remove the ‘characters’ field and add the current item directly to the document on double click
  • Provide access to recently used items from toolbar
  • Consider to have a predefined list of recent items to prefill the split button

Extended solution

The extended solution is inspired by Google Docs, with only a few improvements. Check it out to see the awesome OCR like function in action.

20150320_SpecialChars-Extended1

Figure 3: Extended solution: Basic layout.

  • Natural organization of unicode characters independent from current font
  • Double click to insert selection into document
20150320_SpecialChars-Extended3

Figure 4: Extended solution: Recently used items.

  • Add the item to the (long list of) recently used characters on double click (aka insert)
  • Access recently used characters as a special category
  • Access to the most frequently used via toolbar as shown in the simple solution
20150320_SpecialChars-Extended2

Figure 5: Extended solution: Search-by-name feature, detailed information.

  • Provide search by name, label, code with fuzziness
  • Show detailed information in tooltips
20150320_SpecialChars-Extended4

Figure 6: Extended solution: Graphical search.

  • Provide awesome OCR search feature

Discussion

While the first option was designed with a good balance between effort and benefit in mind, the second solution would be really awesome. Of course is a challenge for developers and need further refinement in respect to the workflow, so please take this as a first idea.

As always we are interested in your comments. What do you think?