Przełączanie się na Squarespace: Jak zaprojektować przycisk języka

Uczyniłeś swoją witrynę Squarespace wielojęzyczną. Brawo, brawo, mabrouk -uwielbiamy to widzieć!

Co teraz?

Być może zauważyłeś, że ostatnio rozmawialiśmy o Squarespace, a to dlatego, że wielu naszych klientów korzysta z niego (nawet w handlu elektronicznym) - i wykonuje naprawdę świetną robotę.

Najlepsze strony Squarespace Weglot, jakie widzieliśmy, to te, które wciąż udoskonalały mikro-detale swoich witryn, zwłaszcza po zadaniu pytania "Co teraz?".

Jedną z zalet korzystania z Weglot jest elastyczność w projektowaniu przycisków przełączania języków. Jak powie większość projektantów stron internetowych, posiadanie pełnej kontroli nad wyglądem importowanych elementów - wtyczek, dodatków lub innych komponentów aplikacji na stronie - jest rzadkim luksusem.

W wielu przypadkach aplikacje lub wtyczki dodawane do witryny są wstępnie zaprogramowane tak, aby wyglądały w określony sposób i były zgodne z marką deweloperów, którzy je stworzyli. To sprawia, że dla użytkownika jest jasne, że element wtyczki nie jest natywny dla witryny i pochodzi z innego miejsca. Nawet jeśli jest to doskonale funkcjonalny widget, nadal może wyróżniać się wizualnie od reszty witryny.

Weglot nie działa w ten sposób - a przynajmniej nie musi. Po zainstalowaniu Weglot na swojej stronie Squarespace, początkowo zobaczysz przycisk zmiany języka, który wygląda tak, w prawym dolnym rogu strony:

Całkiem proste, prawda? Ideą tego przełącznika językowego fazy 1 jest bycie tak neutralnym, jak to tylko możliwe: bez krzykliwych kolorów, bez dzikiej typografii, po prostu jasny, czysty przycisk, który robi to, czego potrzebujesz.

Wiele osób jest fanami funkcjonalnego wyglądu, co jest całkowicie w porządku. Jeśli biały prostokąt pasuje do Ciebie i Twojej witryny, wiesz, co mówią (a może nie, ale teraz już wiesz): "jeśli nie jest zepsute, nie naprawiaj tego". (W języku francuskim czasami mówimy "On ne change pas une équipe qui gagne" - to też działa).

Ale jeśli patrzysz na swój ładny, czysty prostokąt i nadal nie jesteś zadowolony, nie musisz tracić nadziei.

Gdzie powinienem umieścić przycisk?

Cała koncepcja "rozmieszczenia przycisków" może wydawać się trywialna, ale pomyśl o tym, ile przycisków naciskasz dziennie. Dotyczy to również klawiszy na klawiaturze smartfona, dzieci; jest rok 2019, a nasze palce prawdopodobnie mają kontakt z większą liczbą przycisków niż z mydłem i wodą(obrzydliwe, ale prawdziwe). Chodzi o to, że przyciski są wszędzie.

A jeśli uczynienie witryny czytelną dla każdego możliwego czytelnika jest dla Ciebie priorytetem (co, całkiem obiektywnie, powinno być - zwłaszcza jeśli chcesz zwiększyć współczynnik konwersji lub po prostu uczynić swoją witrynę bardziej dostępną na całym świecie), będziesz chciał upewnić się, że mogą natychmiast przełączyć ją na swój własny język.

Sprawy poboczne.

Tak, dobrze przeczytałeś. Oczywiście, rozmiar również ma znaczenie - jest mało prawdopodobne, że miniaturowy przycisk będzie szczególnie widoczny, a zatem jeszcze mniej prawdopodobne, że zostanie kliknięty.

Ale projektowanie stron internetowych jest zasadniczo przestrzenną łamigłówką, a jeśli myślimy o tym jak o grze, twoja plansza do gry jest ograniczona do dwuwymiarowego prostokąta z dwiema głównymi osiami - lewa-prawa i góra-dół, lub "x" i "y", jeśli wolisz - a cały sens strony internetowej polega na tym, że może ona zawierać wiele informacji. Jak zmieścić wszystkie linki, obrazy, filmy i inne zabawne interaktywne elementy w tej ograniczonej przestrzeni - i sprawić, by najważniejsze z nich wyróżniały się, nie odrywając się od innych?

Istnieją badania potwierdzające, że umiejscowienie elementu na stronie - jak daleko wzdłuż każdej osi kończy się - ma decydującywpływ na to, jak szybko widzowie są w stanie go zlokalizować , a także jak prawdopodobne jest, że wejdą z nim w interakcję. Te dwa warunki niekoniecznie są ze sobą powiązane przyczynowo, ale są dość skorelowane - na tyle, że warto rozważyć nieodłączne preferencje użytkowników w odniesieniu do wezwania do działania ("CTA") lub umieszczenia przycisku.

Co dokładnie mówią te badania?

Nic dziwnego, że język ojczysty użytkownika - lubprzynajmniej język, w którym jest on najbardziej przyzwyczajony do przeglądania sieci - ma dość istotny wpływ na sposób interakcji ze stronami internetowymi.

Eksperci od projektowania UI-UX z Material Design opublikowali szczegółowy przewodnik na temat tego, które elementy strony internetowej należy dostosować (a które nie) między językami czytanymi od lewej do prawej ("LTR" - jak na przykład angielski) i od prawej do lewej ("RTL", jak arabski lub hebrajski).

Nie będziemy zagłębiać się w szczegóły, ale możesz to sprawdzić tutaj, jeśli masz bardziej złożone elementy wizualne - na przykład ikony - niż tylko przyciski do dostosowania do kierunku języka.

Mając to na uwadze, istnieją konkretne psychologiczne wyjaśnienia, dlaczego kierunek, w którym jesteśmy przyzwyczajeni do czytania, wpływa na naszą podatność na wezwania do działania w różnych miejscach - jedno z nich, zwane diagramem Gutenberga, ilustruje związek między kolejnością, w jakiej patrzymy na elementy na stronie, a tym, ile czasu spędzamy na każdym z nich.

Istnieje wiele innych zasobów w Internecie, które szczegółowo wyjaśniają to zjawisko - naprzykład ten - alewystarczy powiedzieć, że nasza decyzja w Weglot , aby domyślnie umieścić przycisk przełączania języka w prawym dolnym rogu strony, nie była przypadkowa. Na dwuwymiarowym ekranie to miejsce stanowi obszar terminala, w którym użytkownik czytający LTR jest niezwykle skłonny do odpoczynku oczu i interakcji z prezentowanym mu wezwaniem do działania. Jeśli CTA, o którym mowa, jest przyciskiem zmiany języka, oznacza to, że nie będą mieli większych problemów ze znalezieniem sposobu na udostępnienie im witryny.

Ogólnie rzecz biorąc, strona strony, na której umieszczasz przycisk, ma duży wpływ na to, jak łatwo użytkownicy będą mogli go znaleźć. Jeśli początkowy język witryny jest w formacie LTR (np. angielski, francuski, hiszpański, uproszczony chiński...), oznacza to, że przycisk powinien znajdować się po prawej stronie strony.

Oczywiście, jeśli tworzysz swoją początkową witrynę w języku RTL, takim jak arabski, hebrajski lub farsi, będziesz chciałzrobić odwrotnie i zachować ten przycisk po lewej stronie.

Strona internetowa Dubai Font stanowi doskonały przykład tego, jak powinna wyglądać ta organizacja - zarówno dla języka angielskiego, domyślnego języka strony głównej, jak i arabskiego, języka, który można wybrać za pomocą przycisku w prawym górnym ro gu strony anglojęzycznej. Zauważ, jak ta kierunkowość zmienia się, gdy zmienia się język.

Ale czy mogę zobaczyć menu?

Być może nadal zastanawiasz się, dlaczego nie umieścić go w strefie "Primary Optical Area"? -i jest to słuszne pytanie.

Pamiętaj, że jest to nadal Twoja strona internetowa dla, prawdopodobnie, Twojej marki lub innego projektu - więcprawdopodobnie będziesz chciał zarezerwować tę sekcję na jakiś wpływowy osobisty identyfikator, taki jak logo.

Jednak silny obszar odłogowany jest, podobnie jak obszar terminala, dobrym kandydatem do umieszczenia przycisków - zwłaszcza jeśli masz poziome menu na górze strony (co ma miejsce w przypadku... cóż, większości witryn w dzisiejszych czasach).
Górne paski menu są całkiem dobrymi miejscami na przyciski zmiany języka, szczególnie w Squarespace.

Przyciski menu na Squarespace: Stylizuj, syntetyzuj i lokalizuj

Zintegrowanie przycisku przełączania języka Weglot z paskiem menu w Squarespace (i dotyczy to każdego rodzaju paska menu, bez względu na stronę - więc kierunkowość języka nie wpływa na to, jak to działa) jest bardzo proste.

W edytorze witryny możesz kliknąć "Strony", co doprowadzi Cię do paska bocznego, który wygląda mniej więcej tak, jak poniżej:

Klikając znak "+" obok tytułu "Nawigacja główna", będziesz mógł dodać linki i/lub menu rozwijane do głównego menu nagłówka.

Niezależnie od tego, czy zdecydujesz się włączyć dostępne języki witryny jako bezpośrednie opcje w menu głównym...

...a raczej jako elementy zintegrowanego menu rozwijanego...

...jesteś w dobrych rękach: proces jest taki sam. Jeśli utworzysz menu rozwijane, będziesz mógł również dodawać linki (podobnie jak w przypadku polecenia "+" w głównym menu nawigacyjnym) - i następujący proces do każdego języka, który dodałeś do swojej witryny.

Po wybraniu opcji dodania linku do głównego paska menu lub zintegrowanego menu rozwijanego, pojawi się wyskakujące okienko, które wygląda następująco:

Nazwij link nazwą języka, na który chcesz zmienić swoją witrynę. Możesz oczywiście nazwać język jego nazwą w oryginalnym języku - na przykład "hiszpański" w przeciwieństwie do "Español", jeśli tworzysz oryginalną witrynę w języku angielskim - ale zalecamy umieszczenie natywnej nazwy języka jako tytułu, aby jego użytkownicy mogli go łatwiej rozpoznać. Tl;dr: wybierz "Español" w przeciwieństwie do "hiszpańskiego"; "Français" w przeciwieństwie do "francuskiego"; i tak dalej, i tak dalej.

Następnie musisz wprowadzić link, do którego ma prowadzić ten tytuł. Ponieważ Twoja witryna Squarespace Weglot nie składa się ze zduplikowanych stron w podfolderach, ale raczej z indywidualnych subdomen dla każdego języka, w rzeczywistości nie będziesz łączyć się z osobnym adresem URL. Zamiast tego wprowadź ciąg "Weglot", a następnie dwuliterowy kod języka ISO dla języka, nad którym pracujesz ( pełną listę tych kodów znajdziesz tutaj).

Gdy już to zrobisz, zobaczysz tytuły językowe doskonale zintegrowane z menu głównym...

...Jak ci faceci.

Twoja wielojęzyczna witryna Squarespace jest w zasadzie gwarantowana jako elegancka i dobrze wyglądająca - taka jest natura szablonów Squarespace, które ułatwiają dopracowanie witryny i nadanie jej profesjonalnego wyglądu.

Oczywiście nie powinno to powstrzymywać cię przed próbą spersonalizowania wyglądu witryny i uczynienia jej naprawdę własną.

W przypadku witryny wielojęzycznej szczególnie ważne jest zachowanie spójności elementów marki osobistej we wszystkich wersjach - jest to jedna z podstawowych zasad projektowania witryn wielojęzycznych - ato oznacza syntezę estetyki witryny, od palet kolorów obrazów, przez styl typografii, po styl przycisków. Przycisk przełączania języka jest kluczową częścią tego całego schematu , a Twoja witryna będzie piękniejsza tylko wtedy, gdy przycisk będzie pasował do ogólnego motywu wizualnego strony.

Jednocześnie, jak już wspomnieliśmy, chcesz, aby Twój przycisk przynajmniej trochę wyróżniał się na tle innych elementów strony, aby użytkownicy mogli go szybko znaleźć. Jak osiągnąć równowagę między wyróżnialnością -dla łatwości znalezienia - a spójnością, dla jakości strony?

Jest to dosłowny paradoks, ale nie nierozwiązywalny. Oto kilka wielojęzycznych witryn Squarespace, które zainspirują Cię kreatywnie rozmieszczonymi i zaprojektowanymi przyciskami zmiany języka.

Projekt Siku

Siku Project z siedzibą na Sycylii to innowacyjna firma jubilerska, której elementy wykonane są z włókien lokalnego włoskiego kaktusa opuncji figowej (tak, dobrze przeczytałeś - włókno kaktusa opuncji figowej może być faktycznie wykorzystane do produkcji ekologicznego twardego materiału), a ich dwujęzyczna strona internetowa jest równie elegancka, jak ich biżuteria.

Ich rozwijane menu przełączania języków, które pozwala na przełączanie się między językiem angielskim i włoskim, znajduje się w głównym menu nawigacyjnym w prawym górnym rogu strony, niczym perła na (bardzo dostępnym wizualnie) sznurku.

Expedition Swim

Strona internetowa Siku Project wygląda tak, jak wielu z nas prawdopodobnie wyobraża sobie witryny Squarespace - jest monochromatyczna, bogata w obrazy i czysta. Witryny Squarespace mogą być jednak również kolorowe i zwariowane - tak właśnie wygląda brukselski projekt Expedition Swim.

Celem ich strony jest zachęcenie mieszkańców do zabrania swoich rodzin na pływanie w nowo oczyszczonych stawach miejskich. Jest zabawna, jasna i pełna falistych kształtów i animacji (które przywołują na myśl - zgadłeś - wodę), a ich suwak językowy idealnie pasuje do prawej górnej części paska nawigacyjnego.

Uczynili go bardzo przyjaznym dla użytkownika, pokazując swoje trzy języki - francuski, angielski i holenderski - za pomocą ich powszechnie rozpoznawalnych dwuliterowych kodów językowych (FR, EN i NL), bez konieczności klikania w menu rozwijane. Każdy bruxellois, aż po młodzież, szukający fajnej letniej aktywności, z łatwością będzie w stanie w dwie sekundy dowiedzieć się, jak przełączyć stronę na swój własny język.

SalesCandy

Startup Saas SalesCandy ma siedzibę w Malezji, społeczeństwie zasadniczo wielokulturowym i z natury wielojęzycznym. Posiadanie wielojęzycznej witryny jest absolutną koniecznością w tego rodzaju środowisku biznesowym, a SalesCandy z wyprzedzeniem ułatwiło każdemu czytelnikowi dostęp do ich ojczystego języka.

Jak im się to udało? W szczególności dwie rzeczy: a) ich rozwijane menu językowe jest (tak, naprawdę nie możemy tego wystarczająco podkreślić) ładnie umieszczone po prawej stronie strony i b) opcje językowe są napisane natywnie - toznaczy w ten sposób:

Czujesz się zainspirowany?

Z pewnością mamy taką nadzieję. Jeśli jesteś gotowy, aby uruchomić swoją witrynę lub sklep Squarespace i zoptymalizować go pod kątem poliglotycznej publiczności, oto kilka wskazówek, jak rozpocząć proces projektowania, a po dopracowaniu szczegółów, jak wejść na rynek globalny w Squarespace.