Zastosowanie elementu <select> do treści lokalnych

Potencjalni odbiorcy: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), Web project managers, and anyone who wants to better understand how to use the select element for navigation to localized or regional versions of a site.

Pytania

Jaki jest najlepszy sposób zastosowania menu rozwijanego opartego na elemencie "select" do kierowania użytkowników na strony zlokalizowane?

Tło informacyjne

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.

Odpowiedź

Proszę zwrócić uwagę na to, że nasze rady nie mają zastosowania w przypadku list wyboru, które są częścią formularzy. Na przykład, jeśli wypełnia się formularz i wybiera się z listy kraj zamieszkania lub język, lista wyboru powinna być w języku danej strony, na której znajduje się użytkownik.

Czy powinno się w ogóle stosować listy <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ą:

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.

Nalepsze praktyki

Jeśli decydujesz się na zamieszczenie rozwijanego menu, oto kilka rzeczy o których powinieneś pamiętać:

Lolalizacja. 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.

Etykietowanie. 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.

Stosowanie atrybutu "size". 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:

Menu zwijane pokazujące pierwszych pięć opcji.

Opcja tłumaczenia. 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.

Kodowanie. 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.

Czcionki. 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 :

Menu zwijane z opcjami znaków niełacińskich.

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.

Opisy. W niektórych przypadkach należałoby rozważyć zastosowanie nazw w języku danej strony obok nazw języka docelowego.

Na przykład :

čeština (Czech)
français (French)
deutsch (German)
日本語 (Japanese)

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:

⬜⬜⬜ (Japanese)

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ę.

Kolejność. 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.

Dodadkowe informacje

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.