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 istediklerinde sıklıkla ziyaret edeceği şeydir.
Etkili bir dil değiştirme düğmesi, web optimizasyonundan satışları artırmaya kadar bir web sitesi için çeşitli faydalar sağlayabilir.
Bu makalede, dil seçicileri tasarlama için en iyi uygulamaları tartışacağız. Bu konuyu aşağıdaki makalede daha ayrıntılı olarak ele alalım.
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 listedeki tercih ettiği dili seçebilir. Seçildikten 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, dil beceri düzeyine bakılmaksızın daha geniş bir kitleye erişilebilir dijital içerik sağlayarak 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.
Dil değiştiricinizi neden özelleştirmeniz gerekiyor?
Çok dilli bir web sitesinde dil değiştiricisini özelleştirmek birçok önemli fayda 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ülerı 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 kullanmasını sağlayan 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şine 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ştirme özelleştirmesi, satış dönüşümünü artırma avantajı da sağlayabilir. Etkili bir dil değiştirici, kullanıcıların web sitenizle etkileşime girerken konfor sağlamasına yardımcı olabilir. CSA Araştırma verilerine göre, tüketicilerin %72,4'ü kendi dilindeki bilgileri içeren ürünleri satın alma olasılıklarının daha yüksek olduğunu söyledi. Bu nedenle, satış seviyenizin de artmaması imkansızdır.
Farklı dil seçici türleri
Her web sitesi sahibi, dil seçicilerinin nasıl göründüğünü dikkatlice düşünür, her web sitesi elbette farklı tercihlere sahip olacaktır. 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 düğmesi 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ğıdır. Kullanıcılar dil düğmesine tıkladığında, ilgili dildeki web sitesi sürümüne yönlendirilir.
Dil düğmeleri için, dağınık bir görünümden kaçınmak 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 konuları makalenin sonraki bölümünde daha ayrıntılı olarak tartışacağı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 bir örnek aşağıda verilmiştir.
Metin bağlantısı
Metin bağlantıları, dil adının bir bağlantı olarak kullanılmasını sağlayan bir tür dil değiştiricisidir. Ö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çmelerini kolaylaştırmak için bir liste veya açılır menüde yerleştirilir.
Bir tür bağlantı dili seçicisi, büyük şirket Facebook tarafından kullanılmaktadır; listelenen dillerin yanı sıra, daha fazla dil bulmak için (+) simgesine de basabilirsiniz.
Bundan sonra sayfa, önceden seçilen dile hemen ç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ı ve 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 web sitesinden alınan ö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 menü mü, Liste mi, Pop-up mı: Hangisi en iyisi?
Dil seçiciniz 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ı bulunmaktadır.
Tür | Güçlü yönler | Sınırlamalar | En İyi Kullanım Senaryosu |
Açılır menü | Kompakt, temiz, ölçeklenebilir, birçok dil | Etkileşim gerektirir (tıklama/dokunma), tüm kullanıcılar için belirgin olmayabilir | Alan kısıtlamaları olan çok dilli web siteleri |
Metin Listesi | Etkileşim olmadan görünür, kilit diller için 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ğine sahip 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'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 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çicinizi tüm kullanıcılar için net, kullanışlı ve erişilebilir hale getirmek için uygulayabileceğiniz en iyi uygulamalar yer almaktadır.
Duyarlı tasarımı önceliklendirin
Kullanıcıların çoğu web sitelerine mobil cihazlardan erişiyor, bu nedenle dil seçiciniz duyarlı ve mobil uyumlu olmalıdır. Buton veya menünün kolayca dokunulabilir, önemli içeriği kapatmayacak ve küçük ekranlarda görünür kalacak şekilde olduğundan emin olun.
Örneğin, dil seçicisi web sitesi böyle görünür.
Ardından, mobil taraftan bakıldığında, dil seçicisine hala kolayca erişilebilir ve hareket etmez veya kaybolmaz.
Düzenin düzenli kalmasını sağlamak için açılır menüler veya genişletilebilir menüler kullanın ve rahat etkileşim için dokunma hedeflerinin yeterli boşluğa sahip olduğundan emin olun. Bu, kullanıcıların tercih ettikleri dili, dar veya tıklanması zor öğeler nedeniyle oluşan hayal kırıklığı olmadan kolayca seçmelerine yardımcı olur.
Arayüzde düşünceli yerleştirme
Dil seçicisini, üstbilginin sağ üst köşesi veya alt bilgi gibi dil seçeneklerinin genellikle arandığı sezgisel konumlara 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. Sık sık 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çicinizin engelli kullanıcılar için erişilebilir olmasını sağlamak için ARIA (Erişilebilir Zengin İnternet Uygulamaları) özelliklerini kullanın, örneğin aria-label, aria-haspopup ve aria-expanded gibi. 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.
Net ve tanınabilir dil etiketleri kullanın
Her dil seçeneğini yerel etiketiyle görüntüleyin, örneğin, “Spanish” yerine “Español” veya “German” yerine “Deutsch”. Bu, kullanıcıların mevcut site dilini anlamasalar bile tercih ettikleri dili hızlı bir şekilde 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. Kullandığınız kitle bunları bilmiyorsa, belirsiz kısaltmalar veya dil kodları kullanmaktan kaçının.
Çok fazla seçenekle aşırı yüklemekten kaçının
Bir 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 geri kalanını 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 simgeler ve görsel ipuçları kullanın (bayraklara güvenmeden)
Küresel simgeler (🌐), aşağı 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 ulusal bayrakları dil temsil etmek için kullanmaktan kaçının.
Bayraklar kültürel veya politik anlamlar da taşıyabilir. Görselleri kullanıyorsanız, netlik sağlamak için metin etiketleriyle eşleştirin ve simgeleri tutarlı ve kültürel olarak nötr tutun.
Web sitesi tasarımı ve markalaşma ile tutarlı kalın
Dil seçiciniz, web sitenizin genel stilini görsel olarak yansıtmalıdır. Buton, metin bağlantıları veya simgeler kullanıyor olmanızdan bağımsız olarak, tipografi, renkler ve hover 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, amacına uygun çalıştığından emin olmak için farklı tarayıcılarda ve cihazlarda test edin. Tutarlı tasarım ve güvenilir işlevsellik, sorunsuz çok dilli kullanıcı deneyimine 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 sağlamaz.
Ama endişelenmeyin çünkü Linguise böyle değil. Linguise , dil değiştiricinin kullanıcı özelleştirmesini sağlayan otomatik bir çeviri hizmetidir. Linguise 'u kullanırken elde edeceğiniz bazı faydalar şunlardır.
- Linguise kullanılabilir ve 40'tan fazla CMS'e entegre edilebilir (WordPress, Joomla, Drupal, vb.).
- Çeviri, dili web sitesindeki dil değiştiriciye ekledikten sonra sadece birkaç saniye içinde otomatik olarak çeşitli dillere yapılacaktır.
- Dil seçiciye eklenebilecek 80'den fazla dil mevcuttur.
- Linguise otomatik olarak çeviri hedef diline göre benzersiz bir URL hazırlar. Örneğin URL linguise.com/de/ Almancaya çevrilen bir sayfa içindir.
- 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 kurabilirsiniz, simge, renk ve dil adından başlayarak.
- 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 ÖYS örneği olarak WordPress kullanacağız.
Adım 1: Linguise ücretsiz hesabı kaydolma
Adım 2: Çok dilli web sitenize alan adı ekleyin
İkinci adım, web sitesi alan adını Linguise'a Linguise kontrol paneline eklemektir. Başlangıçtan itibaren doldurmanız gereken birkaç şey var.
- Hesap
- URL'ler
- Platform
- Dil
- Çeviri dili
- URL'yi çevir
Daha 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 okuyabilirsiniz, özellikle WordPress için, kurulum Linguise otomatik çeviri WordPress veya aşağıdaki video eğitimini izleyerek görebilirsiniz.
Adım 3: Linguise eklentisini yükleyin
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ştirici yapılandırmak veya dil bayrakları görüntülemek için adımlar Linguise kontrol panelinden Ayarlar > Dil bayrakları görüntüleme menüsü.
İlk kurulum sırasında, farklı bileşenleri dikkate alarak ana ekranı ayarlayacağız.
İlk dikkat edilmesi gereken şey, yan yana, açılır menü veya açılır pencere gibi seçmek için üç seçenek sunan dil listesi görüntüleme formatının yapılandırılmasıdır. Sol tarafta, her format için bir önizleme ekranı vardır.
Aşağıda gösterilen ilk biçim, yan yana bir düzendir.
Aşağıdaki biçim, aşağıda resimde gösterildiği gibi bir açılır stil 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çiler tarafından kolayca fark edilebilecek bir konum seçmek önemlidir.
Son olarak, dil seçeneklerini görüntülemek için kombinasyon tercihine karar vermeniz gerekir. Bayrak + dil adı, bayrak + kısa ad veya sadece bayrağı tek başına görüntüleme gibi seçenekler arasından seçim yapabilirsiniz. Bu karar, sizin özel tasarım tercihlerinize ve hedef kitlenizin tercihine bağlı olacaktır.
Adım 5: Bayrak tasarımını ayarla
Bundan sonra, ana ekran bölümünün altında, bayrak için özel tasarım konfigürasyonlarıyla karşılaşacaksınız. Aşağıda verilen resim, mevcut bazı ayar seçeneklerini göstermektedir.
- Dil adı gösterimi: Dil adını ya ülkeye ya da dile 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, “İ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 ayarlayın
Bayrak tasarımı ayarlandıktan sonra, bir sonraki adım renkleri, boyutu ve diğer çeşitli öğeleri ayarlamayı içerir. Aşağıdaki arayüzde, çok sayıda özelleştirilebilir ayar bulacaksınız, bunlar dahil:
- Bayrak kenar yuvarlatması: Bu, dikdörtgen bir bayrak kullanırken piksel cinsinden kenar yuvarlatmasını kişiselleştirmenizi sağlar.
- 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 tercihinize göre değiştirme seçeneğiniz vardır.
- Dil adı üzerine gelindiğinde renk: Bu ayar, fareyi dil adları üzerine getirdiğinizde metin rengini kontrol eder.
- Açılır pencere dil rengi: Benzer şekilde, bu ayar, açılır pencerede veya açılır menüde fareyle dil başlığı üzerine gelindiğinde metin rengini belirler.
Adım 7: Bayrak kutusu-gölge ayarlayın
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ğı üzerine gelindiğinde gölge efektini ifade eder.
Dil değiştirici için yaptığınız özelleştirme ayarlarını korumak için Kaydet butonuna 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, işte başlangıçta, sağ üst köşede konumlandırılmış ve ilk harfleri kullanarak bir açılır pencere kullanarak dil seçici ekranın bir örneği. Bu sadece bir örnek, geri kalanını istediğiniz gibi ve sitenin ihtiyaçlarına göre özelleştirebilirsiniz.
dışında WordPress CMS, diğer web sitesi platformlarını da kullanabilir ve için ayar anahtarı gibi ayrıntılı kılavuzu takip edebilirsiniz OpenCart, için dil anahtarı Drupal, ve için ayar anahtarı PrestaShop.
Dil seçicinizi Linguiseile sorunsuz çok dilli bir deneyim için tasarlayın!
Burada, dil seçicileri tasarlamak için en iyi uygulamalar ve Linguisekullanarak nasıl yapılacağı hakkında bilgi sahibi oldunuz! İnanın bana, dil değiştirici oluşturmak birçok fayda sağlayabilir ve yukarıda belirtilen noktalara dayalı optimizasyonu sağlayabilir.
Bir dil seçici oluştururken, yukarıda açıkladığımız en iyi uygulamaları ve ipuçlarını takip ettiğinizden emin olun, simgeleri kullanmaktan ilgili dilleri seçmeye ve konumlandırmaya kadar.
Şimdi, bir Linguise hesabı kaydedin, web sitenizi ekleyin ve daha iyi bir kullanıcı deneyimi sağlamak için dil seçiciyi ince ayarlayın. 1 aylık ücretsiz deneme özelliğini deneyerek Linguise'nin üstün özelliklerinin keyfini çıkarın!
