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

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

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

April 26, 2013
Tweet

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ę.