Improving the Pootle UI
This discussion is taking place on the Pootle mailing list. Contributions are summarized below. Please share your ideas with us. :)
Speed
Problem
Even if you have a fast and reliable Internet connection, Pootle doesn't serve the next string up fast enough. (If you have a slow and intermittent Net connection, trying to use the interface is positively painful and often ineffective.) Large projects also leave the server with insufficient processor time to allow file merges or searches (e.g. the OpenOffice.org Pootle).
Fix
Experienced users have found some workarounds to the string-by-string editing situation. You can open different tabs for different files, and swap between them while other file-tabs are loading. Or you can load several tabs with different strings for the same file, and not submit them until they have have translations entered.
So one fix would be to allow users to edit more than one string on a single page, with a single Submit button at the bottom.
Changes to the speed of the Pootle system itself will require major work under the hood. Currently, Pootle does not benefit from multiple processors: could we implement that reasonably soon? Would using AJAX speed things up?
(Wynand) A bit of AJAX trickery will make it more bearable.Fortunately, the Virtaal project will help to improve this considerably, since it will integrate well with Pootle whilst providing a nice off-line editing experience.
Meanwhile, on busy servers, we are unable to use the search and merge features. This makes things difficult for users: overwriting on upload means the possibility of losing work done since you downloaded that file. A useful addition to the interface would be a last-edited time/date next to each file. Then you would know if that file had changed since you last downloaded it, or not.
Link names
Problem
Currently, the Pootle interface is not particularly intuitive. Users misunderstand the purpose of links. Even experienced users forget which one does what, or completely miss the purpose of others. Evidently our current link names aren't always easily understood.
Fix
- Quick Translate
- View untranslated
- View blank/fuzzy
- Translate All
- View all
- Translate My Strings
- View all my strings
- View mine (all)
- View all (mine)
- Quick Translate My Strings
- View my untranslated strings
- View mine (untranslated)
- View blank/fuzzy (mine)
- PO file, XLIFF file etc. links
- Download this file as: PO | XLF | TS | CSV
- Translation links (Quick Translate etc.)
- Go to strings: Mine | My blank/fuzzy | All | Blank/fuzzy | Suggested
- Show statistics etc. (commands box)
- Hide Editing (so you get Show Editing x Hide Editing, Show Checks x Hide Checks, Show Goals x Hide Goals, Show Assigns x Hide Assigns, only one of each pair being displayed at one time)
- Show summary (this page can then contain other useful info. After all, the other views also contain the stats, they just don't show them graphically.)
- Show checks
- Show errors
- About this Pootle server
- This Pootle
- Having “About this Pootle server” (or similar) at the bottom of the page can also be useful. If there is a horizontal line above it, it acts as a visual cue to the user where the page ends.
- My account
- My Pootle
- My Profile
- All Projects
- Projects
- All Languages
- Languages
- Docs & Help
- Help
- Logged in as UserName
- UserName
- If not logged in, then displays Guest
- Start - Previous 10 - Items 11 to 20 of 356 - Next 10 - End
- << | < | > | >>
- Items 11-20 of 356 (next line) << | < | > | >>
- 137/356 translated (156 blank, 63 fuzzy)
- 219/356 untranslated (156 blank, 63 fuzzy)
- 356 items (137 translated, 156 blank, 63 fuzzy)
To review, we really want to do three main things, so we'll have three sections (instead of the current stats/editing, checks, goals, assigns, etc.):
- Work (?)
- Statistics, goals, work assignment, download for offline translation,etc.
- Translation (?)
- Translate outstanding work (current quick translate); Proofread (checks, searching, random clicks)
- Administration (?)
- Rights management, version control functions, file management (delete, add, etc. - mostly not implemented yet)
Link positions
Problem 1
Currently, links with different basic functions are shown on the same line. This is confusing.
Fix
Put similar functions on the same line, e.g.
- (main command box) stats and goals links on one line, then translation links on another
- (each file) translation links on one line, file-download links on another
- Move “My account” (whatever it's name becomes) to the top-right edge of the page, between “logged in as %s” and “Log out”.
Problem 2
The link “About this Pootle server” is visually too close to the “Start | Previous 10 | Items 1 to 10 of 356 | Next 10 | End” set of links.
Fix
Place a separator above it, or even better, place it at the top of the page next to “Docs & help”. So you would have:
- Home | All projects | All languages | Docs & help | About this Pootle server
See the Link Names section for recommendations on renaming these links.
URL length
Problem
Long URLs wrap in mail clients, so you can't use them accurately as references. They are also awkward to copy and paste. In some cases, the Pootle URLs are wider than the screen.
Example link: http://pootle.locamotion.org/af/wordpress/admin_edit.po?translate=1&view=1&pofilename=admin_edit.po&item=11
Fix
Change the tags used, and don't quote the filename twice.
Example link: http://pootle.locamotion.org/af/wordpress/admin_edit.po?tr=1&vw=1&it=11
Crumb Trail
Problem
Our current crumb trail does not conform to Human Interface Guidelines, and is not intuitive: the different parts of the path look like links for unoassociated pages.
Fix
Use the common delimiter for crumb trails, e.g.
- Afrikaans > WordPress > admin_edit.po
Page Title
Problem
It's great that the titles of pages change depending on the page itself, but this can be improved. At present, the title of this page:
http://pootle.locamotion.org/ar/aoi/index.html?editing=1
is this:
Pootle 1.1.0: Project Art of Illusion, Language Arabic
Fix
- The words “Project” and “Language” are not necessary
- Put language first, so that it mimicks the bread crumbs on the page itself.
- “Pootle 1.1.0” is taken from the site's main title, but it should be customisable separately, so that an admin can have just “Pootle” in the page title even though that site's title is “Pootle 1.1.0” or whatever.
So…:
Pootle: Arabic > Art of Illusion
Currently, the title of this page:
http://pootle.locamotion.org/ar/aoi/aoi.properties.po?translate=1&fuzzy=1&editing=1&blank=1
is this:
Pootle 1.1.0: translating Art of Illusion into Arabic: aoi.properties.po
But I think it should be simply this:
Pootle: Arabic > Art of Illusion > aoi.properties.po (string #3)
Navigation
Problem 1: returning to Pootle
If your browser crashes, or you have to relogin or reboot for some reason, you lose your position in the file. For heavily embedded projects like OpenOffice.org, it takes you quite a while to find your position again.
Fix
- Add a Quick Link that returns you to that point
- Add a Bookmark This Page link for preventative location
- Add a string number next to each string (much better for references, too)
- Pootle remembers the last page a user has visited, and returns to it directly on next login (this could be an option), just as a browser saves your last-used pages, and opens them when you reboot.
Meanwhile, workarounds include learning how the Pootle link structure works.
- You can go straight to any directory by inputting the path plus a slash and question mark, e.g. Pootle/the/path/?
- You can view that page in editing mode by adding that tag, e.g. Pootle/the/path/?editing=1
Problem 2: Options Page
Pootle can't go directly from the login page to the user options page. The user first goes to his /home/ page, where there is a single link called “Change options” which must first the clicked before he sees his account settings.
It's not easy to realize that the “Change options” link is meant for making changes to the user account settings, and even so, users still might not visit it because as a new or occasional user s/he has no idea what kinds of options can be set.
There are three “Save changes” buttons on the options.html page. It is not clear (to me) that each button pertains only to the stuff above it. I would have expected each button to save all changes, or… at least the bottom button would save all changes.
Also, a user can change various options, go to the bottom of the page, and click “Save changes”. Only the last changes will be saved.
There is a “Save changes” button underneath “My languages” but not underneath “My projects”, yet the layout suggests that the languages and projects are separate sets of settings. Better boxing (framing, bordering, etc) will help clarify which “Save” button belongs to which set of options.
On the options.html page, there are the words “Option” and “Current value”. Well, these words are pretty meaningless. From a programmer's point of view, the “Name” and “Password” are called 'options' and the user's real name is called a 'value', but these terms meaning nothing to ordinary users. In fact… it is *obvious* what the label “Name” means and that the person's name is written in the little field next to it.
Fix
- We should make the /home/ page appear a little more interesting, with more clickable links to give new users an idea of what can be done from that page.
- Allow Pootle to go directly to the Options page
- The various items on the /options.html page be given <a name>'s, and then we could link to each one separately from the /home/ page. This will give users an idea of what options can be changed.
- The /home/ page can also contain the user's current settings. For example, on the /home/ page it would say the user's name, his e-mail address, his GUI language, which projects he selected, and which languages he selected. At each item is a link “Join languages” or “Join projects” (even if technically a user can also use the link to leave languages and leave projects).
- “Save changes” → “Save all changes”, or each button only saves changes in that section, thus “Save these changes”
- The three sets of options should be better boxed and separated, so that users realise what they're looking at is actually three options pages on a single page.
- Better boxing (framing, bordering, etc) will help clarify which “Save” button belongs to which set of options.
- Choose more appropriate labels.
Problem 3: Quick Links?
On the /home/ page there are two lines of text -- on my screen it says:
Quick Links Afrikaans
…which gives the impression that there are two links (another reason why links should look like links!), but in reality “Quick Links” is simply a heading.
What is the purpose of “Quick links”? Possibly the idea is that users who log out, can see the quick links when they log in again. It may make more sense to put these quick links on every page, then… and the names of the links should be a little clearer, eg: “Afrikaans mainpage” instead of just “Afrikaans”.
In fact, the fact that “Afrikaans” is bolded on the options.html page also gives the impression (until the user mouses over it) that “Afrikaans” is not a link but simply a heading.
Pootle is guilty of a specific type of mystery meat navigation, in that users are forced to hover their mouse over the various text elements to determine what they are (links, headings, etc).
Fix
Make more effective use of link and heading styles.
Search function
Problem
The current search function is better than nothing. However, it doesn't distinguish by case, it runs incredibly slowly on busy serves (see Speed above) and it doesn't work well with similar strings or complex projects.
Fix
- Add case-sensitivity
- Add regex
- Add some of the pofilter search functions (e.g. finding accelerators)
- Add a search box “Go to string [ ]” at the bottom of the
page, in a blue ribbon, along with the navigational “arrows” mentioned above. This would be easy to implement if there is some way to reference the name of the page and the mode that page is in: http://pootle.locamotion.org/af/wordpress/admin_edit.po?translate=1&view=1&pofilename=admin_edit.po&item=(and add the number from the text box to the end)
Help
Problem
Users aren't taking to Pootle as naturally as we would wish. They also don't read docs. We lose users who have misunderstood the functions available, or not even realized they were there. Admins don't use the features we already have (e.g. msgctxt).
Fix
- In addition to the intuivity changes on this page, add the usual HIG question mark buttons at useful points on the page. Pressing a button will bring up a popup frame (or separate window/tab) with helpful info. This is the kind of Help users actually utilize.
- Make this an option, so admins can enable/disable it globally, and eash user can choose to use it, or not. Temporary use is the best result, while learning one's way around the interface.
- Display them using superscript:
<p><a href="xyz">Link here</a><sup><a class="nonU" href="abc" target="_new">[?]</a></sup></p>
… with the pseudoclass a:link “nonU” defined as 50% font size and not underlined. The advantage of this is that a question mark is nearly (?) universally understood, and it will be visible yet unobtrusive.
- We could make use of the “title” attribute of the anchor tag. That would display a little explanatory string for the current link. (Note: this or something similar is already used to show the nature of placeholders in a string.) Use tooltips?
- By renaming Docs & Help to simply Help, it's a more obvious link for users to press. We should also encourage projects to link their project-specific i18n Help to our Help, especially the l10n procedures and contacts.
- Have a Tip of the Month or Version Tip, e.g. “Pootle supports the gettext msgctxt feature: add contextual information to your strings to ensure more accurate translations.”
- Display the login, password and GUI language fields on every page, in the top-right corner, if the user is not logged in. This will help establish the idea with visitors that Pootle is ideally meant to be used with a user account, and it will be a visual reminder for returning users that they need to log in first. When not logged in, it would show:
Login: [field] Password: [field] Change language Not registered? Join now!
To save on bandwidth, the option to change the GUI language should not be a dropdown list but instead should be a link called “Change language” that leads to a page where the user can change the GUI language. The “Join now!” is also a link.
- One can also use the top-right box to teach users other things, for
example that they should select languages and projects in their profiles. So, when a user is logged in, the box could have this:
Logged in as: (User name) Languages: (list of target languages indicated in their profile) Projects: (list of projects indicated in their profile)
…but if the user hasn't selected any, the box would have:
Logged in as: (User name) Languages: No languages selected in your account settings Projects: No projects selected in your account settings
UI clarity
Problem 1
Some parts of the page don't stand out as clearly from others as they should. Links don't show if they have been visited or not.
Fix
- Enclose key areas in a different coloured ribbon (eg with a light green background), for example the command box or corner menu box.
- (HIG) Adapt CSS to show visited links
Problem 2
Links wrap, so multiple-word links are split on different lines.
Fix
Use non-breaking spaces in the link names so that they don't wrap.
Problem 3
It's not really a problem, but the GNOME iconset used on Pootle is a little bit outdated. Also, some links seem to be kind of naked (my account, admin, projects).
Fix
Update the iconset (e.g. Tango) and use more icons for certain links. Each project could have a logo (uploaded by the project admin) to easily distinguish between other projects, too.
Community
Problem
Although we want to form a translation community, and encourage cooperation between Pootle users, anyone using the Pootle interface is working alone.
Fix
- Make it possible for users to see which other users are registered for the same language as you are, and make it possible for users to send messages to those other users (using a web form, and a Captcha). This would encourage the development of language communities. Jabber is also a possibility for communication via the interface.
- Allow users to upload photos or avatars into their account/profile, so that users who can see a list of other users can also see the avatars. Avatars could also appear in pop-up chat boxes.
- Allow certain fields in the account to be displayed publicly (e.g. where you're
from, what kind of job you have, etc), as in fora. This information is displayed when people view the list of users for that language.
- Include a Bugs and Feedback link on the Pootle homepage (or wherever else you think appropriate).
- Provide a quick input frame to send a message to this list (with an acceptance filter) to encourage more communication.
- Place a “Contact us” or
“Contact the administrator” link next to the “About this Pootle server” link at the bottom of the page. That link can be either an e-mail address or a link to a page with just the relevant contact details on it.
A string by any other name
Problem
The word “string” is a very geeky localisation kind of term. The normal meaning of “string” would be “a line of characters joined together”. Are there better, alternative terms?
Friedel says: ” 'Unit' is the term used in XLIFF, and is very generic. It is really what we are talking about. There could be several 'segments' once we do sub-unit segmenting. 'Item' is very generic, and not really tied to anything anybody would recognise. 'Message' is very tied to l10n and feels strange when translating a document, for example - otherwise not bad.”
Samuel says: If we move to XLIFF we should start using XLIFF terminology and hope users catch on.
Fix
- Segment
- Item
- Unit
- Message
- Stick with “string” (that's the term used by translators in FOSS)