Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing user experience for multilingual websites (UXcamp Europe 2013)

Designing user experience for multilingual websites (UXcamp Europe 2013)

(with Remy Blaettler)

Gunnar Bittersmann

June 23, 2013

More Decks by Gunnar Bittersmann

Other Decks in Design


  1. Gestaltung des Nutzungserlebnisses
 für mehrsprachige Websites Gunnar Bittersmann @g16n Rémy

    Blättler @swissghostrider
  2. None
  3. Designing user experience
 for multilingual websites Gunnar Bittersmann @g16n Rémy

    Blättler @swissghostrider
  4. None
  5. Проектирование опыта взаимодействия
 для мультиязычных веб-сайтов Гуннар Биттерсман @g16n Реми

    Блэттлер @swissghostrider
  6. None
  7. Designing user experience
 for multilingual Web sites Designing multilingual websites

    for user experience Gunnar Bittersmann @g16n user experience multilingual websites
  8. None
  9. Localization ≠ Internationalization

  10. 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
  11. Internationalization designing a system to be prepared to make localization

    possible and easy.
  12. None
  13. Internationalization is not a feature. It is an architecture.” —Addison

    Phillips, Chair W3C Internationalization WG “
  14. internationalization i1ternationalization i2ernationalization i3rnationalization i4nationalization i5ationalization i6tionalization i7ionalization i8onalization i9nalization

    i10alization i11lization i12ization i13zation i14ation i15tion i16ion i17on i18n internationalization 18 localization 10 L10n a11y g16n accessibility 11 Gunnar Bittersmann 16
  15. RTFM

  16. 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
  17. 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 ᬊየ िहन्दी ةيبرعلا
  18. Berlin

  19. None
  20. Use UTF-8. Ever. Everywhere.

  21. Używam wspaniałego webfonta.

  22. First name Last name Given name Family name Ferenc Liszt

    Liszt Ferenc Björk Guðmundsdóttir Steven Van  Zandt Ludwig van  Beethoven
  23. How shall we call you? Björk  Guðmundsdóttir Liszt  Ferenc Name

    Björk Ferenc Steven  Van  Zandt Ludwig  van  Beethoven Beethoven Little  Steven
  24. Email <input  type="email"/> иван@россия.рф

  25. Colors, Images

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

  27. webplatform.org

  28. Ludwig  van  Beethoven Danke.