Dil seçici, bir çok dilli web sitesi oluştururken yakından dikkat etmeniz gereken önemli bir unsurdur çünkü dil değiştirici, kullanıcıların dili değiştirmek istedikleri yere sıkça ziyaret edeceği şeydir.
Etkili bir dil değiştirme butonu, bir web sitesi için web optimizasyonunu artırmaktan satışları artırmaya kadar birçok fayda sağlayabilir.
Bu makalede, dil seçicileri tasarlamak için en iyi uygulamaları tartışacağız. Bu konuyu aşağıdaki makalede daha ayrıntılı olarak tartışalım.
Önemli noktalar: Dil seçici tasarımı için en iyi uygulamalar
Stratejik yerleştirme, kullanım oranını en üst düzeye çıkarır
Üstbilgi/masaüstü ve hamburger/mobil menü yerleşimi, kullanıcı deneyimini veya sayfa hızını bozmadan erişilebilirliği sağlar.
Akıllı otomatik algılama ve geçersiz kılma özelliği
Tarayıcı dilini algılar ancak her zaman kolay manuel geçersiz kılma olanağı sağlar ve kullanıcı tercihlerini çerezler aracılığıyla hatırlar.
SEO ve erişilebilirlik şart
Ekran okuyucular için hreflang etiketlerini, ARIA etiketlerini, dokunmatik ekranlara uygun tasarımı ve tarayıcılar için JavaScript gerektirmeyen yedekleme özelliğini uygulayın.
Dil seçici nedir?
Dil seçici, kullanıcıların bir web sitesi, uygulama veya herhangi bir dijital platform ile etkileşimde bulunmak istedikleri dili seçmelerine olanak tanıyan bir kullanıcı arayüzü öğesi veya özelliğidir. Farklı dillerde konuşan kullanıcılara uygun olması 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 resimler dahil olmak üzere arayüz içeriği seçilen dilde görüntülenir. Bu, özellikle küresel bir kitleye veya çeşitli kullanıcı tabanına hizmet veren web siteleri ve uygulamalar için önemlidir.
Dil seçicileri, dijital içeriği dil beceri düzeyine bakılmaksızın daha geniş bir kitleye erişilebilir kılarak daha iyi bir kullanıcı deneyimine katkıda bulunur. Yerelleştirme çabalarının kilit bileşenidir ve geliştiricilerin ve tasarımcıların ürünlerini farklı dilsel ve kültürel bağlamlara uyarlamalarına olanak tanır.
Neden dil değiştiricinizi özelleştirmeniz gerekiyor?
Çok dilli bir web sitesinde dil değiştiriciyi özelleştirmek çeşitli önemli avantajlar sağlar.
- Marka hizalaması ve görsel stil: Dil değiştiriciyi özelleştirerek, kullanılan dilin görünümünün ve stilinin web sitenizin markalaşması ve görsel stili ile tutarlı olmasını sağlayabilirsiniz. Dil değiştirme düğmelerini veya menülerini web sitenizin genel tasarımına uyacak şekilde özelleştirebilir ve kullanıcı deneyiminde tutarlılık yaratabilirsiniz.
- Görüntülenen diller üzerinde daha fazla kontrol: Bazen, dil değiştiricide görüntülenen belirli dilleri sınırlamak isteyebilirsiniz. Örneğin, web sitenizin birkaç dilde sınırlı bir sürümü olabilir ve dil değiştiricide yalnızca bu dilleri görüntülemek isteyebilirsiniz. Dil değiştiriciyi özelleştirerek, hangi dillerin görüntüleneceğini seçebilir ve mevcut içerik üzerinde daha fazla kontrol sahibi olabilirsiniz.
- Optimize edilmiş kullanıcı deneyimi: Dil değiştiriciyi özelleştirerek, optimize edilmiş bir kullanıcı deneyimi yaratabilirsiniz. Örneğin, dil değiştiricinin düzenini veya konumunu kullanıcıların kolayca bulmasını sağlayacak şekilde ayarlayabilirsiniz. Ayrıca, kullanıcıların özelliği kolayca 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ştirme özelliğini özelleştirerek, farklı dil geçmişlerine sahip kullanıcıların ihtiyaçlarını karşılayabilirsiniz. Bu, yerel kullanıcıları, uluslararası ziyaretçileri veya farklı bir dilde daha rahat olan kullanıcıları içerebilir.
- Satış dönüşümünü artırın: doğru dil değiştirici özelleştirmesi, satış dönüşümünün artması avantajı da sağlayabilir. Çünkü etkili bir dil değiştirici, kullanıcıların web sitenizle etkileşimde bulunurken rahat hissetmelerini sağlayabilir. CSA Araştırma verilerine göre, tüketicilerin %72,4'ü kendi dilinde bilgi içeren ürünleri satın alma olasılığının daha yüksek olduğunu söyledi. Dolayısıyla satış seviyenizin de artmaması imkansız.
Farklı dil seçici türleri
Her web sitesi sahibi, dil seçicilerinin nasıl göründüğünü dikkatlice değerlendirir, her web sitesi elbette farklı tercihlere sahiptir. Kullanılabilecek bir dil seçici türü arayanlar için, işte bazıları.
Dil butonu
Bu, yaygın olarak kullanılan dil değiştirici türlerinden biridir. Dil butonu genellikle görüntülenen dili gösteren bir simge veya metindir, örneğin İngilizce için “EN” veya belirli bir dili temsil eden bir ülke bayrağı. Kullanıcılar dil butonuna tıkladığında, uygun dildeki web sitesi sürümüne yönlendirilir.
Dil düğmeleri için, dağınık bir görünümü önlemek için sınırlı sayıda dil görüntülenmesi önerilir. Genellikle, 4 ila 5'ten fazla dilin olması işlek 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ı makalenin sonraki bölümünde daha ayrıntılı olarak ele alacağız.
Dil düğmeleri, belirli pazarları hedefleyen veya belirli lokasyonlardaki uluslararası topluluklara hizmet veren işletmeler için uygun olabilir. WHO web sitesindeki dil düğmesinin kullanımına ilişkin bir örnek aşağıda verilmiştir.
Metin bağlantısı
Metin bağlantıları, dil adı biçiminde metin kullanan bir dil değiştirici türüdür. Örneğin, kullanıcıları seçilen dildeki web sitesinin bir sürümüne götüren “İngilizce,” “Français,” veya “Español” gibi metin bağlantıları görüntüleyebilirsiniz. Bu metin bağlantısı genellikle kullanıcıların istenen dili seçmesini kolaylaştırmak için bir liste veya açılır menüde bulunur.
Bir tür bağlantı dili seçicisi, büyük şirket Facebook tarafından kullanılır, listelenen dillerin yanı sıra, daha fazla dil bulmak için (+) simgesine de basabilirsiniz.
Bundan sonra sayfa hemen önceden seçilen dile çevrilir.
Seçim menüsü
Bir 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ştiricisidir. Kullanıcılar seçenekler menüsüne tıkladığında, mevcut dillerin bir listesini görecek ve istediği dili seçebilecektir. Seçenekler menüsü, dil göstergesi olarak ülke simgeleri veya bayrakların yanı sıra metindeki dil adlarını 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 Porsche'nin web sitesinden gelen örnekteki gibi.
Kullanıcıların doğrudan dilini veya hedef ülkesini yazabileceği bir dil seçici web sitesi sağlarlar.
Açılır liste vs. Liste vs. Açılır pencere: Hangisi en iyisi?
Dil seçici için doğru etkileşim modelini seçmek, sorunsuz ve sezgisel bir kullanıcı deneyimi sunmak için çok önemlidir. Her yöntem - ister açılır liste, ister satır içi liste, ister açılır pencere olsun - 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 UX, erişilebilirlik ve uygulama bağlamına odaklanan bir karşılaştırması yer almaktadır.
Tür | Güçlü Yönler | Sınırlamalar | En İyi Kullanım Senaryosu |
Açılır liste | Kompakt, temiz, ölçeklenebilir, çoklu dil desteği | 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 gerektirmeden görünür, ana diller için daha hızlı erişim | Arayüzü karmaşıklaştırabilir, çok dil için ölçeklenebilir değil | 2-4 ana dil seçeneği olan siteler |
Açılır Pencere | Arama alanı içerebilir, esnek arayüz tasarımı | Kullanıcı akışını bozabilir, net bir kapatma düğmesine ve erişilebilirliğe ihtiyacı vardır | 10'dan fazla dile sahip global siteler |
Dil seçici en iyi uygulamaları ve ipuçları
Etkili bir dil seçici tasarlamak, tüm cihazlarda sorunsuz bir deneyim sunmayı ve çeşitli geçmişlere sahip kullanıcılar için erişilebilirliği sağlamayı içerir. Giderek büyüyen küresel bir hedef kitleyle, dil değiştiriciniz sezgisel, erişilebilir ve kullanıcıların tercih ettikleri dilde rahatça etkileşimde bulunmalarını sağlayacak şekilde duyarlı olmalıdır.
Aşağıda, 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 yer almaktadır.
Duyarlı tasarımı önceliklendirin
Çoğu kullanıcı web sitelerine mobil cihazlardan erişir, bu nedenle dil seçiciniz duyarlı ve mobil dostu 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 böyle görünür.
Ardından, mobil taraftan bakıldığında, dil seçici hala kolayca erişilebilir ve hareket etmez veya kaybolmaz.
Düzenli tutmak için açılır menüler veya genişletilebilir menüler kullanın ve dokunma hedeflerinin konforlu etkileşim için yeterli boşluğa sahip olduğundan emin olun. Bu, kullanıcıların tercih ettikleri dili kolayca seçmelerine yardımcı olur ve sıkışık veya tıklanması zor öğeler nedeniyle hayal kırıklığına uğramazlar.
Arayüzde düşünceli yerleştirme
Dil seçiciyi, üstbilginin sağ üst köşesi veya alt bilgi bölümü gibi yüksek görünürlüklü, beklenen alanlara yerleştirin. Bunlar, kullanıcıların genellikle dil seçeneklerini aradığı sezgisel konumlardır.
Seçiciyi belirsiz simgelerin veya ikincil menülerin içinde gizlemekten kaçının. Dil değiştiren kullanıcılar her an kolayca bulabilsin diye yerleşimini tüm sayfalarda tutarlı tutun.
Erişilebilirlik öznitelikleri kullanın (ARIA)
Dil seçicinizi engelli kullanıcılar için erişilebilir hale getirmek üzere ARIA (Erişilebilir Zengin İnternet Uygulamaları) özniteliklerini aria-label, aria-haspopup ve aria-expanded gibi kullanın. Bunlar, ekran okuyucular gibi yardımcı teknolojilerin öğenin rolünü ve işlevselliğini anlamasına yardımcı olur.
Erişilebilirlik 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ılar değil, herkes için faydalıdır.
Açık ve tanınabilir dil etiketleri kullanın
Her dil seçeneğini yerel etiketiyle görüntüleyin, örneğin "İspanyolca" yerine "Español" veya "Almanca" yerine "Deutsch". Bu, kullanıcıların mevcut site dilini anlamasalar bile tercih ettikleri dili hızlıca tanımalarına olanak tanır.
Yerel etiketler daha kapsayıcıdır ve özellikle uluslararası kullanıcılar için bilişsel yükü azaltır. Kitleğinizin bildiği dil kodlarını veya belirsiz kısaltmaları kullanmaktan kaçının.
Çok fazla seçenekle aşırı yüklemekten kaçının
Aynı anda çok fazla dil seçeneği göstermek arayüzü karmaşıklaştırabilir ve kullanıcıları şaşırtabilir. Yalnızca en alakalı veya yaygın olarak kullanılan dilleri önce görüntüleyin ve diğerlerini bir açılır menüye veya "Daha fazla dil" bölümüne yerleştirin.
Bu, arayüzü temiz tutar ve kullanılabilirliği, özellikle mobilde artırır. Hangi dillerin önceliklendirileceğine veya gizleneceğine karar vermek için web sitesi trafik analizlerini kullanın.
Uygun simgeleri ve görsel ipuçlarını kullanın (bayraklara güvenmeden)
Küresel simgeler (🌐), aşağı doğru oklar (▾) veya aktif 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 için ulusal bayrakları kullanmaktan kaçının.
Bayraklar ayrıca kültürel veya politik çağrışımlara sahip olabilir. Görsel kullanıyorsanız, netliği sağlamak için metin etiketleriyle eşleştirin ve simgeleri tasarımınız genelinde tutarlı ve kültürel olarak nötr tutun.
Web sitesi tasarımı ve markalaşması ile tutarlı kalın
Dil seçiciniz, web sitenizin genel stilini görsel olarak yansıtmalıdır. Düğmeler, metin bağlantıları veya simgeler kullanıyor olmanızdan bağımsız olarak, tipografi, renkler ve fare üzerine gelme durumları markanızla uyumlu olmalıdır. Bu, güveni artırır ve kullanıcı deneyimini güçlendirir.
Özel bir dil seçici oluşturuyorsanız, farklı tarayıcılarda ve cihazlarda test edin ve amaçlandığı gibi çalıştığından emin olun. Tutarlı tasarım ve güvenilir işlevsellik, sorunsuz çok dilli bir kullanıcı deneyimine katkıda bulunur.
Linguise ile dil seçiciyi 7 adımda 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.
Endişelenmenize gerek yok çünkü Linguise böyle değil. Linguise , dil değiştiricinin kullanıcı özelleştirmesini sağlayan otomatik bir çeviri hizmetidir. Linguise kullandığınızda elde edeceğiniz avantajlardan bazıları.
- Linguise kullanılabilir ve 40'tan fazla CMS'e entegre edilebilir (WordPress, Joomla, Drupal, vb).
- Çeşitli dillere çeviri, web sitesindeki dil değiştiriciye dili ekledikten sonra sadece birkaç saniye içinde otomatik olarak yapılacaktır.
- Dil seçicisine eklenebilecek 80'den fazla dil mevcuttur.
- Linguise, çeviri hedef diline göre benzersiz bir URL otomatik olarak hazırlayacaktır. Örneğin URL linguise.com/de/ Almancaya çevrilen bir sayfa için.
- Bir sayfada dil varyasyonları olduğunda arama motorlarında yinelenen içerikten kaçınmaya yardımcı olmak için otomatik olarak bir kanonik URL oluşturacaktır.
- Dil değiştiriciyi web sitesi ihtiyaçlarına göre esnek bir şekilde ayarlayabilirsiniz, simge, renk ve dil adından başlayarak.
- Dil seçicisine 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 'u kullanacağız.
Adım 1: Linguise ücretsiz hesap kaydı
Dil değiştiriciye erişmek için Linguise, yapmanız gereken ilk adım Linguise'de bir hesap kaydetmektir. Linguise ayrıca yararlanabileceğiniz çeşitli özellikler içeren bir aylık ücretsiz deneme sunar.
Adım 2: Çok dilli web sitenize alan adı ekleyin
İkinci adım, Linguise'i Linguise kontrol paneline eklemektir. Halihazırda sahip olduğunuz alan adını eklemeniz gerekir. Başlangıç olarak doldurmanız gereken birkaç şey var.
- 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ı ekleme konusunda eksiksiz bir kılavuz için belgeleri okuyabilir, özellikle WordPress için Linguise otomatik çevirisini WordPress üzerine kurulum yaparak veya aşağıdaki video eğitimini izleyerek görebilirsiniz.
3. Adım: Linguise eklentisini kurun
Bir web sitesi başarıyla ekledikten sonra, WordPress kontrol panelini açın ve Linguise eklentisini kurun, bunu Eklentiler > Yeni Ekle > Linguise > Kur > Etkinleştir.
Eklenti zaten yüklüyse, Linguise kontrol paneline 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 ekranı ayarla
Dil değiştiriciyi yapılandırmak veya dil bayraklarını görüntülemek için adımlar Linguise kontrol paneli üzerinden Ayarlar > Dil bayrakları görüntüleme menüsü.
İlk kurulum sırasında, ana ekranı farklı bileşenleri dikkate alarak ayarlayacağız.
İlk düşünce, yan yana, açılır liste veya açılır pencere gibi üç 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 ekranı vardır.
Aşağıda gösterilen ilk biçim, yan yana düzenlenmiştir.
Aşağıdaki biçim, aşağıda gösterildiği gibi bir açılır stil benimser.
Son olarak, son seçenek olarak açılır pencere biçimini kullanıyoruz.
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çiler tarafından kolayca fark edilebilecek bir konum seçmek önemlidir.
Son olarak, dil seçeneklerini görüntülemek için kombinasyon tercihi konusunda karar vermeniz gerekir. Bayrak + dil adı, bayrak + kısa ad veya sadece bayrağı gösterme gibi seçenekler arasından seçim yapabilirsiniz. Bu karar, özel tasarım tercihlerinize ve hedef kitlenizin tercihine bağlı olacaktır.
Adım 5: Bayrak tasarımını ayarla
Bundan sonra, ana görüntü bölümünün altında, özellikle bayrak için tasarım konfigürasyonları ile karşılaşacaksınız. Aşağıda verilen resim, mevcut bazı ayar seçeneklerini göstermektedir.
- Dil adı gösterimi
- İngilizce bayrak tipi: Bu seçenek, "İngilizce ABD" veya "İngilizce Britanya" gibi birden fazla varyasyonu olan dillerle uğraşırken geçerlidir. İspanyolca, Tayvanlı, Almanca ve Portekizce gibi diller için de benzer seçimler yapılabilir.
- Bayrak stili: Bu ayar, bayrak simgesinin şeklini yuvarlak veya kare (dikdörtgen) olarak tanımlamanızı sağlar.
Adım 6: Bayrağın rengini ve boyutunu ayarla
Bayrak tasarımı ayarlandıktan sonra, bir sonraki adım renkleri, boyutu ve diğer çeşitli unsurları ayarlamayı içerir. Aşağıdaki arayüzde, aşağıdakiler de dahil olmak üzere çok sayıda özelleştirilebilir ayar bulacaksınız:
- Bayrak kenarlık yarıçapı: Bu, dikdörtgen bir bayrak kullanırken kenarlık yarıçapı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 dil rengi: Bu ayar, açılır veya açılan alanlardaki dil başlığının rengini belirler.
- Bayrak boyutu: Bayrağın boyutunu tercihlerinize göre değiştirme seçeneğiniz vardır.
- Dil adı üzerine gelindiğinde renk: Bu ayar, dil adlarının üzerine fareyle gelindiğinde metin rengini kontrol eder.
- Açılır dil hover rengi: Benzer şekilde, bu ayar, açılır pencerede veya açılır menüde dil başlığı üzerinde fareyi gezdirirken metin rengini belirler.
Adım 7: Bayrak gölgesini ayarla
Son aşamada, bayrak için gölge ayarlarını özelleştirme fırsatınız vardır. İlk ayar, web sitenizde görüntülenen her bayrak için bir gölge belirlemenize olanak tanırken, sonraki ayar, dil bayrağı üzerinde fareyi gezdirirken gölge efektine ilişkindir.
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 gelecekteki kullanım için kaydedilmesini sağlar.
Tüm konfigürasyonlar yapıldıktan sonra, burada dil seçici göstergesinin bir örnek kullanımı, sağ üst köşede konumlandırılmış bir açılır pencere kullanarak ve ilk harflerle birlikte gösterilmektedir. Bu sadece bir örnektir, geri kalanını istediğiniz gibi ve web sitesinin ihtiyaçlarına göre özelleştirebilirsiniz.
dışında WordPress içerik yönetim sistemini kullanarak, diğer web sitesi platformlarını da kullanabilir ve ayrıntılı kılavuzu takip edebilirsiniz. Örneğin, için geçiş ayarları OpenCart, için dil geçişi Drupal, ve için geçiş ayarları PrestaShop.
Linguiseile sorunsuz çok dilli deneyim için dil seçicinizi tasarlayın!
Burada, dil seçicileri tasarlama en iyi uygulamaları ve Linguise kullanarak nasıl yapılacağı hakkında fikir sahibi oldunuz! İnanın bana, bir dil değiştirici oluşturmak birçok fayda sağlayabilir ve yukarıda belirtilen noktalara dayalı optimizasyonu sağlayabilir.
Dil seçici oluştururken, yukarıda açıkladığımız ipuçlarını ve en iyi uygulamaları, simgeler kullanmaktan ilgili dillerin seçilmesine ve konumlandırmaya kadar takip ettiğinizden emin olun.
Şimdi, bir Linguise hesabı kaydedin, web sitenizi ekleyin ve daha iyi bir kullanıcı deneyimi sağlamak için dil seçiciyi ince ayar yapın. Linguise’nın üstün özelliklerinin keyfini çıkarmak için 1 aylık ücretsiz deneme özelliğini denemeyi unutmayın!
