6 заметок с тегом

интерфейс

На что обратить внимание, когда делаешь поиск

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

Изначально это был твиттер-тред, для удобства я перенес в пост.

1. Регистронезависимый поиск

Поиск почти всегда лучше сделать регистронезависимым. Нет ничего более неудобного, чем регистрозависимый поиск. Если кому-то нужна регистрозависимость — лучше сделать опцией.

2. Искать с первого символа

Ограничения «искать с третьего символа» обычно причиняют немало неудобств, лучше искать сразу.

3. Искать по всем полям сразу

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

Например, можно искать сразу по всем отображаемым полям.

4. Делать trim

Почти всем данным при вводе, поисковому запросу в том числе, нужно делать trim — убирать все пробельные символы с концом строки (внутри нельзя).

5, 6 и 7. Как делать поисковый запрос на токены

Запрос делится по пробельным символам на части, каждая часть ищется независимо. Чтобы искать словосочетание, нужно взять его в кавычки.

Запрос Что должно найтись
Pinot toscana Хотя бы одно поле содержит «Pinot»
И
Хотя бы одно поле содержит «toscana»
’’Pinot toscan’’ Хотя бы одно поле содержит «Pinot toscana»
красное ’’Pinot toscana’’ Хотя бы одно поле содержит «красное»
И
Хотя бы одно поле содержит «Pinot toscana»

8, 9 и 10. Диакритические знаки

Нужно учитывать диакритические знаки, искать и с ними, и без них.

Châteauneuf-du-Pape должен находиться по запросам:
Châteauneuf-du-Pape
Chateauneuf-du-Pape

Это важно потому, что не все помнят как правильно. Кто-то может забыть сам, а кто-то скопирует текст там, где не знали как правильно. Например, Château очень часто пишут без Accent circonflexe (Chateau).

Нельзя просто сделать замену диакритических знаков на обычные. Должно найтись и так, и так. Человек, который пишет правильно, страдать не должен.

Не делайте замену символов руками (â → a, á → a, à → a, å → a и т. д.), вы задолбаетесь и что-то пропустите. В вашем языке, скорее всего, есть функция нормализации. Например, вот в джаваскрипте:
developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Я использовал вот такой код для нормализации (откуда-то скопипастил)

value.normalize(’NFKD’).replace(/[^\w\s.-_\/]/g, ’’).toLocaleLowerCase();

Посмотреть в жизни

Попробуйте все описанное выше в Винах Парфенона.

Что я забыл?

 1 комментарий    1543   3 мес   дизай   интерфейс   поиск
Подписаться на блог…

Изящный онбординг в Apple Books

В iOS 13 в Books появились цели. Эппл сделал онбординг этой фичи изящным и технологичным. Хочу рассказать о том, почему мне так кажется.

Начиная с версии iOS 13 пользователь может установить себе для чтения цель: «Я буду читать по два часа в день». Приложение Books будет считать время и сообщать, когда цель достигнута. Пользователям неплохо бы рассказать, что такая функция появилась.

Как это могло бы выглядеть

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

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

  1. В какой-то момент телефон или планшет показывает уведомление «Смотри, в книгах теперь есть цели, хочешь?». По тапу открывается какой-то экран. Сразу возникают вопросы:
    • В какой момент показать, как не отвлечь и не раздражать непрошенным уведомлением (особенно после релиза iOS, где все лезут с рассказами о новых фичах).
    • Как узнать, кому нужно показывать, а кому нет. Например, можно посмотреть, у кого загружены какие-то книги, или кто читал последний месяц. А если человек не читал, а начнет, то что? Значит, уже недостаточно проверять этот онбординг только после обновления, нужно проверять иногда. Как часто, как долго? Нужно ли проверять в iOS 14, 15 или 16?
    • Не забыть сохранить, кому показывали онбординг, а кому нет. После сохранения нужно не потерять при восстановлении из бекапа и при обновлении на следующую iOS.
    • Как должны работать цели до показа уведомления? Что будет, если цель достигнется раньше, чем сработает онбординг?
  2. Нужно задизайнить, разработать, локализовать и протестировать экран этого онбординга.
  3. Нужно убедить команду сделать онбординг ещё в одном приложении это ок (в iOS его обычно нет).

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

Как сделал эппл

Не знаю почему именно Эппл сделал по-другому, я нигде не встречал рассказ. Но он сделал такой онбординг:

  1. Установить значение цели по умолчанию в 5 минут

Всё. Онбординг сделан, — реально один шаг. Попробую подвести итог тех вопросов:

В какой момент показать Покажется само, как пользователь почитает пять минут
Как не отвлечь и не раздражать непрошенным уведомлением В момент показа уведомления пользователь точно читает, ему это более-менее релевантно
Как узнать, кому показывать нужно, а кому нет Если читает меньше пяти минут в день, то точно не целевая аудитория. Дополнительные проверки не нужны
Не забыть сохранить, кому показывали онбординг, а кому нет Сохранять не нужно
Миграция сохраненных данных Не нужна
Как должны работать цели до показа уведомления Нет никакой особой логики до показа или после
Задизайнить, разработать, локализовать и протестировать экран этого онбординга Не нужно
Нужно убедить команду сделать онбординг ещё в одном приложении это ок Не нужно

Итого:

  • Нужно разработать кастомной онбординг-логики: ноль
  • Нужно разработать дополнительных экранов, механизмов хранения: ноль
  • Вообще дополнительные дизайн и разработка: ноль

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

Ну и напоследок:
Дефолт все равно установить пришлось бы :—)

Вот скриншоты как выглядит весь процесс:

Прекрасный, технологичный дизайн фичи.

 1 комментарий    1611   10 мес   apple   интерфейс   онбординг
Подписаться на блог…

Интерфейсный синтаксис Яндекс-драйва

Коллекция необычного интерфейсного синтаксиса

В интерфейсах есть определенный интерфейсный синтаксис для кнопок, ссылок, радиокнопок и прочего.

Но есть Яндекс-драйв, который в своих обновлениях пишет не всегда по нему. Да что уж говорить, почти никогда по нему:

Правильно, конечно, не «Кашкай», а «Кашкать»

Мои фавориты — «Ох» и «Так-так-так».

Upd. Добавлены 20 янв 2020:

UPD. После твиттер-шторма (https://twitter.com/mikeozornin/status/1222615775837671427) мне несколько людей прислали картинок в коллекцию.

Александр Сарычев:

Лида Овчинникова:

Дизайнер из Казани Руслан Фатихов instagram.com/fuzlan.

Все эти и будущие картинки в коллекции в Скраппе: scrapp.me/@mike.ozornin/tags/серия: синтаксис яндекс-драйва

Я старался скриншотить все, что попадалось, но если у вас есть ещё, пришлите пожалуйста? Или вдруг прочитает кто из Яндекс-драйва, пришлите в коллекцию? mike.ozornin@gmail.com.

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

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

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

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

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

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

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

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

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

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-часовые смены операторов), но обычно такого не должно быть.

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Про покет и фичи

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/88266.html

В качестве readitlater сервиса я использую Покет, с остальными не задалось.

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

Hello, the Pocket team!

Thanks for your product, I use it every day.

I have a product feature idea, I want to share with you.
During article reading I often wish to mark (highlight) some part of article, some important or unusual parts, or maybe some parts to do in future (maybe book title, I want to read). The highlight can for the same way it works in iBooks, when I read e-books.

The next things, I could do with the highlighted articles:
— save whole article to Evernote with the text marked.
— share marked parts to a friend by email (with the link to full article).
— it would be great to to be able to see all marked articles in the pocket using some kind of filter (as favourites, for example, or as the new “best of” feature). There can be “Marked articles” in the left navigation bar, showing the list of articles with marks.


Best regards,
Mike

И вот сегодня Инстапейпер анонсировал выделение текста: http://blog.instapaper.com/post/85125160146

Ну как же так, зачем мне в инстапейпере.
Подписаться на блог…