Designing user experience for multilingual websites (Front-Trends 2013)

Transcript

1. Projektowanie doświadczenia " użytkownika dla witryn wielojęzycznych Gunnar Bittersmann @g16n

2. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by

   Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

3. Designing user experience" for multilingual websites Gunnar Bittersmann @g16n

4. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by

   Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

5. Gestaltung des Nutzungserlebnisses" für mehrsprachige Websites Gunnar Bittersmann @g16n

6. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by

   Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

7. Designing user experience" for multilingual websites Gunnar Bittersmann @g16n

8. Designing multilingual websites" for user experience Gunnar Bittersmann @g16n

9. None

10. Localization ≠ Internationalization

11. Localization adaptation of a system for a specific region • 

    language related aspects –  translations –  different characters and scripts •  cultural aspects –  units, currencies –  time and date formats –  meaning of colors and symbols –  suitability of images •  legal requirements

12. Internationalization designing a system to be prepared to make localization

    possible and easy.

13. Photograph by Mat Connolley Taken from Wikimedia Commons

14. Internationalization is not a feature. It is an architecture.” —Addison

    Phillips, Chair W3C Internationalization WG “

15. i18n internationalization 18 localization 10 L10n a11y g16n accessibility 11

    Gunnar Bittersmann 16

16. International websites Website for an international target audience monolingual multilingual

    same content different content

17. RTFM Photographs by Gunnar Bittersmann

18. Select your language English Polish German Russian Spanish French Chinese

19. Select your language English polski deutsch русский español français தจ

20. Select your language English ▼

21. Berlin Photographs by Gunnar Bittersmann

22. Warszawa Photographs by Gunnar Bittersmann

23. Select your language English polski deutsch русский español français தจ

      ह"दी !"#$%&ا ?
24. None

25. GET  /index.html  HTTP/1.1   Host:  example.net   User-­‐Agent:  Mozilla/5.0  (Macintosh;

     Intel  Mac  OS  X  10.8;  rv: 20.0)  Gecko/20100101  Firefox/20.0   Accept:  text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8   Accept-­‐Language:  en-­‐us,en;q=0.8,de-­‐de;q=0.6,de;q=0.4,pl;q=0.2   Accept-­‐Encoding:  gzip,  deflate     HTTP header
26. None
27. None
28. None

29. Language negotiation •  Provide your content in a language that

    the user (most likely) understands •  Provide the option to change the language English polski deutsch русский español français 中文 ह"दी !"#$%&ا
30. None
31. None

32. Use UTF-8. Ever. Everywhere.

33. Używam wspaniałego webfonta.

34. First name Last name Ferenc   Liszt   Liszt Ferenc!

35. Ferenc   Liszt   Liszt Ferenc! Given name Family name

36. Van  Zandt   Given name Family name Steven  

37. van  Beethoven   Given name Family name Ludwig  

38. Guðmundsdóttir   Given name Family name Björk  

39. How shall we call you? Björk  Guðmundsdóttir   Name Björk

     

40. How shall we call you? Ludwig  van  Beethoven   Name

    Beethoven  

41. How shall we call you? Steven  Van  Zandt   Name

    Little  Steven  

42. How shall we call you? Liszt  Ferenc   Name Ferenc

     

43. Email <input  type="email"/>   иван@россия.рф  

44. Colors, Images

45. Acknowledgement Thanks to Richard Ishida for the many articles http://www.w3.org/International

     

46. webplatform.org

47. Photographs by Emmanuel Huybrechts (top left), Mat Connolley (bottom left),

    painting by Joseph Karl Stieler, taken from Wikimedia Commons; center top and bottom photographs by Gunnar Bittersmann Ludwig  van  Beethoven   Dziękuję.