547317 - New designs for the translation boxes

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Admin/Editor Tools, defect)

Description

[Wil Clouser [:clouserw]]

I'd like to make the translations boxes prettier.  We've been discussing via email, but chowse wants a bug!

Comment 1

[Chris Howse [:chowse]]

Attachment: Translation Box: Old/New

For reference, here's the original design and one with new (CL?) styling.

And here's an example of the context it'll be used:
http://people.mozilla.com/~fligtar/zamboni/designs/2010-02-15/Settings-Profile-100208.png

Comment 2

[Chris Howse [:chowse]]

Attachment: Translation Box Redesign

And here's my redesign, in various states and with a few alternatives.

Comment 3

[Wil Clouser [:clouserw]]

Wow, lots of ideas.  Thanks, those are looking really good.  Some thoughts off the top of my head:

- Having the remove button appear on mouse over causes that tab to expand and, more importantly, all the other tabs to the right to shift.  Won't that be startling and unexpected?

- For the "Adding Languages" section where they are shown individually across the whole box, you're showing 25 locales and AMO already has 33.  I like the idea but I don't think it scales.

- I like the dropdowns for small boxes.

- Does anyone know if our current "Remove everywhere" functionality is even used?  I've heard, maybe, 2 questions about it ever and no one said they used it after it was explained.  I don't think removing lanugages is a popular use case anyway - maybe adding the link here isn't worth the time to write it or to explain what it is?

- I think the top and bottom tabs both look good

- I don't think hiding the tabs (adding an extra click) wins us anything if they already have translations existing.  If it's only their default language it could clean the page up a bit.

- I like the tabs better than the "bottom bar"

Comment 4

[Justin Scott [:fligtar]]

Wow, I like this a lot. My comments:

* I like tabs on the bottom, and I like the ability to hide translations until the user has decided to start localizing things. This will be very helpful on user-facing pages like profiles, where 99.9% of users will not add any translations and the tabs are just confusing.

* To answer Wil's question, I don't think we have a "remove everywhere" function, only "add to all". I think it's probably not worth the added complexity.

* My one concern continues to be the different use case between developers and end users: developers want to see locale codes, and end users want to see language names. As a developer, I have 20-something locales of Password Exporter and I don't know what the proper name of some of those languages are that are non-obvious. I just want to put it in the right box. I think if we add the codes as those fancy tooltips when you hover over one, that would suffice. For adding a new translation though, the code should definitely be there.

* It'd also be nice to see the error state for a field. For an example of what that looks like currently, type too many characters in a character-restricted field.

Wil, could you give us some stats on add-on translations for a couple fields? What's the average number of translations among add-ons that have more than one translation, how many add-ons have more than one translation, etc.

Comment 5

[Chris Howse [:chowse]]

(In reply to comment #3)
> - Having the remove button appear on mouse over causes that tab to expand and,
> more importantly, all the other tabs to the right to shift.  Won't that be
> startling and unexpected?

The appearance of the the button on hover may be jolting, but the shifting of tabs shouldn't be-- the difference is small and fixed-size, and since the gaps are hover-sensitive, there should be no targeting problems when moving between tabs (this is easier demonstrated than explained).

Alternately, we can simply show the remove buttons at all time for all tabs. I shied away from this since this ups the risk of multi-row fugliness, but maybe a large number of translations is the exception and not the norm.

> - For the "Adding Languages" section where they are shown individually across
> the whole box, you're showing 25 locales and AMO already has 33.  I like the
> idea but I don't think it scales.

Too bad. I'd lean toward the pop-up option, then. The drop-down is a decent solution, but looks awkward with a large text area.

> - I think the top and bottom tabs both look good

My preference is bottom, since translations are definitely secondary interactions, they come naturally after supplying a native version, and they look better if labels are on the side.

> - I don't think hiding the tabs (adding an extra click) wins us anything if
> they already have translations existing.  If it's only their default language
> it could clean the page up a bit.

Agreed-- hiding tabs should only apply if no translations are already present. I had this as a page-level element in a previous mock (http://bit.ly/cCqnYf), but it works fine at the control level, too.


(In reply to comment #4)
> * It'd also be nice to see the error state for a field. For an example of what
> that looks like currently, type too many characters in a character-restricted
> field.

First thought would be to add red border around the control and highlight the remaining character count in red. Will update the mocks with examples.

> Wil, could you give us some stats on add-on translations for a couple fields?
> What's the average number of translations among add-ons that have more than one
> translation, how many add-ons have more than one translation, etc.

I'd be interested in knowing this, too. If translated add-ons tend toward high language counts, I might want to rethink the multi-row edge case.

Comment 6

[Chris Howse [:chowse]]

Attachment: Translation Box Redesign (w/ error case)

Comment 7

[Chris Howse [:chowse]]

Attachment: Redesign minus Alternates

Comment 8

[Wil Clouser [:clouserw]]

Attachment: summary of add-on's localized descriptions

Add-ons that have localized descriptions have an average of 5 locales

Comment 9

[Chris Howse [:chowse]]

And it appears ~425 (35%) have more than 7 translations, which would require extra space.

Comment 10

[Wil Clouser [:clouserw]]

I think the designs look really good.  Is there more work to do?  Does someone want to make a final call on this and resolve?  Otherwise I will.

Comment 11

[Justin Scott [:fligtar]]

I think the new designs are great and definitely an improvement. Thanks chowse!

Comment 12

[Chris Howse [:chowse]]

To finalize, here's a quick prototype of all the design's behavior (except the pop-up for adding locales):
http://people.mozilla.com/~chowse/drop/amo/translation/

Comment 13

[Wil Clouser [:clouserw]]

Thanks, implementation is bug 550907