Metin uzamasına uygun tasarım nasıl yapılır

Arayüz özgün ifadenin tam belirli bir alan kaplamasına bağlıysa metin uzaması düzen sorununa dönüşür. Kısa İngilizce düğme sığar. Uzun çeviri kırpılır. Düzenli sekme sırası sıkışır veya kart büyürken eylemi eski konumuna sabit kalır.

Bu katılığı incelemek için her çeviriyi beklemeniz gerekmez. Taslağı bilerek uzatılmış metinle zorlayabilir, sonra incelemeyi gerçek çevirilerle tekrarlayabilirsiniz. İlk adım yapısal zayıflıkları bulur; ikincisi arayüzün gerçek dil ve anlam için çalışmasını kontrol eder.

Neden tek bir uzama yüzdesi yetmez?

Arayüzü her dile hazırlayan tek yüzde yoktur. Kısa etiketler, uzun cümleler, birleşik sözcükler ve farklı yazı sistemleri farklı baskılar yaratır. Karakter saymak da metnin gösterimde ne kadar alana ihtiyaç duyacağını tam söylemez.

W3C’nin çeviride metin boyutu açıklaması, kısa kaynak dizelerinin neden ciddi uzayabildiğini ve karakter genişliği, sözcük yapısı, satır yüksekliğinin neden önemli olduğunu anlatır. Örnekleri sizin arayüzünüz için hesaplayıcı değil, yararlı uyarılardır. Bileşeni hazır saymadan gerçek içerik ve yazı tipi birleşimini inceleyin.

“Ayrıntıları görüntüle” düğmeli kurgusal etkinlik panosunu düşünün. Daha uzun etiket daha geniş düğme veya ikinci satır gerektirebilir. Bu sırada etkinlik başlığı iki satırdan üçe çıkabilir. Bunlar sonuçları farklı değişimlerdir. Her öğede aynı yüzdeyle ek alan ayırmak, ikisinin de nasıl davranacağını belirlemez.

Önce sözcüklerin ne iletmesi gerektiğini belirleyin. Etiket rezervasyonu görüntülemeyi değiştirmekten ayırıyorsa ayrım korunmalıdır. Uyarı eylemin geri alınamayacağını açıklıyorsa sırf özgün kart yüksekliği korunsun diye anlamı kısaltılamaz. Düzen mesajı taşımak için vardır.

Hassas bileşenlerin küçük envanterini çıkarın

Alanın sıkı kontrol edildiği yerlerden başlayın. Gezinme, sekmeler, düğmeler, rozetler, form etiketleri, tablo başlıkları ve küçük kartlar, geniş paragraf sütunundan daha bilgilendirici test örnekleridir. Metnin simge, fiyat, durum veya başka eylem yanında durduğu örnekleri bulun.

Her bileşen için dört davranışı kaydedin:

1. Satıra kayma: etiket ek satır kullanabilir mi?
2. Büyüme: kapsayıcı onunla uzar veya genişler mi?
3. Komşular: simge ve bitişik eylem güvenle hareket eder mi?
4. Sınırlar: satır sayısı sınırlıysa tam metin nerede okunabilir?

Yanıtsız soru, henüz verilmemiş tasarım kararıdır; kısa İngilizce etiket bunu yalnızca gizlemiş olabilir.

Ardından başarısızlığın maliyetini not edin. Uzayan dekoratif etiket, başka etiketin örttüğü ödeme tutarından farklıdır. Karar, gereklilik veya eylem taşıyan bileşenlere öncelik verin. Böylece yerelleştirme incelemesi önemli kontrol okunamazken ilk saatini zararsız farklılıkları cilalayarak geçirmez.

Shopify çeviriler gelmeden ne öğrendi?

Shopify’ın ürününü uluslararasılaştırma anlatısında ekip, İngilizce önizlemede kolay kaçan sorunu açıklar: çıkarılmış dizeler, koda sabit yazılmış dizelerle aynı görünüyordu. Tanınabilir karakterleri değiştiren ve ünlüleri ikiye katlayan sözde çeviri eklediler. Değişmiş metin, hangi dizelerin çeviriden geçtiğini görmeyi ve arayüzü daha uzun sözcüklerle incelemeyi sağladı.

Sözde çeviri yararlı bir kusur sınıfını erken yakalar: çeviri sistemine hiç girmeyen metin, kısa sözcüklere dayanan kontroller ve büyüyemeyen kapsayıcılar. Fransızca talimatın doğal olup olmadığını veya Arapça düzenin doğru okuma sırasını söyleyemez.

Ekran görüntüsünü, tanınabilir kalanlar açısından incelemek değerlidir. Testçi olağandışı karakterleri görürken ekranı hâlâ anlayabilir. Bu, normal görevi tamamlayıp yolda kırılmaları yakalamayı kolaylaştırır. Her kutuyu dolduran rastgele dizeler baskı yaratır, ama testçinin eylem ile açıklamanın birlikte anlamlı kalmasını değerlendirme yeteneğini de kaldırır.

Shopify yaklaşımıyla dört kontrolü ayırın:

• Kapsama: görünür biçimde işaretlenmiş sözde metin, hiç dönüştürülmeyen dizeleri açığa çıkarır.
• Kapasite: uzatılmış ifadeler kontrollerin ve kapsayıcıların büyüyüp büyüyemediğini test eder.
• Gösterim: amaçlanan yazı sistemi ve yedek yazı tipi eksik glifleri veya kırpılmış satır kutularını gösterir.
• Dil: onaylı çeviriler, dili akıcı bilen inceleyenin anlamı ve ifadeyi değerlendirmesini sağlar.

Tek arayüz için pratik stres kümesi

Başlık, sekmeler, durum rozeti, iki eylem ve bir hata içeren sayfa alın. Yalnızca incelenen metni değiştirirken değerleri ve hedefleri koruyun.

Kusuru, onu üreten dize ve duruma bağlı tutun. “Fransızca ikincil eylem, doğrulamadan sonra 390px’te ana eylemi örtüyor” geliştiriciye nereden başlayacağını söyler. “Fransızcaya daha fazla yer lazım”, sabit düğme genişliğini esnemeyen eylem sırasından veya yanlış konumlu hatadan ayırmaz.

Onarımdan sonra kısa metni de yeniden çalıştırın. Tam genişlikli düğme en uzun etiketi çözebilir, ama büyük ekranda kopuk görünebilir. Büyük sabit kart yüksekliği bir çeviriyi barındırırken olağan kayıtların taranmasını zorlaştırabilir. İçeriğe dayalı büyümeyi ve tanımlı üst üste dizilmeyi tercih edin; sabit kapasiteyi gömülü ana yüzey gibi gerçek kısıtlı durumlara ayırın.

Dil incelemesinden önce çevirmene eylemin hedefini ve çevre cümlesini verin. “Open” durum veya emir olabilir. Bu belirsizlik daha geniş düğmeyle onarılamaz. Görsel ve dil kontrolleri, iki inceleyenden de değerlendiremeyecekleri işi onaylamasını istemeden birbirini beslemelidir.

Stres testini kontrollü tutun

Daha uzun etkinlik başlığı, daha uzun konum adı ve daha açıklayıcı eylem etiketi kullanın. İlk karşılaştırmada tarihleri ve katılımcı sayılarını sabit tutun ki incelenen değişken metin uzunluğu olsun. Düzen çalışınca yerelleştirilmiş tarih biçimlerini ayrı turda ekleyin.

Düzen baskısını bulmak için uzatılmış İngilizce kullanın; sonra gerçek çevirileri doğal ifade, anlam ve yazı sistemine özgü gösterim açısından inceleyin.

Her bileşen için yanıt seçin

Aynı uzun dize her yerde aynı onarımı tetiklememelidir. Düğme büyüyebilir, gezinme düzen değiştirebilir, kart ek satır isteyebilir. Korunması gereken ilişkiyle başlayın.

Düğmeler: büyütün, satıra kaydırın veya üst üste koyun

Düğmeler uzun etiketler için kural ister. Sabit genişlikli düğme, bilerek hizalanmış grupta yararlı olabilir; fakat genişliği etiketten önemli sayılınca kırılganlaşır. Düğmenin büyümesine, satıra kaymasına veya taşınmasına karar vermeden eylemi çevre düzeninde inceleyin.

Form altındaki iki eylemi dar ekranda üst üste koymak, tek sıraya sıkıştırmaktan daha açık olabilir. Biri ana eylemse üst üste geldikten sonra belirginliğini koruyun. Ziyaretçi artık var olmayan masaüstü düzeninden önem çıkarmak zorunda kalmamalıdır.

Satıra kayan etiket otomatik olarak yanlış değildir. Düğme yeterli yüksekliğe, dengeli dolguya ve işlem yaptığı içerikle açık bağa sahipse çalışabilir. Ancak küçük iki satırlı düğmeler koleksiyonu taramayı zorlaştırabilir. Birkaç eylem uzun açıklama istiyorsa hepsinin aynı kompakt gruba ait olup olmadığını yeniden düşünün.

Yalnız genişlik kazanmak için anlamlı etiketleri açıklanmayan simgelerle değiştirmeyin. Simge uygun bağlamda tanıdık eylem için uygun olabilir, ama sunumu değiştirmek yeni tanıma sorunu ekler. Bunu çeviriyi yok etmenin tarafsız yolu saymak yerine takası bilinçli değerlendirin.

Somut boyut kontrolünde üç İngilizce etiketi Albert Sans’ta 32px ve iki yanda 20px yatay dolguyla ölçtüm. “View details” toplam 212px, “Review booking details” 368px, “Review your booking details” 440px ister. 220px sabit düğme etikete yalnızca 180px bırakır; dolayısıyla ilki sığar, diğerleri düzen yanıtı gerektirir. Bu İngilizce stres etiketleri genişlik baskısını yalıtır; çeviri değildir. Her çubuğun koyu kısmı ölçülmüş metin, açık kısmı dolgudur. Dar sayfada büyüme, satıra kayma veya üst üste koyma seçmeden sonuç genişliğini eylem grubunun kullanılabilir alanıyla karşılaştırın.

Gezinme: çarpışmadan önce değiştirin

Çok sayıda etiket aynı yatay sıra için yarıştığından gezinme metin uzamasını erken gösterir. Kaynak diline zar zor sığan başlık daha uzun ifadeler için az kapasiteye sahiptir. Başka dilde sunumu daha erken değiştirmesi veya kullanılabilir alana uyarlanan düzen kullanması gerekebilir.

Marka, dil değiştirici, hesap eylemi ve promosyon bağlantısı dahil bütün başlığı kontrol edin. Yalnız gezinme etiketlerini incelemek gerçek çarpışmayı kaçırabilir. Biraz uzayan hesap etiketi diğer her şeyi rahatsız edici sıkışmaya iten öğe olabilir.

Eşit genişlikleri korumak için etiketleri bağımsız kısaltmayın. Çevirmen anlamı korumak için başka sözcük seçebilir; etiketler görsel olarak simetrik olmayabilir. Grup anlaşılır ve kullanılabilir kaldığı sürece bir gezinme öğesinin daha fazla yer alması makuldür.

Sekmelerde satıra kaymanın belirsizlik yaratıp yaratmadığını düşünün. İki sıra sekme, hangi içeriğin seçili öğeye ait olduğunu bulanıklaştırabilir. Göreve bağlı olarak başka kontrol veya bilinçli kaydırma sunumu daha uygun olabilir. Anahtar, yalnız sözcüklerin hepsini görünür kılmak değil, seçili durumu ve hedef içeriği birlikte incelemektir.

Kartlar: kimliği ve eylemi koruyun

Yinelenen kartlar her öğeyi tam aynı yükseklikte tutma baskısı yaratır. Tarama için yararlı olabilir, ama yöntem önemlidir. Izgarayı korumak için anlamlı metni kesmek, kartları hizalamayı kolaylaştırıp aralarından seçmeyi zorlaştırabilir.

Etkinlik panosunda bir etkinlik adının üç, diğerinin bir satır kullandığını varsayın. Kart düzeni alanı düşünerek ayırırsa eylem yine öngörülebilir konumda durabilir. Başlık alanı büyüyebilmeli; başlık, tarih ve eylem ilişkisi açık kalmalıdır.

Hangi metnin kısaltılabileceğine ve tam sürüme nasıl ulaşılacağına karar verin. Uzun açıklamanın önizlemesi, etkinliği tanımlayan başlıktan farklıdır. İki etkinlik kısaltılınca ayırt edilemiyorsa bileşen seçim için gereken bilgiyi kaybetmiştir. Üç nokta eksik farkı açıklamaz.

Rozetleri ve durum etiketlerini ayrı kontrol edin. Uzun durum etkinlik adını örtmemeli veya tarihi kart dışına itmemelidir. Rozeti ayrı satıra taşımak yazısını küçültmekten iyi olabilir. Sonrasında kısa etiketli kartı da inceleyin ki onarım diğer her yerde aşırı boşluk yaratmasın.

Formlar: etiketleri, ipuçlarını ve hataları birlikte test edin

Aynı kontrol çevresinde birkaç içerik türü bulunduğundan form düzenleri metin uzunluğuna özellikle hassastır. Etiket alanı tanımlar, ipucu beklenen girdiyi açıklar, hata düzeltmeyi anlatır. Başka dilde hepsi uzayabilir.

Her durumu diğerleri mevcutken kontrol edin. Yalnız etiketiyle iyi görünen alan, çevrilmiş ipucu ve hata altında belirdiğinde kafa karıştırabilir. Okur hangi bilginin hangi alana ait olduğunu ve düzeltmeden sonra nereden devam edeceğini anlayabilmelidir.

Etiket uzadığında yan yana etiket ve kontrollerin alt alta gelmesi gerekebilir. Bu yapısal tercihtir; çevirinin kötü olduğunun işareti değildir. Yatay düzeni koruyorsanız hem etikete hem kontrole işlerini yapacak alan verin. Kullanılamayacak kadar dar girdi yanındaki geniş etiket iyileştirme değildir.

Hata mesajlarındaki ayrımları koruyun. “Zorunlu”, “Çok uzun” ve “Kaydedilemedi” farklı sorunlardır. Yerelleştirme incelemesi, hata bölgesi sabit yükseklikte diye hepsini kısa genel ifadeye sıkıştırmamalıdır. Bölgenin somut sorunu iletmesine ve mesajla büyümesine izin verin.

Sayıları, birimleri ve adları bağlamda tutun

Metin uzaması cümlelerle sınırlı değildir. Tarihler, para birimleri, adlar ve ölçü birimleri bileşenin istediği alanı ve sırayı değiştirebilir. Bunları tasarımcının hafızadan uyduracağı değerler değil, ilgili yerel ayarla incelenecek içerik örnekleri olarak ele alın.

Fiyat satırı tutarı, ödeme dönemini ve koşulu birleştirebilir. Koşul satıra kayıyorsa hâlâ açıkça o fiyata ait olduğunu kontrol edin. Etkinlik örneğinde tarih aralığı tek tarihten fazla yer isteyebilir. Etiket ve değeri birlikte tutmak, bütün kartı bir satır kısa tutmaktan önemli olabilir.

Adların sabit sayıda kısa sözcükten oluştuğunu varsaymak yerine, kullanıcıların girdiği adları temsil eden gerçekçi örnekler kullanın. Yalnız “Alex Lee” için çalışan düzen, uzun adların okunacağını kanıtlamaz. Tam adın nerede görünür kalması gerektiğini, görev için nerede kompakt gösterimin kabul edilebildiğini düşünün.

Görsel tanımda parçaları kaynak dil sırası evrenselmiş gibi birleştirmeyin. Sayı, isim ve kısa ekten kurulan cümle çeviride farklı yapı isteyebilir. Dil çalışması yönlendirmesiz kopuk parçaları yeniden sıralamak yerine tutarlı mesaj üretebilsin diye amaçlanan anlamı ve bağlamı teslim edin.

W3C uluslararasılaştırma hızlı ipuçları, dil bildirimleri, içeriği sunumdan ayırma ve birleştirilmiş dizelerde dikkat dahil ilgili temelleri kapsar.

Yalnız yatay değil, dikey de yer bırakın

Yaygın onarım genişliği artırırken bütün yükseklikleri sabit bırakmaktır. Bir etikete yardım edebilir, ama başka etiket satır sayısı değiştiğinde kırpılır. Bütün bölümün dikey akışını inceleyin: uzun başlık altbaşlığı, eylem grubunu ve sonraki bölümü aşağı itebilir.

Görevin izin verdiği yerde sayfanın bu büyümeyi emmesini sağlayın. Kartın uzaması, kritik ifadenin kaybolmasından genellikle daha az zararlıdır. Yükseklik sınırlı kalmalıysa kimliği tanımlayan bilgiyi görünür tutarken ikincil ayrıntıyı ayrı görünüme taşımak gibi alternatif davranışı açıkça tanımlayın.

Gerçekte gösterilen karakterlerin üstünü ve altını inceleyin. Kutu sözcüklere yeterli görünüp aksanı veya glif parçasını kesebilir. Yazı tipini, yazı sistemini veya ağırlığı değiştirmek sorunu açığa çıkarabilir. Kaynak yazı tipiyle yapılmış ekran görüntüsü başka yazı sistemi için yeterli kanıt değildir.

Her dili kaynak sayfanın tam satır sayısını taklit etmeye zorlamayın. Tasarım hiyerarşiyi, ilişkileri ve kullanılabilirliği korumalıdır. Bölüm yüksekliği ve satıra kaymadaki bazı farklılıklar aynı anlamı farklı metinlerle iletmenin makul sonucudur.

Yerelleştirme testini genişlik incelemesiyle birleştirin

Masaüstünde çalışan çeviri telefonda başarısız olabilir. Hassas bileşenleri dar, orta ve geniş görünümde test edin; sonra düzenin değiştiği genişlikleri inceleyin. Yalıtılmış görüntü kümesinin kaçıracağı ilişkileri fark etmek için tam görev yaparken aynı dili seçili tutun.

Gözlemleri dil ve düzen sorunları olarak ayırın. İfade doğal duyulmuyorsa dil incelemesi gerekir. İyi kurulmuş etiket komşu kontrolle çakışıyorsa düzen işi gerekir. Bazen ikisi de doğrudur, ama sınıflandırmak tasarımcıyla çevirmenin sorunu tekrar tekrar birbirine vermesini önler.

İfade ve anlam hakkındaki son kararlar için dili bilen inceleyen kullanın. Dili bilmeyen kişi kırpılan metni, çakışmayı ve eksik karakterleri bulabilir; kısaltılmış etiketin doğru eylemi ilettiğini güvenilir biçimde doğrulayamaz. Görünür sığmayı çeviri onayı saymak yerine bu sınırı inceleme kaydında belirtin.

Sağdan sola düzenler de ayrı yönlülük incelemesi ister. Yalnız soldan sağa metni uzatan test; sıralamanın, karışık yönlü içeriğin veya yön belirten kontrollerin doğru çalıştığını kanıtlamaz. Bunu her dil geçti şeklindeki belirsiz iddiaya katmak yerine görünür tutun.

Düzeni inceleyip düzeltmek için OpenDesign kullanın

OpenDesign; HTML önizlemesi, masaüstü, tablet, mobil görünümleri ve tasarıma odaklı düzeltmelerle bu işi destekleyebilir. Onaylı metni bağlam olarak verebilir, sonucu inceleyebilir ve çakışmayı yorum veya sohbetle açıklayabilirsiniz. Desteklenen elle metin ve stil düzenlemeleri, belirli bir noktada küçük bir değişikliği denemek için yararlıdır.

Örneğin etkinlik başlığının ek satırlara kayabileceğini, tarihin tam görünür kalacağını ve ana eylemin kartıyla ilişkili kalacağını belirtin. Düzen onarımını denerken metni değiştirmeyin. Bu, her uzun dizede genel yeniden tasarım istemekten daha kolay değerlendirilen sonuç verir.

Son düzeni değerlendirirken onaylı çeviriler sağlayın; böylece ifade değişiklikleri hâlâ onarım isteyen çakışmayı gizlemesin.

Yerel onarımdan sonra özgün ve uzatılmış içeriği yeniden karşılaştırın. En uzun örneği düzelten kural kısa etiketleri gereksiz tuhaflaştırabilir. İyi esneklik bir aralığı destekler: olağan metin dengeli, uzun metin kullanılabilir kalır ve istisnai sunumun gerekçesi açıktır.

“Çeviriye hazır”ın ne demek olduğunu tanımlayın

Yararlı teslimat; hassas bileşenlerin nasıl davrandığını, hangi stres örneklerinin denendiğini ve hangi gerçek dillerin incelendiğini kaydeder. Sabit etiket genişlikli dış bileşen veya hâlâ yerelleştirilmiş sürüm isteyen metinli görsel gibi çözülmemiş kısıtlamaları ekleyin.

Belirsiz dizeler için çevirmene bağlam verin. Düğmenin hedefi, mevcut çevre açıklaması ve benzer eylemler arasındaki ayrım önemli olabilir. Karakter sınırı gerçekten kaçınılmazsa nedenini belirtin ve değişmesine kimin karar verebileceğini tanımlayın. Her mevcut kapsayıcı genişliğini sessizce dil kısıtına dönüştürmeyin.