Loading...
 

Translation Editor Revamp

What's the problem


The editor for translating updates is currently pretty much useless right now for several usability reasons. When I say "useless", I mean to the point where most people don't actually use the diff provided in the translation editor, and instead manually compare the source and target texts.

Below is a screen shot of that editor.

Image

This editor shows a diff of changes that have happened in the French version of that page, with an edit area for the English page below. The goal is to reproduce the changes from the French page into the English page.

The problems with this editor are as follows.

Problem 1: Not full diff


The diff at the top of the screen only shows the lines that have changed in the French. They provide little context which would allow you to locate the exact location in the English where these changes need to be reproduced. This is especially difficult for long pages.

It would be much better if the diff was presented in full, inline mode. But that will make Problem 2 worse (see below).

Problem 2: Hard to see diff and edit form at the same time


As you can see on the screen shot, it's hard to see both the complete diff and the edit area at the same time, which also contributes to the problem of locating where in the English a French change must be reproduced. If the user can't see at the same time, the change in the diff, and the place in the edit form where he thinks the diff needs to go, you need to keep scrolling back and forth, and using your short term memory to remember what was on the other part of the screen.

It would be much better if the complete diff and complete edit form were displayed top to bottom, or even better, side-by-side (for some reason, humans seem much better at comparing things that are side by side than things that are top to bottom).

Possible solutions


I (Alain Désilets), have started working to improve the layout of the translation editor, but I need help to make the layout work well.

So far, what I have done is this:

  • Diff is a full inline diff.
  • The translation updating dialog is presented in full screen mode, in order to maximise available real-estate.
  • The diff and edit area are displayed side by side.


Below is a screen shot.

Image

Not exactly pretty. Below are the remaining problems I see with it. Can someone help me? I have been at this for about a day now.

Remaining problem 1: Page editor overflows to the right


The page editor seems to have a fixed width, so that there is a huge chunk of it that doesn't show at the right.

Remaining problem 2: Diff is not full length


The diff on the left does not have the same height as the editor. This may not seem mportant, but it is, because if the areas for editing for displaying the fulldiff have about the same height, then by positioning the two vertical scroll bars at about the same position, you will end up at approximately the same location in both the English and French side (unless there have been lots of changes in one or the other of the files).

Remaining problem 2: The blue background is annoying


Page last modified on Thursday 29 March, 2012 00:01:43 GMT-0000

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools