Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Products for International Markets

1,209 views

Published on

Designing Products for International Markets
by Karolina Skalska & Dilara Cumhur

When a product is designed to serve for ten to twenty different countries with different languages, cultural backgrounds, technology limitations and habits, it is no longer enough to offer a product that is only translated from English. There are deeper research, analysis and thought process needed to bring down to each element of the product. In presentation Skali will cover anything from language, trough typographic rules, colors and symbols to localizing content for different markets.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing Products for International Markets

  1. 1. Designing products for international markets Karolina Skalska, Dilara Cumhur | Product Design May 3, 2017
  2. 2. What is internationalization?
  3. 3. It is no longer enough to simply offer a product translated in ten to twenty different languages. Users also want a product that acknowledges their unique cultural characteristics and business practices. - Jakob Nielsen in International User Interfaces “
  4. 4. Countries Languages Cultural background Technology User Habits Diversified Audience
  5. 5. Countries • Foodora
  6. 6. Countries • Foodora + Foodpanda
  7. 7. Languages English - UK English - AU English - CA Deutsch - DE Deutsch - AT Italiano Français Suomalainen Svenska Norsk Nederlands Română ქართული български 中文 ไทย русский 日本語 Bahasa ‫ﻋرﺑﻰ‬
  8. 8. Cultural Background • Religion & Traditions
  9. 9. Cultural Background • Emotions & Reactions Source
  10. 10. Cultural Background • Colors
  11. 11. Red • China
  12. 12. Red • Western cultures
  13. 13. White • Western cultures
  14. 14. White • Japan
  15. 15. Cultural Background • Symbols Being aware of some cultural or religious connotations can have an impact on decisions of iconography use.
  16. 16. Cultural Background • Hand signs USA Adopted by rockers as a sign for approval, and in essence, to “rock on” Italy, Brazil, Colombia, Portugal, Spain Showing this sign to a man means his wife is cheating on him
  17. 17. Cultural background • Hand signs Australia, UK, Canada A common playful gesture used by adults towards children, pretending to have stolen a child’s nose Turkey This is seen as offensive and rude
  18. 18. Technology • Speed, data plans & coverage Internet speed by country (mps) 25 20 15 10 5 0 S.Korea Ireland Hong Kong Japan Finland USA UK Canada Russia Australia France UAE Turkey M exico China S.Africa Brazil India Venezuela Source
  19. 19. User habits • How they use the product
  20. 20. Why do these matter?
  21. 21. Product break down • Basic elements Text Forms Units Symbols Images Colors Content Features
  22. 22. Text
  23. 23. Text Language Meaning Text length Font weight and size Text orientation Line height Capitalization Diacritical Punctuation Numbers
  24. 24. Text • Language
  25. 25. Text • Language
  26. 26. Text • Language
  27. 27. Text • Language For english readers Japanese websites appear to be more busy Asian typography does seem denser than Latin scripts. There is no spacing between words. Logographic characters convey more meaning - almost each character is a word Layout style represent billboard culture with its tendency to place a maximum amount of content within a minimum space Urban density in Asian cities is high. It finds its reflection in UI design
  28. 28. Text • Meaning
  29. 29. Text • Meaning "It's terrible; please send this feedback to your boss," “From its logo and name, Aibiying just sounds like it's competing against condom giant, Durex." "I'm embarrassed to even put the Airbnb app with the others; it looks like an app for sex products."
  30. 30. Text • Meaning 可口可乐 kě kǒu kě lè. “Can be tasty, can be happy”
  31. 31. Text • Length
  32. 32. Text • Length in different languages Press home to openEnglish Greek Πατήστε το σπίτι για να ανοίξει Arabic ‫ﻟﻔﺗﺢ‬ ‫ﯾﺿﻐط‬ Turkish Açmak için ana düğmeye basın Chinese 按下按钮 18 31 9 28 4
  33. 33. Text • Length in different languages 200 - 300%Up to 10 11 - 20 180 - 200% 21 - 30 160 - 180% 31 - 50 140 - 160% 51 - 70 151 - 170% Over 70 130% Original character length
  34. 34. Text • Length
  35. 35. Text • Weight & Size
  36. 36. Text • Weight and Size INTERNATIONALIZATION IN UI DESIGN. How to design for multiple countries, cultures and languages. Karolina Skalska 用戶界面設計國際化。 如何為多個國家,文化和語言做設計 石巧琪
  37. 37. Text • Weight and Size INTERNATIONALIZATION IN UI DESIGN. 用戶界面設計國際化。 How to design for multiple countries, cultures and languages. Karolina Skalska 如何為多個國家,文化和語言做 設計。 石巧琪
  38. 38. Text • Weight and Size Google Turkey Google Hong Kong
  39. 39. Text • Capitalization Consider: Capitalization rules specific for that country (german). Languages without capitalization.
  40. 40. Text • Orientation
  41. 41. Text • Orientation
  42. 42. Text • Orientation In Europe and the US text tends to run left-to-right. Japanese can run left-to-right, or top-to-bottom and right-to-left In Arabic and Hebrew the character run right-to-left. Additionally, in Arabic the characters change shape when combined with others.
  43. 43. Text • Orientation Read from left to rightText Icons Direction icons point left to right Numbers Numbers are read from left to right Timeline An illustrated sequence of events progres left to right Read from right to left Direction icons point right to left Numbers are read from left to right An illustrated sequence of events progres right to left LTR RTL → ←
  44. 44. Text • Orientation English
  45. 45. Text • Orientation Arabic
  46. 46. Text • Orientation
  47. 47. Text • Orientation
  48. 48. Text • Orientation
  49. 49. Text • Orientation
  50. 50. Text • Orientation
  51. 51. Text • Orientation
  52. 52. Text • Orientation
  53. 53. Text • Orientation • Not mirrored Numerals Phone numbers Clock Music notes Graphs Video playback Not directional images Not directional icons Maps
  54. 54. Text • Diacritics
  55. 55. Text • Diacritical Replacing special characters with characters without a mark may change the meaning of the word Work for reputation - content in the local language creates more trust. If you spell user name incorrectly they might not like you. It also increases line height
  56. 56. Text • Diacritics
  57. 57. Text • Line height English
  58. 58. Text • Line height Thai
  59. 59. Text • Punctuation
  60. 60. Text • Punctuation Question marks: French, English:? Spanish (both at the beginning and end): ¿? Greek: ; Periods: English: . Hindi: | Chinese: 。
  61. 61. Text • Numbers
  62. 62. Text • Numbers 1987654321,00 Polish
  63. 63. Text • Numbers 1 987 654 321,000 Canadian
  64. 64. Text • Numbers 1 987 654.321,000 German
  65. 65. Text • Numbers 1.987.654.321,000 Italian
  66. 66. Text • Numbers 1,987,654,321.00 Great Britain
  67. 67. Units
  68. 68. Units Currency Weights & measurements Time Date
  69. 69. Units Currency Weights & measurements Time Date
  70. 70. Text • Numbers 6,17 € Russia
  71. 71. Text • Numbers £ 6.17 Great Britain
  72. 72. Text • Numbers € 6,17 Germany
  73. 73. Units Currency Weights & measurements Time Date Google Maps (US) Google Maps (Turkey)
  74. 74. Units Currency Weights & measurements Time Date AM PM
  75. 75. Units D M Y Y M D D M Y European logic American logic Japanese logic Currency Weights & measurements Time Date DD.MM.YYYY MM/DD/YYYY YYYY-MM-DD
  76. 76. Units • Date format DMY MDY DMY MDY YMD YMD DMY MDY DMY YMD
  77. 77. Units • Date format • Calendars 5777Hebrew Thailand 2560 BE China 4715 Europe 2017 Hindu 3102 BC/BCE
  78. 78. Forms
  79. 79. Forms Addresses Names and titles Forms within sentence Country specific information
  80. 80. Forms Addresses Names and titles Forms within sentence Country specific information
  81. 81. Forms Addresses Names and titles Forms within sentence Country specific information
  82. 82. Forms Addresses Names and titles Forms within sentence Country specific information
  83. 83. Forms Addresses Names and titles Forms within sentence Country specific information Social security numbers Phone numbers Zip codes (97-200 vs 10247)
  84. 84. Symbols
  85. 85. Symbols Different parts of the world map based on your location
  86. 86. Colors
  87. 87. Colors Stock market (US) Stock market (China)
  88. 88. Content
  89. 89. Content Copy Messaging Featured item Jargons and Slogans
  90. 90. Content Copy Messaging Featured concept Jargons and Slogans Temporary housing Furnished apartments Corporate housing Extended stays Sublets Vacation rentals Serviced apartments Apart hotels Monthly rentals
  91. 91. Content Mc Donald’s USA Copy Messaging Featured concept Jargons and Slogans
  92. 92. Content Mc Donald’s Turkey Copy Messaging Featured concept Jargons and Slogans
  93. 93. Content Mc Donald’s China Copy Messaging Featured concept Jargons and Slogans
  94. 94. Content Philips USA Copy Messaging Featured concept Jargons and Slogans
  95. 95. Content Philips Hong Kong Copy Messaging Featured concept Jargons and Slogans
  96. 96. Content Philips Turkey Copy Messaging Featured concept Jargons and Slogans
  97. 97. Content Philips UAE Copy Messaging Featured concept Jargons and Slogans
  98. 98. Content Copy Messaging Featured concept Jargons and Slogans
  99. 99. Content Copy Messaging Featured item Jargons and Slogans
  100. 100. Features
  101. 101. Features • Adapting internationalization Lots of different languages: Eliminated the signature "U" is because the letter had no relevance in many of the countries where the company operates.
  102. 102. Features • Adapting inclusivity Signaling new trip request with a flashing light in addition to the existing audio notification.
  103. 103. Features • Adapting local availabilities Uber Turkey Uber India Beyond these examples of tangible goods, we see companies like Uber adapting to local-market characteristics — for example, you can “uber” a boat in Istanbul and pay cash for your ride in India.
  104. 104. Strength lies in the differences, not in similarities. - Stephen R. Covey, Educator of “7 Habits of Highly Effective People” “
  105. 105. Thank you.

×