Использование <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, но будет ли он полезным, интуитивным или узнаваемым для пользователя это уже другой вопрос.

Другой вариант расположить список по размеру рынка сбыта, размеру области или числа носителей языка, или какому-то географическому принципу. Опять же, в то время как это может предоставить обоснование размещения, ни один из этих подходов не обязательно будет полезным для пользователей - особенно при длинных списках.

Кстати говоря

Вы не должны использовать автоматическое согласование контента в качестве замены ссылок на странице. Всегда есть смысл предоставить на странице ссылку на тот случай, если что-то пойдет не так, как ожидалось.

Эта статья специально направлена ​​на использование элемента select. Некоторые дизайнеры предпочитают использовать JavaScript для имитации выпадающих списков. Это может помочь в том, что вы не ограничены текстом; вы можете использовать текст в иллюстрациях, чтобы избежать проблем со шрифтами. Но, конечно, есть и другие потенциальные проблемы, которые, в свою очередь, связаны уже с использованием JavaScript.