Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make icons that work worldwide

2b33f316bf257d596758eecfdea2a678?s=47 Pau Giner
April 06, 2013

Make icons that work worldwide

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

2b33f316bf257d596758eecfdea2a678?s=128

Pau Giner

April 06, 2013
Tweet

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...