Selektor języka jest ważnym elementem, na który należy zwrócić szczególną uwagę podczas tworzenia witryny wielojęzycznej, ponieważ przełącznik języka jest tym, co użytkownicy często odwiedzają, gdy chcą zmienić język.
Skuteczny przycisk przełączania języka może zapewnić wiele korzyści dla witryny, od zwiększenia optymalizacji sieciowej po zwiększenie sprzedaży.
W tym artykule omówimy najlepsze praktyki dotyczące projektowania selektorów języka. Omówmy to dalej w następnym artykule.
Co to jest selektor języka?
Selektor języka to element interfejsu użytkownika lub funkcja, która umożliwia użytkownikom wybór języka, w którym chcą korzystać ze strony internetowej, aplikacji lub dowolnej platformy cyfrowej. Jest powszechnie stosowany na stronach internetowych, aplikacjach programowych i innych interfejsach cyfrowych, aby dostosować się do użytkowników mówiących różnymi językami.
Selektor języka zwykle wyświetla listę dostępnych języków, a użytkownik może wybrać język swojego wyboru z tej listy. Po wybraniu, zawartość interfejsu, w tym tekst, etykiety, a czasem obrazy, będą wyświetlane w wybranym języku. Jest to szczególnie ważne dla stron internetowych i aplikacji, które obsługują globalną publiczność lub różnorodną bazę użytkowników.
Selektory języka przyczyniają się do lepszego doświadczenia użytkownika, udostępniając treści cyfrowe szerszemu gronu odbiorców, niezależnie od poziomu znajomości języka. Są kluczowym elementem działań lokalizacyjnych, umożliwiając programistom i projektantom dostosowanie swoich produktów do różnych kontekstów językowych i kulturowych.
Dlaczego trzeba dostosować swój przełącznik języka?
Dostosowanie przełącznika języka na wielojęzycznej stronie internetowej ma kilka ważnych korzyści.
- Wyrównanie marki i styl wizualny: Dostosowując przełącznik języka, możesz zapewnić, że wygląd i styl używanego języka są spójne z brandingiem i stylem wizualnym Twojej witryny. Możesz dostosować przyciski lub menu przełączania języka, aby pasowały do ogólnego designu Twojej witryny, tworząc spójność w doświadczeniu użytkownika.
- Większa kontrola nad wyświetlanymi językami: Czasami możesz chcieć ograniczyć niektóre języki wyświetlane w przełączniku języka. Na przykład możesz mieć ograniczoną wersję swojej strony internetowej w kilku językach i chcesz wyświetlać tylko te języki w przełączniku języka. Dostosowując przełącznik języka, możesz wybrać, które języki są wyświetlane, dając Ci większą kontrolę nad dostępnymi treściami.
- Zoptymalizowane doświadczenie użytkownika: Dostosowując przełącznik języka, możesz stworzyć zoptymalizowane doświadczenie użytkownika. Na przykład, możesz dostosować układ lub pozycję przełącznika języka, aby ułatwić użytkownikom jego znalezienie. Możesz również dodać funkcje, takie jak powiadomienia lub instrukcje przełączania języka, które pomagają użytkownikom zrozumieć, jak korzystać z tej funkcji w łatwy sposób.
- Zaspokajanie różnych potrzeb użytkowników: Każdy użytkownik ma inne preferencje językowe. Dostosowując przełączanie języka, możesz zaspokoić potrzeby użytkowników z różnych środowisk językowych. Mogą to być użytkownicy lokalni, międzynarodowi goście lub użytkownicy, którzy czują się bardziej komfortowo w innym języku.
- Zwiększ konwersję sprzedaży: odpowiednie dostosowanie przełącznika języka może również przyczynić się do zwiększenia konwersji sprzedaży. Ponieważ skuteczny przełącznik języka może zapewnić użytkownikowi komfort podczas interakcji z witryną. Według danych CSA Research, 72,4% konsumentów stwierdziło, że chętniej kupuje produkty, które zawierają informacje w ich języku ojczystym. Nie jest więc wykluczone, że poziom sprzedaży również wzrośnie.
Różne typy selektora języka
Każdy właściciel strony internetowej z pewnością dokładnie rozważy, jak wygląda selektor języka, każda strona internetowa będzie oczywiście miała różne preferencje. Dla tych z Was, którzy szukają typu selektora języka, który można wykorzystać, oto kilka z nich.
Przycisk języka
Jest to jeden z powszechnie używanych rodzajów przełącznika języka. Przycisk języka jest zwykle ikoną lub tekstem wskazującym język wyświetlany, na przykład „PL” dla polskiego lub flagą kraju reprezentującą określony język. Gdy użytkownicy klikną przycisk języka, zostaną przekierowani do wersji strony w odpowiednim języku.
W przypadku przycisków językowych zaleca się wyświetlanie ograniczonej liczby języków, aby uniknąć zagraconego wyświetlania. Ogólnie rzecz biorąc, posiadanie więcej niż 4 do 5 języków może stworzyć zajęty efekt wizualny. Ważne jest, aby ustawić przycisk w widocznym miejscu, aby użytkownicy mogli go łatwo znaleźć. Omówimy te aspekty szerzej w następnej sekcji tego artykułu.
Przyciski językowe mogą być odpowiednie dla firm, które są skierowane na określone rynki lub obsługują społeczności międzynarodowe w określonych lokalizacjach. Przykładem użycia przycisku językowego na stronie WHO jest poniższy przykład.
Link tekstowy
Linki tekstowe to rodzaj przełącznika języka, który używa tekstu w formie nazwy języka jako łącza. Na przykład możesz wyświetlać linki tekstowe takie jak „Polski”, „Angielski” lub „Hiszpański”, które przenoszą użytkowników do wersji strony internetowej w wybranym języku. Ten link tekstowy jest zwykle umieszczany na liście lub w menu rozwijanym, aby ułatwić użytkownikom wybór żądanego języka.
Jeden z typów selektora języka łącza jest używany przez dużą firmę Facebook, oprócz wymienionych języków, można również nacisnąć ikonę (+), aby znaleźć więcej języków.
Następnie strona zostanie natychmiast przetłumaczona na wcześniej wybrany język.
Menu wyboru
Menu wyboru to rodzaj przełącznika języka, który używa menu rozwijanego lub otwartego menu do wyboru języka. Gdy użytkownicy klikną menu opcji, zobaczą listę dostępnych języków i będą mogli wybrać żądany język. Menu opcji może zawierać ikony kraju lub flagi jako wskaźniki języka, a także nazwy języków w tekście.
Menu wyboru jest zupełnie inne niż przycisk języka, ten typ jest bardziej złożony niż tylko przycisk. Jak w poniższym przykładzie pochodzącym ze strony Porsche.
Udostępniają oni stronę internetową selektora języka, na której użytkownicy mogą bezpośrednio wpisać swój język lub kraj docelowy.
Rozwijane menu vs. Lista vs. Okno podręczne: Które działa najlepiej?
Wybór odpowiedniego modelu interakcji dla selektora języka jest kluczowy dla zapewnienia bezproblemowego i intuicyjnego doświadczenia użytkownika. Każda metoda - niezależnie od tego, czy jest to lista rozwijana, lista wbudowana czy wyskakujące okienko - oferuje różne zalety w zależności od układu witryny, liczby obsługiwanych języków i zachowania użytkownika. Poniżej przedstawiono porównanie trzech głównych modeli interakcji dla wyboru języka, ze szczególnym uwzględnieniem UX, dostępności i kontekstu wdrożenia.
Typ | Mocne strony | Ograniczenia | Najlepszy przypadek użycia |
Rozwijane menu | Kompaktowy, czysty, skalowalny, z wieloma językami | Wymaga interakcji (kliknięcie/dotknięcie), może nie być oczywiste dla wszystkich użytkowników | Witryny wielojęzyczne z ograniczeniami miejsca |
Lista tekstowa | Widoczne bez interakcji, szybszy dostęp do kluczowych języków | Może zaśmiecać interfejs użytkownika, nie jest skalowalny dla wielu języków | Strony z 2–4 podstawowymi opcjami językowymi |
Okno wyskakujące | Może zawierać pole wyszukiwania, elastyczny projekt interfejsu użytkownika | Może zakłócać przepływ użytkowników, wymaga wyraźnego przycisku zamykania i dostępności | Globalne strony z 10+ językami |
Najlepsze praktyki i wskazówki dotyczące selektora języka
Projektowanie skutecznego selektora języka obejmuje zapewnienie bezproblemowego doświadczenia na wszystkich urządzeniach i zagwarantowanie dostępności dla użytkowników o różnych backgroundach. Wraz z rosnącą globalną publicznością, przełącznik języka powinien być intuicyjny, dostępny i responsywny, aby użytkownicy mogli wygodnie korzystać z niego w swoim preferowanym języku.
Poniżej przedstawiamy najlepsze praktyki, które możesz zastosować, aby upewnić się, że selektor języka jest jasny, wygodny i dostępny dla wszystkich użytkowników.
Nadać priorytet responsywnemu designowi
Większość użytkowników uzyskuje dostęp do stron internetowych za pomocą urządzeń mobilnych, dlatego selektor języka powinien być responsywny i przyjazny dla urządzeń mobilnych. Upewnij się, że przycisk lub menu jest łatwy do naciśnięcia, nie zasłania ważnej zawartości i pozostaje widoczny na mniejszych ekranach.
Na przykład selektor języka na stronie internetowej wygląda tak.
Następnie, przy przeglądaniu z poziomu telefonu komórkowego, selektor języka nadal jest łatwo dostępny i nie przesuwa się ani nie znika.
Użyj list rozwijanych lub rozwijanych menu, aby utrzymać porządek w układzie i zapewnić, że cele dotykowe mają wystarczającą ilość miejsca dla wygodnej interakcji. To pomaga użytkownikom łatwo wybrać preferowany język bez frustracji spowodowanej zatłoczeniem lub trudnymi do kliknięcia elementami.
Przemysłowe umieszczenie w interfejsie
Umieść selektor języka w wysoce widocznych, oczekiwanych obszarach, takich jak prawy górny róg nagłówka lub dolny stopka. Są to intuicyjne lokalizacje, w których użytkownicy zazwyczaj szukają opcji językowych.
Unikaj ukrywania selektora wewnątrz niejednoznacznych ikon lub menu dodatkowych. Zachowaj jego położenie spójne na wszystkich stronach, aby użytkownicy, którzy często zmieniają języki, mogli go łatwo znaleźć o dowolnej porze.
Użyj atrybutów dostępności (ARIA)
Aby zapewnić, że selektor języka jest dostępny dla użytkowników z niepełnosprawnościami, użyj atrybutów ARIA (Dostępne Bogate Aplikacje Internetowe) takich jak aria-label, aria-haspopup i aria-expanded. Pomagają one technologiom asystującym, takim jak czytniki ekranu, zrozumieć rolę i funkcjonalność elementu.
Wdrożenie dostępności spełnia standardy WCAG i zapewnia, że Twoja strona jest inkluzywna i użyteczna dla szerszego grona odbiorców. Inkluzywny design przynosi korzyści wszystkim, nie tylko użytkownikom z konkretnymi potrzebami.
Użyj jasnych i rozpoznawalnych etykiet językowych
Wyświetl każdą opcję językową używając jej natywnej etykiety, na przykład „Español” zamiast „Spanish” lub „Deutsch” zamiast „German”. To pozwala użytkownikom szybko rozpoznać preferowany język, nawet jeśli nie rozumieją bieżącego języka strony.
Natywne etykiety są bardziej inkluzywne i zmniejszają obciążenie poznawcze, szczególnie dla użytkowników międzynarodowych. Unikaj używania niejasnych skrótów lub kodów językowych, chyba że Twoi odbiorcy je znają.
Unikaj przeciążenia zbyt wieloma opcjami
Pokazywanie zbyt wielu opcji językowych naraz może zaśmiecać interfejs i mylić użytkowników. Wyświetlaj tylko najbardziej istotne lub najczęściej używane języki jako pierwsze, a pozostałe umieść w menu rozwijanym lub w sekcji „Więcej języków”.
Utrzymuje to interfejs w czystości i poprawia użyteczność, szczególnie na urządzeniach mobilnych. Użyj analityki ruchu na stronie, aby zdecydować, które języki powinny być traktowane priorytetowo lub ukryte.
Użyj odpowiednich ikon i wskazówek wizualnych (bez polegania na flagach)
Wskazówki wizualne, takie jak ikony globusa (🌐), strzałki w dół (▾) lub podświetlenia aktywnego stanu, pomagają użytkownikom zrozumieć, że element jest klikalny. Należy jednak unikać używania flag narodowych do reprezentowania języków, ponieważ jeden język może być używany w wielu krajach.
Flagi mogą również mieć kulturowe lub polityczne implikacje. Jeśli używasz elementów wizualnych, połącz je z etykietami tekstowymi, aby zapewnić klarowność i zachować ikony spójne i neutralne kulturowo w całym projekcie.
Zachowaj spójność z projektem strony internetowej i brandingiem
Twój selektor języka powinien wizualnie odpowiadać ogólnemu stylowi Twojej witryny. Niezależnie od tego, czy używasz przycisków, linków tekstowych czy ikon, upewnij się, że typografia, kolory i stany najechania odpowiadają Twojemu brandingowi. To poprawia zaufanie i wzmacnia doświadczenie użytkownika.
Jeśli tworzysz niestandardowy selektor, przetestuj go na różnych przeglądarkach i urządzeniach, aby upewnić się, że działa zgodnie z przeznaczeniem. Spójny design i niezawodna funkcjonalność przyczyniają się do płynnej wielojęzycznej podróży użytkownika.
Ustawienie selektora języka za pomocą Linguise w 7 krokach
W tym momencie znasz najlepsze praktyki dotyczące selektorów języka. To tłumaczenie można wykonać po skorzystaniu z usługi tłumaczenia strony internetowej. Jednak nie wszystkie usługi tłumaczeniowe zapewniają elastyczność w ustawieniach selektora języka.
Ale nie martw się, ponieważ Linguise nie jest taki. Linguise to automatyczna usługa tłumaczenia, która zapewnia użytkownikom personalizację przełącznika języka. Niektóre korzyści, które uzyskasz podczas korzystania z Linguise , obejmują.
- Linguise może być używany i zintegrowany z ponad 40 systemami CMS (WordPress, Joomla, Drupal
- Tłumaczenie na różne języki zostanie wykonane automatycznie w ciągu kilku sekund po dodaniu języka do przełącznika języka na stronie internetowej.
- Dostępnych jest więcej niż 80 języków, które można dodać do selektora języka.
- Linguise automatycznie przygotuje unikalny adres URL zgodnie z językiem docelowym tłumaczenia. Na przykład adres URL linguise.com/de/ dla strony tłumaczonej na język niemiecki.
- Automatycznie utworzy kanoniczny adres URL, aby pomóc uniknąć duplikowania treści w wyszukiwarkach, gdy masz warianty językowe na stronie.
- Możesz skonfigurować przełącznik języka elastycznie zgodnie z potrzebami witryny, zaczynając od ikony, koloru i nazwy języka.
- Możesz wyświetlić statystyki odsłon strony odwiedzających dla każdego języka dodanego do selektora języka.
W tym poradniku użyjemy WordPress jako przykładu używanego CMS.
Krok 1: Rejestracja darmowego konta Linguise
Aby uzyskać dostęp do przełącznika języka na Linguise, pierwszym krokiem, który musisz wykonać, jest zarejestrowanie konta na Linguise. Linguise oferuje również darmowy miesiąc próbny, który obejmuje różnorodne funkcje, z których możesz skorzystać.
Krok 2: Dodaj domenę do swojej wielojęzycznej strony internetowej
Drugim krokiem jest dodawanie domeny witryny w Linguise, którą już posiadasz, do Linguise
- Konto
- Adresy URL
- Platforma
- Język
- Język tłumaczenia
- Tłumacz URL
Następnie musisz aktywować klucz API i ustawić adres URL języka. Aby uzyskać kompletny przewodnik dotyczący dodawania domeny witryny, możesz przeczytać dokumentację, a konkretnie dla WordPress, możesz to zobaczyć, instalując Linguise automatyczne tłumaczenie na WordPress lub oglądając poniższy samouczek wideo.
Krok 3: Zainstaluj wtyczkę Linguise
Po pomyślnym dodaniu strony internetowej otwórz WordPress panel i zainstaluj Linguise wtyczkę, wykonując następujące kroki: Wtyczki > Dodaj nową > Linguise > Zainstaluj > Aktywuj.
Jeśli wtyczka jest już zainstalowana, przejdź do pulpitu Linguise i skopiuj klucz API.
Następnie otwórz wtyczkę Linguise i wklej kod API, który otrzymałeś z panelu Linguise , do następującej kolumny.
Krok 4: Konfiguracja głównego wyświetlacza
Aby skonfigurować przełącznik języka lub wyświetlić flagi językowe, kroki te są dostępne za pośrednictwem Linguise panelu w menu Ustawienia > Wyświetlanie flag językowych.
Podczas wstępnej konfiguracji wprowadzimy zmiany w głównym wyświetlaczu, biorąc pod uwagę różne komponenty.
Jedną z początkowych kwestii do rozważenia jest konfiguracja formatu wyświetlania listy języków, która oferuje trzy opcje do wyboru: obok siebie, lista rozwijana lub wyskakujące okno. Po lewej stronie znajduje się podgląd dla każdego formatu.
Pierwszy format, jak pokazano poniżej, to układ obok siebie.
Poniższy format przyjmuje styl listy rozwijanej, jak pokazano na poniższym obrazku.
Na koniec mamy format wyskakujący jako ostateczną opcję.
Następnie przechodzimy do następnego kroku, który obejmuje konfigurację położenia przełącznika języka. Masz elastyczność wyboru różnych opcji położenia, dlatego ważne jest, aby wybrać położenie, które jest łatwo zauważalne dla odwiedzających.
Ostatecznie musisz zdecydować o preferencji kombinacji do wyświetlania opcji językowych. Możesz wybierać między opcjami takimi jak flaga + nazwa języka, flaga + krótka nazwa lub po prostu wyświetlanie samej flagi. Ta decyzja będzie zależała od twoich konkretnych preferencji projektowych oraz preferencji twojej docelowej grupy odbiorców.
Krok 5: Ustaw projekt flagi
Następnie, poniżej głównej sekcji wyświetlania, natkniesz się na konfiguracje projektu specjalnie dla flagi. Poniższy obrazek demonstruje niektóre z dostępnych opcji ustawień.
- Wyświetlanie nazwy języka: Masz opcję wyświetlenia nazwy języka na podstawie kraju lub samego języka. Na przykład możesz wybrać wyświetlenie „Niemiecki” lub „Deutsch.”
- Typ flagi angielskiej: Ta opcja ma zastosowanie przy językach, które mają wiele odmian, takich jak „angielski USA” lub „angielski brytyjski”. Podobne wybory można dokonać dla języków takich jak hiszpański, tajwański, niemiecki i portugalski.
- Styl flag: To ustawienie pozwala określić kształt ikony flagi, czy powinna być okrągła czy kwadratowa (prostokątna).
Krok 6: Ustaw kolor i rozmiar flagi
Po skonfigurowaniu wzoru flagi następnym krokiem jest dostosowanie kolorów, rozmiaru i różnych innych elementów. W poniższym interfejsie znajdziesz liczne konfigurowalne ustawienia, w tym:
- Promień obramowania flagi:
- Kolor nazwy języka: Możesz wybrać domyślny kolor tekstu dla nazwy języka.
- Kolor języka wyskakującego: To ustawienie określa kolor tytułu języka w obszarach wyskakujących lub rozwijanych.
- Rozmiar flagi: Masz opcję modyfikowania rozmiaru flagi zgodnie ze swoimi preferencjami.
- Kolor podświetlenia nazwy języka: To ustawienie kontroluje kolor tekstu podczas najechania kursorem na nazwy języków.
- Kolor wskaźnika myszy na nazwie języka w wyskakującym oknie: Podobnie, to ustawienie określa kolor tekstu podczas najechania myszką na tytuł języka w wyskakującym oknie lub menu rozwijanym.
Krok 7: Ustaw cień pola flagi
W końcowej fazie masz możliwość dostosowania ustawień cienia dla flagi. Początkowe ustawienie pozwala określić cień dla każdej flagi wyświetlanej na Twojej stronie internetowej, podczas gdy kolejne ustawienie dotyczy efektu cienia podczas najechania kursorem na flagę języka.
Pamiętaj, aby kliknąć na Zapisz przycisk, aby zachować ustawienia personalizacji, które wprowadziłeś dla przełącznika języka. To zapewnia, że wybrane konfiguracje efektów cienia są wdrożone i zapisane do przyszłego użytku.
Po przeprowadzeniu wszystkich konfiguracji, oto przykład wyświetlania selektora języka przy użyciu wyskakującego okienka, umieszczonego w prawym górnym rogu i używającego inicjałów. To tylko przykład, możesz dostosować resztę według własnego uznania i zgodnie z potrzebami witryny.
Oprócz WordPress CMS, możesz również używać innych platform witryn internetowych i postępować zgodnie z szczegółowym przewodnikiem, takim jak konfiguracja przełącznika dla OpenCart, przełącznik języka dla Drupal, oraz ustawienie przełącznika dla PrestaShop.
Zaprojektuj swój selektor języka dla bezproblemowego doświadczenia wielojęzycznego z Linguise!
Tutaj zdobyłeś wiedzę na temat najlepszych praktyk projektowania selektorów języka i jak to zrobić za pomocą Linguise! Uwierz mi, utworzenie przełącznika języka może zapewnić wiele korzyści i zapewnić optymalizację na podstawie punktów wymienionych powyżej.
Tworząc selektor języka, upewnij się, że stosujesz się do wskazówek i najlepszych praktyk, które wyjaśniliśmy powyżej, zaczynając od używania ikon, wybierania odpowiednich języków, aż po pozycjonowanie.
Teraz, zarejestruj Linguise konto, dodaj swoją stronę internetową i dostrój selektor języka, aby zapewnić lepsze doświadczenie użytkownika. Nie zapomnij skorzystać z 1-miesięcznego darmowego okresu próbnego, aby cieszyć się lepszymi funkcjami Linguise.
