Школа
Интерфейс

Интерфейс выбора часового пояса

Как сделать понятным в мире пользователя выбор часового пояса?

Проектирую экран создания консультации в сервисе, где нужно дать возможность выбрать время и, если нужно, сменить часовой пояс, так как клиенты со всего мира. Большинство решений интернета сводится к формату «(UTC+4:00) Ванкувер, Канада» или «(GMT+1:00) Киев». Но еще есть разные MDT, EST и страны с множеством часовых поясов (Канада опять‑таки) и переходами на летнее время.

Как не сломать ногу во всем этом? Знаю, что можно включить геолокацию и определять системно. Но возьмём кейс, когда пакистанец будет давать консультацию жителю Ванкувера. Как им понять, когда кому быть на связи у скайпа?

Николай Ягодин
3 авг 2021
👁 9037   🗩4
Интерфейс

Интерфейс выбора часового пояса

Как сделать понятным в мире пользователя выбор часового пояса?

Проектирую экран создания консультации в сервисе, где нужно дать возможность выбрать время и, если нужно, сменить часовой пояс, так как клиенты со всего мира. Большинство решений интернета сводится к формату «(UTC+4:00) Ванкувер, Канада» или «(GMT+1:00) Киев». Но еще есть разные MDT, EST и страны с множеством часовых поясов (Канада опять‑таки) и переходами на летнее время.

Как не сломать ногу во всем этом? Знаю, что можно включить геолокацию и определять системно. Но возьмём кейс, когда пакистанец будет давать консультацию жителю Ванкувера. Как им понять, когда кому быть на связи у скайпа?

Николай Ягодин
3 авг 2021
👁 9037   🗩4
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 29
29
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Например, сейчас вторник, 15:00, и я планирую консультацию на следующий вторник, тоже на 15:00. На вашем сервере сейчас 13:00. Сервер также знает, что он находится часовом поясе UTC+3, например. Значит я запланировал консультацию на 10:00 UTC на следующий вторник. Для другого пользователя вы сможете отобразить это время в его часовом поясе, зная разницу между часами на сервере и на его компьютере.

Переводы стрелок начинают иметь значение только в случае, если я создаю консультацию до перехода, но сама она будет после (или наоборот). Например, в нашем примере в ближайшие выходные будет переход на летнее время. Это значит, что 10:00 UTC следующего вторника уже будет соответствовать 16:00, а я⁠—то хотел консультацию в 15:00 часов. Вот тут ваш сайт должен уметь понять, что на самом деле надо было записать мою консультацию на 9:00 UTC на следующий вторник.

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

Как видите, вопрос не про интерфейс вообще, а про аккуратное программирование.

При этом в интерфейсе хорошо бы что‑нибудь отобразить обнадёживающее типа такого:

Консультация назначена на вторник, 10 августа, 15:00 (Челябинск, Россия)

У Ивана Петрова также будет 15:00 (Карачи, Пакистан)

Или:

Консультация назначена на среду, 10 ноября, 22:00 (Челябинск, Россия)

У Фёдора Сидорова это будет 9:00 (Ванкувер, Канада), так как 7 ноября там переведут часы на час назад.

Полезно
 29
29
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Матвей Андриенко

Илья, добавлю, что «база данных с информацией о том, в каких странах когда переводят часы» существует и поддерживается IANA и группой добровольцев:
https://www.iana.org/time-zones

Многие операционные системы и стандартные библиотеки языков полагаются на эту базу для работы с датой и временем.

Допустить ошибку при работе с часовыми поясами очень легко, поэтому стоит придерживаться двух правил: во‑первых, не делать самописных решений, а использовать стандартные; во‑вторых, держать сервера в UTC.

Константин Петров

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

Джаваскрипт‑код для такого преобразования легко найти на Stack Overflow. Хотя с нативным объектом Date работать не очень удобно, лучше взять библиотеку для удобной работы с датой‑временем. Например, Luxon.

Константин Петров

Да, у описанного подхода есть недостаток: в будущем могут измениться правила перевода между часовыми поясами (скажем, в России не так давно их меняли дважды). Если закладываться на этот сценарий, можно хранить локальное время пользователя и его часовой пояс, а перевод в‑из UTC делать на сервере во время вычислений. При этом, конечно, на сервере нужно поддерживать актуальную базу часовых поясов (tzdata).

Определить IANA‑наименование часового пояса в браузере можно Джаваскриптом:

Intl.DateTimeFormat().resolvedOptions().timeZone

+1 к мысли Матвея про то, что серверы должны работать по UTC.

И автотестов, автотестов побольше. Программирование про время и зоны — это программирование на минном поле.

  • Событие планируется на время, которого из‑за весеннего перевода часов вообще не будет.

  • Событие планируется на время, которое из‑за осеннего перевода часов повторяется дважды.

  • Человек запланировал событие на время по одной зоне, а потом переместился в другую.
    • … где перевод часов происходит в другое время, чем в исходной.

    • … где часы не переводят, а в исходной переводили.

    • … или наоборот.

А кроме того, при отображении в вебе нужно оборачивать все времена в элемент <time> и в его атрибуте datetime указывать точное время по UTC в формате ISO 8601.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы