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

Video: https://vimeo.com/68680322

Transcript

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

   View Slide

2. Photograph by Emmanuel Huybrechts
   Taken from Wikimedia Commons
   Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler
   Taken from Wikimedia Commons
   

   View Slide

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

   View Slide

4. Photograph by Emmanuel Huybrechts
   Taken from Wikimedia Commons
   Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler
   Taken from Wikimedia Commons
   

   View Slide

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

   View Slide

6. Photograph by Emmanuel Huybrechts
   Taken from Wikimedia Commons
   Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler
   Taken from Wikimedia Commons
   

   View Slide

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

   View Slide

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

   View Slide

9. View Slide

10. Localization ≠ Internationalization
    

    View Slide

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
    

    View Slide

12. Internationalization
    designing a system to be prepared to make
    localization possible and easy.
    

    View Slide

13. Photograph by Mat Connolley
    Taken from Wikimedia Commons
    

    View Slide

14. Internationalization is not a feature.
    It is an architecture.”
    —Addison Phillips, Chair W3C Internationalization WG
    “
    

    View Slide

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

    View Slide

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

    View Slide

17. RTFM
    Photographs by Gunnar Bittersmann
    

    View Slide

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

    View Slide

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

    View Slide

20. Select your language
    English ▼
    

    View Slide

21. Berlin
    Photographs by Gunnar Bittersmann
    

    View Slide

22. Warszawa
    Photographs by Gunnar Bittersmann
    

    View Slide

23. Select your language
    English
    polski
    deutsch
    русский
    español
    français
    தจ  
    ह"दी
    !"#$%&ا
    ?
    

    View Slide

24. View Slide

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
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

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 中文 ह"दी !"#$%&ا
    

    View Slide

30. View Slide

31. View Slide

32. Use UTF-8.
    Ever.
    Everywhere.
    

    View Slide

33. Używam wspaniałego webfonta.
    

    View Slide

34. First name
    Last name
    Ferenc  
    Liszt  
    Liszt Ferenc!
    

    View Slide

35. Ferenc  
    Liszt  
    Liszt Ferenc!
    Given name
    Family name
    

    View Slide

36. Van  Zandt  
    Given name
    Family name
    Steven  
    

    View Slide

37. van  Beethoven  
    Given name
    Family name
    Ludwig  
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Email
     
    иван@россия.рф  
    

    View Slide

44. Colors, Images
    

    View Slide

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

    View Slide

46. webplatform.org
    

    View Slide

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

    View Slide