Squarespace'de Geçiş Yapmak: Dil Düğmenizi Nasıl Tasarlarsınız?

Demek Squarespace sitenizi çok dilli hale getirdiniz. Bravo, kudos, mabrouk- bunu görmeyi seviyoruz!

Şimdi ne olacak?

Son zamanlarda Squarespace hakkında konuştuğumuzu fark etmişsinizdir ve bunun nedeni, müşterilerimizin birçoğunun onu kullanıyor ( e-ticaret için bile) ve gerçekten harika bir iş çıkarıyor olmasıdır.

Gördüğümüz en iyi Weglot Squarespace siteleri, özellikle "Şimdi ne olacak?" sorusunu sorduktan sonra sitelerinin mikro ayrıntılarını geliştirmeye devam eden sitelerdir.

Weglot kullanmanın avantajlarından biri de dil değiştirme düğmesi tasarımınızda sahip olduğunuz esnekliktir. Çoğu web tasarımcısının size söyleyeceği gibi, bir sayfadaki içe aktarılan öğelerin (eklentiler, eklentiler veya diğer uygulama bileşenleri) görünümü ve hissi üzerinde tam kontrole sahip olmak nadir bir lükstür.

Çoğu durumda, sitenize eklediğiniz uygulamalar veya eklentiler belirli bir şekilde görünecek ve bunları yapan geliştiricilerin markasına uyacak şekilde önceden programlanmıştır. Bu, kullanıcıya eklenti öğesinin siteye özgü olmadığını ve başka bir yerden geldiğini açıkça gösterir. Mükemmel şekilde işlevsel bir widget olsa bile, görsel olarak sitenin geri kalanından farklı olabilir.

Weglot bu şekilde çalışmaz ya da en azından çalışmak zorunda değildir. Weglot 'u Squarespace sitenize yüklediğinizde, başlangıçta sayfanızın sağ alt köşesinde buna benzeyen bir dil değiştirme düğmesi göreceksiniz:

Oldukça basit, değil mi? Bu 1. aşama dil değiştiricinin arkasındaki fikir mümkün olduğunca tarafsız olmaktır: yüksek renkler yok, vahşi tipografi yok, sadece ihtiyacınız olanı yapan net, temiz bir düğme.

Ve pek çok insan işlevsel görünümün hayranı, ki bu da gayet normal. Beyaz dikdörtgen size ve sitenize uygunsa, ne derler bilirsiniz (belki de bilmezsiniz ama artık bilirsiniz): "Bozulmadıysa, düzeltmeyin." (Fransızca'da bazen "On ne change pas une équipe qui gagne" deriz - bu da işe yarar).

Ancak güzel, temiz dikdörtgeninize bakıyor ve hala memnuniyetin tadını çıkarmıyorsanız, umudunuzu kaybetmenize gerek yok.

Düğmemi nereye koymalıyım?

"Düğme yerleştirme" kavramı size önemsiz gelebilir, ancak günde kaç düğmeye bastığınızı bir düşünün. Buna akıllı telefon klavyesindeki tuşlar da dahil çocuklar; yıl 2019 ve parmaklarımız muhtemelen sabun ve suyla temas ettiğinden daha fazla düğmeyle temas ediyor(iğrenç ama gerçek). Mesele şu ki, düğmeler her yerde.

Sitenizi olası her okuyucu için okunaklı hale getirmek sizin için bir öncelikse (ki objektif olarak öyle olmalıdır - özellikle de dönüşüm oranınızı artırmak veya sitenizi dünya çapında daha erişilebilir hale getirmek istiyorsanız), sitenizi anında kendi dillerine çevirebileceklerinden emin olmak isteyeceksiniz.

Yan meseleler.

Evet, doğru okudunuz. Elbette, boyut da önemlidir - minicik bir düğmenin özellikle görünür olması ve dolayısıyla tıklanma olasılığı daha da düşüktür.

Ancak web tasarımı temelde uzamsal bir bulmacadır ve bunu bir oyun olarak düşünürsek, oyun tahtanız iki ana ekseni (sol-sağ ve üst-alt veya isterseniz "x" ve "y") olan 2 boyutlu bir dikdörtgenle sınırlıdır ve bir web sitesinin tüm amacı çok fazla bilgi içerebilmesidir. Tüm bağlantılarınızı, resimlerinizi, videolarınızı ve diğer eğlenceli interaktif öğelerinizi bu kısıtlı alana nasıl sığdırabilir ve en önemlilerini diğerlerinden ayırmadan nasıl öne çıkarabilirsiniz?

Bir öğenin sayfadaki yerleşiminin (her bir eksenin ne kadar uzağında yer aldığı),izleyicilerin onu ne kadar hızlı bulacağını ve onunla etkileşime geçme olasılığını kritik birşekilde etkilediğini destekleyen araştırmalar var. Bu iki koşul mutlaka nedensel olarak bağlantılı değildir, ancak kullanıcıların harekete geçirici mesaj ("CTA") veya düğme yerleşimi konusundaki doğal tercihlerini dikkate almaya değer kılacak kadar birbirleriyle ilişkilidirler.

Peki araştırma tam olarak ne diyor diye sorabilirsiniz?

Şaşırtıcı olmayan bir şekilde, kullanıcının ana dili - ya daen azından web'de gezinmeye en alışkın olduğu dil - web sayfalarıyla nasıl etkileşime girdikleri üzerinde oldukça önemli bir etkiye sahiptir.

Material Design'daki UI-UX tasarım uzmanları, soldan sağa ("LTR" - İngilizce gibi) ve sağdan sola ("RTL", Arapça veya İbranice gibi) okunan diller arasında hangi web sayfası öğelerinin ayarlanması gerektiği (ve hangilerinin ayarlanmaması gerektiği) hakkında derinlemesine bir kılavuz yayınladı.

Onlar kadar ayrıntıya girmeyeceğiz, ancak dil yönünü ayarlamak için yalnızca düğmelerden daha karmaşık görsel öğeleriniz (örneğin simgeler) varsa buraya göz atabilirsiniz.

Bununla birlikte, okumaya alışkın olduğumuz yönün neden farklı yerlerdeki CTA'lara karşı duyarlılığımızı etkilediğinin somut psikolojik açıklamaları vardır - bunlardan biri olan Gutenberg diyagramı, bir sayfadaki öğelere bakma sıramız ile her biri üzerinde ne kadar zaman harcadığımız arasındaki ilişkiyi göstermektedir.

Web'de bu olguyu ayrıntılı olarak açıklayan pek çok başka kaynak var -örneğin bukaynak -ancak Weglot 'ta dil değiştirici düğmenizi varsayılan olarak sayfanın sağ alt köşesine yerleştirme kararımızın tesadüf olmadığını söylemek yeterli olacaktır. İki boyutlu bir ekranda bu yerleşim, LTR okuyan bir kullanıcının gözlerini dinlendirme ve kendisine sunulan CTA ile etkileşime girme olasılığının son derece yüksek olduğu terminal alanını oluşturur. Söz konusu CTA bir dil değiştirici düğmesiyse, bu, sitenizi onlar için erişilebilir hale getirmenin bir yolunu bulmakta çok az sorun yaşayacakları anlamına gelir.

Sonuç olarak, düğmenizi sayfanın hangi tarafına yerleştirdiğiniz, kullanıcıların onu ne kadar kolay bulabilecekleri üzerinde büyük bir etkiye sahiptir. Sitenizin başlangıç dili LTR formatındaysa (İngilizce, Fransızca, İspanyolca, basitleştirilmiş Çince... gibi), bu, düğmenizi sayfanın sağ tarafına doğru tutmanız anlamına gelir.

Elbette, ilk sitenizi Arapça, İbranice veya Farsça gibi bir RTL dilinde oluşturuyorsanız, bununtersini yapmak ve bu düğmeyi sol tarafta tutmak isteyeceksiniz.

Dubai Font web sitesi, hem ana sayfanın varsayılan dili olan İngilizce hem de İngilizce sayfanın sağ üst köşesindeki düğme aracılığıyla seçebileceğiniz dil olan Arapça için bu organizasyonun nasıl görünmesi gerektiğine dair mükemmel bir örnek sunmaktadır. Dil değiştiğinde bu yönlülüğün nasıl değiştiğine dikkat edin.

Ama menüyü görebilir miyim lütfen?

Hala neden bunun yerine "Birincil Optik Alan" bölgesine koymadığınızı düşünüyor olabilirsiniz. -Ve bu geçerli bir soru.

Unutmayın ki bu web sitesi muhtemelen markanızın veya başka bir projenizin web sitesidir; bu nedenle bu bölümü logo gibi etkili bir kişisel tanımlayıcıya ayırmak isteyebilirsiniz.

Bununla birlikte, güçlü nadas alanı, terminal alanı gibi, düğme yerleştirmek için iyi bir adaydır - özellikle de sayfanızın üstünde yatay bir menünüz varsa (bugünlerde çoğu web sitesi için durum böyledir).
Üst menü çubukları, özellikle Squarespace'de dil değiştirme düğmeleri için oldukça iyi yerlerdir.

Squarespace'de menü düğmeleri: Stilize edin, sentezleyin ve yerelleştirin

Weglot dil değiştirme düğmesini Squarespace'deki bir menü çubuğuna entegre etmek (ve bu, hangi tarafta olursa olsun her türlü menü çubuğu için geçerlidir - bu nedenle dil yönlülüğünüz bunun nasıl çalıştığını etkilemez) çok kolaydır.

Site düzenleyicinizde "Sayfalar "a tıklayabilirsiniz, bu da sizi aşağıdaki gibi görünen bir kenar çubuğuna yönlendirecektir:

"Ana Gezinti" başlığının yanındaki "+" işaretine tıklayarak ana başlık menünüze bağlantılar ve/veya açılır menüler ekleyebileceksiniz.

İster sitenizin mevcut dillerini ana menüde doğrudan seçenekler olarak eklemeyi seçin...

...ya da daha doğrusu, entegre bir açılır menünün öğeleri olarak...

...emin ellerdesiniz: süreç aynıdır. Bir açılır menü oluşturursanız, sitenize eklediğiniz her dil için bağlantılar (ana gezinti menüsündeki "+" komutunda olduğu gibi) ve aşağıdaki işlemi de ekleyebilirsiniz.

Ana menü çubuğunuza veya entegre bir açılır menüye bir bağlantı eklemeyi seçtikten sonra, aşağıdaki gibi bir açılır pencere göreceksiniz:

Bağlantıyı, sitenizi değiştirmesini istediğiniz dilin adı olarak adlandırın. Elbette dili orijinal dilinizdeki adıyla çağırabilirsiniz - örneğin, orijinal sitenizi İngilizce olarak oluşturuyorsanız "Español" yerine "Spanish" kullanabilirsiniz - ancak dili konuşanların daha kolay tanıyabilmesi için başlık olarak dilin yerel adını koymanızı öneririz. Tl;dr: "İspanyolca" yerine "Español"; "Fransızca" yerine "Français"; ve saire, ve saire tercih edin.

Ardından, bu başlığın yönlendirmesini istediğiniz bağlantıyı girmeniz gerekecek. Weglot Squarespace siteniz alt klasörlerdeki yinelenen sayfalardan değil, her dil için ayrı alt alan adlarından oluştuğundan, aslında ayrı bir URL'ye bağlantı vermeyeceksiniz. Bunun yerine, "Weglot" dizesini ve ardından üzerinde çalıştığınız dil için iki harfli ISO dil kodunu girin ( bunların tam listesini burada bulabilirsiniz).

Bunu bir kez yaptıktan sonra, dil başlıklarınızın ana menünüze mükemmel bir şekilde entegre edildiğini göreceksiniz...

...bu adamlar gibi.

Çok dilli Squarespace sitenizin şık ve iyi görünümlü olması temelde garantidir; Squarespace şablonlarının doğası gereği sitenizi parlatmak ve profesyonel görünmesini sağlamak tıklayıp sürüklemek kadar kolaydır.

Elbette bu, sitenizin görünümünü kişiselleştirmeye ve gerçekten kendinize ait hale getirmeye çalışmanıza engel olmamalıdır.

Çok dilli bir sitede, kişisel marka öğelerinizi sürümler arasında tutarlı tutmak özellikle önemlidir - bu, çok dilli site tasarımının temel ilkelerindenbiridir - ve bu, görüntü renk paletlerinden tipografi stiline ve düğme stiline kadar site estetiğinizi sentezlemek anlamına gelir. Dil değiştirme düğmeniz tüm bu şemanın önemli bir parçasıdır ve siteniz ancak düğmeniz sayfanın genel görsel temasına uyarsa daha güzel olacaktır.

Aynı zamanda, daha önce de üzerinde durduğumuz gibi, düğmenizin diğer sayfa öğelerinden en azından biraz farklı olmasını istersiniz, böylece kullanıcıların hızlı bir şekilde bulması kolay olur. Bulunabilirlik için ayırt edicilikile sayfa kalitesi için tutarlılık arasındaki dengeyi nasıl sağlayabilirsiniz?

Bu tam anlamıyla bir paradoks, ancak çözümsüz de değil. İşte yaratıcı bir şekilde yerleştirilmiş ve tasarlanmış dil değiştirme düğmeleriyle size ilham verecek bazı çok dilli Squarespace siteleri.

Siku Projesi

Sicilya merkezli Siku Project, parçaları yerel İtalyan dikenli armut kaktüsünün liflerinden yapılan yenilikçi bir mücevher şirketi (evet, doğru okudunuz - dikenli armut kaktüsü lifi aslında çevre dostu sert bir malzeme yapmak için kullanılabilir ) ve iki dilli web siteleri de mücevher parçaları kadar şık.

İngilizce ve İtalyanca arasında geçiş yapmanızı sağlayan dil değiştirme açılır menüsü, sayfanın sağ üst tarafındaki ana navigasyon menüsünde, (görsel olarak erişilebilirliği yüksek) bir ipin üzerindeki inci gibi tünemiş durumda.

Keşif Yüzüşü

Siku Project web sitesi, muhtemelen çoğumuzun Squarespace sitelerinin nasıl görüneceğini hayal ettiği gibi görünüyor - tek renkli, görüntü ağırlıklı ve temiz. Ancak Squarespace siteleri renkli ve tuhaf da olabilir - Brüksel'in Expedition Swim projesi de bu yolu seçti (daha doğrusu yüzmeyi).

Sitelerinin amacı, yerel halkı ailelerini şehrin yeni temizlenen göletlerinde yüzmeye getirmeleri için heyecanlandırmak. Eğlenceli, parlak ve dalgalı şekiller ve animasyonlarla dolu (tahmin ettiğiniz gibi suyu çağrıştırıyor) ve dil değiştiricileri, nav çubuğunun sağ üst kısmına mükemmel bir şekilde uyuyor.

Üç dili (Fransızca, İngilizce ve Hollandaca) evrensel olarak tanınabilir iki harfli dil kodlarıyla (FR, EN ve NL) göstererek süper kullanıcı dostu hale getirdiler, açılır menü tıklaması gerekmiyor. Serin bir yaz aktivitesi arayan gençlere kadar her bruxellois, siteyi kendi dillerine nasıl çevireceklerini iki saniye içinde kolayca bulabilecekler.

SalesCandy

Saas girişimi SalesCandy, temelde çok kültürlü ve doğası gereği çok dilli bir toplum olan Malezya'da yerleşik. Çok dilli bir siteye sahip olmak, bu tür bir iş ortamında mutlak bir gerekliliktir ve SalesCandy, her okuyucunun kendi ana diline erişimini kolaylaştırmak için biraz öngörüde bulunmuştur.

Bunu nasıl başarmışlar? Özellikle iki şey: a) dil açılır menüsü (evet, bunu gerçekten yeterince vurgulayamıyoruz) sayfanın sağ tarafında güzel bir şekilde konumlandırılmış ve b) dil seçenekleri yerel olarak yazılmış -yani, bu şekilde:

İlham mı geldi?

Kesinlikle öyle umuyoruz. Squarespace sitenizi veya mağazanızı açmaya ve çok dilli kitleniz için optimize etmeye hazırsanız, tasarım sürecinize nasıl başlayacağınıza ve ayrıntıları çözdükten sonra Squarespace'te nasıl globalleşeceğinize dair bazı ipuçlarını burada bulabilirsiniz.