10
#Build2016 Windows 10 apps Designing for Global Customers Stéphanie Schuh Cameron Lerum

Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

Embed Size (px)

Citation preview

Page 1: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

#Build2016

Windows 10 appsDesigning for Global CustomersStéphanie SchuhCameron Lerum

Page 2: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

Top 3 international design principles

Overall UI

Individual UI elements Vertical text truncationHorizontal text truncationReadable, usable, no overlaps of elements, no missing UI elements, etc.

Date, time, calendars, digits, units, phone numbers, addresses, etc.

Cultural elements

Page 3: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

Top 3 international coding principles

msg = rm.GetString(“HelloID”)

Plurals vary across languages

Avoid string concatenation

Do not hard-code strings

Not always -s

Several plurals

Different words

msg = “Hello world"

$“The {Color} house.”“The {0} house.”“La maison {0}.”

en-US resw file

fr-FR resw file

Page 4: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit
Page 5: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

• Area expands with text expansion • No text wrapping• Word truncates when max space is

reached

• Digits • Separator (not always a

period)• Miles

Page 6: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

• Text wraps as text expands in AppBar• Not enough space between elements • Loss in legibility

Page 7: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

One UI element shrinks as another expands > Hard to read.

One UI element disappears as another expands > Lost info or functionality

UI elements> Ok in English

Page 8: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

Demo

Multilingual App Toolkit

Page 9: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

Designing for global customers

Plurals

String concatenationDesign & code for global customers

aka.ms/intl

Hard-coded strings

Overall UIe.g. readability, usability

Individual UI elements

e.g. truncation, wrapping

Cultural elementse.g. formats

Simplified Localization

workflow

aka.ms/MATinstallv4Localize Publish

Increaseglobal reach

Get MAT

Page 10: Build 2016 - P543 - Windows 10 UWP: Localize Using the Multilingual App Toolkit

• http://aka.ms/intl • http://aka.ms/MATinstall • Re-visit Build on Channel 9.• Continue your education at

Microsoft Virtual Academy online.

References