Pontoon - Path to First Contribution

Pontoon
#1

Hello,
My name is Vishal and I have been working on a guided tour for Pontoon as part of Google Summer of Code. Since active user participation and onboarding is one of the key components for the achievement of Pontoon’s goal towards localization, a guided tour can help creating an ideal funnel experience for the users to get on board and learn how to use it. If users understand Pontoon well enough, then they are more likely to use it.

I m being mentored by @adngdb and @mathjazz . As of now we are planning to keep the following flow for the tour:

  • Add a dummy project which each user can use as they wish, without impacting other users (can be used for demo and playing around)
  • Take the 1st time user directly to the translate page of dummy project and start the guided tour.
  • The tour would just introduce the user to some parts of the Translation UI and guide them to suggest the translation of a string.
  • Keep the guided tour as short as possible. More parts of translation UI will be introduced through the use of strings in dummy project itself.
  • When the tour finishes we can give the user 3 options:
    1. Go and translate some strings in live projects.
    2. Move ahead towards fluent tutorial.(optional)
    3. Stay on the dummy project; play around and explore more features.

Guided Tour :

Dummy Project :

  • Something similar to the sample project of smartcat.ai (accessible after login) in which the strings guide the user and tell about various features. (Screenshot )
  • Planning to focus the strings on use of Translation Resources and Search/Filter

I hope upon completion, this helps new users get around the app by improving the path to the first contribution. I’m very happy to answer any questions and to read any feedback you have about this!

Update:

Since, It’s almost the complete of GSoC 2018, Following is the summary of my work during this period:

Work Completed

The guided tour has been successfully implemented and will be accessible through the “Take A Tour” CTA on the new homepage (Link to PR ).

The tour shows up only on a single project and we now have a project named “tutorial” added for this purpose. As proposed, the strings in the “Tutorial” project guides the user further.

The project along with the tour can be accessed Here

Further, for authenticated users, We also have the state of the tour saved after each step so that the tour continues from the step the user left and didn’t have to go through it again (Link to PR).

Work Left

  1. Hiding the “Tutorial” project from dashboards preventing stats calculations. We also have a discussion open regarding storing the translations for the project and visibility to other users.

  2. Adding keyboard navigation e.g. left/right arrow for letting the user move back and forth in the tour.

  3. Also, there are plans for adding a tutorial for usage of fluent editor in Pontoon.

Not ‘the end’

I’d like to thank the complete Pontoon team especially my mentors for the constant support and motivation. Had they not been, the project wouldn’t have been a successful one.

It has been a thrilling summer overall. I’m now familiar with a large part of the code base and would continue to contribute to the project and keep learning and improving myself. GSoC is not the end.

4 Likes
Google Summer of Code 2018
A demo project for Pontoon
#2

Hello everyone,

For the past few weeks, I was working on the development of the guided tour. The tour is accessible only on the translation page of a project called “Demo”

I have finished it and is staged at https://mozilla-pontoon-staging.herokuapp.com/en-GB/demo/database/

We would like to hear what you think about this tour as:

  • How it appears to a person who is new to Pontoon.
  • If the steps are mentioned in the right order.
  • Is there a need for any new steps to be added.
  • Overall flow of the tour and how it ends.

And any other ideas or feedback.

Thanks

#3

First of all, that’s a great start. Also, disclaimer: not really a new user :slight_smile:

Pontoon is a web-based, What-You-See-Is-What-You-Get (WYSIWYG),

Don’t need the last comma

I wonder if it’s worth calling out WYSIWYG, given it’s not really Pontoon’s strength these days.

navigate between projects

between = 2, amongst = multiple

I think it would be really nice to move the message closer to the UI element, instead of centered? It also doesn’t move when you resize the window.

If you want to search for a perfect match, wrap the search terms in double quotes, e.g. ‘new tab’.

Those are not double quotes :slight_smile:

If, on the other hand, you want to search for strings that contain double quotes, you can escape them with a backslash.

Worth giving an example?

Each string is displayed with the string status (i.e. Missing, Translated, etc.) identified by a colored square.

Maybe: The status of each string (Missing, Translated, etc.) is indicated by a differently colored square.

Selecting an string by clicking it opens up the editor.

a string. Also: “Clicking on a string opens up the editor”

A user needs to be logged in to be able to submit translations. Non-authenticated users will see a link to SIGN in instead of the translation toolbar with the green SAVE button.

That’s getting ahead, a new user doesn’t know what a green SAVE button is. Also “SIGN IN”.

Once the translator has suggested the translation, the suggestion will appear in the sidebar. In case of multiple suggestions, sidebar will show the most recent one.

That’s a bit oversimplified, since it ignores a string with approved translation.

MACHINERY TAB

I don’t think a lot of people use it to search, they look for existing matches, which is not mentioned here.

In the last step the tour is called “introductory tutorial” and “wizard”, we should stick to one.

Missing pieces:

  • I think we should mention the LOCALES tab
  • We should mention that the translation area might change, e.g. for Fluent or plural strings.
  • Link to the documentation

General notes:

  • It would be great to have keyboard navigation, e.g. left/right arrows
  • In some cases, the bouncing arrow is not visible, I guess it’s above the viewport

General questions:

  • How is the language picked at the end of the tour? I ended up on en-GB, which is a bit confusing
  • Have we settled to string in terms of Pontoon terminology? I remember an etherpad, but not the specific conclusion.
2 Likes
#4

Sadly those are technical restrictions from the tool that @vishalcr7 and I chose. :frowning: But he told me he was going to find a solution to that, so fingers crossed!

Does that mean you would also like to be able to go back to a previous step in the tour? This is not currently supported. Also, as of an hour ago, you can do the tour only once as a logged-in user, as we store your current step so that you don’t have to go through it again when you come back. If you want to test it, simply open the page while being logged out (i.e. with Private Browsing).

In this case it’s actually chosen at the beginning, when you clicked on the link in @vishalcr7’s post it led you to the en-GB version. Ultimately this will be linked from the new home page @pramit is working on, and there we should make that go to the user’s favorite language.

The etherpad is here and we have not yet made a decision.

1 Like
#5

Yes, I think that would be helpful (and likely expected)

#6

Nice work @vishalcr7! I am looking forward to send newcomers to your tutorial :slight_smile: @flod has already written everything that came to my mind about the tutorial, so I don’t have much to add. I have a question though, can we see the translations of other people? The tutorial could be used as a small test for newcomers, to assess their current level, and spot the most common issues early on.

Thanks, and keep up the good work!

A demo project for Pontoon
#7

At the moment, the translations are indeed shared between all users (like every other project on Pontoon). However, we plan on changing that, see this topic.