interaction to toggle between English and Spanish about vote-gov HOT 18 CLOSED

@jwbowers I like the idea of A/B testing "Vote!" with something else.

I'm leaning toward "Become a voter!" rather than "Be a voter!" -- the former hints at that process we've been talking about (become indicates a transformation, where be represents a stasis — there's no progression inherent in be.)

from vote-gov.

I compared some resources on this topic, which offer pretty consistent and straightforward advice:

• Use the translated name of the language
• Display all languages
• Don't use flags
• When possible, auto detect the language someone's browser is set to and use that language (but allow them to easily switch)

Based on that advice, I think we should:

• Auto detect people's language when possible. If their browser is set to Spanish, we should give them the Spanish version. If their Facebook is set to Spanish and they're seeing a link to vote.gov, it should take them to the Spanish version.
• We should also add a simple "Español" link in the header that, when clicked, takes you to the Spanish version of the site. On the Spanish version, the link should say "English" and take you to the English site.

Of the various placements I tried, my preference is for this version, where I increased the size of the "Official government site" banner and added the link there. I think this version works well because:

• the language toggle is separated from the content of the page
• we can keep the same placement for mobile
• it's in a place that could work for any gov site, so could be integrated as a recommendation on the Web Design Standards
• beta.cfpb.gov uses this approach, so there's a precedent and it might be a benefit to reuse the pattern

@jpyuda: You mentioned a concern that people might not notice the link if it's too small or too close to the top of the page, so I'm curious what you think of this approach. We should see if that's an issue when we test it out with users.

Desktop:

Mobile:

Alternately, I looked at adding the toggle as a link or button in the header. I like the visual prominence of the button but prefer the previous version because:

• the toggle looks like it's related to the state selector
• I had trouble coming up with a mobile version that includes both the language toggle and the persistent state selector. It gets pretty cluttered.

Thoughts @jpyuda @megdaly @bradnunnally @kategarklavs @rogeruiz @arantxarecio ?

from vote-gov.

@ericadeahl The last example you have is the strongest, because it also draws attention to the state picker. So it almost asks the question "Where do you live and how would you like us to speak to you?" Also, as a button it has a "toggle" affordance to it.

from vote-gov.

I think I also like the last option in terms of placement - it's definitely more prominent. But I agree that it also implies it's related to the state dropdown, which does not seem ideal.

from vote-gov.

thanks for sharing this @ericadeahl; I agree with you and @jpyuda . Placing the toggle next to the state dropdown is not ideal and can be confusing. I really like the version you prepared that displays the toggle ion the header and not next to the state dropdown. Maybe it can be bold and the font be a bit bigger to make it more prominent. In general visitors are used to finding the toggle on the top right of websites but it would be a matter of testing this option to learn more.

from vote-gov.

I think the addition of some kind of iconography (but not a flag) next to the "Español" link at top could help. Or something else to make it more visual instead of just a text link.

Widening that area is a good idea, anyway, as we may want to use it to suggest an interaction is available related to "an official website of the United States government" and issue #40

from vote-gov.

I prefer the link in the banner, but would like it to be more prominent
somehow. I like it best since it's less confusing, could work for any gov
site and can be incorporated into the WDS.

Meghan Daly

USAGov https://www.usa.gov/explore/

“Your Guide to Government Information and Services”

OCSIT/18F - U.S. General Services Administration

On Tue, Jun 7, 2016 at 9:53 AM, John P. Yuda [email protected]
wrote:

I think the addition of some kind of iconography (but not a flag) next
to the "Español" link at top could help. Or something else to make it more
visual instead of just a text link.

Widening that area is a good idea, anyway, as we may want to use it to
suggest an interaction is available related to "an official website of the
United States government" and issue #40
#40

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#26 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AGG8kcf5xCHvUgOidoGkG56muQm6I9W6ks5qJXfTgaJpZM4IhqeF
.

from vote-gov.

@ericadeahl Hey! Thank you for sharing — I agree with @bradnunnally that the toggle in the last example is strongest (being that it looks the most button-like), but that placing it somewhere other than right next to the state picker may be a wise move.

One small content observation: I'm getting hung up on the "to" and "being" — how would you feel about trying one of the following alternatives?

Take the next step toward becoming a voter

Take the next step in becoming a voter

Take the next step toward voting

(The first of these is my preference -- what do you + other folks think?)

from vote-gov.

Does it need to say "take the next step"? Can it be more direct like, "Become a voter"?

If not, I also prefer the first option with a little tweak: "Take the next step to become a voter."

My two cents ;-)

from vote-gov.

@arantxarecio +1 to the simplicity of "Become a voter" -- short, sweet, and to the point :)

from vote-gov.

Thanks for all the feedback! I'll look at making the link in the top banner a little more prominent.

@kategarklavs @arantxarecio the copy was a suggestion from @jwbowers - looping him in here to weigh in

from vote-gov.

@arantxarecio +1 on "Become a Voter"

The copy currently implies that people are not a voter. So, it would be great to have other calls to action to change to during non-voting/registering times.

from vote-gov.

@kategarklavs @arantxarecio @ericadeahl @achoueiki
How about "Be a voter!" and test this (in A/B testing versus), "Vote!"? (One is about identity and self-concept and the other is about action.)

The "take the next step" part had to do with early discussions about the importance of showing people where they are on a path / acknowledging that we are not actually registering them but just trying to help them along a (possibly frustrating) multi-step process. I'm working on a document of calls to action (many of them, for brainstorming and winnowing for eventual A/B testing), and I'll add these.

from vote-gov.

@kategarklavs I agree with "Become a voter!" as better when people are focusing on registering to vote. We might see if we get push-back for that (and "Be a voter!") for people who already think of themselves as voters but who are seeking information about how to vote if registration is not the main element on the site. Hmmm...

from vote-gov.

@bradnunnally @jpyuda @kategarklavs @megdaly @arantxarecio For the language toggle, I played around with a couple of options and am liking this one where I've added a button into the official government site banner. The banner feels quite a bit heavier at this width, but I don't mind it. Seems like a good compromise considering the discussion above.

@arantxarecio @kategarklavs @jwbowers Weighing in on the content from a design perspective, I think "Become a voter!" works fine in the layout, but "Vote!" and "Be a voter!" are a bit problematic. The balance of the page feels a bit off to me with the short texts, and on the desktop version we start getting weird issues with the centered title nearly aligning with the left-aligned text below. I tried increasing the text size, but these still felt a bit off. If possible, it would be nice to have a longer text to work with.

from vote-gov.

@arantxarecio @kategarklavs @jwbowers @ericadeahl
I really like the toggle in the banner; it's easy to spot, clean, clear. I think this is the best option.

Also, "Become a voter" is the text that makes the most sense b/c of what it communicates and also design-wise.

In Spanish, we could use "Sea un votante". Thanks.

from vote-gov.

Hi @rogeruiz @theresaanna Just wanted to make sure you saw the final language switcher design here and have everything you need. Here are some specs for the larger gov banner:

Mobile:

Desktop:

from vote-gov.

Yes! Thanks @ericadeahl. We'll be updating the branch later today for
review or Monday the latest

if ( typos ) blame( fingers );
Roger Steve Ruiz ::: XFBB
202-600-1208

On Jun 10, 2016, at 1:52 PM, Erica Deahl [email protected] wrote:

Hi @rogeruiz https://github.com/rogeruiz @theresaanna
https://github.com/theresaanna Just wanted to make sure you saw the final
language switcher design here and have everything you need. Here are some
specs for the larger gov banner:

Mobile:

[image: screen shot 2016-06-10 at 10 45 37 am]
https://cloud.githubusercontent.com/assets/5911280/15973574/2439782e-2ef9-11e6-9687-7bcae37a2e2e.png

Desktop:

[image: screen shot 2016-06-10 at 10 49 31 am]
https://cloud.githubusercontent.com/assets/5911280/15973577/26a7983e-2ef9-11e6-98e4-d00622e68041.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#26 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AArF1ETuAxyOVMxleWv70MixHSDdjEQJks5qKaRHgaJpZM4IhqeF
.

from vote-gov.