Dil seçici, çok dilli bir web sitesi oluştururken yakından dikkat etmeniz gereken önemli bir unsurdur çünkü dil değiştirici, kullanıcıların dil değiştirmek istediklerinde sıklıkla ziyaret edecekleri şeydir.
Etkili bir dil değiştirme düğmesi, web optimizasyonunu artırmaktan satışları yükseltmeye kadar bir web sitesi için çeşitli faydalar sağlayabilir.
Bu makalede, dil seçicileri tasarlamak için en iyi uygulamaları ele alacağız. Aşağıdaki makalede konuyu daha ayrıntılı tartışalım.
Önemli Noktalar: Dil seçici tasarlamak için en iyi uygulamalar
Stratejik yerleştirme kullanımı en üst düzeye çıkarır
Başlık/masaüstü ve hamburger/mobil menü yerleşimi, kullanıcı deneyimini veya sayfa hızını bozmadan erişilebilirliği sağlar.
Geçersiz kılma özellikli akıllı otomatik algılama
Tarayıcı dilini algılayın ancak her zaman kolay manuel geçersiz kılma imkanı sunun ve kullanıcı tercihlerini çerezler aracılığıyla hatırlayın.
SEO + erişilebilirlik açısından temel
Ekran okuyucular için hreflang etiketleri ve ARIA etiketleri uygulayın, dokunmatik dostu tasarım kullanın ve tarayıcılar için JavaScript'siz bir yedek çözüm sunun.
Dil seçici nedir?
Dil seçici, kullanıcıların bir web sitesi, uygulama veya herhangi bir dijital platformla etkileşime geçmek istedikleri dili seçmelerine olanak tanıyan bir kullanıcı arayüzü öğesi veya özelliğidir. Farklı diller konuşan kullanıcılara hitap etmek için genellikle web sitelerinde, yazılım uygulamalarında ve diğer dijital arayüzlerde bulunur.
Dil seçici genellikle mevcut dillerin bir listesini görüntüler ve kullanıcı bu listeden istediği dili seçebilir. Seçim yapıldıktan sonra, metin, etiketler ve bazen görseller dahil olmak üzere arayüz içeriği seçilen dilde görüntülenir. Bu, küresel bir kitleye veya çeşitli kullanıcı tabanına hizmet veren web siteleri ve uygulamalar için özellikle önemlidir.
Dil seçiciler, dijital içeriği dil beceri düzeylerinden bağımsız olarak daha geniş bir kitleye erişilebilir kılarak daha iyi bir kullanıcı deneyimine katkıda bulunur. Geliştiricilerin ve tasarımcıların ürünlerini farklı dilsel ve kültürel bağlamlara uyarlamasına olanak tanıyan yerelleştirme çabalarının kilit bir bileşenidir.
Dil değiştiricinizi neden özelleştirmeniz gerekir?
Çok dilli bir web sitesinde dil değiştiriciyi özelleştirmenin birkaç önemli faydası vardır.
- Marka uyumu ve görsel stil: Dil değiştiriciyi özelleştirerek, kullanılan dilin görünümünün ve stilinin web sitenizin marka kimliği ve görsel stiliyle tutarlı olmasını sağlayabilirsiniz. Dil değiştirme düğmelerini veya menülerini web sitenizin genel tasarımına uyacak şekilde özelleştirebilir, kullanıcı deneyiminde tutarlılık yaratabilirsiniz.
- 对显示语言的更强控制： 有时，您可能希望限制语言切换器中显示的某些语言。例如，您的网站可能只有几种语言的有限版本，而您只想在语言切换器中显示这些语言。通过自定义语言切换器，您可以选择显示哪些语言，从而更好地控制可用内容。
- Optimize edilmiş kullanıcı deneyimi: Dil değiştiriciyi özelleştirerek optimize edilmiş bir kullanıcı deneyimi oluşturabilirsiniz. Örneğin, kullanıcıların kolayca bulabilmesi için dil değiştiricinin düzenini veya konumunu ayarlayabilirsiniz. Ayrıca, kullanıcıların bu özelliği kolayca nasıl kullanacaklarını anlamalarına yardımcı olan bildirimler veya dil değiştirme talimatları gibi özellikler ekleyebilirsiniz.
- Farklı kullanıcı ihtiyaçlarını karşılayın: Her kullanıcının farklı dil tercihleri vardır. Dil değiştirmeyi özelleştirerek, farklı dil geçmişine sahip kullanıcıların ihtiyaçlarını karşılayabilirsiniz. Bu, yerel kullanıcıları, uluslararası ziyaretçileri veya farklı bir dilde kendini daha rahat hisseden kullanıcıları içerebilir.
- Satış dönüşümünü artırın: uygun dil değiştirici özelleştirmesi, satış dönüşümünü artırma avantajı da sağlayabilir. Çünkü etkili bir dil değiştirici, kullanıcıların web sitenizle etkileşim kurarken kendilerini rahat hissetmelerini sağlayabilir. CSA Research verilerine göre, tüketicilerin %72,4'ü kendi dillerinde bilgi içeren ürünleri satın alma olasılıklarının daha yüksek olduğunu söyledi. Dolayısıyla satış seviyenizin de artmayacağını söylemek imkansızdır.
Farklı dil seçici türleri
Her web sitesi sahibi, dil seçicisinin nasıl görüneceğini elbette dikkatle değerlendirecektir; her web sitesinin tercihleri doğal olarak farklı olacaktır. Kullanabileceğiniz bir dil seçici türü arayanlar için işte bunlardan bazıları.
语言按钮
Bu, yaygın olarak kullanılan dil değiştirici türlerinden biridir. Dil düğmesi genellikle görüntülenen dili belirten bir simge veya metindir; örneğin İngilizce için “EN” ya da belirli bir dili temsil eden bir ülke bayrağı. Kullanıcılar dil düğmesine tıkladığında, uygun dildeki web sitesi sürümüne yönlendirilirler.
Dil düğmeleri için, dağınık bir görünümden kaçınmak adına sınırlı sayıda dil göstermeniz önerilir. Genellikle 4 ila 5'ten fazla dil bulundurmak yoğun bir görsel etki yaratabilir. Düğmeyi kullanıcıların kolayca bulabileceği görünür bir konuma yerleştirmek önemlidir. Bu hususları bu makalenin bir sonraki bölümünde daha ayrıntılı ele alacağız.
Dil düğmeleri, belirli pazarları hedefleyen veya belirli konumlardaki uluslararası topluluklara hizmet veren işletmeler için uygun olabilir. WHO web sitesinde dil düğmesinin kullanımına bir örnek aşağıdadır.
文本链接
Metin bağlantıları, dil adının bir bağlantı biçiminde metin olarak kullanıldığı bir tür dil değiştiricidir. Örneğin, kullanıcıları seçilen dildeki web sitesi sürümüne yönlendiren “English,” “Français,” veya “Español” gibi metin bağlantıları görüntüleyebilirsiniz. Bu metin bağlantısı genellikle kullanıcıların istedikleri dili seçmesini kolaylaştırmak için bir liste veya açılır menüye yerleştirilir.
Bağlantı dil seçici türlerinden biri büyük şirket Facebook tarafından kullanılır; listelenen dillere ek olarak, daha fazla dil bulmak için (+) simgesine de basabilirsiniz.
Bundan sonra sayfa, önceden seçilen dile anında çevrilecektir.
Seçim menüsü
Seçim menüsü, bir dil seçmek için açılır menü veya açık menü kullanan bir tür dil değiştiricidir. Kullanıcılar seçenekler menüsüne tıkladığında, mevcut dillerin bir listesini görür ve istedikleri dili seçebilirler. Seçenekler menüsü, dil göstergesi olarak ülke simgeleri veya bayraklarının yanı sıra metindeki dil adlarını da içerebilir.
Seçim menüsü, dil düğmesinden oldukça farklıdır; bu tür, sadece bir düğmeden daha karmaşıktır. Aşağıdaki örnekte olduğu gibi, Porsche’nin web sitesinden alınmıştır.
Kullanıcıların dilini veya hedef ülkesini doğrudan yazabileceği bir dil seçici web sitesi sunarlar.
Açılır Menü, Liste ve Pop-up: Hangisi en iyi çalışır?
Dil seçiciniz için doğru etkileşim modelini seçmek, kusursuz ve sezgisel bir kullanıcı deneyimi sunmak için çok önemlidir. Her yöntem—açılır menü, satır içi liste veya açılır pencere—web sitenizin düzenine, desteklenen dil sayısına ve kullanıcı davranışına bağlı olarak farklı avantajlar sunar. Aşağıda, dil seçimi için üç ana etkileşim modelinin karşılaştırması yer alıyor; UX, erişilebilirlik ve uygulama bağlamına odaklanılmıştır.
Tür | Güçlü Yönler | Limitations | En İyi Kullanım Durumu |
Açılır menü | Kompakt, temiz, ölçeklenebilir, birçok dille birlikte | Etkileşim gerektirir (tıklama/dokunma), tüm kullanıcılar için belirgin olmayabilir | Alan kısıtlaması olan çok dilli web siteleri |
Metin Listesi | Etkileşim olmadan görünür, önemli dillere daha hızlı erişim | Kullanıcı arayüzünü karmaşıklaştırabilir, birçok dil için ölçeklenebilir değildir | 2–4 ana dil seçeneği olan siteler |
Açılır pencere | Arama alanı içerebilir, esnek kullanıcı arayüzü tasarımı | Kullanıcı akışını bozabilir, net bir kapatma düğmesi ve erişilebilirlik gerektirir | 10+ dilde küresel siteler |
Dil seçici en iyi uygulamaları ve ipuçları
Etkili bir dil seçici tasarlamak, tüm cihazlarda kusursuz bir deneyim sunmayı ve farklı geçmişlere sahip kullanıcılar için erişilebilirliği sağlamayı gerektirir. Giderek küreselleşen bir kitleyle birlikte, dil değiştiriciniz sezgisel, erişilebilir ve duyarlı olmalıdır; böylece kullanıcılar tercih ettikleri dilde rahatça etkileşim kurabilir.
Dil seçicinizin tüm kullanıcılar için net, kullanışlı ve erişilebilir olmasını sağlamak için uygulayabileceğiniz en iyi uygulamalar aşağıda verilmiştir.
Duyarlı tasarıma öncelik verin
Çoğu kullanıcı web sitelerine mobil cihazlardan erişir, bu nedenle dil seçiciniz duyarlı ve mobil uyumlu olmalıdır. Düğmenin veya menünün kolayca dokunulabilir olduğundan, önemli içeriği kapatmadığından ve daha küçük ekranlarda görünür kaldığından emin olun.
Örneğin, dil seçici web sitesi şöyle görünür.
Ayrıca, mobil taraftan bakıldığında dil seçiciye hâlâ kolayca erişilebilir ve seçici hareket etmez veya kaybolmaz.
Düzeni temiz tutmak için açılır menüler veya genişletilebilir menüler kullanın ve dokunma hedeflerinin rahat etkileşim için yeterli boşluğa sahip olduğundan emin olun. Bu, kullanıcıların sıkışık veya tıklaması zor öğelerin neden olduğu hayal kırıklığı yaşamadan tercih ettikleri dili kolayca seçmelerine yardımcı olur.
Arayüzde düşünceli yerleşim
Dil seçiciyi, başlığın sağ üst köşesi veya alt bilgi gibi yüksek görünürlüğe sahip, beklenen alanlara yerleştirin. Bu alanlar, kullanıcıların genellikle dil seçeneklerini aradığı sezgisel konumlardır.
Seçiciyi belirsiz simgelerin veya ikincil menülerin içine gizlemekten kaçının. Sık sık dil değiştiren kullanıcıların her an kolayca bulabilmesi için tüm sayfalarda konumunu tutarlı tutun.
Erişilebilirlik özniteliklerini kullanın (ARIA)
Dil seçicinizin engelli kullanıcılar tarafından erişilebilir olmasını sağlamak için aria-label, aria-haspopup ve aria-expanded gibi ARIA (Erişilebilir Zengin İnternet Uygulamaları) özniteliklerini kullanın. Bunlar, ekran okuyucular gibi yardımcı teknolojilerin öğenin rolünü ve işlevselliğini anlamasına yardımcı olur.
Erişilebilirliği uygulamak WCAG standartlarını karşılar ve sitenizin daha geniş bir kitle tarafından kapsayıcı ve kullanılabilir olmasını sağlar. Kapsayıcı tasarım yalnızca belirli ihtiyaçları olan kullanıcılara değil, herkese fayda sağlar.
Net ve tanınabilir dil etiketleri kullanın
Her dil seçeneğini kendi yerel adıyla gösterin; örneğin “Spanish” yerine “Español” veya “German” yerine “Deutsch” kullanın. Bu, kullanıcıların mevcut site dilini anlamasalar bile tercih ettikleri dili hızlıca tanımalarını sağlar.
Yerel etiketler daha kapsayıcıdır ve özellikle uluslararası kullanıcılar için bilişsel yükü azaltır. Hedef kitleniz bilmiyorsa, anlaşılması güç kısaltmalar veya dil kodları kullanmaktan kaçının.
Çok fazla seçenekle aşırı yüklemeden kaçının
Aynı anda çok fazla dil seçeneği göstermek arayüzü kalabalıklaştırabilir ve kullanıcıların kafasını karıştırabilir. Önce yalnızca en alakalı veya en yaygın kullanılan dilleri gösterin, geri kalanını bir açılır menüye veya “Daha fazla dil” bölümünün altına yerleştirin.
Bu, arayüzü temiz tutar ve özellikle mobil cihazlarda kullanılabilirliği artırır. Hangi dillerin önceliklendirileceğine veya gizleneceğine karar vermek için web sitesi trafik analizlerini kullanın.
Uygun simgeler ve görsel ipuçları kullanın (bayraklara güvenmeden)
Küre simgeleri (🌐), aşağı oklar (▾) veya etkin durum vurguları gibi görsel ipuçları, kullanıcıların bir öğenin tıklanabilir olduğunu anlamasına yardımcı olur. Ancak, bir dil birden fazla ülkede konuşulabildiği için dilleri temsil etmek üzere ulusal bayraklar kullanmaktan kaçının.
Bayraklar ayrıca kültürel veya politik anlamlar taşıyabilir. Görseller kullanıyorsanız, netliği sağlamak için bunları metin etiketleriyle eşleştirin ve tasarımınız genelinde simgeleri tutarlı ve kültürel açıdan nötr tutun.
Web sitesi tasarımı ve marka kimliğiyle tutarlı kalın
Dil seçiciniz, web sitenizin genel stiliyle görsel olarak uyumlu olmalıdır. İster düğmeler, ister metin bağlantıları veya simgeler kullanıyor olun, tipografinin, renklerin ve üzerine gelme durumlarının markanızla eşleştiğinden emin olun. Bu, güveni artırır ve kullanıcı deneyimini güçlendirir.
Özel bir seçici oluşturuyorsanız, amaçlandığı gibi çalıştığından emin olmak için farklı tarayıcılarda ve cihazlarda test edin. Tutarlı tasarım ve güvenilir işlevsellik, sorunsuz bir çok dilli kullanıcı yolculuğuna katkıda bulunur.
Linguise ile 7 adımda dil seçici ayarlama
Bu noktada, dil seçiciler için en iyi uygulamaları biliyorsunuz. Bu çeviri, web sitesi çeviri hizmetini kullandıktan sonra yapılabilir. Ancak, tüm çeviri hizmetleri dil seçici ayarlarında esneklik sunmaz.
Ama endişelenmeyin çünkü Linguise öyle değil. Linguise , dil değiştiricinin kullanıcı tarafından özelleştirilmesini sağlayan otomatik bir çeviri hizmetidir. Linguise kullanırken elde edeceğiniz bazı avantajlar şunlardır:.
- Linguise kullanılabilir ve 40'tan fazla CMS'ye entegre edilebilir (WordPress, Joomla, Drupal, vb).
- Web sitesindeki dil değiştiriciye dili ekledikten sonra çeşitli dillere çeviri saniyeler içinde otomatik olarak yapılacaktır.
- Dil seçiciye eklenebilecek 80'den fazla dil mevcuttur .
- Linguise , çeviri hedef diline göre otomatik olarak benzersiz bir URL hazırlar. Örneğin, Almancaya çevrilen bir sayfa için URL linguise.com/de/ şeklindedir.
- Bir sayfada dil varyasyonlarınız olduğunda arama motorlarında yinelenen içerikten kaçınmaya yardımcı olmak için otomatik olarak bir kanonik URL oluşturur.
- Dil değiştiriciyi web sitesi ihtiyaçlarına göre esnek bir şekilde simgeden renge ve dil adına kadar ayarlayabilirsiniz.
- Dil seçiciye eklenen her dil için ziyaretçi sayfa görüntüleme istatistiklerini dil başına görüntüleyebilirsiniz.
Bu eğitimde, kullanılan CMS örneği olarak WordPress kullanacağız.
Adım 1: Linguise ücretsiz hesabı oluşturma
Linguise'deki dil seçicisine erişmek için Linguise ilk adım olarak Linguise'de bir hesap oluşturmanız gerekir Linguise. Linguise ayrıca, yararlanabileceğiniz çeşitli özellikleri içeren bir aylık ücretsiz deneme sunar.
Adım 2: Çok dilli web sitenize alan adı ekleyin
İkinci adım, web sitesi alan adını Linguise zaten sahip olduğunuz Linguise panosuna eklemektir. Doldurmanız gereken birkaç şey var, şunlarla başlayarak:
- Hesap
- URL'ler
- Platform
- Dil
- Çeviri dili
- URL'yi çevir
Bundan sonra, API anahtarını etkinleştirmeniz ve dil URL'sini ayarlamanız gerekir. Bir web sitesi alan adı eklemeye ilişkin eksiksiz bir kılavuz için dokümantasyonu okuyabilirsiniz; özellikle WordPress için, kurulumunu Linguise otomatik çevirisini WordPress üzerinde görebilir veya aşağıdaki video eğitimini izleyebilirsiniz.
Adım 3: Linguise eklentisini yükleyin
Bir web sitesini başarıyla ekledikten sonra WordPress panosunu açın ve Linguise eklentisini yükleyin, bunu şu şekilde yapın: Eklentiler > Yeni Ekle > Linguise > Yükle > Etkinleştir.
Eklenti zaten yüklüyse, Linguise panosuna gidin ve API anahtarını kopyalayın.
Ardından Linguise eklentisini açın ve Linguise kontrol panelinden aldığınız API kodunu aşağıdaki sütuna yapıştırın.
Adım 4: Ana görünümü ayarlayın
Bir dil değiştirici yapılandırmak veya dil bayraklarını görüntülemek için adımlar Linguise panosundaki Ayarlar > Dil bayrakları görüntüleme menüsü üzerinden izlenir.
İlk kurulum sırasında, farklı bileşenleri dikkate alarak ana görünümde ayarlamalar yapacağız.
İlk olarak dikkate alınması gereken konu, yan yana, açılır menü veya açılır pencere olmak üzere üç seçenek sunan dil listesi görüntüleme biçiminin yapılandırılmasıdır. Sol tarafta her biçim için bir önizleme görüntüsü bulunur.
Aşağıda gösterilen ilk biçim, yan yana bir düzendir.
Aşağıdaki biçim, aşağıdaki görselde gösterildiği gibi bir açılır menü stili benimser.
Son olarak, son seçenek olarak açılır pencere formatına sahibiz.
Ardından, dil değiştiricinin konumunu yapılandırmayı içeren bir sonraki adıma geçiyoruz. Çeşitli konum seçenekleri arasından seçim yapma esnekliğine sahipsiniz, bu nedenle ziyaretçilerin kolayca fark edebileceği bir konum seçmek önemlidir.
Son olarak, dil seçeneklerini görüntülemek için hangi kombinasyonu tercih edeceğinize karar vermeniz gerekir. Bayrak + dil adı, bayrak + kısa ad gibi seçenekler arasından seçim yapabilir veya yalnızca bayrağı tek başına gösterebilirsiniz. Bu karar, özel tasarım tercihlerinize ve hedef kitlenizin tercihlerine bağlı olacaktır.
Adım 5: Bayrak tasarımını ayarlayın
Bundan sonra, ana görüntüleme bölümünün altında, özellikle bayrağa yönelik tasarım yapılandırmalarıyla karşılaşacaksınız. Aşağıda sağlanan görsel, mevcut ayar seçeneklerinden bazılarını göstermektedir.
- Dil adı gösterimi: Dil adını ülkeye veya dilin kendisine göre görüntüleme seçeneğiniz vardır. Örneğin, “Almanca” veya “Deutsch” görüntülemeyi seçebilirsiniz.
- İngilizce bayrak türü: Bu seçenek, "English USA" veya "English Britain" gibi birden fazla varyasyona sahip dillerle ilgilenirken geçerlidir. İspanyolca, Tayvanca, Almanca ve Portekizce gibi diller için de benzer seçimler yapılabilir.
- Bayrak stili: Bu ayar, bayrak simgesinin şeklini yuvarlak mı yoksa kare (dikdörtgen) mi olacağını tanımlamanıza olanak tanır.
Adım 6: Bayrağın rengini ve boyutunu ayarlayın
Bayrak tasarımı ayarlandıktan sonraki adım, renkleri, boyutu ve diğer çeşitli öğeleri ayarlamayı içerir. Aşağıdaki arayüzde, aşağıdakiler dahil olmak üzere çok sayıda özelleştirilebilir ayar bulacaksınız:
- Bayrak kenar yuvarlaklığı: Bu, dikdörtgen bir bayrak kullanırken kenar yuvarlaklığını piksel cinsinden kişiselleştirmenize olanak tanır.
- Dil adı rengi: Dil adı için varsayılan metin rengini seçebilirsiniz.
- Açılır pencere dil rengi: Bu ayar, açılır pencere veya açılır menü alanlarındaki dil başlığının rengini belirler.
- Bayrak boyutu: Tercihlerinize göre bayrağın boyutunu değiştirme seçeneğiniz vardır.
- Dil adı üzerine gelme rengi: Bu ayar, fareyle dil adlarının üzerine gelindiğinde metin rengini kontrol eder.
- Açılır pencere dil üzerine gelme rengi: Benzer şekilde, bu ayar açılır pencere veya açılır listedeki dil başlığının üzerine fareyle gelindiğinde metin rengini belirler.
Adım 7: Bayrak kutu gölgesini ayarlayın
Son aşamada, bayrak için gölge ayarlarını özelleştirme fırsatınız olur. İlk ayar, web sitenizde görüntülenen her bayrak için bir gölge belirlemenize olanak tanırken, sonraki ayar dil bayrağının üzerine gelindiğindeki gölge efektiyle ilgilidir.
Dil değiştirici için yaptığınız özelleştirme ayarlarını korumak için Kaydet düğmesine tıklamayı unutmayın. Bu, gölge efektleri için seçtiğiniz yapılandırmaların uygulanmasını ve gelecekte kullanılmak üzere kaydedilmesini sağlar.
Tüm yapılandırmalar tamamlandıktan sonra, sağ üst köşeye yerleştirilmiş ve baş harfleri kullanan bir açılır pencere kullanan dil seçici görüntüsüne bir örnek aşağıda verilmiştir. Bu sadece bir örnektir, geri kalanını istediğiniz gibi ve web sitesinin ihtiyaçlarına göre özelleştirebilirsiniz.
WordPress WordPress CMS'nin yanı sıra diğer web sitesi platformlarını da kullanabilir ve OpenCart için geçiş ayarları OpenCart, Drupal için dil değiştirici Drupal ve PrestaShop için geçiş ayarları PrestaShop gibi ayrıntılı kılavuzları takip edebilirsiniz.
Linguiseile kesintisiz çok dilli bir deneyim için dil seçicinizi tasarlayın!
Burada, dil seçicileri tasarlamak için en iyi uygulamalara ve bunu Linguisekullanarak nasıl yapacağınıza dair bilgi edindiniz! İnanın bana, bir dil değiştirici oluşturmak birçok fayda sağlayabilir ve yukarıda belirtilen noktalara dayalı optimizasyonu garanti edebilir.
Bir dil seçici oluştururken, yukarıda açıkladığımız ipuçlarını ve en iyi uygulamaları izlediğinizden emin olun; simge kullanımından ilgili dilleri seçmeye ve konumlandırmaya kadar.
Şimdi, bir Linguise hesabı oluşturun, web sitenizi ekleyin ve daha iyi bir kullanıcı deneyimi sunmak için dil seçiciyi ince ayarlayın. Linguise'un üstün özelliklerinden yararlanmak için 1 aylık ücretsiz deneme özelliğini denemeyi unutmayın!
