Does Your Web App Speak Schadenfreude?

Greg Rewis at Code 2016
Sign up for Conffab Free to watch this and hundreds of other videos for free
Opening title If I remember anything around the web world, particularly in Adobe space, particularly things like Dreamweaver, and actually part of that GoLive. Remember the GoLive, right? Well, Greg is intimately involved with that. Now, it's probably, GoLive is probably older than at least some of the people in the room. Anyway, so Greg's been involved for many, many years in helping make the web happen, particularly on the tools side of things. And recently, in the last year or so, he's started working with Salesforce as well kind of as a developer-evangelist. He also happens to speak at least German and probably several other languages fluently. And we saw this presentation with city, and it's fantastic, and I think it's something we don't pay enough attention to. It's about localization and internationalization of the things we build for the web. To tell us all about that and ask us whether our web apps speak schadenfreude... Was that roughly, that was good enough? All right, please welcome, Greg Rewis. - All right. (applause) (greeting in foreign languages) Hmm, did I miss one? - G'day! - G'day! (laughter) I can even do that one. All right. So, as John mentioned, this presentation, it was sort of funny, when I began thinking about this presentation, I was trying to come up with a name for it, and I was having a hard time because if I just told you this talk was internationalization and localization, this would be the time you would still be down at the pub going, "Yeah, we can skip that one." So I was trying to come up with a catchy name, and I thought, "Well, how about, "'Does your web app speak schadenfreude?'" Now, what it means is we're going to start, first of all, to make sure everyone's on the same page. Let's start with the word, "schadenfreude." Does anybody know or is there anyone who's, anyone here who speaks German? One, okay. One or two, okay. The rest of you, any clue what it means? So, I looked it up. It actually is, (speaking in foreign language). So, that's clear, right? - Got it. - Got it, all right. Let's move on. Well, actually, I heard someone say it. Yes, it is the pleasure or enjoyment derived from the accidental misfortune of others. Let me illustrate. You know the time that that person jumped the queue when you were getting your cuppa in the morning, and then they turned around as they were leaving, and somebody bumped into them, and their coffee went all over them, and you went, (laughs mischievously). (laughter) That's schadenfreude. (laughter) Now, what does that have to do with us, with us and web design in general? I mean, what is it that you, as a web developer and a web professional, what is it that you could possibly do that would inflict accidental misfortune on someone? Well, there's actually a lot because what we're really talking about here, in this, over the next 50 minutes or so, we'll be talking about internationalization and localization. But I guess that first, before we even dive in, we have to be thinking about, what do these things mean, right? And what is it about internationalization and localization that is so important for you and I as a web developer? Well, the first thing is... Well, let me ask before I even go any further. How many of you in your web property, whether it is a website, a web application, or whatever, how many of you have had to have a site or a web app translated into another language? Okay, good showing of hands. In fact, that sort of bares out the research because research has been done. It says if your web app, if your brand, is not localized into 16 languages, you are not a truly global brand. So we have to be thinking about that as web developers because the things that you and I do can make or break the ability for your site to be translated into another language. And these are things from design decisions, coding patterns, even the layout that you choose and the way you lay a page out can have an adverse effect. Now, that adverse effect may be something that jumps out in the face of the user, in the face of that end user, but it also may be something very, very subtle, a mistranslation that happens along the way that confuses that end user. So these are the things that I'm going to be addressing over the next few minutes, as I said. Now, John did introduce me (clears throat) then. And if you are on the Twitters, my name is Garazi there. And I would warn you that if you choose to follow me, that Stephanie and I have been known on occasion to tweet at one another while seated on opposite ends of the couch. (laughter) "@stefsull, I'd like something to eat." "@garazi, go make it yourself." (laughter) (clears throat) So be forewarned, be forewarned. But as John pointed out, this is something that I've been dealing with for a very long time. I am officially the oldest person in the room, at least in web years, because I actually began on the web before it was even the web. As John mentioned, way back, at the very, very beginning of the web, I helped to found a company that would go on to be called GoLive and build a product called Cyber Studio. I even have, all right, wait. The young kids in the audience, all right. For the young kids in the audience, there used to be these things called CD-ROMs, okay? (laughter) There was an email program called Eudora. I actually have an archive, that would be a backup, young kids, of my Eudora mailbox on a CD-ROM in which I have a conversation between Tim Berners-Lee and myself. So that's how far back I go, all right. But all along this entire journey, I've been focused on the "ww" in "www," and that is the "world wide" aspect of that. In fact, we released GoLive, Cyber Studio in Japanese as our first international language, and it was really cool. We were rewarded for it because that year, we were the number one piece of Macintosh-selling software in Japan. That was pretty cool. Number two was Word. How cool is that, right? And, of course, as John mentioned, after Adobe acquired GoLive, I left. I went to Macromedia to (laughter) build Dreamweaver. I like to say, I am the only person in the world who was hired to legally kill their child. (laughter) Now, please do not tweet that because out of context, it sounds really bad, okay? All right. And, of course, the good fortune that I had led me to a life in crime with Stephanie who you saw talk earlier. This is our X-Files shot (laughter). This is Scully and Mulder. Okay, but anyway, now I'm at Salesforce. And the reason that my job at Salesforce is a developer-evangelist is to talk about our platform and talk to developers about our platform. And internationalization and localization is a very, very near and dear thing to my heart because we are in 34 different languages. Our mobile app, Salesforce1, is in 25 different languages. 15% of our users are non-English-speaking people. So, internationalization and localization are something that means a lot to us. So, first, before we even go there, you notice I keep using the same two words over and over, internationalization and localization. Well, really, it's more like internationalization versus localization, because we tend to lump the two together, but they're actually not. You see, when we define internationalization or as we define internationalization, that is the prep work, if you will, the work that leads up to and enables our applications to then be localized. Now, just like, you all know the abbreviation, "a11y," "accessibility," okay, well, internationalization has its own, it's "a18n," which 18, again, being the number of letters between the "I" and the "N." Localization, on the other hand, is actually the literal work of doing the translation, so translating the words from one language into another, and sometimes it's more than just words. We also abbreviate this one, "l10n," for "localization." Now, I've read your minds. I've read your minds already. I know what you're thinking. You're thinking, "I don't care about this. "I'm not the one that's going to be doing this. "Somebody else is going to be translating my site for me, "so what does all of this matter?" Well, as I said before, it really is your job to do the two things, and that is, the internationalization part, the prep work, as well as to make sure that that translation, that localization thing happens smoothly as well. And sometimes, we're not talking about translating words. When is a translation not a word? - Numbers. - When they're numbers, exactly right. You and I deal with numbers as web developers. We build forms that accept numbers. So even though you're sitting there and thinking about translating one word into a different language, internationalization and localization goes far beyond that, far beyond that. So let me just take... Is it okay if I have a small rant? (laughter) Okay, because some of you in this room have probably done this and inflicted that schadenfreude. I was trying to fill out a form on an airline. I'm not going to tell you who it was. I don't want to embarrass them. But I filled out my information, my details on the left-hand side. And when I hit Submit, on the right-hand side, this is what I got. Now, here's my rant. Please, quit wiping out my form field when I make a mistake! (laughter) So I went back and I filled out my digits again, and I hit Submit, thinking somehow I might not know my own phone number. (laughter) And once again, it happened. Oh, and by the way, did you notice not only did they wipe out my number, they wiped out my country, my phone country code? Like, seriously? So I tried one more time and got the same result. I said, "Oh, wait a second. "This may be that weird, weird situation." I don't know if anybody's ever run into this, but that weird situation where this doesn't work in Chrome but maybe works in Safari. (laughter) So I fired up Safari and got the same results! And then I realized, "It's not me. "It's you." (laughter) You see, I realized that the wonderful web developers at British Airways... Oops, excuse me. (laughter) Act like you didn't hear that, okay? They were not expecting dashes in between the numbers. I took the dashes out and was able to submit perfectly fine. So, my web developer friends, as we are talking about doing, building things that are on the world wide web, we have to stop thinking in the patterns that are specific to our own locale. So instead of just saying, "Hey, what's your country "and what's your number," how about giving me a pattern, what are you expecting me to do, or even better, how about if you not only gave me a pattern but when I pick a country, you change the pattern to indicate what was now being expected? That would be pretty smart, wouldn't it? Okay, this is me stepping down off of my rant. But it felt so good to get that off my chest. Now, number-wise, you and I, of course, as web developers, we have a lot of control over that because that's us. We're the ones doing all of that validation work. It has nothing to do with an actual translator. But have you ever stopped to think about that actual translation? So those people that raised their hands earlier, when you said you had an international site, what's the work that goes on behind the scenes? What happens when we go, "Okay, the English one is done. "Now let's go to the Japanese one, or the Spanish one," or whatever. Have you ever stopped to think about what that process looks like? I mean, how hard can it be, really? Well, the answer is actually quite hard because most translation work is done in XML format. Now, that's not the hard part. (laughter) The hard part is that that XML format provides little, if any, context. So all you are doing as a translator is seeing a word and going, "What's the word in my language?" And that is really problematic, especially if you're dealing with technical terms, then it can become even more problematic. Let us illustrate this with a real-world example. This is a screenshot, on the left-hand side and the right-hand side, of a very, very old Android phone at this point. On the left-hand side is your device options. I've highlighted the word, "device," there for you. Device options. So, now, when that translator got that piece of XML and looked and thought the word, "device," which words should they use, they used (speaking in foreign language), which might appear to be correct until you see that word in context. You see, that word does not mean "device." It means, "the peripheral," like something that you plug into a device. So, as a French user of that phone, I'm looking at that, not really totally and 100% understanding why we are talking about the options for my circular road, my roundabout, because that's the other meaning of that word in French. So you see, if you're not into the context, this can have some really adverse effects. I mean, I will tell you, I've traveled all over the world more times than I can count. (laughter) And I'm just going to leave this here with you for a moment. (laughter) We're speaking the same language. My favorite one is that first one. With the greatest respect, you're an idiot. (laughs) I mean, this is, it's true. We speak the same language but even the meaning of our words can have a different context within our own locale. Now, what adverse effects could this have? Now, you've seen that one example, but this can have other adverse effects when we begin to think about even something as simple as the lowly button. How many of you have ever made an Edit button? I mean, duh, right? You're doing your layout. You're putting your button in there. Woo-hoo! Putting the Edit, right? Have you ever stopped to think what might happen if that button were to be translated into a different language? I mean, what could possibly go wrong if we were to churn that into German, for example? If your layout is dependent upon a button width like that, then this sort of blows your day, right? Because, suddenly, boom, the entire layout can change because, you see, you and I, we're so, I mean it's natural, we're focused on our own language. We never stop to think about the fact that someone else's language might be much longer or even much shorter. So these are things that we have to begin to think about. Now, there is or has been, I've heard this and I hate this, but there has been this sort of rule of thumb, and that is, "Don't worry. "As long as we make your things accept about 20% more text, "then we'll be okay." Don't buy into that. You see, because it's not true. It all comes down to the actual language itself. For example, in German, as well as numerous other languages, sometimes words, as in the plural, become a word. So, for example, "Input Processing Features," is (speaking in foreign language) in German. Now, what could possibly go wrong? I doubt you would have "Input Processing Features" on a button. I would hope not. But if that had to fit into a smaller space in English, we can just wrap it. We have word breaks, no big deal. Well, until the hyphenation spec is approved and put into our browsers, German is screwed, because while there is proper ways or there are proper ways to break that word, the browser, by default, does not know. And what happens in a div when there is too much text for the div? Adverse effects. We can see this quite up-close and personal. This is a screenshot of an old Flickr page. And I want to draw your attention to the 392 views. "Views," such a small, innocent word. What could possibly go wrong? I mean, "views," translated into another language couldn't possibly blow my layout out, could it? Look at Italian there. Three times longer. Even worse, German. German actually breaks it into two words, which now means if you didn't allocate enough space, now you've got a wrap you didn't expect. So these are the things that you and I run into. In fact, at Salesforce, we've run into it. So this is something we call our Actions Bar. And the Actions Bar, you can see, consists of four basic buttons. These are the same button groups that Stephanie had on one of her slides before using Flexbox. And so, this is how it appears in English. In German, it's slightly different. In German, how many buttons are in the action bar? (speaking in foreign language) (laughs) There's three buttons. Why? Because when we expanded the text, there was just no way to pack that in. It just couldn't work. So for the German version of our website, we have to say goodbye to that third button and move it down as (speaking in foreign language), as the first entry in that dropdown menu. These are the things that happen in the real world. So the rule of thumb for you and I, as we think about this, is as we are designing, the shorter the words, the shorter the amount of text that we are talking about, the more we have to think about text expansion. Now, as we get more and more characters, notice when we get over 70, we drop down to only 130% of text expansion. The reason for that is simple, because regardless of the language, once we reach critical mass with those numbers of characters, we begin to have line returns and things happening all over the place, and so we have less impact on the area needed for that text. But don't fall into the trap. Going back to the Yahoo example, don't fall into the trap and go, "Okay, we're going into, we're doing Chinese, "so we know exactly what the length of Chinese is "compared to English." Or, "Japanese, we know the length of that "compared to English." Don't fall into that trap, because sometimes, that trap is a real trap. So, Chinese, Japanese, Korean, shorter or longer than English? This is the pop quiz to see if you remember the chart. Shorter is what you would say, except in Japanese. See, because in Japanese, they have three different alphabets, one of which is much longer than the corresponding English. And when I say "longer," what did you just hear? You heard, "more characters," didn't you? Yes? Was that not what you heard or do you have other small voices in your head? (laughter) What I was actually saying by "longer," is character width, which I'll come back to in a moment. And not just width. Width is one aspect. By the way, you'll notice that in some words, we've actually translated using one alphabet, and other words we translated using a different alphabet in Japanese. And that is quite common. But, again, not just about character widths. It's also about character height. We don't think about height of characters when we're doing our English language websites and web apps. But when we see the other languages and those other character sets, notice the ascenders and descenders in Thai. I've drawn the line in the exact same place on both examples, and yet in Thai, we have all those little funny things sitting up above. I couldn't find any that sit down... Well, there is one that sits down below here as well. Think about what happens if the unfortunate happens and the two characters collide, because you and I sit there and think, "Oh, well it's just about words. "I designed my layout so that the words fit, "so the words can expand." Yes, but what did you do about the line height? Did you take the line height into account? Because here is the problem. If you jumble up the line height using the same line height that you used for Latin-based languages, it can become almost unreadable. Now, I blew this up, so anyone that can speak or read Chinese could probably still read this. But imagine if I had popped that down to its original 16 pixels. That becomes really, really difficult to read. And by the way, raise your right hand. Repeat after me. I promise, or swear, if you're into it, never to use 16 pixels. (laughter) As my just, "Oh, it's always going to be okay." Because for Asian languages, 20 is a better choice because many of their characters, or words, actually, cannot fit into 16 by 16 pixels. So as you're thinking about the fact that your web app is going into these other languages, there's a lot more than just words to think about, because these words impact your layout. Now, at Salesforce, we found this out very quickly, because this was an original, the original design of an area of our setup home page. And when we went in English, everything was fine. And then we translated it into German, and look what happened. Highlighted in the red. We had text overlapping buttons and things on the layout because that designer was not thinking. They were not thinking when they did what Stephanie said, "Never do." And they hard-coded the pixel height for the box because they wanted three equal height boxes. This is a problem. Now, thankfully, we did fix this. We fixed it using Flexbox. So now this is the way it looks in English. If you were to switch your language, this is the way it looks in German. Woo-hoo, Flexbox to the rescue. Flexbox is probably the number one new feature in CSS in terms of making it easier to build for internationalization and localization. Now, I talked about height. So what are your rules? What are your rules? It's not just about text expansion. That way, it's also about line height as well. But what if you have a design, what if you have a design... Or, well, actually, let me back up. Be honest here. Have you ever coded something and then forgotten it, forgotten about it? Had the layout one way. Suddenly they wanted some changes. Suddenly stuff is broken and you're going, "Who's the idiot that coded that?" Yeah? Okay. So this is what happened here. We have this, this is changing a record in Salesforce. And you'll notice we have this, "Send Notification Email." Now, in the previous layout, this actually sat alongside some other things. So, since it was a form control sitting alongside some other things, we actually defined a width on this thing, which, of course, meant that when we got too long, we wanted to truncate. Seems logical to me! What could possibly go wrong? Well, once again, going to my beloved German, I now have this, this truncation. Now, for those that do not speak German, this is (speaking in foreign language) email, which just means, "Confirmation Email." That's it, a checkbox that says, "Confirmation Email." As a German user of the site, I would be saying, "What are you doing with that confirmation email? "Are you sending me it? "Are you deleting it? "Are you signing me up on a spam list? "I don't know what you're doing because you "didn't tell me my verb. "The thing that I need to know "what the action is that's happening "happens to come at the end in many German sentences." So if you truncate, suddenly I have no clue what is going on here. Now, I pick on German a lot, but it happens in other languages as well. Yet another screenshot from Salesforce. I know you may not even speak the language, but I think those first two tabs, can you see a similarity there? It's new. New what? I don't know! Click it and find out. My friends, if you think, "Click it and find out," you are enjoying a little schadenfreude. (laughter) That's not nice! Don't make me click it to find out. Of course, sometimes, let's be honest, sometimes things can go terribly wrong even in English. Now, I thought long and hard about this screenshot and I realized, "Ah, screw it. "I'm in Australia. "I'll go ahead and show you." I'll just give you a moment to peruse the screen and see what could possibly go wrong with truncation. (laughter) Thank God we use the title attribute in the mouseover. So, my friends, be careful, be careful, because things can go terribly, terribly, terribly wrong. So we have to be thinking about this. Truncation or wrapping. Sure, do one or the other, but there are times where one is appropriate and the other is not. So these are the guidelines that we use at Salesforce. Now, these may or may not fit in with your own ideas, but these are the guidelines that we use at Salesforce. Buttons, for example, never. We try not to truncate them. We try not to wrap them. As you saw in the German example of the Action Bar, we would rather change the layout than have the potential of confusing the end user. So those are our guidelines. Again, see if they sort of fit in with what you're doing. But there are some guidelines that you should never ignore. One of the things is what we do in CSS. Anybody use the Capitalize in CSS? In Menus, right, we think, "Oh, in a dropdown menu "in English, it's the norm to capitalize all the words." That doesn't work in other languages. In other languages, in some languages, only the first word is capitalized. In German, only the first word and nouns are capitalized. In the Scandinavian languages, nothing is capitalized. So don't rely, don't think you can just rely on CSS to fix your problems because they are going to, again, cascade. Do you like what I did there? They're going to cascade down and cause problems as you move into these other languages. Now, there's a few other things that can cause problems as well. What is wrong with this? Let me help you out by showing you the HTML behind it. What is wrong with that? Well, first of all, we've been told not to use and anymore. But even if we chose emphasis and strong, there's still something that we have to worry about here, and that is the fact that in some languages, I may not be able to bold a word, I may not be able to italicize a word. In many of the Asian languages, again, because the letters or the words are actually combined together into these characters, I can't just take the one little one and say, "Well, this little, this upper left-hand corner." That doesn't work. In fact, those languages have completely different ways of indicating "bold." For example, the dots up there over those three are actually bold. Or they use a colored background to indicate, "This is bold." So you have to be thinking about this as you're doing your markup, because there's even, there's even times when you might have this happening. I'm getting a real sense of schadenfreude from this presentation. What is happening here? Well, schadenfreude, we all know, is not an English word. It is a German word. So what you and I need to be looking at and thinking about is doing the proper semantic markup to indicate that as well. This is very important. Why on earth is this important, to put a lang="de"? Why in the world would I care? - Screen readers. - Screen readers, exactly. Anyone using an assisted technology, with a visual impairment, they're being read to. Can you imagine the screen reader trying to pronounce "schadenfreude" with an Australian accent? (laughter) That person is going to be listening and going, "I'm getting a real sense of schadenfreude." "What? Huh? "Got a sense of what?" So you need to be thinking about this in your markup. Markup those foreign words so that the screen reader can say, "This is a German word." Now, there's another time that this becomes handy as well. There's a little-known attribute, a little-known attribute in HTML. It's called the Translate attribute. The Translate attribute can be set to either No or True or Yes, which is the default, and that is, if you set Translate equals no, it means not to attempt to translate this. How many of you have ever used Google Translate on a webpage? Bingo! So if you use Google Translate on my sentence here, then it's going to lead or do "schadenfreude," try to translate, "schadenfreude" into whatever language you're looking for, which is going to completely blow the whole idea. I used the word from the other language on purpose because I was conveying a meaning. So we can do this, we can also do it... Sorry, we have to be very careful, though, when we do it because how we implement this language attribute can have dramatic effects on that translation and our screen readers. For example, I had to shorten, I head to leave off the other dash "es" here so you don't go, "Hey, on your slide, there's an "es" missing." I had to fit it all onto one line. So I said, "Language equals Spanish" here, but I did it on the anchor. What is wrong with that? What's wrong? The title is In English. And so what we're saying is, "That's a Spanish word. "Spanish is Spanish." No, it's not, in Spanish. So be careful where you place these things so that your screen readers are able to properly read them out, so that translation software like Google Translate is able to properly translate these things for users. So, enough about that. Let's talk about another thing that literally you'd never think about. You would never ever ever think about. What's wrong with this format? Any problem areas for localization? - Date. - The date? Okay. Someone was paying attention earlier. But that wasn't the one I was going to pull out. This is the one I was going to pull out. What could possibly go wrong here? Once again, expansion, absolutely. But there's an even bigger problem, a bigger problem than the expansion, because you may have done that as in-line block. It may be fine. There may be enough space. But there's another problem, the problem that we started talking with or talking about early on. And that is the fact of out of context, things become difficult to translate. The translator sees after end occurrences. Remember the device and the many possible meanings? So as you're just looking at those words, I might be able to translate that differently and out of context. That could cause some real problems. Here's what happens at Salesforce. We have, "From date to date." That's no problem until you translate into Japanese. In Japanese... Oops, sorry. There. In Japanese, you see, the "from" and the "to," they don't say, "From a date to a date." And in fact, even as they do here, the date is first, so it's the date from, date to. So already confusing that reader. So what we've done is we went back and said, "Let's change that entirely." So now, this says, "Start and end." Hey, by the way, "Start and end," that would actually make sense for English speakers, too. So that simple change allowed us to be much more prepared to make our translations. Again, going back to that language thing, remember, the one key is also, if you are declaring a language such as Chinese here, remember that you also need to include the direction for that language, if it is different from the one that you have. So, dir equals rtl, that's right to left. So I've actually got this, that Chinese is actually being read from right to left. And my Chinese readers here were jumping ahead and all the way to the end of the sentence. So we can even mix those things. General rule of thumb. Put your language. Declare your language. If the entire page is in English, put it on the HTML tag. You can always override individual elements as well by placing that language attribute and/or direction attribute even down on individual pieces. Now, the BBC. BBC using Flexbox, it would be very easy for them to lay their entire navigation outline, Stef showed you, and then all they need to do when they are going into Arabic is simply slap dir right to left on, and boom, now flex-start is no longer over here. It's now over there. So it makes it really, really easy. Come on the real fast hits. What? Oh, oh, sorry. Oh, excuse me. Thank you. Thank you for calling me out on that. Abbreviations, another thing to be very careful with. In German, fax is (speaking in foreign language). Look, now you've learned another German word. But in Portuguese, it's not. So be very careful with abbreviations because abbreviations cannot be done in many languages. Finally, it's really important that you use the proper encodings. You see, because if you don't use the proper encodings, bad things can happen. (laughter) I'll just leave that there for a moment. Use the proper encodings because as we begin to go around the world with the web, we need to make sure that we are using UTF-8. And if you are, you're covering 90 different languages with UTF-8. It's really almost to the point of, if your language, if that target language is not covered by UTF-8, are they really a target market? (laughter) I mean, that's really almost to that point. Now, one last one also. As designers, I know we get caught up in doing this a lot, but please never ever ever ever do that hero image and bake the text into the image because you're suddenly going to have a whole lot of work getting it back out of the image and getting it translated. So, how do you approach all this? Well, we do it really simply. At Salesforce, we do something called, "pseudo localization." You have a script that allows us to take words and toss characters in around them. What that means for us is that we can then switch into that script language. We call it, "Esperanto." It's not really Esperanto. But we can switch into Esperanto and suddenly be able to quickly identify places where we've hard-coded text or places where we have wrapping problems, and so on. Now, that's already after we're in HTML. But if you are a Sketch user, there's something really cool because there's actually a GitHub repo that will do this for you in Sketch, so you can actually test your layouts out in Sketch, seeing how they will look in different languages. Finally, I want to leave you with this. Our culture, the culture that you've grown up in, plays a huge way or a huge part in your experience on the web. It plays a huge part in the way that you perceive things. Now, I love this diagram because it's sort of the iceberg of culture. When we think about culture, the things that are above the waterline are things that we think about. But there's so much more to culture. And it impacts the web and impacts the way that you and I use the web. There was a study done, and by the way, in all of my slides, all of the resource material, at the bottom, you'll see a source link to all of these things if you'd like to go and read more about an individual topic. But some research was done between Chinese and, well, actually, they did it in multiple languages, but I just captured one, Chinese and English, and how we as users of the web experience these pages from the perspective of our culture. They did some eye-tracking heat maps to see for English, what we did, what we looked at as English speakers to see that webpage, and how that then compared to the way that the Chinese user experienced it. And what they found is that our culture influences the way we read a page. And I'm not just talking about language-wise. You see, we, being Western, if you will, we are much more into very structured, very sequenced things, the way that we look at a page, even something as simple as a Google search page. Think about the last time you saw a Google search result. Did you look at the bottom of the page first? No, of course not. You looked at the top, in the left, and you started to read and scan that way. But that is not the way that Asian cultures do it. For example, this is the Chinese heat map. Now, again, concentrated up in the left, but look how many people were looking in different areas of the page as well. This is really important, and it will influence the way that we actually go about building our sites. SO I'll leave you with an example from the worst export ever from the United States of America, McDonald's. You like McDonald's? I don't. But even if you do or don't doesn't matter. This is the McDonald's website as it appeared on the day that I took the screenshot in the U.S. Now, we can see this has a very structured menu system. Over here, on the left-hand side, a big hero video even. What's wrong with video? What? Sorry. - It's very hard to localize. - It's very hard to localize, number one, but there's another thing, not even thinking about culturally, videos. If you're in Africa, you may not even have the bandwidth to play a video. So we have to be thinking about these things and adjusting them for the culture that this is going to be viewed within. So this is the English version. I thought, "Well, I might as well pull up "the Australian version." So there's the Australian version that day. Notice that you guys apparently don't like the left-hand, nice, structured button menu. You'd rather have it at the top. And it's been shortened from many options down to just a few options. This is the Thai version of the site. Thank God that they have the McDonald's logo in the upper left-hand corner, 'cause otherwise I wouldn't even know what was going on here. But notice something very interesting for the U.S. and Australia, we just had words for our menu. The Thai, they've got pictures, too. This is Panama's version. (laughter) I don't know. (laughter) This is Turkey's version. This is the Arabic version. This is the Indian version. And, finally, this is the Hong Kong version. Now, again, in doing this research, I was thinking, "Ha, why does the Hong Kong version "look so much like the U.S. version?" It seemed very odd for me, especially when I started thinking about this in terms of culture. But I realized that Hong Kong is sort of a unique place, sort of where East meets West in a lot of ways. And so, that's why their site looks very much like the U.S. site, especially when compared to the Mainland China site. All of these differences are something that we call, "contextual design." Now, Edward Hall wrote a book back in 1976 called, "Beyond Culture." '76, by the way, the internet was not around. He was talking just about how we experience a variety of things in our culture, and he broke it down and said there is a high-context and a low-context culture. And then there are things that span sort of in between them. So, pop quiz. Are you a high-context culture or a low-context culture? Being an American, of course, I'm a high, 'cause that's got to be better, right? But actually, that's wrong, you see, because we, as westerners, are actually more low culture than we are high culture. You see, high culture embraces much more animation, simplicity, pictures, colors. All of those things mean a lot more to that high-culture context than to the low-culture context. So, to illustrate that, two buttons. They're both Checkout buttons. Which one looks right to your eyes? People say the green one. That's the way I would respond. If I was sitting as a designer and trying to think, "Which color should we make the Checkout button," I would say, "Green for Go." But in Asian cultures, red would be the appropriate choice because colors, even something as simple as colors can be offensive in different cultures. So think about that. Now, last thing, when you're talking about languages, let's say you're building a site that had multiple languages. How do you indicate that? Well, normally, we would think, "A flag!" Okay, great, let's translate our app into Spanish. Which flag would you like to use? Because it could be offensive for someone. Hey, English! Which flag should we use? We fall into these traps, so don't do that, you see, because flags are not equal to languages. Flags symbolize a country. Languages are a group of people with commonality. So think about that. I would suggest you do something like languageicon.org used this image so it's not offensive to anyone but it gets across the point that, "Hey, I can switch my language right here." So I'm going to jump past this last one real quick, just about even something as simple as a dollar sign can be offensive or confusing. Not offensive, but confusing. For example, if you were to show an invoice with a dollar sign, someone might believe, "Oh, we are getting billed in dollars." Wouldn't it be much more culturally neutral to not even include a currency? And finally, be very careful with your images because they can lead to some very, very, very bad things happening. This is Ikea, and Ikea got in a whole ton of hot water in Saudi Arabia because of this image, because in Saudi Arabia, it's offensive to show a woman in pajamas. So they had to completely remove the woman from the image. They had to do it on this web shot as well. Here, we have four designers for Ikea, except they wanted the woman removed so as not to be offensive. Think about that, just something as simple as a picture can have different cultural impact. The last one is WhatsApp. WhatsApp has translated their website. This is the English version. This is the German version. This is the Chinese version. What's the problem? I'll go back through them. Yes, the picture. Notice the picture is always in English no matter which language you switch into, causing users to believe, "Hmm, if you want to use WhatsApp, "you have to know English." So be careful with your images. Think about multicultural personas. I'm not saying using personas, but at least bring that into your discussion. Bring localization and internationalization into your entire product life cycle. Be thinking about it all the way through the product life cycle. Okay? Cool? So, remember, that checklist that you were all trying to take a picture of and read, you don't have to even remember it because I've got it right here. The localization checklist is actually l10nchecklist.com, has an entire list of all of these things in it, and actually those are actual check boxes. You can check things off on your project as you go to say, "Have I covered all of my bases?" And with that, I'd like to say danke schön, thanks, gracias, and whatever other languages you would like to say thank you in. Thank you for your attention. I appreciate it. (applause) - Thank you so much, Greg. We might have time for maybe a question for Greg while we set Katie up. Where's Katie? Oh, there she is, all right. Anybody? I know that's probably a hard one to find a question about. And thank you very much for callIng out, in Persian. We got the Persian. (laughter) Thanks for knowing that. Very good. No. So, Greg, I think we might have one question. - Oh, you've got one question? - Oh, sorry, no, we've got one over there. Oh, hang on. No, that was already there. That's right. And we'll go to you. I'll tell you what, we'll do two. - Yes. - Hi. I just wanted to ask, so you were talking about schadenfreude in the context of an English sentence. - Right. - English is kind of a bastard language. - Oh, of course. - Lots of influences. - Right. - We use some international words commonplace, like deja vu. - Absolutely. - Do you delineate when you tag it as international language or not? - Yes. So I would absolutely, because, again, remember the context of what we're talking about. The idea of deja vu, schadenfreude, whatever the word might be, remember that the reason that you're tagging that as a foreign language is not for you and I. It's for the assistive technologies, to be able to say it without confusing the user, because imagine, again, imagine how a screen reader might attempt to translate whatever it was, the "Form Input Processing." Trying to translate or speak that word out in English, they wouldn't be able to do it. And so that's why you're doing it. This is, again, not for you and I just thinking, "Oh, I just want to make sure that people know "that that's French or that's German." No, it's the assistive technology that needs to understand that. So I would absolutely, anything that is not native English, even though we all know "deja vu." We all know that, but the screen reader doesn't necessarily know that. And so that's where I would be worried about. - So, in English, we have this tradition of putting loan words from foreign languages in italics, but at some point, they become part of English language. So it seems like an analogy to typography there. - Absolutely. - And at some point, with like "deja vu," I suspect is probably effectively, potentially an English word. I can see that it does get to that point. - Here's what I would do. What I would do is I would ask a non-sighted person, a person who uses a visually assistive technology, to actually ask them, write it out, have their screen reader read it back and say, "Did that make sense?" And, again, remember, (chuckles) a screen reader reading in Chinese may not be familiar with the word, "deja vu." So, again, you're going to be needing to think about that. - More than meets the eye. Well, one more over here because they waved so politely (laughs). - Oh, yeah. It's a similar sort of question. Yeah, I was just curious about how when you've got non-English words that we use in commonplace, how do they get translated into other languages? Like, if you had that, "schadenfreude." - So that would be the "translate equals no." So, "translate equals no," it would also need to be defined within the XML as well. "This is a word that does not need to be translated." Therefore, using "translate equals no," when you have your scraper go through all of your text, then it's going to not take any words that is "translate equals no." - Would that still have the same meaning in say, Japanese, like if they were reading through that. "Schadenfreude" wouldn't be something Japanese people would understand at all. - Right, but it would actually be spelled out in English for them, or German, as it were, because they can mix as well. I used to have a slide in there showing a mixture of English words scattered throughout an Asian language. Oh, we did. We saw the Thai. We saw the Thai. So, they're using the English lettering. They're using the English wording inside of their language. And that's again where I'm talking about the idea of being able to mark that so that the screen reader, if it was in Thai, would be able to say, "This is an English word," and that Thai listener would not be confused by that. - Okay, so for, say, Japanese, with that word in it, it's a general word but we'd be taking it as German, and would that still make the same sentence to them? Is that what you're saying? - It may or may not. I don't know. Anybody, any Japanese person? Is there a comparable "schadenfreude?" I don't know. We would have to ask. And, again, this is the most important thing. - It gets translated. - Translators as well will probably be putting that. - Yeah, the translator is going to know, but you need to be, you need to do your proper work to mark things up so that when those translators receive those things, they can say, "Okay, this is a word that should be translated. "This is a word that should not be translated." - Okay, cool. - Yup. - All right. Once again, big thanks to Greg for that fascinating insight.