Najlepsze praktyki projektowania selektora języka

przez Bahasę Aorinkę
5 grudnia 2023 r

Blog > Przewodnik > Najlepsze praktyki projektowania selektora języka

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.

Najlepsze praktyki i wskazówki dotyczące wyboru języka

Po zapoznaniu się z różnymi typami selektorów języków, których można używać w witrynach internetowych, podczas tworzenia selektora języka ważne jest zastosowanie najlepszych praktyk, aby można było stworzyć selektor języka, który będzie skuteczny i będzie w stanie zapewnić użytkownikom dobre doświadczenia. Oto kilka najlepszych praktyk.

Przejrzyste i przemyślane rozmieszczenie przycisków językowych: umieszczanie przycisków językowych w miejscach, które są intuicyjne i łatwo dostępne dla użytkowników. Zwykle umieszczaj przyciski języka na górze strony (na przykład po prawej lub lewej stronie nagłówka) lub na dole strony (na przykład w stopce). Upewnij się, że przycisk nie jest zasłonięty przez inne elementy i jest łatwy do znalezienia dla użytkowników.
Flagi czy brak flag: Używanie flag jako ikon językowych jest tematem kontrowersyjnym. Chociaż flagi mogą wyraźnie wizualnie wskazywać wybrany język, należy pamiętać, że flagi narodowe mają również złożone znaczenie polityczne i kulturowe. bądź przygotowany na użycie neutralnych, bardziej uniwersalnych ikon językowych, jeśli chcesz uniknąć potencjalnych problemów związanych z używaniem flag.
Pełna nazwa lub inicjały języka: Wybierając etykietę języka na przycisku, możesz użyć pełnej nazwy języka (na przykład „English” lub „Français”) lub inicjałów języka (na przykład „EN ” lub „FR”). Wyjaśnia poziom zrozumienia używanego języka przez użytkownika. Jeśli kierujesz reklamy do odbiorców zróżnicowanych językowo, użycie pełnej nazwy języka może być dla nich łatwiejsze do zrozumienia.
Przyciski języków ikon: zamiast lub oprócz tekstu lub flag można używać ikon, aby reprezentować określone języki. Jasne i łatwo rozpoznawalne ikony języków mogą pomóc użytkownikom zidentyfikować język, który chcą wybrać. Upewnij się, że ikony są spójne i łatwe do zrozumienia dla użytkowników z różnych środowisk kulturowych i językowych.
Nadaj priorytet odpowiedniemu językowi: wyświetl język, który jest najbardziej odpowiedni dla Twojej grupy docelowej. Przeanalizuj ruch w witrynie i dane demograficzne użytkowników, aby zidentyfikować języki, które powinny być wyświetlane w widocznym miejscu. Nadanie priorytetu najczęściej używanym lub powszechnie używanym językom może poprawić komfort użytkownika i zwiększyć zaangażowanie.
Jasne etykiety językowe: używaj jasnych i zwięzłych etykiet językowych, aby przedstawić każdą opcję językową. Wyświetla nazwę języka w odpowiednim języku, np. „English” dla języka angielskiego lub „Español” dla języka hiszpańskiego. Pomaga to użytkownikom szybko zidentyfikować preferowany język, nawet jeśli nie znają języka używanego w Twojej witrynie.

Przełam bariery językowe

Pożegnaj się z barierami językowymi i przywitaj nieograniczony rozwój! Wypróbuj naszą usługę automatycznego tłumaczenia już dziś.

Zacznij tłumaczyć teraz

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 .

Gotowy na odkrywanie nowych rynków? Wypróbuj naszą usługę automatycznego tłumaczenia za darmo w ramach 1-miesięcznego okresu próbnego bez ryzyka. Karta kredytowa nie jest potrzebna!

Odbierz 1-miesięczny bezpłatny okres próbny

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