Designing user experience for multilingual websites

A presentation at UXcamp Europe 2013 in June 2013 in Berlin, Germany by Gunnar Bittersmann

Slide 1

Slide 1

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

Slide 2

Slide 2

Slide 3

Slide 3

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

Slide 4

Slide 4

Slide 5

Slide 5

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

Slide 6

Slide 6

Slide 7

Slide 7

user experience Designing multilingual websites websites for multilingual user experience Web sites Gunnar Bittersmann @g16n

Slide 8

Slide 8

Slide 9

Slide 9

Localization ≠ Internationalization

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Slide 13

Slide 13

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

Slide 14

Slide 14

i2ernationalization i8onalization i15tion i9nalization i17on i16ion i3rnationalization i4nationalization i12ization i11lization i18n internationalization i5ationalization i6tionalization i10alization i7ionalization i13zation i14ation i1ternationalization internationalization 18 L10n localization 10 a11y accessibility 11 g16n Gunnar Bittersmann 16

Slide 15

Slide 15

RTFM

Slide 16

Slide 16

HTTP header 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  

Slide 17

Slide 17

Language negotiation English polski deutsch русский español français 中文 िहन्दी ‫العربية‬ • Provide your content in a language that the user (most likely) understands • Provide the option to change the language

Slide 18

Slide 18

Berlin

Slide 19

Slide 19

Slide 20

Slide 20

Use UTF-8. Ever. Everywhere.

Slide 21

Slide 21

Używam wspaniałego webfonta.

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

Email иван@россия.рф <input  type=”email”/>

Slide 25

Slide 25

Colors, Images

Slide 26

Slide 26

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

Slide 27

Slide 27

webplatform.org

Slide 28

Slide 28

Danke. Ludwig  van  Beethoven