$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

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