Використання <select> для Посилання на Локалізований Контент

Аудиторія: шифрувальники XHTML/HTML (використовуючи редактори або скрипти), розробники скриптів (PHP, JSP, і т.д.), менеджери Веб проектів, і ті, хто хоче краще зрозуміти, як використовувати елемент select для переходу на локалізовані або регіональні версії сайту.

Питання

Як найкраще використовувати випадаючі меню на основі елементу select для направлення відвідувачів до локалізованого контенту?

Ввідна інформація

Оскільки компанії та організації запускають все більшу кількість локалізованих веб-сайтів, то росте необхідність у зручній глобальній навігації.

Одним із найбільш популярних є випадаюче меню на головній сторінці, що створюється за допомогою елементу select і включає посилання на локалізовані версії контенту. Такі списки можуть використовуватися не лише на головній сторінці, але можуть також розглядатися як ефективний спосіб, що дозволяє користувачам перемикатися між перекладами або регіонально локалізованими сайтами на інших сторінках.

Зазначимо, що локалізований контент може бути альтернативним сайтом країни, перекладеною версією сайту або сторінки, і т.д. У цій статті ми не будемо обговорювати кращий спосіб організації інформації (тобто перекладений контент чи специфічні регіональні сайти) для того, щоб зосередитися на плюсах та мінусах і не будемо обговорювати передову практику, що пов'язана із використанням списків вибору для вибору контента. Є безліч інших аспектів глобальної навігації, які будуть описані в інших статтях.

Відповідь

Зверніть увагу, що ці рекомендації не поширюються на вибір списків, які є частиною форми. Наприклад, якщо ви заповнюєте форму і вибираєте країну проживання чи мову зі списку, то весь список вибору має бути написаний на мові поточної сторінки.

Чи повинен я використовувати список <select> (вибору) взагалі?

Випадаючі меню можуть бути дуже привабливими, там де багато вільного простору. Тим не менш, випадаюче меню не завжди є кращим рішенням для глобальної навігації, і ви повинні вирішити, чи воно підійде для вашого веб-сайту. Наступні пункти допоможуть.

Головна перевага використання випадаючого меню - зайняття меншого простору.

Основні недоліки використання select для посилань на локалізовані сторінки або сайти:

Якщо ваш сайт підтримує лише декілька із локалізованих версій, то, напевно, краще взагалі не використовувати випадаюче меню і просто розмістити посилання безпосередньо на сторінці. Це дає велику гнучкість у використанні графіки для представлення іноземного тексту, дозволяє уникнути труднощів пошуку підходящої немовної відмітки для списку, і дозволяє користувачам набагато швидше визначати присутність сторінки і посилання на неї.

Також є й інші методи. Наприклад, контурні карти можуть бути використані для вибору місцевих сайтів на основі регіону чи країни.

Якщо випадаюче меню містить посилання на більш ніж 20 інших сайтів або сторінок, то ви повинні розглянути питання, чи це зручно для тих веб-користувачів, які повинні прокручувати список до кінця. Якщо ні, то на домашній сторінці ви можете поставити посилання на сторінку спеціального глобального шлюзу. Якщо між локалізованими версіями певних сторінок є взаємні посилання, то сторінка вибору не може бути практичним рішенням.

Найкращі практики

Якщо ви вирішите використовувати випадаюче меню, ось деякі рекомендації, які варто мати на увазі.

Розташування. Розташовуйте випадаюче меню або у верхній частині сторінки або близько біля неї. Це місце дуже помітне, і є підвищена Ймовірність того, що відвідувач буде його бачити. Проведені дослідження щодо сторінок які написані на скриптах, що вирівнюються зліва-направо показують, що розташування у верхньому правому куті збільшує видимість. Крім того, все більше число веб-сайтів розташували свої глобальні шлюзи в цьому місці, як результат веб користувачі очікують їх в цьому місці.

Звичайно, не ставте список в нижній частині сторінки, бо він може не з'явитися на first screenful (обсяг інформації, видимий ​​одночасно на екрані при завантаженні сторінки без прокрутки) (і майте на увазі, що один screenful може бути різним для різних користувачів - в заложності від розширення екрану).

Позначення. Створіть графічний дизайн в якості мітки для випадаючого меню. Ви не можете очікувати, що веб-користувачі, які не володіють Англійською мовою зрозуміють "Select language" (виберіть мову). Загальновизнані іконки зрозумілі людям, незалежно від того, якою мовою вони спілкуються. В ідеальному світі для цього був би створений широко відомий символ. Хоча той час ще не настав, схоже, що глобальні іконки, стають все більш популярними.

Наприклад можлива графіка може включати глобуси, іконки профілів осіб з ​​лініями, які позначають мовлення, літери з різних скриптів (зокрема, для посилань на переклади), і т.д.

Альтернативний текст для такої графіки не має великого значення. Ви можете подумати, що для доступності він повинен бути на всіх мовах, чи не містити взагалі конкретної мови, але насправді люди, які використовують програми для читання з екрану можуть перейти до випадаючого тексту для пошуку правильного посилання.

Використання атрибуту розміру. В деяких випадках для відображення першого набору опцій в списку ефективним може бути використання атрибуту size - особливо, якщо це довгий список. Це говорить користувачеві, що це набір мов/регіонів, і може усунути необхідність використання для списку специфічних немовних міток. Ось приклад:

Випадаючий список показує перші п'ять пунктів із списку.

Опції перекладу. Перекладіть меню на цільову мову. Замість того, щоб включити у випадаюче меню посилання на переклад, наприклад, посилання "French" буде читатися "français"; і замість посилання на сайт альтернативної країни, наприклад посилання "Germany" буде читатися "Deutschland".

Зверніть увагу на правила капіталізації в інших мовах. Зверніть увагу, що правильний переклад "French" - "français" пишеться з малої літери 'f'.

Кодування. Для відображення суміші таких нелатинських мов, як Арабська, Російська та Японська, ви повинні мати спосіб представлення всіх необхідних символів.

Переважно ви повинні використовувати UTF-8 (Unicode) в якості кодування для вашої сторінки, так як це кодування підтримує всі символи, які вам знадобляться. Якщо ви не можете використовувати UTF-8, то для представлення символів, які не підтримуються кодуванням вашої сторінки, ви повинні використовувати escapes (екрановані символи).

Шрифти. Ви також повинні подумати про те, чи читач матиме шрифти для відображення цього діапазону скриптів. Майте на увазі, що Веб-користувачі у Франції, наприклад, можуть побачити порожні квадрати замість тексту, що написаний Японською мовою, тоді як користувачі в Японії бачитимуть текст. Це тому, що шрифти, які доступні в системі Французького користувача можуть не містити Японських гліфів. Можна стверджувати, що це не дуже важливо, так як Французькому користувачі не потрібно вміти читати Японською мовою. З іншого боку, ви можете відчути, що порожні квадрати є непривабливими.

Якщо ви відчуваєте, що порожні квадрати непривабливі, то у вас може виникнути спокуса використовувати текст у графіці для нелатинських варіантів. На жаль, це не можливо включити графіку в сам список вибору, але деякі сайти додають таку графіку за межами випадаючого меню.

Наприклад:

Випадаючий список з нелатинськими варіантами на вибір, що відображаються поруч.

Однак, будьте обережні, вирішення питання з нелатинським текстом таким чином, як і раніше може не вирішити всіх проблем. Деякі акцентовані латинські символи, такі, як 'čeština' можуть викликати такий самий ефект для деяких користувачів, які мають Латинські шрифти, що охоплюють тільки Західноєвропейські мови.

Опис. У деяких випадках ви можете застосувати нижченаведені назви мови або країни на рідному скрипті/мові, взявши для назви мову поточної сторінки.

Наприклад:

čeština (Чеська)
français (Французька)
Deutsch (Німецька)
日本語 (Японська)

Корисно використовувати дужки, оскільки вони більш чітко показують, що це роз'яснення.

Такий підхід не завжди є необхідним або бажаним. З іншого боку користувачі можуть почувати себе більш комфортно за відсутності гліфів шрифту, тоді коли вони бачать

Текст "日本語 (Japanese)", де Japanese (Японські) символи представлені порожніми квадратами.

Відзначимо також, що назви на мові поточної сторінки повинні насправді бути переведені для кожної сторінки, де вони з'являються - якщо ви залишите їх на Англійській мові, то ви можете отримати неправильний результат.

Розташування. Також є питання щодо того, як розташувати багатомовний список мов або назв країн. Це питання не є специфічним для списків вибору, і на нього немає простої відповіді.

Важко застосовувати розташування в алфавітному порядку, так як це залежить від мови, а крім того, ймовірно, що буде ще й декілька скриптів. Можна слідувати порядку за замовчуванням, який встановлений алгоритмом сортування Unicode, та чи буде він корисним, інтуїтивним або впізнаваним для користувача це вже інше питання.

Інший варіант розташувати список за розміром ринку збуту, розміром області чи числа носіїв мови, або за якимось географічним принципом. Знову ж таки, в той час як це може надати обгрунтування розташування, жоден з цих підходів не обов'язково буде корисним для користувачів - особливо при довгих списках.

This page and Wikipedia list language alternatives by (English) alphabetic order of the associated language tags. So, for example, German (de) comes before English (en), and Spanish (es) comes before French (fr). This assumes that the user can either find his language easily by scanning (which is the case for this page) or knows the tag for their language and can guess easily enough that that has been used for the ordering.

Доречі

Ви не повинні використовувати автоматичне узгодження контенту в якості заміни посилань на сторінці. Завжди є сенс надати на сторінці посилання на той випадок, коли щось піде не так, як очікувалося.

Ця стаття спеціально спрямована на використання елемента select. Деякі дизайнери вважають за краще використовувати JavaScript для імітації випадаючих списків. Це може допомогти в тому, що ви не обмежені текстом; ви можете використовувати текст в ілюстраціях, щоб уникнути проблем зі шрифтами. Та, звичайно, є й інші потенційні проблеми, які, в свою чергу, пов'язані вже з використанням JavaScript.