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

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

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

Gunnar Bittersmann

April 26, 2013
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

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