and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu,...
Transcript of and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu,...
![Page 1: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/1.jpg)
Multilingual design and testingFor improving the Translate extension
Video recording of this talk available athttp://youtu.be/RFC2A_zTQ3s?t=44m57s
Pau GinerInteraction Designer @pauginer
![Page 2: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/2.jpg)
We need our designs to work globally
http://www.flickr.com/photos/elecnix/2353647508/
Igloos are great, but don't work everywhere
![Page 3: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/3.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 4: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/4.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 5: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/5.jpg)
Personas allow us to keep the design focused
Image sources:http://www.flickr.com/photos/bigd2112/5026685215/http://www.flickr.com/photos/tinou/393800080/http://www.flickr.com/photos/bigd2112/5028522377/http://www.flickr.com/photos/gregwest98/5299714861/http://www.flickr.com/photos/sbeebe/2849271610/ http://www.flickr.com/photos/lhoon/195520547/
![Page 6: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/6.jpg)
Embrace diversity with your personas
Casual translator from Italy● Look for untranslated French and Italian
messages in her project ● Verify the quality of translations for her project
New translator from India● Wants to correct a typo from the UI● Finds a message lacking translation
Expert Hebrew and Russian translator ● Translate for different projects● Review quality of Hebrew translations
Carla
Lev
Rakha
![Page 7: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/7.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 8: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/8.jpg)
Explore multiple ideas by sketching
![Page 9: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/9.jpg)
Iterate fast: 6-8 sketches in 5-10 minutes
Analog sketching Dharamshala, India1,457 m (4,780 ft) over sea level
Digital sketchingValencia, Spain15 m (49 ft) over sea level
Worldwide real-time sketching example:
![Page 10: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/10.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 11: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/11.jpg)
Consider i18n issues early in the designs
"Differences in language can introduce substantial layout and information architecture variability." - Luke Wroblewski
http://www.lukew.com/ff/entry.asp?152
![Page 12: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/12.jpg)
Consider i18n issues soon in the designs
Don't rely on specific paragraph metrics: Line-height, font weight, word length and font availability vary for different language/scripts.
![Page 13: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/13.jpg)
Consider i18n issues soon in the designs
Think how an UI will flex when localized in terms of length and directionality.
![Page 14: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/14.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 15: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/15.jpg)
Choose the right fidelity to simulate the experience
Linked image prototype for translating UI messages (8 languages)
![Page 16: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/16.jpg)
Choose the right fidelity to simulate the experience
HTML prototype for translating full-pages and proofreading (9 languages)
![Page 17: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/17.jpg)
Either low or hi-fidelity, target multiple languages
We used Evolus pencil to create clickable prototypesImages were generated from SVG templates:
msg4-trans=не содержит ни одной буквы
![Page 18: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/18.jpg)
Either low or hi-fidelity, target multiple languages
For HTML prototypes we used jquery.i18n
![Page 19: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/19.jpg)
5 stepsPersonas & scenariosExplore solutionsi18n guidelinesPrototypeTest with users
![Page 20: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/20.jpg)
"If you want to know what happens when you throw a stone into a pond, it is infinitely better to make a trial and film it than to attempt to theorize about it." - René Thom, Physicist
Imagining using something ≠ actually using it
![Page 21: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/21.jpg)
18 Users
20 Languages 10 LocationsChinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish, German, Tetum, Latin, Breton, Malayalam, Gujarati, Tamil, Hindi, Telugu, and English
Hong Kong, Kenya, France, New Zealand, Japan, Luxembourg, Italy, Germany, Russia, and India
Test globally
3-5 tests per round
To volunteer for participation, visit http://goo.gl/E5dvO
![Page 22: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/22.jpg)
Focus on the problems that happen in practice
Observing the different ways users tried to search for a language showed that making search flexible was worth it.
Autocompletion
Cross-language Typos allowed ISO codes
![Page 23: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/23.jpg)
Get new ideas
A hardest translation category was created after observing users skipping complex translations (making the "Require revision" option useless).
![Page 24: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/24.jpg)
Better understand users
Once the user has experienced the UI, the conversation becomes more in context.
![Page 25: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/25.jpg)
Just now is a good time to start testing
See the problems users have using the product makes sense at any stage of the development: from prototypes of future features to existing products
![Page 26: and testing - Wikimedia · 18 Users 20 Languages 10 Locations Chinese, French, Swahili, Kikuyu, Kalenjin, Macedonian, Russian, Serbo-Croatian, Japanese, Luxembourgish, Italian, Spanish,](https://reader033.fdocuments.net/reader033/viewer/2022050512/5f9cd5970bc0e44da64df705/html5/thumbnails/26.jpg)
Thanks!
PrototypesTranslation workflow: http://goo.gl/OzVQxFull-page HTML: http://goo.gl/Li9oJ#side-hi
SpecsTranslate UX: http://goo.gl/yFxVJMobile translate: http://goo.gl/DuXOu
ToolsEvolus pencil: http://pencil.evolus.vn/MyPaint: http://mypaint.intilinux.com/