Selektor języka jest ważnym elementem, na który należy zwrócić szczególną uwagę podczas tworzenia wielojęzycznej witryny internetowej, ponieważ przełącznik języka jest tym, co użytkownicy często odwiedzają, gdy chcą zmienić język.
Skuteczny przycisk zmiany języka może zapewnić witrynie internetowej szereg korzyści, od zwiększenia optymalizacji sieci po zwiększenie sprzedaży.
W tym artykule omówimy najlepsze praktyki projektowania selektorów języków. Omówimy to szerzej w następnym artykule.
Co to jest selektor języka?
Selektor języka to element lub funkcja interfejsu użytkownika, która pozwala użytkownikom wybrać język, w którym chcą wchodzić w interakcję ze stroną internetową, aplikacją lub dowolną platformą cyfrową. Można go powszechnie znaleźć na stronach internetowych, w aplikacjach i innych interfejsach cyfrowych, aby był odpowiedni dla użytkowników mówiących różnymi językami.
Selektor języka zazwyczaj wyświetla listę dostępnych języków, z której użytkownik może wybrać żądany język. Po wybraniu zawartość interfejsu, w tym tekst, etykiety, a czasami obrazy, będzie wyświetlana w wybranym języku. Jest to szczególnie ważne w przypadku witryn i aplikacji obsługujących odbiorców na całym świecie lub zróżnicowaną 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 ich poziomu znajomości języka. Stanowią kluczowy element działań lokalnych, umożliwiając programistom i projektantom dostosowywanie swoich produktów do różnych kontekstów językowych i kulturowych.
Dlaczego musisz dostosować swój przełącznik języków?
Dostosowanie przełącznika języka na wielojęzycznej stronie internetowej ma kilka ważnych zalet.
- Dostosowanie marki i styl wizualny: dostosowując przełącznik języka, możesz mieć pewność, że wygląd i styl używanego języka będą spójne z marką i stylem wizualnym Twojej witryny. Możesz dostosować przyciski lub menu zmiany języka, aby pasowały do ogólnego projektu Twojej witryny, zapewniając spójność doświadczenia 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ęzyków. Na przykład możesz mieć ograniczoną wersję swojej witryny w kilku językach i chcesz wyświetlać tylko te języki w przełączniku języków. Dostosowując przełącznik języków, możesz wybrać, które języki będą wyświetlane, co daje większą kontrolę nad dostępną treścią.
- Zoptymalizowane doświadczenie użytkownika: dostosowując przełącznik języka, możesz stworzyć zoptymalizowane doświadczenie użytkownika. Można na przykład dostosować układ lub położenie przełącznika języka, aby ułatwić użytkownikom jego znalezienie. Możesz także dodać funkcje, takie jak powiadomienia lub instrukcje dotyczące zmiany języka, które pomogą użytkownikom zrozumieć, jak łatwo korzystać z tej funkcji.
- Spełnij różne potrzeby użytkowników: każdy użytkownik ma inne preferencje językowe. Dostosowując przełączanie języków, możesz zaspokoić potrzeby użytkowników z różnych środowisk językowych. Może to obejmować użytkowników lokalnych, gości z zagranicy lub użytkowników, 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ż zapewnić korzyść w postaci zwiększenia konwersji sprzedaży. Ponieważ skuteczny przełącznik języków może zapewnić wygodę użytkownika podczas interakcji z Twoją witryną. Według danych CSA Research 72,4% konsumentów stwierdziło, że chętniej kupiliby produkty zawierające informacje w ich ojczystym języku. Niemożliwe jest więc, aby Twój poziom sprzedaży również wzrósł.
Różne typy selektorów języków
Każdy właściciel witryny z pewnością dokładnie przemyśli, jak wygląda jego selektor języka, każda witryna będzie oczywiście miała inne preferencje. Dla tych z Was, którzy szukają rodzaju selektora języka, którego można użyć, oto niektóre z nich.
Przycisk języka
Jest to jeden z powszechnie używanych typów przełączników językowych. Przycisk języka to zwykle ikona lub tekst wskazujący wyświetlany język, na przykład „EN” w przypadku języka angielskiego lub flaga kraju reprezentująca określony język. Po kliknięciu przycisku języka użytkownik zostanie przekierowany do wersji serwisu w odpowiednim języku.
W przypadku przycisków języków zaleca się wyświetlanie ograniczonej liczby języków, aby uniknąć bałaganu na wyświetlaczu. Ogólnie rzecz biorąc, posiadanie więcej niż 4 do 5 języków może stworzyć intensywny efekt wizualny. Ważne jest, aby umieścić przycisk w widocznym miejscu, aby użytkownicy mogli go łatwo znaleźć. Omówimy te aspekty szerzej w następnej części tego artykułu.
Przyciski językowe mogą być odpowiednie dla firm, które kierują reklamy na określone rynki lub obsługują społeczności międzynarodowe w określonych lokalizacjach. Poniżej znajduje się przykład użycia przycisku języka na stronie WHO.
Link tekstowy
Łącza tekstowe to rodzaj przełącznika języka, który wykorzystuje tekst w postaci nazwy języka jako łącza. Na przykład możesz wyświetlić linki tekstowe, takie jak „English”, „Français” lub „Español”, które przenoszą użytkowników do wersji witryny 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 rodzaj selektora języka łącza jest używany przez dużą firmę Facebook, oprócz wymienionych języków, możesz także 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 wykorzystuje menu rozwijane lub otwarte 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 krajów lub flagi jako wskaźniki języka, a także nazwy języków w tekście.
Menu wyboru różni się znacznie od przycisku języka, ten typ jest bardziej złożony niż zwykły przycisk. Podobnie jak poniższy przykład, który pochodzi ze strony internetowej Porsche.
Udostępniają stronę internetową służącą do wyboru języka, na której użytkownicy mogą bezpośrednio wpisać swój język lub kraj docelowy.
Rozwijanie vs. lista vs. wyskakujące okienko: który działa najlepiej?
Wybór odpowiedniego modelu interakcji dla wyboru języka ma kluczowe znaczenie dla zapewnienia bezproblemowego i intuicyjnego wrażenia użytkownika. Każda metoda-niezależnie od menu, czyli listy wbudowanej, czy wyskakującego wyskakującego, oferuje różne zalety w zależności od układu witryny, liczby obsługiwanych języków i zachowań użytkowników. Poniżej znajduje się porównanie trzech głównych modeli interakcji do wyboru języka, koncentrujące się na UX, dostępności i kontekstu implementacji.
Typ | Strenghts | Ograniczenia | Najlepszy przypadek użycia |
Upuścić | Kompaktowy, czysty, skalowalny, z wieloma językami | Wymaga interakcji (kliknij/dotknij), może nie być oczywiste dla wszystkich użytkowników | Strony wielojęzyczne z ograniczeniami kosmicznymi |
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 | Witryny z 2–4 podstawowymi opcjami języka |
Pop-up | Może obejmować pole wyszukiwania, elastyczny projekt interfejsu użytkownika | Może zakłócać przepływ użytkownika, potrzebuje wyraźnego przycisku zamknięcia i dostępności | Witryny globalne z 10+ językami |
Najlepsze praktyki i wskazówki dotyczące wyboru języka
Projektowanie skutecznego wyboru języka polega na zapewnieniu bezproblemowego wrażenia na wszystkich urządzeniach i zapewnienie dostępności użytkownikom różnych środowisk. W przypadku coraz bardziej globalnej grupy odbiorców Twój przełącznik języka powinien być intuicyjny, dostępny i responsywny, aby zapewnić, że użytkownicy mogą wygodnie interakcja w swoim preferowanym języku.
Poniżej znajdują się najlepsze praktyki, które możesz zastosować, aby zapewnić, że wybór języka jest jasny, wygodny i dostępny dla wszystkich użytkowników.
Priorytetyzuj responsywny projekt
Większość użytkowników uzyskuje dostęp do stron internetowych z urządzeń mobilnych, więc Twój wybór języka powinien być responsywny i przyjazny dla urządzeń mobilnych. Upewnij się, że przycisk lub menu jest łatwe do wykorzystania, nie obejmuje ważnej treści i pozostaje widoczna na mniejszych ekranach.
Na przykład witryna wyboru języka wygląda tak.
Następnie, patrząc od strony mobilnej, selektor języka może być nadal dostępny łatwo i nie porusza ani nie znika.
Użyj rozwijanych lub rozszerzalnych menu, aby utrzymać porządek układu, i upewnić się, że cele dotykowe mają wystarczające odstępy, aby uzyskać wygodne interakcje. Pomaga to użytkownikom łatwo wybierać preferowany język bez frustracji spowodowanej przez elementy ciasne lub trudne do kliknięcia.
Przemyślane umieszczanie w interfejsie
Umieść wybór języka w wysoce widocznych, oczekiwanych obszarach, takich jak prawy róg nagłówka lub dolna stopka. Są to intuicyjne lokalizacje, w których użytkownicy zazwyczaj szukają opcji języka.
Unikaj ukrywania selektora wewnątrz niejednoznacznych ikon lub wtórnych menu. Utrzymuj spójność swojego umiejscowienia na wszystkich stronach, aby użytkownicy, którzy często zmieniają języki, mogą łatwo je znaleźć w dowolnym momencie.
Użyj atrybutów dostępności (ARIA)
Aby upewnić się, że wybór języka jest dostępny dla użytkowników niepełnosprawnych, użyj ARIA (dostępne bogate aplikacje internetowe), takie jak Aria-Label, Aria-Haspopup i Aria-Expanded. Pomagają one technologii wspomagających, takich jak czytniki ekranu rozumieją rolę i funkcjonalność elementu.
Wdrożenie dostępności spełnia standardy WCAG i zapewnia, że Twoja witryna jest integracyjna i użyteczna przez szerszą publiczność. Sprzyja się projektowi przynosi korzyści wszystkim, a nie tylko użytkownikom o określonych potrzebach.
Użyj jasnych i rozpoznawalnych etykiet językowych
Wyświetl każdą opcję języka za pomocą natywnej etykiety, na przykład „español” zamiast „hiszpańskiego” lub „deutsch” zamiast „niemieckiego”. Pozwala to użytkownikom szybko rozpoznać ich preferowany język, nawet jeśli nie rozumieją obecnego języka witryny.
Native etykiety są bardziej integracyjne 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 odbiorcy je znają.
Unikaj przeciążenia za pomocą zbyt wielu opcji
Wyświetlanie zbyt wielu opcji języka jednocześnie może zaśmiecać interfejs i mylić użytkowników. Wyświetl najpierw tylko najbardziej odpowiednie lub powszechnie używane języki, a resztę umieść resztę 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 analizy ruchu w witrynie, aby zdecydować, które języki powinny być priorytetowe lub ukryte.
Użyj odpowiednich ikon i wskazówek wizualnych (bez polegania na flagach)
Wizualne wskazówki, takie jak ikony globe (🌐), strzałki w dół (▾) lub aktywne wyróżnienia stanowe, pomagają użytkownikom zrozumieć, że element jest klikalny. Unikaj jednak używania flag narodowych do reprezentowania języków, ponieważ jeden język można wypowiedzieć w wielu krajach.
Flagi mogą również mieć implikacje kulturowe lub polityczne. Jeśli używasz wizualizacji, połącz je z etykietami tekstowymi, aby zapewnić przejrzystość i zachować ikony spójne i neutralne kulturowo w całym projekcie.
Bądź zgodny z projektowaniem i brandingiem stron internetowych
Twój wybór języka powinien wizualnie dostosować się do ogólnego stylu witryny. Niezależnie od tego, czy korzystasz z przycisków, linków tekstowych, czy ikon, upewnij się, że typografia, kolory i stany najeżdżające pasują do marki. Poprawia to zaufanie i wzmacnia wrażenia użytkownika.
Jeśli budujesz niestandardowy selektor, przetestuj go w różnych przeglądarkach i urządzeniach, aby upewnić się, że działa zgodnie z przeznaczeniem. Spójny projekt i niezawodna funkcjonalność przyczyniają się do bezproblemowej wielojęzycznej podróży użytkownika.
Ustawianie selektora języka za pomocą Linguise w 7 krokach
W tym momencie znasz już najlepsze praktyki dotyczące selektorów języków. Tłumaczenie to można wykonać po skorzystaniu z usługi tłumaczenia stron internetowych. Jednak nie wszystkie usługi tłumaczeniowe zapewniają elastyczność w ustawieniach wyboru języka.
Ale nie martw się, ponieważ Linguise taki nie jest. Linguise to usługa automatycznego tłumaczenia, która umożliwia dostosowanie przez użytkownika przełącznika języka. Niektóre z korzyści, jakie uzyskasz korzystając Linguise , obejmują.
- Linguise można używać i integrować z ponad 40 systemami CMS ( WordPress , Joomla , Drupal itp.).
- Tłumaczenie na różne języki zostanie wykonane automatycznie w ciągu kilku sekund po dodaniu języka do przełącznika języków na stronie.
- jest ponad 80 języków , które można dodać do selektora języków.
- Linguise automatycznie przygotuje unikalny adres URL w zależności od języka docelowego tłumaczenia. Na przykład adres URL linguise .com/de/ strony tłumaczonej na język niemiecki.
- Automatycznie utworzy kanoniczny adres URL, aby pomóc uniknąć powielania treści w wyszukiwarkach, jeśli na stronie znajdują się odmiany językowe.
- Możesz skonfigurować przełącznik języka w zależności od potrzeb witryny, zaczynając od ikony i koloru, aż po nazwę języka.
- Możesz przeglądać statystyki odsłon stron odwiedzających według języka, dla każdego języka dodanego do selektora języków.
W tym samouczku użyjemy WordPress jako przykładu użytego systemu CMS.
Krok 1: Rejestracja bezpłatnego konta Linguise
Aby uzyskać dostęp do przełącznika języka w Linguise , pierwszym krokiem, który musisz zrobić, jest zarejestrowanie konta w Linguise . Linguise oferuje również miesięczny bezpłatny okres próbny, który obejmuje szereg funkcji, z których możesz skorzystać.
Krok 2: Dodaj domenę do swojej wielojęzycznej witryny
Drugim krokiem jest dodanie domeny serwisu w Linguise , którą już posiadasz, do Linguise . Jest kilka rzeczy, które musisz wypełnić, zaczynając od.
- Konto
- Adresy URL
- Platforma
- Język
- Język tłumaczeniowy
- Przetłumacz adres URL
Następnie musisz aktywować klucz API i ustawić adres URL języka. Aby uzyskać kompletny przewodnik dotyczący dodawania domeny internetowej, możesz przeczytać dokumentację, natomiast specjalnie dla WordPress możesz ją zobaczyć, instalując automatyczne tłumaczenie Linguise WordPress lub oglądając samouczek wideo poniżej.
Krok 3: Zainstaluj wtyczkę Linguise
Po pomyślnym dodaniu strony internetowej otwórz WordPress i zainstaluj Linguise , zrób to poprzez Wtyczki > Dodaj nowy > Linguise > Zainstaluj > Aktywuj.
Jeśli wtyczka jest już zainstalowana, przejdź do panelu Linguise i skopiuj klucz API.
Następnie otwórz wtyczkę Linguise i wklej kod API pobrany z panelu Linguise do poniższej kolumny.
Krok 4: Skonfiguruj główny wyświetlacz
Aby skonfigurować przełącznik języków lub wyświetlić flagi języków, wykonaj te czynności w Linguise w menu Ustawienia > Wyświetlanie flag języków.
Podczas wstępnej konfiguracji dokonamy regulacji głównego wyświetlacza, biorąc pod uwagę różne komponenty.
Pierwszą kwestią do rozważenia jest konfiguracja formatu wyświetlania listy języków, która oferuje trzy opcje do wyboru: obok siebie, rozwijane lub wyskakujące. Po lewej stronie znajduje się podgląd każdego formatu.
Pierwszy format, jak pokazano poniżej, to układ side-by-side.
Poniższy format przyjmuje styl rozwijany, jak pokazano na obrazku poniżej.
Na koniec mamy format wyskakującego okienka jako ostateczną opcję.
Następnie przechodzimy do kolejnego kroku, który polega na skonfigurowaniu położenia przełącznika języka. Masz swobodę wyboru spośród różnych opcji pozycji, dlatego ważne jest, aby wybrać pozycję, która będzie łatwo zauważalna dla odwiedzających.
Na koniec musisz zdecydować o preferowanej kombinacji wyświetlania opcji językowych. Możesz wybierać pomiędzy opcjami takimi jak flaga + nazwa języka, flaga + krótka nazwa lub po prostu wyświetlanie samej flagi. Decyzja ta będzie zależeć od Twoich konkretnych preferencji projektowych i preferencji docelowych odbiorców.
Krok 5: Ustaw projekt flagi
Następnie, poniżej głównej sekcji wyświetlacza, znajdziesz konfiguracje projektowe specjalnie dla flagi. Poniższy obraz przedstawia niektóre dostępne opcje ustawień.
- Wyświetlanie nazwy języka : możesz wyświetlić nazwę języka na podstawie kraju lub samego języka. Możesz na przykład wyświetlić „niemiecki” lub „niemiecki”.
- Typ flagi angielskiej: ta opcja ma zastosowanie w przypadku języków mających wiele odmian, np. „angielski USA” lub „angielski Wielka Brytania”. Podobnego wyboru można dokonać w przypadku języków takich jak hiszpański, tajwański, niemiecki i portugalski.
- Styl flagi: To ustawienie umożliwia zdefiniowanie kształtu ikony flagi, czy ma być okrągła, czy kwadratowa (prostokątna).
Krok 6: Ustaw kolor i rozmiar flagi
Po skonfigurowaniu projektu flagi następnym krokiem jest dostosowanie kolorów, rozmiaru i różnych innych elementów. W poniższym interfejsie znajdziesz wiele konfigurowalnych ustawień, w tym:
- Promień obramowania flagi: umożliwia personalizację promienia obramowania w pikselach w przypadku używania flagi prostokątnej.
- Kolor nazwy języka: możesz wybrać domyślny kolor tekstu dla nazwy języka.
- Kolor języka wyskakującego okienka: To ustawienie określa kolor tytułu języka w obszarach wyskakujących i rozwijanych.
- Rozmiar flagi: Masz możliwość modyfikacji rozmiaru flagi zgodnie ze swoimi preferencjami.
- Kolor najechania nazwy języka: to ustawienie kontroluje kolor tekstu po najechaniu myszką na nazwy języków.
- Kolor najechania językiem wyskakującego okienka: podobnie to ustawienie określa kolor tekstu po najechaniu myszką na tytuł języka w wyskakującym okienku lub na liście rozwijanej.
Krok 7: Ustaw cień flagi
W końcowej fazie masz możliwość dostosowania ustawień cienia flagi. Początkowe ustawienie pozwala określić cień dla każdej flagi wyświetlanej na Twojej stronie, natomiast kolejne ustawienie dotyczy efektu cienia po najechaniu kursorem na flagę języka.
Pamiętaj, aby kliknąć Zapisz , aby zachować ustawienia dostosowywania dokonane dla przełącznika języka. Dzięki temu wybrane konfiguracje efektów cienia zostaną zaimplementowane i zapisane do wykorzystania w przyszłości.
Po przeprowadzeniu wszystkich konfiguracji, poniżej znajduje się przykład wyświetlania selektora języka za pomocą wyskakującego okienka umieszczonego w prawym górnym rogu i wykorzystującego inicjały. To tylko przykład, resztę możesz dostosować według własnego uznania i potrzeb serwisu.
Oprócz WordPress CMS możesz także korzystać z innych platform internetowych i postępować zgodnie ze szczegółowym przewodnikiem, takim jak przełącznik konfiguracji dla OpenCart , przełącznik języka dla Drupal i przełącznik ustawień dla PrestaShop .
Zaprojektuj selektor języka, aby zapewnić bezproblemową wielojęzyczną obsługę dzięki Linguise!
Tutaj uzyskałeś wgląd w najlepsze praktyki projektowania selektorów języków i tego, jak to zrobić za pomocą Linguise! Uwierz mi, stworzenie przełącznika języka może zapewnić wiele korzyści i zapewnić optymalizację w oparciu o punkty wymienione powyżej.
Tworząc selektor języka, pamiętaj o zastosowaniu się do wskazówek i dobrych praktyk, które wyjaśniliśmy powyżej, zaczynając od użycia ikon, poprzez wybór odpowiednich języków, aż po pozycjonowanie.
Teraz zarejestruj konto Linguise , dodaj swoją witrynę internetową i dostosuj selektor języka, aby zapewnić użytkownikom lepszą wygodę. Nie zapomnij wypróbować 1-miesięcznego bezpłatnego okresu próbnego, aby cieszyć się doskonałymi funkcjami Linguise
