Designing user experience for multilingual websites (UXcamp Europe 2013)

(with Remy Blaettler)

Transcript

1. Gestaltung des Nutzungserlebnisses

   für mehrsprachige Websites
   Gunnar Bittersmann @g16n
   Rémy Blättler @swissghostrider
   

   View Slide

2. View Slide

3. Designing user experience

   for multilingual websites
   Gunnar Bittersmann @g16n
   Rémy Blättler @swissghostrider
   

   View Slide

4. View Slide

5. Проектирование опыта взаимодействия

   для мультиязычных веб-сайтов
   Гуннар Биттерсман @g16n
   Реми Блэттлер @swissghostrider
   

   View Slide

6. View Slide

7. Designing user experience

   for multilingual Web sites
   Designing multilingual websites

   for user experience
   Gunnar Bittersmann @g16n
   user experience
   multilingual websites
   

   View Slide

8. View Slide

9. Localization ≠ Internationalization
   

   View Slide

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
    

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

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
    

    View Slide

15. RTFM
    

    View Slide

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
    

    View Slide

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

    View Slide

18. Berlin
    

    View Slide

19. View Slide

20. Use UTF-8.
    Ever.
    Everywhere.
    

    View Slide

21. Używam wspaniałego webfonta.
    

    View Slide

22. First name
    Last name
    Given name
    Family name
    Ferenc
    Liszt
    Liszt Ferenc
    Björk
    Guðmundsdóttir
    Steven
    Van  Zandt
    Ludwig
    van  Beethoven
    

    View Slide

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
    

    View Slide

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

    View Slide

25. Colors, Images
    

    View Slide

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

    View Slide

27. webplatform.org
    

    View Slide

28. Ludwig  van  Beethoven
    Danke.
    

    View Slide