2 заметки с тегом

интерфейс

Как писать дату и время в интерфейсах

Это статья из наших внутренних дизайнерских гайдлайнов, поэтому тут может встретиться неожиданная категоричность.

Общие правила

В интерфейсе:

  • год пишется только тогда, когда он отличается от текущего,
  • месяцы лучше писать словами, а не цифрами,
  • в случае сокращенного написания месяца июнь и июль лучше писать полностью.

В бумажных отчетах:

  • год допустимо указывать даже тогда, когда он совпадает с текущим.

Лучше использовать те форматы, которые указаны ниже, если желаемого вами формата здесь нет, то это лишний повод подумать о том, нужен ли он.

1 Абсолютные даты

1.1 Полный + время

Русский English
1 ноября, 12:25 November 1, 12:25
1 ноября 2014, 12:25 November 1, 2014, 12:25

⚠ Перед использованием попробуйте понять, зачем нужно время, если дата может быть в прошлом году

1.2 Короткий + время

Русский English
1 янв, 12:25 Jan 1, 12:25
1 дек 2015, 12:25 Dec 1, 2015, 12:25

1.3 Полный без времени

Русский English
1­ ноября November 1
1 ноября 2014 November 1, 2014

1.4 Короткий без времени

Русский English
1 янв Jan 1
2 ноя 2014 Nov 2, 2014

2 Относительные даты

2.1 Время в прошлом, длинно

Что Русский English
< 1 мин 1 секунду назад 1 second ago
5 секунд назад 5 seconds ago
< 59 мин 1 минуту назад 1 minute ago
2 минуты назад 2 minutes ago
5 минут назад 5 minutes ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 декабря, 13:25 December 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 декабря 2017 December 20, 2017

2.2 Время в прошлом, коротко

Что Русский English
< 1 мин 5 с назад 5 s ago
< 59 мин 5 мин назад 5 min ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 дек, 13:25 Dec 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 дек 2017 Dec 20, 2017

3 Диапазоны дат

В русском: если обе даты без пробелов, то среднее тире (&ndash;) без пробелов, если внутри даты есть пробелы, то между датами &thinsp;&mdash;&thinsp; (длинное тире отбитое тонкими пробелами). Если вы не используете среднее тире, то замените его на длинное.

В английском: всегда использовать среднее тире. С пробелами, если обе даты содержат пробелы. В остальных случаях — без пробелов.

3.1 Полный со временем

Отличие от 3.2: этот лучше подходит для связных текстов, использования в целых предложениях, заголовках писем или разделов

Русский English
С 1 ноября, 12:25 по 5 ноября, 13:35 From November 1, 12:25 to November 5, 13:35
С 1 ноября 2014, 12:25 по 12 мая, 13:35 From November 1, 2014, 12:25 to May 12, 13:35
С 1 ноября 2013, 12:25 по 12 мая 2014, 13:35 From November 1, 2013, 12:25 to May 12, 2014, 13:35
Когда один и тот же день:
1 ноября, с 12:25 по 13:35 November 1, from 12:25 to 13:35
1 ноября 2014, с 12:25 по 13:35 November 1, 2014, from 12:25 to 13:35

3.2 Средний (с тире) со временем

Отличие от 3.1: этот лучше использовать в таблицах и аналогичных конструкциях.

Русский English
1 ноября, 12:25 — 5 ноября, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 12:25 — November 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2014, 12:25 — 12 мая, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2014, 12:25 — May 12, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2013, 12:25 — 12 мая 2014, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2013, 12:25 — May 12, 2014, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноября (12:25&ndash;13:35) 12:25—13:35, November 1
12:25—13:35, 1 ноября 2014 (12:25&ndash;13:35) 12:25—13:35, November 1, 2014

3.3 Короткий со временем

Русский English
1 янв, 12:25 — 5 ноя, 13:35 (&thinsp;&mdash;&thinsp;) Jan 1, 12:25 — Nov 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 дек 2015, 12:25 — 3 янв, 13:35 (&thinsp;&mdash;&thinsp;) Dec 1, 2015, 12:25 — Jan 3, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноя (12:25&ndash;13:35) 12:25—13:35, Nov 1
12:25—13:35, 1 ноя 2014 (12:25&ndash;13:35) 12:25—13:35, Nov 1, 2014

3.4 Полный без времени

Русский English
В одном месяце
1­—5 ноября (1&ndash;5) November 1—5 (1&ndash;5)
1—5 ноября 2014 (1&ndash;5) November 1—5, 2014 (1&ndash;5)
В разных месяцах
1 ноября — 12 декабря (&thinsp;&mdash;&thinsp;) November 1 — December 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2014 — 12 января (&thinsp;&mdash;&thinsp;) November 1, 2014 — January 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2013 — 12 января 2014 (&thinsp;&mdash;&thinsp;) November 1, 2013 — January 12, 2014 (&thinsp;&ndash;&thinsp;)

3.5 Короткий без времени

Русский English
1 янв — 2 июня (&thinsp;&mdash;&thinsp;) Jan 1 — Jun 2 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек 2014 (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12, 2014 (&thinsp;&ndash;&thinsp;)

4 Длительность

Как делают другие:

Есть два формата: цифрами и словами. Вне зависимости от строкового представления сортировка всегда по длительности, а не по строковому представлению.

4.1 Цифрами

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

Стоит помнить, что 1 секунда и 1,0 секунда — не одно и то же, нельзя их путать.

С секундами      Только минуты
0:12,256 Ведущий 0: для минут обязателен
0:12 Ведущий 0: для минут обязателен
2:25 0:02 Для варианта Только минуты ведущий 0: для часов обязателен
25:25 0:25 В этом и ниже миллисекунды скорей всего не нужны, если речь идет не о спортивных соревнованиях
25:00 0:25
2:25:25 2:25
21:25:25 21:25
1:02:25:25 1:02:25 Только минуты в этом случае смотрится особенно неудачно
48:25:25 48:25

4.2 Буквами полный

Все числа округляются до целых. Написать 25 минут и 25,5 секунд — нельзя.

Русский English
Елси хотите миллисекунды, см. 4.1
12 секунд 12 seconds
2 минуты и 25 секунд 2 minutes 25 seconds
25 минут и 25 секунд 25 minutes 25 seconds
25 минут 25 minutes Обратите внимание, здесь не написаны секунды, так и надо
2 часа и 25 минут 2 hours 25 minutes
21 час и 25 минут 21 hours 25 minutes
1 день и 2 часа 1 day 2 hours
48 часов и 25 минут 48 hours 25 minutes
10 дней 10 days
2 недели и 5 дней 2 weeks 5 days Если нужно понедельное деление
6,5 месяцев 6.5 months

4.3 Буквами короткий

Русский English
12,256 с 12.256 s
12 с 12 s
2 мин 25 с 2 min 25 s
25 мин 25 с 25 min 25 s
25 мин 25 min Обратите внимание, здесь не написаны секунды, так и надо
2 ч 25 мин 2 h 25 min
21 ч 25 мин 21 h 25 min
1 д 2 ч 1 d 2 h
48 ч 25 мин 48 h 25 min
10 д 10 d
2 нед 5 д 2 w 5 d Если нужно понедельное деление
6,5 мес 6.5 mo

С десятичной дробью — лучше не надо

С десятичной дробью можно писать только месяцы и годы и только с округлением до половины. Минуты, часы, дни и недели нельзя даже с округлением до половины. В таком виде сложно понять, сколько это, если дробная часть не 0,5.

Лучше не использовать зачеркнутые варианты.

Десятичная Сколько это на самом деле
3,10 часа 3:06
3,20 часа 3:12
3,25 часа 3:15
3,30 часа 3:18
3,33 часа 3:20
3,40 часа 3:24
3,50 часа 3:30
3,60 часа 3:36
3,67 часа 3:40
3,70 часа 3:42
3,80 часа 3:48
3,90 часа 3:54
3,5 года
3,8 года 3 года, 9 месяцев и около 22 дней
3,2 месяца 3 месяца и около 6 дней

5 Выбор периода показа чего-нибудь

5.1. Говорите по-человечески

Неделя лучше 7 дней, месяц лучше 30 дней, это более по-человечески. С этим есть проблема: месяц менее однозначно, чем 30 дней, вариант 30 дней безопасней. Если вы уверены (например, проверили), что у вас разногласия нет, или что оно допустимо, то месяц, лучше последние 30 дней.

Пример: Яндекс в достаточно строгом продукте Яндекс.Метрика использует неделю и месяц. Они точно тестировали разные формулировки и сделали так:

Можно Яндексу, можно и вам

5.2 Пишите «дней», а не «суток»

Всегда вместо суток употреблять дней. Так тоже более человечно, в жизни не говорят позвоню через трое суток, говорят позвоню через три дня. Фразу последние 7 дней нельзя понять иначе как последние 7 суток. Никто не поймет её как последние 7 суток за вычетом последних 7 ночных периодов.

5.3 Будьте последовательны

Хорошо: Неделя, Месяц, Квартал
Хорошо: Последние 7 дней, 30 дней, 90 дней
Плохо: Неделя, 30 дней, Квартал.

Примечание
90 дней и кварталы могут быть вместе и использоваться в разных частях системы одновременно. Если кому-то нужна поквартальная отчетность, должны быть точно кварталы. 1 квартал, 2 квартал, Q1, Q2, и так далее.

5.4 Используйте адекватные величины

Используйте те величины, какими бы назвали этот период в жизни. Вместо 48 часов лучше 2 дня, вместо 3600 секунд — 1 час, вместо 1440 минут — 1 день. 24 часа, 60 минут — норм. Могут быть исключения, но обычно так.

5.5 Не делайте слишком много

Это искусственный макет, так не надо:

Вот тут ↑ перебор вариантов. Такое количество пунктов сложно сверстать, из него непросто выбрать (с учетом того, они почти все одинаковые по тексту).

Что делать, если пунктов много:

  • Решить интерфейсно: сгруппировать, выбрать другой элемент управления, сделать последовательный выбор, переверстать.
  • Решить продуктово: убрать часть опций, сделать автоматическую магию.

5.6 Не дублируйте везде «последние»

И Мильчин, и другие люди советуют не дублировать в списках одинаковое начало.

5.7 Итого

Кажется, что выбирать надо из следующих вариантов (использовать все не надо):
секунды: 1, 5, 10, 15, 30, 60
минуты: 1, 5, 10, 15, 30, 60
часы: 1, 2, 4, 6, 8, 12, 24
дни: 1, 5, 7, 10, 14, 15, 30, 90, 180
недели: 1, 2, 4
месяцы: 1, 2, 3, 6, 12
лет: 1, 2, 5, 10

Если вашего интервала тут нет, может он и не очень осмысленен? Наличие в интерфейсе интервалов последние 5 часов, 18 минут, 13 дней, — вызывает вопросы. Такое может быть из-за особой специфики (например 5-часовые смены операторов), но обычно такого не должно быть.

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

Проще один раз отладить и сделать эталонную реализацию.


Подобные посты отмечены тегом гайдлайны
2018   гайдлайны   интерфейс   редактура
Подписаться на блог…

Технозависимость 80 лвл

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

Для того, чтобы в гостевой операционной системе (та, которая виртуальная) были полезные фишки типа проброса ЮСБ-портов и автоизменения размера есть специальное расширение Oracle Extension Pack. Показываю как выглядит процесс обновления этого расширения.

Первый экран — виртуалбокс рассказывает о наличии обновлений:

После того, как согласился обновить виртуалбокс, он предлагает скачать обновление:

После загрузки и проверки (это два разных последовательных прогрессбара)

предлагает установить обновление:

Если согласиться установить, то на всякий случай он уточнит, что расширение уже установлено, правда ли обновлять. Забудет, что вся эпопея началась именно с того, что предложили обновить и пользователь согласился.

Потом вмешиваются юристы

и система безопасности макоси. Обратите внимание на количество разных окошек в фоне и заголовок «Network Operations Manager» (звучит как должность в Oracle).

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

Я думал, что на предыдущем шаге все закончится, но нет. Даже то тупиковое модальное окно с одной кнопкой — ещё не конец — спросят что делать с тем временным файлом, который качали:

Я абсолютно уверен, что почти каждый этап обновления обсуждали и на каждый этап было логичное объяснение программиста, юриста или ещё кого-нибудь, почему нужно задавать этот вопрос:
— вдруг человек не против обновить, но не прямо сейчас;
— вдруг он занят чем-то важным, скачал обновление, но установить хочет потом;
— вдруг он не хочет удалять временный файл обновления;
— вдруг у него сейчас мобильный интернет и скачивать не надо;
и т. д.

Но общий результат катастрофический: 10 этапов, 8 нажатий на подтверждения. Не надо так. Правильно решение — обновить в фоне как Гугл Хром, чтобы никто даже не заметил.

Ещё раз все экраны вместе:

Подписаться на блог…