A presentation at UXcamp Europe 2013 in June 2013 in Berlin, Germany by Gunnar Bittersmann
Gestaltung des Nutzungserlebnisses für mehrsprachige Websites Gunnar Bittersmann @g16n Rémy Blättler @swissghostrider
Designing user experience for multilingual websites Gunnar Bittersmann @g16n Rémy Blättler @swissghostrider
Проектирование опыта взаимодействия для мультиязычных веб-сайтов Гуннар Биттерсман @g16n Реми Блэттлер @swissghostrider
user experience Designing multilingual websites websites for multilingual user experience Web sites Gunnar Bittersmann @g16n
Localization ≠ Internationalization
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
Internationalization designing a system to be prepared to make localization possible and easy.
“ Internationalization is not a feature. It is an architecture.” —Addison Phillips, Chair W3C Internationalization WG
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
RTFM
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
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
Berlin
Use UTF-8. Ever. Everywhere.
Używam wspaniałego webfonta.
Given name First name Björk Ferenc Steven Ludwig Last name Family name Liszt Guðmundsdóttir van Beethoven Van Zandt Liszt Ferenc
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
Email иван@россия.рф <input type=”email”/>
Colors, Images
Acknowledgement Thanks to Richard Ishida for the many articles http://www.w3.org/International
webplatform.org
Danke. Ludwig van Beethoven
View Designing user experience for multilingual websites on Notist.
Dismiss
(with Remy Blaettler)
Here’s what was said about this presentation on social media.
(Now with image!) So @yatil showed up at #uxce13 after all. At least on @g16n's slide. ;) #l10n #i18n pic.twitter.com/vWQVnUYNQf— Karen Mardahl (@kmdk) June 23, 2013
(Now with image!) So @yatil showed up at #uxce13 after all. At least on @g16n's slide. ;) #l10n #i18n pic.twitter.com/vWQVnUYNQf
Designing UX for multi-lingual Websites: Avoid using flags for language selection @g16n @swissghostrider #uxce13— Stefan Meyer (@webclue) June 23, 2013
Designing UX for multi-lingual Websites: Avoid using flags for language selection @g16n @swissghostrider #uxce13
.@webclue @swissghostrider Why you should not use flags for languages http://t.co/MzCQOyj1Gs #uxce13— Gunnar Bittersmann (@g16n) June 23, 2013
.@webclue @swissghostrider Why you should not use flags for languages http://t.co/MzCQOyj1Gs #uxce13
UX for multilingual sites at #uxce13. Less fun intro w/o pl (de/en/ru this time) but more fun w/ @swissghostrider. Changed Fiat for Trabant.— Gunnar Bittersmann (@g16n) June 23, 2013
UX for multilingual sites at #uxce13. Less fun intro w/o pl (de/en/ru this time) but more fun w/ @swissghostrider. Changed Fiat for Trabant.
You can download our "Multilingual Websites" slides from http://t.co/qCKdEcC5oL and http://t.co/NeowvkjF3y #uxce13 @g16n— Remy Blaettler (@remyblaettler) June 23, 2013
You can download our "Multilingual Websites" slides from http://t.co/qCKdEcC5oL and http://t.co/NeowvkjF3y #uxce13 @g16n
Plug for http://t.co/onnvPYke17 from @g16n who started a page on localization/internationalization there. Join him! #uxce13 #l10n #i18n— Karen Mardahl (@kmdk) June 23, 2013
Plug for http://t.co/onnvPYke17 from @g16n who started a page on localization/internationalization there. Join him! #uxce13 #l10n #i18n
Sheldon Cooper would like this event. Currently: "Fun with flags" :-) #uxce13— Michael Grundkötter (@Grundi2) June 23, 2013
Sheldon Cooper would like this event. Currently: "Fun with flags" :-) #uxce13
Feeling at home in this discussion: Designing UX for multi-lingual websites with @g16n @swissghostrider #uxce13 #l10n #i18n #techcomm— Karen Mardahl (@kmdk) June 23, 2013
Feeling at home in this discussion: Designing UX for multi-lingual websites with @g16n @swissghostrider #uxce13 #l10n #i18n #techcomm