Текст книги "Шаблоны проектирования веб-приложений"

DATE FORMAT (ФОРМАТ ДАТЫ)

Проблема

Использование формата даты, распространенного в одном регионе, может ввести в заблуждение пользователей в других регионах. Например, формат даты, используемый в Соединенных Штатах (мм/дд/гг или мм/дд/гггг) будет непривычен европейским пользователям, поскольку они знакомы с форматами дд/мм/гг или дд/мм/гггг, а также японским пользователям, которые используют формат гг/мм/дд.

Решение

При отображении даты следует использовать формат гггг-мм-дд, рекомендованный ISO 8601 или формат, который устраняет путаницу между месяцем и годом даты (рис. 10.11 и 10.12).

Рис. 10.11. Sun использует формат гггг/мм/дд для отображения даты (небольшое изменение рекомендованного ISO гггг-мм-дд)

Рис. 10.12. PayPal использует формат даты, указывая сокращенно месяц, дд, гггг, чтобы месяц и год были очевидны

Зачем

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

Например, дата «02/04/03» может быть истолкована как:

• 2 апреля 2003 (Европа);

• 4 февраля 2003 (США);

• 3 апреля 2002 (Япония).

Международный формат, определяемый ISO (ISO 8601), решает эту проблему, определяя численную систему дат в формате гггг-мм-дд. Отображение даты в формате ISO или уточнение месяца и года предотвращает путаницу. Кроме того, данный подход удобен при работе с компьютером, так как облегчает хронологическую сортировку дат (см. www.w3.org/Intemational/questions/qa-date-format).

Однако ISO-формат даты трудночитаем, поскольку он довольно сильно отличается от родного для большинства пользователей формата даты. Когда пространство и сортировка не являются проблемой, используйте более удобный для чтения формат, разъясняющий месяц и оставляющий год очевидным (например, февраль, 4, 2003 или 4 февраля 2003).

Как

У проектировщиков существуют два варианта отображения даты:

1. Использование нейтрального формата, рекомендованного ISO 8601. Формат гггг-мм-дд, рекомендованный ISO 8601 является решением, наиболее часто применяемым веб-приложениями с разнообразной пользовательской базой, где:

• гггг – это год (все цифры, например 2008);

• мм – месяц (с 01 – январь по 12 – декабрь);

• дд – это день (с 01 по 31).

2 января 2008 тогда будет показано, как 2008-01-02.

2. Использование формата, который делает месяц и год очевидными. В данном подходе используется название месяца, а год обозначен четырьмя цифрами. Так дата может быть записана в виде: 2 января 2008 года. Этот подход более естественен для пользователей, поскольку его легче прочитать. Однако он занимает больше места и, так как это может повлиять на производительность сортировки, менее удобен для работы с компьютером.

Будьте осторожны при сокращении названия месяца

Сокращения названия месяца в датах до нескольких первых букв (например, 2 янв. 2008) может стать проблемой для пользователей в некоторых странах. Например, на французском языке первые три буквы названий месяцев «июнь» и «июль» одинаковые – juin и juillet соответственно.

Учитывайте языковые предпочтения пользователей при отображении даты

В веб-приложениях можно узнать языковые предпочтения пользователей и показывать им родной формат даты с помощью заголовка Accept-Language HTTP. Однако данный метод отображения даты может быть неуместен, если контент не локализован, и поэтому вполне возможно, что формат даты не совпадет с языком страницы. Например, если страница представлена на немецком языке, отображение дат в североамериканском формате дд/мм/гггг может ввести в заблуждение (даже когда пользователи предпочитают английский), так как пользователи могут не суметь определить, используется ли на странице формат мм/дд/гггг или дд/мм/гггг.

Используйте всплывающий календарь для выбора даты

Чтобы свести к минимуму ошибки при вводе даты, примите во внимание возможность использования всплывающих календарей. Они помогают несколькими способами. Во-первых, они предотвращают появление при вводе данных ошибок, вызванных различными форматами даты (мм/ дд/гг вместо дд/мм/гг). Во-вторых, поскольку пользователи могут видеть и месяц, и день, они могут быть уверены, что выбрали правильную дату. При использовании всплывающих календарей отображайте календарь сразу, как только будет сфокусировано поле даты, чтобы побудить пользователей выбрать дату из календаря, однако не лишайте их возможности вводить дату с помощью клавиатуры. Кроме того, при использовании всплывающего календаря, убедитесь, что месяц четко указан (рис. 10.13).

(а)

(б)

Рис. 10.13. Несмотря на использование формата дд/мм/гггг (даже для различных языков), всплывающий календарь от Flickr позволяет легко выбрать дату в календаре (а). Месяц во всплывающем календаре локализован для выбранного языка (б)

Связанные шаблоны проектирования

Для использования нейтрального языкового формата требуется больше горизонтального пространства, чем для формата США в виде мм/дд/гг или мм/дд/гггг. Поэтому важно, чтобы на страницах был применен расширяемый дизайн (EXTENSIBLE DESIGN) для удовлетворения требований дополнительного пространства. Кроме того, следует рассмотреть вопрос об использовании шаблона GLOBAL GATEWAY для выявления страны и языковых предпочтений пользователей.

TIME FORMAT (ФОРМАТ ВРЕМЕНИ)

Проблема

Как и форматы дат, временные форматы варьируются от одного региона к другому. Хотя каждый временной формат показывает часы, минуты и секунды, их порядок представления и разделители часто различаются с точки зрения 12– или 24-часового формата; символа, используемого для отдельных часов, минут и секунд, нулевых головных цифр; отображения часовых поясов; использования летнего времени.

Решение

По возможности показывайте время в соответствии с временными зонами пользователей и используйте местные условные обозначения для отображения времени, т. е. либо в 12-часовой системе, либо в 24-часовой (рис. 10.14).

Рис. 10.14. Google Calendar локализует время в соответствии с региональным часовым поясом пользователей, даже если встреча запланирована кем-то, находящимся в другом часовом поясе

Если время не может быть представлено в родном формате пользователей, воспользуйтесь рекомендациями ISO 8601, который использует 24-часовую систему с форматом ччммсс или с расширенным форматом чч:мм:сс, где:

• чч обозначает часы между 00 и 24;

• мм обозначает минуты между 00 и 59;

• сс обозначает секунды между 00 и 59 (или 60 в исключительном случае при добавлении корректировочной секунды).

Зачем

Пользователи, вероятно, наиболее знакомы с местными условными обозначениями своего часового пояса и могут быть не уверены при определении времени, представленного с помощью других условных обозначений. Кроме того, когда время представлено в часовом поясе другой страны, пользователи могут не знать, как преобразовать его в свой часовой пояс или могут совершить ошибки при его преобразовании.

Как

По возможности следует показывать время с учетом региональных часовых поясов пользователей или их заявленных предпочтений. В случаях когда событие или действие происходят в другом часовом поясе, следует показывать время, используя в качестве точки отсчета часовой пояс события или действия. Например, при отображении статуса полета следует использовать местные часовые пояса пунктов отправления и назначения рейса (рис. 10.15).

Рис. 10.15. При отображении информации о состоянии полета время отправления и прибытия должно быть показано с использованием местного времени отправления и прибытия, независимо от часового пояса, из которого пользователи просматривают данные (www.flightview.com)

Предоставьте пользователям возможности указывать свои предпочтения относительно часового пояса

При регистрации заявления или создании профилей пользователей следует спросить пользователей о предпочитаемом часовом поясе (рис. 10.16).

Рис. 10.16. При планировании встречи или события в ReadyTalk пользователям предлагается указать как время, так и часовой пояс, в котором будет происходить встреча

Показывая местное время для таких задач, как планирование встреч или организация мероприятий, следует указать часовой пояс и смещение от GMT (среднее время по Гринвичу) или UTC (универсальное время или универсальное координированное время) (рис. 10.17).

Рис. 10.17. При редактировании информации учетной записи Twitter позволяет пользователям указывать свой часовой пояс. И хотя он показывает, например, «GMT-08:00», он уточняет часовой пояс с указанием «тихоокеанского времени» и страны, в которых он применяется (США и Канада)

Поскольку GMT и UTC, как правило, одно и то же[21]21
  GMT основан на вращении Земли, в то время UTC на атомных часах. Обе системы исчисления времени, как правило, то же самое, или различаются не более, чем на секунду, поскольку к UTC время от времени добавляют корректировочные секунды.


[Закрыть], GMT чаще используется, поскольку пользователи с ним знакомы.

Связанные шаблоны проектирования

Локализованный шаблон DATE FORMAT обычно применяется в совокупности с шаблоном TIME FORMAT потому, что большинство приложений, которые показывают время и требуют от пользователей выбрать время, обычно показывают даты или требуют, чтобы пользователи выбрали даты.

Кроме того, отображение часовых поясов и их смещений требует дополнительного места, при этом используется шаблон EXTENSIBLE DESIGN.

NUMBER FORMAT (ФОРМАТ ЧИСЕЛ)

Проблема

Условные обозначения чисел по всему миру различаются с точки зрения групп и чисел после запятой (например, в дробях), требуемой точности, единиц измерения, и т. д.

Решение

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

Зачем

Не существует общепризнанных условных обозначений чисел. Они различаются в разных странах. Поскольку не следует ожидать, что пользователи будут знакомы с условными обозначениями, принятыми в других странах, полезным будет представить числа в форматах, в которых они больше всего привыкли их видеть.

Как

При показе числа все число (или целая его часть), как правило, разделено на группы разделителями. Способы, при помощи которых создаются числовые группы, как и используемый разделитель, различны во всем мире (рис. 10.18). В Соединенных Штатах числа показывают в группах по три, разделенные запятыми (например, 1,000,000); в Индии в одной группе показано три числа, а в остальных – по два через запятую (например, 10,00,000), а в Японии большие числа создаются путем группировки цифр, по 10000, разделенных идеографическими символами, которые представляют степень 1 0000 (например, ).

Рис. 10.18. Примеры разделителей групп в разных странах

Как и разделители групп, разделитель между целым и дробной частью числа, известный как десятичная точка, разделитель десятичной дроби и т. д. также меняется в зависимости от страны. Это может быть десятичная точка (т. е. точка), запятая или другой символ (рис. 10.19).

Рис. 10.19. Примеры разделителей десятичной дроби в разных странах. В многоязычных странах, таких как Швейцария, используются различные разделители десятичной дроби для различных языков. Запятая используется в качестве разделителя десятичной дроби, кроме случаев, когда указывается сумма в швейцарских франках, тогда используется пробел, а в качестве разделителя тысяч используется апостроф или пробел

Используйте единицы измерения, знакомые пользователям

Также используйте единицы веса и измерения, соответствующие условным обозначениям целевой страны. Например, использование фунтов, футов и дюймов (английская или британская системы) будет неэффективным в странах, использующих метрическую систему, где надлежащими единицами измерения являются килограммы, метры и сантиметры, соответственно.

Аналогичным образом отображение температуры по Фаренгейту будет вводить в заблуждение пользователей, которые знакомы только с системой измерения по Цельсию. Поэтому если приложение, скорее всего, будет доступно тем, кто знаком с различными условными обозначениями, представьте единицы измерения и температуры как в метрической, так и в английской системе или позвольте пользователям переключаться с одной единицы измерения на другую (рис. 10.20).

(а)

(б)

Рис. 10.20. В информации о погоде USA Today показывает температуру и в °F, и в °C (а). Weather.com позволяет пользователям переключаться между «английской» и «метрической» системами, поскольку при этом изменяются не только единицы измерения температуры, но и ветра, давления, точки росы, и видимости (б)

Поскольку пользователи могут быть не знакомы с терминами «английская» и «метрическая» системы, по возможности используйте понятные и знакомые единицы измерения, такие как °F и °C. Кроме того, лучше попросить пользователей выбрать единицы измерения такие, как сантиметры, метры, футы, ярды и т. д., а не просить их выбирать между английской и метрической системами.

Представьте телефонные номера в знакомых форматах

Форматы телефонных номеров – общее количество цифр и разделители – также меняются от одной страны к другой (рис. 10.21). Таким образом, по возможности необходимо соблюдать местные условные обозначения для отображения телефонных номеров.

Рис. 10.21. Форматы местных телефонных номеров

Альтернативой является использование ITU-T E.123 – международного формата, рекомендующего следующее (см. рис. 10.22 и 10.23):

§ 2.1: Международный номер должен быть напечатан под междугородним номером, соответствующие цифры выстраиваются друг под другом, для облегчения понимания структуры международного номера.

§ 2.5: Если желательно написать только международный номер, то его следует записать в виде: Телефон Международный + 22 607123 4567.

Рис. 10.22. Рекомендации ITU-T E.123 по форматированию междугородних и международных номеров

Рис. 10.23. Номера телефона и факса представлены в данном примере в международном формате

Связанные шаблоны проектирования

Как и другие шаблоны, использование локализованного формата числа (NUMBER FORMAT) требует дополнительного пространства, и важно, чтобы на страницах был применен расширяемый дизайн (EXTENSIBLE DESIGN) для удовлетворения требований дополнительного пространства. Кроме того, рассмотрите использование шаблона GLOBAL GATEWAY для определения региона пользователей и их языковых предпочтений, и в соответствии с этим представьте числовой формат.

CURRENCY AND CURRENCY FORMAT (ДЕНЕЖНЫЕ ЕДИНИЦЫ И ФОРМАТ ДЕНЕЖНЫХ ЕДИНИЦ)

Проблема

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

Решение

Необходимо показать пользователям валюты данные в их родных форматах. Если же пользователи захотят пересчитать цены в иной валюте, позвольте им изменить валюту, указав название страны или желаемую валюту (рис. 10.24).

(а)

(б)

(в)

Рис. 10.24. FontShop показывает цены в долларах США ($) (а), но позволяет пользователю выбрать другую страну в меню выбора страны (б), что меняет валюту, в данном случае, на евро (€) (с)

Зачем

Представление пользователям информации о ценах в местной валюте и форматах помогает им, поскольку они точно знают, сколько заплатят за продукты (или услуги) и им не придется полагаться на калькуляторы обмена или другие способы преобразования цены для определения правильной суммы.

Как

Веб-приложения, которые поддерживают несколько валют, должны учитывать соответствующие символы валюты, коды и форматы. Это связано с разнообразием валют и числом схем форматирования, используемых в различных странах. Например, символ валюты для британского фунта (ISO код: GBP) – £, а японской иены (ISO код: JPY) – ¥. Кроме того, размещение символа валюты колеблется от одной страны к другой (рис. 10.25).

Рис. 10.25. Символ валюты и его расположение в разных странах различаются

Действия пользователя при изменении валюты очень похожи на действия при изменении языка (см. шаблон LANGUAGE SELECTOR далее в этой главе). В зависимости от количества валют, поддерживаемых приложением, пользователи могут выбрать соответствующую валюту из выпадающего списка или набора ссылок (рис. 10.26).

(а)

(б)

Рис. 10.26. Ресурс Silver Coast Property показывает цены на недвижимость как в евро, так и GBP (британский фунт) по умолчанию (а) и позволяет пользователям менять валюту из GBP на доллары США (USD), канадские доллары (CAD) и др. Валютные опции показываются пользователям как всплывающие окна при нажатии на ссылку с ценой (б)

Когда пользователи меняют валюты, чтобы увидеть цену в местной или иной валюте, необходимо при конвертации валюты показать обменный курс (рис. 10.27).

Рис. 10.27. Универсальный конвертер валют от XE.com показывает пользователям обменный курс как исходной, так и целевой валюты и наоборот

Для того чтобы избежать возможной путаницы с валютами, следует представить пользователям соответствующие символы (рис. 10.28), код ISO валюты, или и то и другое, как показано на рисунке ниже. Кроме того, следует отображать соответствующие групповые и десятичные разделители на основании языковых предпочтений пользователей.

Рис. 10.28. При создании счета-фактуры в PayPal пользователям показывают подходящий (соответствующий) символ валюты. Пользователи могут выбрать другую валюту, тогда, соответственно, символ валюты обновится

Сохраняйте настройки денежных единиц

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

Связанные шаблоны проектирования

Цены, как правило, показаны в виде чисел, поэтому важно, чтобы цены были представлены не только в верных валютах и их форматах, но и следовали местным условным обозначениям групповых и десятичных разделителей (NUMBER FORMAT).

Кроме того, для поддержки различных символов валюты и во избежание использования изображений вместо них примените кодировку UTF-8. Отображение ISO кода валюты, как правило, требует дополнительного пространства, поэтому важно, чтобы на страницах использовался шаблон EXTENSIBLE DESIGN.

GLOBAL GATEWAY (ГЛОБАЛЬНЫЙ ШЛЮЗ)

Проблема

Когда доступны локализованные приложения, пользователей необходимо направить на приложение, предназначенное для их региона и языка. Это особенно важно для приложений (например, приложений для электронной коммерции), где продукты и услуги, предлагаемые компанией, варьируются от одного региона к другому. Даже тогда, когда локализованные приложения доступны с помощью соответствующих кодов стран в их именах доменов высшего уровня (TLD)[22]22
  Многие веб-приложения используют URL конкретных стран, используя соответствующий код страны и их имена TLD. Коды стран для TLD включают. uk для Соединенного Королевства, jp для Японии, fr для Франции и т. д. Список TLD-кодов стран смотрите на www.iana.org/domains/root/db/.


[Закрыть] (например, www.amazon.co.uk для Великобритании), пользователи могут не знать соответствующий код или что локализованная версия существует и поэтому они могут перейти непосредственно к нелокализованной версии приложения.

Решение

Для направления пользователей на локализованные версии программы покажите им страницу глобального шлюза, чтобы дать им возможность выбрать свой регион (или страну) и язык (рис. 10.29). Как только пользователи укажут свое предпочтение, запомните их выбор так, чтобы им не пришлось его повторять. Тем не менее не ограничивайте пользователей их выбором, позволяйте им изменять его (Yunkers, 2002).

Рис. 10.29. Coca-Cola перемещает пользователей на страницу глобального шлюза и позволяет им выбирать страну по желанию. Кроме того, приложение запоминает выбранный вариант, чтобы не просить пользователей повторять выбор в будущем

Зачем

Во многих приложениях электронной коммерции продукты и услуги отличаются от страны к стране. Предоставление пользователям возможности выбирать свою страну облегчает им получение информации о том, что они могут купить онлайн и помогает избежать разочарования от заказа товаров, которые могут быть недоступны в их стране. Указание страны также позволяет пользователям видеть локализованные цены, даты, валюты и т. д., продолжать совершенствовать свой опыт взаимодействия с приложением.

Как

Покажите пользователям список доступных стран и/или языков, дайте им возможность указать свой выбор и направьте их на локализованные версии приложения для данного региона (рис. 10.30).

(а)

(б)

Рис. 10.30. Nike просит пользователей сначала выбрать язык (а), а затем желаемую страну (б)

Предоставьте пользователям возможность изменять свой выбор страны на каждой странице

Во многих приложениях, особенно в приложениях для электронной коммерции или приложениях, не требующих от пользователей войти в систему, пока они не начинают совершать сделки, пользователи могут получить доступ к приложению не только через главную страницу, но и через другие. Чтобы облегчить им переход к предпочитаемой стране, дайте им возможность выбрать страну или предоставьте доступ к странице открытого мира со всех страниц в приложении. Наиболее распространенными местами размещения опции Select Country (Выберите страну) – верхний правый угол или нижняя часть колонтитула (рис. 10.31).

(а)

(б)

Рис. 10.31. Sun размещает ссылку Worldwide (По всему миру) в правом верхнем углу, а при нажатии на ссылку показывает пользователям страницу Global Gateway (Открытый мир), чтобы пользователи могли выбрать свою страну (а). Apple размещает выпадающий список Apple.com Worldwide (Apple.com по всему миру) в нижней части и позволяет пользователям выбирать страны напрямую (б)

Связанные шаблоны проектирования

Уделите внимание использованию шаблона LANGUAGE SELECTOR для пользователей из многоязычных стран, которые могут захотеть изменить язык приложения.