Σχεδιασμός για διεθνοποίηση

Δημιουργήστε καλύτερα προϊόντα για τους ανθρώπους σε όλο τον κόσμο

Φανταστείτε ότι δοκιμάζετε μια νέα εφαρμογή για πρώτη φορά. Λάβει σχόλια από ανθρώπους στο Twitter. Λένε ότι είναι λαμπρό. Η ζωη ΑΛΛΑΖΕΙ. Γοητευτικός.

Ξεκινάτε και δείτε αυτό:

Χμμ. Αυτο ειναι παραξενο. Υπάρχει ένα βίντεο επάνω, αλλά οι λεζάντες είναι σε μια γλώσσα που δεν καταλαβαίνετε. Η διατύπωση είναι περίεργη και το κείμενο του κουμπιού δεν ταιριάζει ούτε στο κουμπί. Πώς θα μπορούσαν οι άνθρωποι να πιστεύουν ότι αυτό είναι καλό;

Λοιπόν, αποδεικνύεται ότι αυτή η εφαρμογή δεν σχεδιάστηκε στη γλώσσα σας. Σχεδιάστηκε σε Elvish, μετά μεταφράστηκε στη γλώσσα σας. Οι περισσότεροι άνθρωποι χρησιμοποιούν την έκδοση του Elvish, έτσι δεν ξέρουν πώς φαίνονται τα πράγματα στη γλώσσα σας.

Πιστέψτε το ή όχι, αυτό είναι που οι μη-αγγλικοί χρήστες πρέπει να αντιμετωπίσουν ξανά και ξανά. Επειδή πολλές εφαρμογές έχουν σχεδιαστεί μόνο με γνώμονα την αγγλική γλώσσα, ορισμένες λεπτομέρειες σχεδίου μπορούν να χαθούν στη μετάφραση αν δεν είστε προσεκτικοί.

Για να αποφύγετε να τρέχετε σε καταστάσεις όπως η παραπάνω, εδώ είναι μερικές συμβουλές που πρέπει να έχετε κατά νου όταν σχεδιάζετε διεθνοποίηση.

1. Αφήστε χώρο για μεγαλύτερες μεταφράσεις

Το πιο κοινό πρόβλημα διεθνοποίησης δεν έχει αρκετό χώρο για μεταφράσεις.

Σκεφτείτε την ετικέτα "Νέο!" Για παράδειγμα. Στα αγγλικά, είναι 4 χαρακτήρες με το θαυμαστικό. Αλλά στα γαλλικά, είναι 9 χαρακτήρες: "Nouveau!" Αυτό είναι διπλάσιο από το μέγεθος της αγγλικής γλώσσας. Και ναι, στα γαλλικά, πρέπει να υπάρχει ένας χώρος πριν από τα θαυμαστικά.

Εάν το σχέδιό σας περιλαμβάνει λέξεις, βεβαιωθείτε ότι έχετε αρκετό χώρο για να εγκαταστήσετε περισσότερες μεταφράσεις. Εάν δεν το κάνετε, ίσως καταλήξετε σε επικαλυπτόμενο κείμενο ή κείμενο που αποκόπτεται.

Ωχ. Αισθάνομαι λίγο στενός εδώ.

Ένας τρόπος που εκτιμώ τα μήκη μετάφρασης είναι η χρήση των υπολογιστικών φύλλων Google. Χρησιμοποιώντας τη λειτουργία GoogleTranslate, μπορώ να βρω τις μεταφράσεις μηχανών σε μια δέσμη γλωσσών ταυτόχρονα. Μέσα σε δευτερόλεπτα, μπορώ να κάνω μια γενική ιδέα για το πόσο καιρό θα είναι οι μεταφράσεις σε κάθε γλώσσα.

Ένα εργαλείο που έκανα στα υπολογιστικά φύλλα Google για να υπολογίσω τα μήκη μετάφρασης

Ο ιστότοπος της παγκοσμιοποίησης της IBM διαθέτει ένα χρήσιμο γράφημα που δείχνει πόση επιπλέον χώρο χρειάζεται για τη μετάφραση από τα αγγλικά:

2. Αποφύγετε να βάζετε κείμενο σε στενές στήλες

Οι στήλες είναι ένας πολύ καλός τρόπος για να οργανώσετε το περιεχόμενό σας. Δημιουργούν ισορροπία, δομή και ρυθμό. Λειτουργούν καλά με το προσεκτικά κατασκευασμένο σύστημα πλέγματος.

Αλλά τι συμβαίνει όταν το μήκος του κειμένου σας είναι απρόβλεπτο; Λοιπόν, αυτό συμβαίνει κατά τη μετάφραση. Οι επικεφαλίδες σας 1 γραμμής μπορούν να αναπτυχθούν σε 2 ή 3 γραμμές και η όμορφα ισορροπημένη διάταξη σας μπορεί να σπάσει ξαφνικά.

Οι μεταφράσεις περιτυλίγματος μπορούν να καταστρέψουν την ημέρα του σχεδιαστή.

Όταν βάζετε κείμενο σε στενές στήλες, υπάρχει μια καλή πιθανότητα ορισμένες μεταφράσεις να τυλίγονται σε περισσότερες γραμμές. Μια ασφαλέστερη επιλογή είναι να χρησιμοποιήσετε ευρείες σειρές αντί για στενές στήλες. Αυτό θα δώσει στο κείμενό σας μεγαλύτερο περιθώριο ανάπτυξης χωρίς να σπάσει τη διάταξη σας.

3. Μην ενσωματώνετε κείμενο σε εικόνες

Αν ο σχεδιασμός σας περιλαμβάνει μια εικόνα με κείμενο σε αυτό, μπορεί να είναι ένας εφιάλτης για να μετατρέψει αυτή την εικόνα σε μια δέσμη γλωσσών.

Οι μεταφραστές μπορούν να μεταφράσουν κάθε ένα από τα στρώματα κειμένου σε ένα αρχείο Photoshop ή Sketch, αλλά παίρνει βρώμικο γιατί μπορεί να χρειαστεί να προσαρμόσετε τη διάταξη σε κάθε γλώσσα για να φιλοξενήσετε μεγαλύτερες μεταφράσεις.

Ακολουθούν μερικές καλύτερες επιλογές:

  • Χρήση γραμμών αντί κειμένου: Μερικές φορές δεν χρειάζεται να χρησιμοποιείτε πραγματικές λέξεις για να μεταδώσετε το μήνυμά σας. Είναι εκπληκτικό αυτό που μπορούν να κάνουν μερικές ασαφείς γραμμές.
  • Επικάλυψη κειμένου με CSS: Το κείμενο στον πράσινο κύκλο παρακάτω δεν είναι στην πραγματικότητα μέρος της εικόνας. Το κείμενο μόλις προστέθηκε στην κορυφή χρησιμοποιώντας το CSS.

4. Μην δημιουργείτε προτάσεις με στοιχεία UI

Είναι σύνηθες για τους σχεδιαστές να μετακινούν διάφορα στοιχεία UI γύρω για να δουν ποιες διατάξεις λειτουργούν καλύτερα. "Ας βάλουμε αυτό το πεδίο κειμένου εδώ προς τα δεξιά. Ας μετακινήσουμε αυτό το αναπτυσσόμενο μενού προς τα αριστερά. "

Αλλά πρέπει να είσαι ιδιαίτερα προσεκτικός όταν δουλεύεις με λόγια. Αν προσπαθήσετε να δημιουργήσετε προτάσεις, συνδυάζοντας κείμενο με κουμπιά, κουτάκια ή αναπτυσσόμενα μενού, συχνά θα καταλήξετε σε πολλά προβλήματα.

Αυτό μπορεί να γίνει ακατάλληλο για διεθνοποίηση.

Υπάρχουν μερικοί λόγοι για τους οποίους αυτό αποτελεί πόνο για τη διεθνοποίηση:

  • Διαφορετική σειρά λέξεων: Οι γλώσσες έχουν διαφορετικούς τρόπους παραγγελίας λέξεων. Αν μεταφράσετε "Αγοράστε 3 πουκάμισα" στα ιαπωνικά, η λέξη "Αγορά" θα μεταφερθεί στο τέλος της πρότασης. Αν το σχέδιό σας εξαρτάται από τη λέξη να είναι με μια συγκεκριμένη σειρά, δεν θα λειτουργήσει σε κάθε γλώσσα.
  • Ολοκλήρωση: Στην αγγλική γλώσσα έχουμε μια μοναδική μορφή και έναν πληθυντικό τύπο για κάθε ουσιαστικό: "1 εικόνα" και "__ εικόνες". Αλλά στα ρωσικά υπάρχουν 3 πιθανές μορφές. Επομένως, εάν ένας χρήστης χρειάζεται να εισαγάγει έναν αριθμό στη μέση μιας πρότασης, αυτή η πρόταση μπορεί να καταλήξει σε ένα γραμματικό σφάλμα ανάλογα με τον αριθμό που εισάγει.
  • Φύλο: Ορισμένες γλώσσες έχουν συγκεκριμένες μορφές για τα ουσιαστικά και τα επίθετα. Στα γαλλικά, η λέξη "μεγάλο" θα μπορούσε να μεταφραστεί ως "grand", "grande", "grands" ή "grandes" ανάλογα με το πράγμα που περιγράφει. Εάν τοποθετήσετε ένα αναπτυσσόμενο μενού σε μια πρόταση, αυτή η πρόταση μπορεί να καταλήξει σε ένα γραμματικό σφάλμα ανάλογα με τις λέξεις γύρω από αυτήν.

Τι κάνεις λοιπόν; Μια καλύτερη εναλλακτική λύση είναι να κρατήσετε το στοιχείο UI έξω από την πρόταση:

Είναι καλύτερα να αφήσετε τα στοιχεία UI έξω από την πρόταση.

5. Προσέξτε για μεταφορές

Ο σχεδιασμός του προϊόντος είναι όλα σχετικά με τις μεταφορές. Κάθε εικονίδιο, κάθε κουμπί και κάθε αλληλεπίδραση είναι μια μεταφορά για κάτι στον φυσικό κόσμο. Το εικονίδιο Dropbox είναι μια μεταφορά για ένα κουτί αποθήκευσης. Το drag-and-drag είναι μια μεταφορά για να πάρεις τα πράγματα με το χέρι σου.

Αλλά μερικές μεταφορές σημαίνουν διαφορετικά πράγματα σε διαφορετικούς πολιτισμούς. Στις Ηνωμένες Πολιτείες, μια κουκουβάγια αντιπροσωπεύει τη σοφία. Στη Φινλανδία και την Ινδία, μια κουκουβάγια μπορεί να αντιπροσωπεύει ανόητο.

Τα αντικείμενα μπορούν επίσης να φαίνονται διαφορετικά σε όλο τον κόσμο. Για τους περισσότερους Αμερικανούς, είναι αρκετά σαφές ότι το παρακάτω αντικείμενο είναι ένα γραμματοκιβώτιο. Αλλά αυτό δεν είναι αυτό που οι ταχυδρομικές θυρίδες μοιάζουν σε όλο τον κόσμο. Οι περισσότερες χώρες δεν βάζουν σημαίες στα γραμματοκιβώτια τους, επομένως αυτή η μεταφορά ίσως να μην έχει νόημα σε όλους.

Αυτό δεν είναι αυτό που ένα mailbox μοιάζει με τα περισσότερα μέρη του κόσμου.

Εάν είναι δυνατόν, είναι καλή ιδέα να κάνετε κάποια έρευνα σχετικά με τις μεταφορές, πριν τις συμπεριλάβετε στο σχεδιασμό σας. Στο Dropbox, συχνά θα ζητάμε από την ομάδα διεθνοποίησης να αναθεωρήσει εικονίδια ή εικονογραφήσεις εάν ανησυχούμε για το πώς θα γίνουν αντιληπτές διεθνώς.

6. Χρησιμοποιήστε ονόματα περιγραφικών χαρακτηριστικών

Από τη σκοπιά του μάρκετινγκ, είναι δελεαστικό να επινοήσουμε ονόματα χαρακτηριστικών διασκέδασης που να κάνουν τους ανθρώπους να μιλάνε. Αλλά τα ονόματα διασκέδασης είναι δύσκολο να μεταφραστούν και μπορεί να έχουν νόημα σε άλλες γλώσσες.

Πριν από χρόνια, το Dropbox εισήγαγε ένα χαρακτηριστικό που επιτρέπει στους χρήστες να έχουν απεριόριστο ιστορικό εκδόσεων σε ένα αρχείο. Αρχικά ονομάσαμε αυτό το χαρακτηριστικό "Packrat".

Η επιλογή

Ενώ το "Packrat" ίσως ήταν ένα έξυπνο όνομα για ένα αμερικανικό κοινό, δεν είχε νόημα σε άλλες γλώσσες. Το εικονίδιο του αρουραίου δίπλα του έκανε τα πράγματα ακόμα πιο συγκεχυμένα. Ευτυχώς, αλλάξαμε το όνομα στο "Ιστορικό εκτεταμένης έκδοσης", το οποίο ήταν πολύ πιο εύκολο να μεταφραστεί.

Για να αποφύγετε προβλήματα μετάφρασης, είναι ασφαλέστερο να χρησιμοποιείτε περιγραφικούς όρους για ονόματα χαρακτηριστικών. Οι περιγραφικοί όροι μπορεί να φαίνονται λίγο βαρετοί, αλλά είναι καλύτεροι για μετάφραση και χρηστικότητα.

7. Παρέχετε εναλλακτικές για μετάφραση

Γενικά, όταν γράφετε λέξεις που θα μεταφραστούν, είναι καλύτερο να γράψετε σε ένα στυλ που είναι ακριβές, κυριολεκτικό και ουδέτερο. Ωστόσο, μπορεί να υπάρχουν ειδικές στιγμές branding όταν θέλετε να είστε λίγο πιο παιχνιδιάρικο.

Για περιπτώσεις όπως αυτό, θα γράψουμε μερικές φορές δύο εκδόσεις: μία έκδοση για τα αγγλικά και μια εναλλακτική έκδοση για μετάφραση.

Μπορείτε να το κάνετε προσθέτοντας σχόλια για μεταφραστές για οτιδήποτε είναι δύσκολο να μεταφραστεί. Σήμερα γράφουμε ετικέτες για αυτοκόλλητα που χρησιμοποιούνται στο Dropbox. Αποφασίσαμε να χρησιμοποιήσουμε το "OMG cat" ως ετικέτα για το αυτοκόλλητο παρακάτω.

Ω Θεέ μου! Είναι γάτα OMG.

Όταν οι μεταφραστές εργάζονται σε αυτό, θα δουν ένα σχόλιο λέγοντας ότι αυτό μπορεί να μεταφραστεί και ως "Έκπληξη γάτα". Έτσι, οι μεταφραστές έχουν την ελευθερία να χρησιμοποιούν μια παιχνιδιάρικη μετάφραση, αλλά μπορούν να επιστρέψουν σε μια πιο κυριολεκτική μετάφραση εάν χρειαστεί.

Ελπίζω ότι βρήκατε κάποιες από αυτές τις συμβουλές χρήσιμες. Εάν έχετε άλλες συμβουλές σχεδίασης για διεθνοποίηση, μην διστάσετε να κάνετε κουδούνισμα παρακάτω, ώστε όλοι να μάθουμε ο ένας από τον άλλον. Με τη διάδοση της λέξης για τη διεθνοποίηση, ελπίζω ότι μπορούμε όλοι να συμβάλουμε στη δημιουργία καλύτερων προϊόντων για τους ανθρώπους σε όλο τον κόσμο.

Θέλετε περισσότερα από την ομάδα Dropbox Design; Ακολουθήστε τη δημοσίευσή μας, το Twitter και το Dribbble. Θέλετε να κάνετε μαγεία μαζί; Προσλαμβάνουμε!

Πολλές ευχαριστίες σε όλους όσοι βοήθησαν να πούμε αυτή την ιστορία, όπως οι Fanny Luor, Jensen Hong, Adam Sawyer, Dawn Lee, Andrea Drugay, Anthony Kosner, Dave Weiss, Galina Mishnyakova, Kurt Varner και όλοι οι απίστευτοι γκουρού i18n που με διδάσκουν με τα χρόνια.