select
do treści lokalnychJaki jest najlepszy sposób zastosowania menu rozwijanego opartego na elemencie "select" do kierowania użytkowników na strony zlokalizowane?
W miarę jak firmy i organizacje budują coraz więcej zlokalizowanych witryn, wzrasta również znaczenie przyjaznej dla użytkownika globalnej nawigacji.
Jedną z najbardziej popularnych metod jest zastosowanie rozwijanego menu na stronie głównej witryny używając elementu "select", który zawiera linki do zlokalizowanej treści. Listy wyboru tego typu nie muszą być ograniczone jedynie do strony głównej, ale mogą one znajdować się na innych stronach, co pozwoli użytkownikom na zmianę wersji językowej na danej stronie.
Treść lokalna może być inną witryną w państwie docelowym lub tłumaczeniem. W poniższym artykule staramy się uniknąć dyskusji na temat najlepszyej formy układania informacji (np.: czy lepsze jest tłumaczenie czy też regionalna witryna) po to abyśmy mogli skoncentrować się na plusach i minusach związanych z zastosowaniem list wyboru. Istnieją również inne aspekty nawigacji, które zostaną opisane w innych artykułach.
select
?Zwijane menu może wydawać się dobrym rozwiązaniem na stronach gdzie chcemy zooszczędzić trochę miejsca. Jednak nie jest ono zawsze najlepszym rozwiązaniem jeśli chodzi o globalną nawigację, dlatego powinno podjąć się taką decyzję biorąc pod uwagę co jest najlepsze dla danej witryny. Poniższa lista może pomóc w tym wyborze:
Największą zaletą menu zwijanego jest oszczędność miejsca.
Największymi wadami zastosowania "select" z linkami do lokalnych stron lub witryn są:
użytkownicy nie widzą od razu i nie mają bezpośredniego dostępu do linków.
ciężko jest znaleść etykietę, która nie jest sprecyzowana w konkretnym języku,
użytkownicy mogą nie mieć czcionek użytch w opcjach, a nie można użyć grafiki zamiast tekstu,
Jeśli dana witryna posiada jedynie kilka zlokalizowanych wersji, najprawdopodobniej najlepiej będzie unikać menu zwijanego, a zamiast niego można umieścić linki bezpośrednie do konkretnych stron czy witryn. Daje to możliwość zastosowania grafiki dla stron obcojęzycznych, zapobiega również żmudnemu szukaniu etykiety dla listy oraz pozwala użytkownikom szybciej identyfikować linki na stronie.
Istnieją również inne techniki. Np.: mapy pokazujące strony w danym regionie lub w konkretnym państwie.
Jeśli menu posiada więcej niż 20 opcji, powinno się zastanowić czy będzie ono użyteczne dla tych, którzy muszą skrolować na sam dół wszystkich opcji. Jeśli nie, może lepiej będzie umieścić link od strony głównej witryny do strony wyjściowej innych wersji językowych. Jeśli umieszcza się linki pomiędzy różnymi wersjami na konkretnych stronach, strona wyjściowa może nie być najlepszym rozwiązaniem.
Jeśli decydujesz się na zamieszczenie rozwijanego menu, oto kilka rzeczy o których powinieneś pamiętać:
Umieść rozwijane menu jak najwyżej strony. Lokalizacja ta jest najlepiej widoczna, co podwyższy prawdopodobieństwo, że użytkownik ją zauważy. Ponadto, coraz więcej witryn umieszcza w tym miejscu nawigację do stron obcojęzycznych, co sprawia, że użytkownicy oczekują tego typu nawigacji w tym miejscu.
Z pewnością staraj się unikać umieszczania listy na dole strony w taki spoosób, że nie jest ona widoczna przy pierwszym załadowaniu strony. Pamiętaj, że użytkownicy mają różną rozdzielczość ekranu.
Wymyśl grafikę, która będzie działać w charakterze etykiety menu. Nie można oczekiwać od użytkowników nie znających języka angielskiego, aby rozumieli frazę "select language". Uniwersalne ikony komunikują informacje bez względu na to w jakim języku ktoś mówi. W idealnym świecie znalazłby się na to symbol. Niestety jeszcze takiego symbolu nie ma, chociaż coraz bardziej popularny staje się obraz globusa.
Przykłady możliwej grafiki to globus, profil twarzy ludzkiej z liniami wskazującymi mowę, litery alfabetu z różnych języków (zawyczaj na odnośnikach prowadzących do tłumaczeń), itp.
Element "alt" takiej grafiki nie ma szczególnego znaczenia. Można pomyśleć, że powinien być we wszystkich językach lub w żadnym języku, ale w rzeczywistości ludzie, którzy polegają na czytnikach ekranu mogą przemieszcazać się w opcjach menu i znaleść właściwy link.
W niektórych przypadkach efektywną metodą jest zastosowanie atrybutu "size" do wyświetlania nazw pierwszych opcji na liście, szczególnie kiedy lista jest długa. Oznacza to dla użytkownika kolekcję języków/regionów i może wyeliminoawać potrzebę zastosowania etykiety w konkretnym języku. Oto przykład:
Przetłumaczyć opcje menu na język docelowy. Zamiast umieszczania linku w zwijanym menu do tłumaczenia z napisem np: "French" należy zamieścić francuskie słowo "français"; a zamiast linku z nazwą kraju np:"Germany", należy zamieścić słowo niemieckie "Deutschland".
Należy zwracać uwagę na zasady używania dużych liter w danym języku. Proszę zauważyć, że w języku francuskim używa sie małej litery.
Aby wyświetlić mieszankę języków niełacińskich takich jak: arabski, rosyjski i japoński, potrzebna jest metoda, która umożliwi właściwe wyświetlanie liter.
Preferowanym jest zastosowanie kodowania UTF-8 (Unicode), ponieważ wspiera ono różne wersje językowe. Jeśli nie można zastosować UTF-8, należy używać escapes do przedstawiania znaków, które nie są wspierane przez zastosowane kodowanie.
Należy również myśleć o tym, czy użytkownik nie będzie dysponował czcionkami użytych alfabetów. Należy pamiętać, że użytkownik we Francji może widzieć jedynie puste pola w japońskim tekście podczas gdzy użytkownik japoński widzi tekst normalnie. Jest to spowodowane tym, że system użytkownika francuskiego może nie zawierać znaków japońskich. Można rzec, że nie jest to tak ważne, ponieważ użytkownicy francuscy nie będą korzystali z japońskiej wersji. Z drugiej strony, puste miejsca nie za dobrze wyglądają.
Jeśli uważasz, że puste kwadraciki nie wyglądają zbyt dobrze, możesz pokusić się na zastosowanie grafiki w opcjach. Niestety nie jest to możliwe, ale niektóre witryny zamieszczają takie grafiki poza listą.
Na przykład :
Pamiętać należy jednak, że umieszczanie niełacińskich znaków w ten sposób może nie rozwiązać problemu. Pewne akcentowane znaki łacińskie takie jak w słowie 'čeština' mogą stanowić ten sam problem dla użytkowników, którzy mają czcionki języków łacińskich zachodnio-europejskich.
W niektórych przypadkach należałoby rozważyć zastosowanie nazw w języku danej strony obok nazw języka docelowego.
Na przykład :
Użycie nawiasów jest bardzo pomocne w interpretacji.
Podejście takie nie jest zawsze potrzebne lub pożądane. Jednakże użytkownik może poczuć się pewniej kiedy obok pustych prostokątów widzi:
Proszę zauważyć, że nazwy w języku danej strony powinny być przetłumaczone na każdej stronie, na której się pojawiają - jeśli zostaną w języku angielskim mogą przekazać one błędną informację.
Istnieje jeszcze problem w jaki sposób uporządkować listę języków lub nazw krajów. Nie jest to problemem dotyczącym jedynie list i nie istniej prosta odpowiedź na to pytanie.
Trudno wprowadzić porządek alfabetyczny, ponieważ w każdym języku może on być inny oraz nazwy posiadają różne znaki. Można byłoby zastosować kolejność zastowaną przez Unicode Collaction Algorithm, ale czy byłaby ona pomocna lub rozpoznana przez użytkownika, to już inna sprawa.
Inną możliwością jest ułożenie listy według wielkości rynków na których ma się przedstawicielstwa, wielkości regionów, liczby mieszkańców lub kierując się jakimś kryterium geograficznym. Może to być podstawą do ułożenia kolejności listy, ale żadne z tych podejść nie koniecznie są pomocne użytkownikom, szczególnie w przypadku długich list.
Nie należy rozważać automatycznej negocjacji treści jako zamiennika linków na stronie. Zawsze sensowniejszym jest zamieszczanie odnośników w przypadku jeśli coś nie dział tak jak powinno.
Artykuł ten zajmuję się jedynie zastosowaniem elementu "select". Niektórzy projektanci stron wolą zastosować rozwijane menu napiane w JavaScript. Jest to o tyle pomocne, że można zastosować grafikę, ale istnieją za to innego typu problemy związanie z zastosowaniem JavaScript.
Common Locale Data Repository (CLDR) Project (for finding native versions of language and country names)
Related links, Authoring HTML & CSS