Позднее Ctrl + ↑

Что если пропущенное обязательное поле — это не ошибка?

Такая вам мысль на ночь. Человек заполнил форму, нажал кнопку «Купить» или там «Пожаловаться». Но не заполнил какое-то обязательное поле. И мы ему говорим: «Ошибка! Заполни вот тут и вот тут».

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

То есть самая идея, что есть какое-то поле, и оно может быть обязательным — совершенно не из мира людей. А в мире людей — «Нам бы ещё ваш номер, чтобы прислать уведомление, когда будет готово».

Поучаствовал в подкасте «Фронтенд-уикенд»

Поучаствовал в подкасте «Фронтенд-уикенд». Наговорил полтора часа аж. Ютюб-версия:

В 15:35 начинается кусок про то, почему в Эгее нет Висивига и почему это очень сложно сделать. Теперь есть, куда посылать тех, кто говорит «просто возьми X». Послушайте, ну и если вы знаете, что именно я упускаю, расскажите.

А ещё в конце про проблемы современного айти. Если вы из айти, вероятно, вы часть проблемы!

Спасибо Андрею за приглашение.

Бжж-бжж

Недавно купил новую электрическую зубную щётку. Когда чистишь зубы, она жужжит, но иногда на мгновение перестаёт жужжать. Я сначала подумал, что, может, я задеваю кнопку как-то случайно чуть-чуть, и она отключается. Или мне бракованная попалась, и там контакт какой-нибудь отходит в некоторых положениях.

Но через несколько чисток я заметил, что слишком уж стабильно это повторяется. Оказалось, щётка так считает время: она раз в 30 секунд перестаёт жужжать на долю секудны, а через четыре таких цикла отключается вовсе. Это чтобы хорошо почистить все зубы: по 30 секунд чистишь нижние спереди, нижние сзади, верхние спереди, верхние сзади.

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

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

На интерфейсном курсе: комментирую вёрстку окна

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

Это фрагмент № 99 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 9 декабря 2022 года.

До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.

Почитать о курсе

Программа, отзывы, запись

Видео по вторникам: микроанимации в Фигме

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

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

На интерфейсном курсе: когда визуализация потрачена впустую

Ещё один спич про то, когда нужна, а когда не нужна визуализация. Например, визуализация иногда помогает выявить манипуляции с данными. 4 минуты:

Это фрагмент № 98 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.

До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.

Почитать о курсе

Программа, отзывы, запись

Что делать в Берлине 11—16 мая?

Пришло время для традиционного вопроса.

Что делать в Берлине 11—16 мая? Куда сходить, на что посмотреть, с кем встретиться, где попить кофе? В Берлине буду шестой, кажется, раз, так что всё очевидное знаю. Рассказывайте неочевидное!

Пишите в комментарии или на почту: ilyabirman@ilyabirman.ru. Спасибо.

Тесные интерфейсы: ингредиенты в пицце

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

Вот, например, неплохо всё нарисовано:

Но почему вместилось только три ингредиента? Этот экран существует для выбора ингредиентов, так почему он мешает мне их выбирать?

Или вот:

Это ещё хуже: вместо прокрутки тут листание мучительными стрелочками. Ну и не так красиво.

Или вот:

Тут совсем некрасиво, но мы сейчас не об эстетике. Я пишу студенту:

В настройке ингредиентов тоже всё мелко, тесно и задисейблено. Вдумайтесь: на экране настройки ингредиентов настройка ингредиентов занимает где-то 20-ю часть площади попапа, который сам занимает где-то четверть площади экрана. Почему бы не увеличить её в восемьдесят раз? Это не гипербола.

А вот снова приятный визуальный дизайн, но ингредиентам снова нет места:

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

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

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

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

00:00 Интро
00:52 Масштаб и пропорции. Откуда взялись и почему стоит соблюдать
05:29 Максимизация площади смысловой части
12:55 Десятипиксельные поля
13:41 Правило якорных объектов и важность углов
14:58 Неизменяемость стилей: толщин линий, размеров подписей, символов видов транспорта и номеров маршрутов. Лучше копировать и редактировать объекты, чем создавать новые
21:08 Неудачные примеры. Ошибки: неправильные пропорции, изменённые размеры элементов, использование неподходящих текстовых стилей, изломы линий, центровка подписей
29:25 Практика: рисуем маршрут автобуса 22а. Грубо срисовываем из внутренней документации
36:29 Настраиваем попадание в улицы и скругления на поворотах, рисуем и подписываем конечные
42:10 Подписываем районы и улицы, дорабатываем макет
46:10 Экспорт файла

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

Эмси 3.2 заработал на Вентуре

Хорошая новость — наша с Алексеем Блиновым программа Эмси заработала в Вентуре:

Если вы не знали, что такое Эмси, узнайте:

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

Эмси всегда на виду. Название песни не скроллится взад-вперёд, а стоит на месте.

В выпадающем меню — управление воспроизведением. Альт-клик по меню мгновенно перематывает трек в нужную точку.

Меню на Маке работает так: если какие-то элементы справа перестают влезать, они просто исчезают. Чтобы система не скрывала Эмси целиком чуть что, он адаптировался исходя из доступного места. Например, если название исполнителя и трека не влезает целиком, он показывал только название трека; если и оно не влезало, показывал хотя бы свою иконку.

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

А ещё мы иконку обновили.

Ранее Ctrl + ↓