Избранное

Позднее Ctrl + ↑

Обращение в Минздрав России по поводу знака о запрете курения

Это обращение касается приказа Министерства здравоохранения Российской Федерации от 20.02.2021 № 129н «Об утверждении требований к знаку о запрете курения табака, потребления никотинсодержащей продукции или использования кальянов и к порядку его размещения» и связанной с ним практикой оформления пассажирского транспорта.

Приказ строго регламентирует положение, размер и даже графический дизайн знака о запрете курения — детально описано, как именно должна выглядеть сигарета, элементы дыма:

Приложен образец:

Написано «рекомендуемый образец», но с учётом текста выше это выглядит как единственный возможный вариант. Как правило знак размещают ровно таким:

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

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

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

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

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

Пример того, что хотелось бы считать разрешённым вариантом:

Проблемный скеоморфизм

Рассмотрим такой фрагмент студенческой работы:

Пицца лежит на листке в клетку, точнее, не лежит, а, судя по тени, парит над ним. Со школы мы хорошо знаем, что клетка имеет размеры 5×5 мм, поэтому пицца у нас получается диаметром с ширину со средний Айфон. Это никто не считает специально, но просто эта клетка на фоне делает пиццу маленькой. Там, конечно, и выбрана «Маленькая» внизу, но всё-таки даже очень маленькую пиццу я представляю как в два-три раза большую, чем эта.

К самой переключалке размеров вопросов ещё больше. Переключалка нарисована на бумаге тем же способом, что клетка, но при этом выбранный вариант «Маленькая» отбрасывает тень, то есть находится выше бумаги. Но тень он отбрасывает только внутрь шахты переключалки, а за её пределы не отбрасывает. Получается, что на самом деле эта шахта утоплена, а лифт «Маленькая» находится на том же уровне, что бумага? Нет, такого тоже быть не может, ведь внутри самой шахты никакой тени нет. Ладно, может это всё плоское, от лифта никакая тень не падает, просто вот такой эффект нарисован на бумаге? Но этого тоже не может быть, ведь это интерактивный, двигающийся элемент. Напечатанное на бумаге так не может.

Отдельный вопрос — нафига этой «плоской» штуке на бумаге понадобилась тень, когда рядом есть рыжая кнопка «Добавить в корзину», под которую явно уплывают ингредиенты, но она легко обходится без тени.

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

Кстати, это ещё и очередной пример тесного интерфейса.

Выключение аудио при смене приложения на Айфоне

На днях я писал про воровство фокуса.

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

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

С недавних пор такая же лажа началась в Ютюбе. Ты открываешь приложение, и через пару секунд то, что ты слушал, останавливается, потому что Ютюб начал автовоспроизведение какого-то видео в ленте. Ты ещё даже не ткнул в это видео! Оно вообще без звука там играет! Чего оно влезло в то, что я слушаю? Подозреваю, что это просто криворукое программирование. Есть какой-то код, написанный сто лет назад, который при запуске видео отключает аудио в других приложения. И есть новая фича: автовоспроизведение беззвучного видео из ленты. Просто не подумали, что из-за новой фичи старый код начнёт срабатывать в ненужном месте.

Чего я жду от виар-шлема Эпла

Через неделю с небольшим — очередная конференция разработчиков Эпла, и ожидается, что на этот раз они представят новое устройство — некий свой виар-шлем или очки.

За прошедшие годы Эпл показывал много технологий, связанный с виртуальной и дополненной реальностью — всякие люди ходили с Айпадами вокруг пустого стола, но на экране Айпадов над столами рисовалось какое-то действо. Это всё выглядело глупо, но на самом деле это просто был их способ обкатывать технологии и вовлекать в это разработчиков, чтобы они были лучше подготовлены к настоящему устройству, а не пародии в виде Айпада.

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

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

Самое первое, чего я жду от виар-шлема — это просто бесконечно-дюймового экрана. 6К-монитор у Эпла стоит столько денег, что страшно. Но представьте, что Эплам в шлеме удалось решить проблему низкого качества картинки, а глаза не охреневают от нескольких часов в нём. Тогда просто возможность делать всё то же самое, что вы и так делали с компьютером, но с бесконечной рабочей областью вокруг вас — это уже невероятный прорыв. Можно открыть Фигму на всю стену, а остальные окна расположить по бокам вокруг. А если ещё и зазумиться можно будет просто движением головы вперёд, так вообще сказка будет.

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

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

На интерфейсном курсе: Елена Семёновна и валидация ввода

Рассказываю про Елену Семёновну из моего универа, которая тестировала все программы на нормальную поддержку некорректного ввода. 1 минута:

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

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

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

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

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

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

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

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

Бжж-бжж

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

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

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

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

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

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

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

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

Или вот:

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

Или вот:

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

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

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

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

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

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

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

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

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

Ввод пароля «поверх» кнопки

Эпл придумал такое поведение интерфейсов, которое раньше казалось бы странным.

Когда возможна биометрическая аутентификация, они не показывают поле ввода пароля. Но если что-то не срабатывает, пароль можно ввести. Так вот, пароль можно начать вводить даже не нажимая кнопку Use Password... — любой ввод переведёт окно в следующее состояние.

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

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

Ранее Ctrl + ↓