Make icons that work worldwide

Slides form my talk at the Iconathon 2013 organised by the Noun Project and the Wikimedia Foundation.

Transcript

1. Pau Giner Interaction Designer @pauginer Make icons that work worldwide Internationalisation (i18n) considerations for icons and symbols
2. We need our designs to work globally http://www.flickr.com/photos/elecnix/2353647508/ Igloos are great, but don't work everywhere
3. We need our designs to work globally Microsoft Internationalization Checklist Design icons and bitmaps to be meaningful and not offensive in your target markets, and to not contain text
4. Writing direction We map forward/back (or previous/next) based on our writing directions. When icons convey directionality, we need to think how they are adapted to different writing directions
5. Writing direction Send Record This looks strange in English: This happens all the time to speakers of right-to-left languages such as Hebrew or Arabic
6. Writing direction Mirrored version Partial mirroring Not affected LTR RTL LTR RTL Wrong Symmetric elements Non-directional elements
7. Fit with surrounding context Icons are often made assuming how they fit next to a label or text. Word length and line height varies for different languages. Edit തിരു ത്തുക തിരുത്തുക
8. Avoid local concepts Icons based on objects that users from other regions had never seen make them hard to understand http://en.wikipedia.org/wiki/File:SunView-Desktop.png An envelope is more international than a specific model of mailbox from the USA
9. Avoid local concepts Dangerous categories: hand gestures, animals, religion, humor, ethnicity, gender or slang.
10. Avoid text Needs to be translated Will either exceed the icon limits in other languages or be illegible due to space constraints of icons
11. Test with users Look for user diversity. Test with users from around the world. Don't show just the icon. Show mockups/prototype that include the icons in context to avoid feedback based on hypothetical situations, personal preferences...