Такая вам мысль на ночь. Человек заполнил форму, нажал кнопку «Купить» или там «Пожаловаться». Но не заполнил какое-то обязательное поле. И мы ему говорим: «Ошибка! Заполни вот тут и вот тут».
Но ведь это противоречит принципу человечности. В чём ошибка-то вообще? Кто сказал, что человек что-то нам должен делать определённым образом? Он и так что-то нам сказал, постарался. Если нам надо знать больше, мы ж можем просто спокойно переспросить, не ругаясь и не крася ничего красным.
То есть самая идея, что есть какое-то поле, и оно может быть обязательным — совершенно не из мира людей. А в мире людей — «Нам бы ещё ваш номер, чтобы прислать уведомление, когда будет готово».
В 15:35 начинается кусок про то, почему в Эгее нет Висивига и почему это очень сложно сделать. Теперь есть, куда посылать тех, кто говорит «просто возьми X». Послушайте, ну и если вы знаете, что именно я упускаю, расскажите.
А ещё в конце про проблемы современного айти. Если вы из айти, вероятно, вы часть проблемы!
Недавно купил новую электрическую зубную щётку. Когда чистишь зубы, она жужжит, но иногда на мгновение перестаёт жужжать. Я сначала подумал, что, может, я задеваю кнопку как-то случайно чуть-чуть, и она отключается. Или мне бракованная попалась, и там контакт какой-нибудь отходит в некоторых положениях.
Но через несколько чисток я заметил, что слишком уж стабильно это повторяется. Оказалось, щётка так считает время: она раз в 30 секунд перестаёт жужжать на долю секудны, а через четыре таких цикла отключается вовсе. Это чтобы хорошо почистить все зубы: по 30 секунд чистишь нижние спереди, нижние сзади, верхние спереди, верхние сзади.
Я считаю это решение блестящим. Такая мелочь, а мотивирует тщательно и внимательно чистить зубы, при этом не требует дополнительной индикации.
Часто говорят, что интерфейс должен быть очевидным, но это не универсально. Для повседневных вещей эффективность куда важнее, чем понятность с первого использования.
Объясняю по элементам, что не так с вёрсткой, почему она выглядит не очень. А ещё есть путаница с ролью элементов: то ли там заголовок, то ли переключалка какая-то. Заодно касаемся темы различий между вкладками и переключалками. 4 минуты:
Это фрагмент № 99 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 9 декабря 2022 года.
До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.
Небольшой видос про то, как сделать анимированное сердечко в Фигме:
Сама анимация простенькая, но во второй части идёт полезный разбор того почему она была сделана именно таким образом. В частности, о разнице между ховером и маусэнтером и о том, как избежать ховер-эффекта сразу после клика (ведь курсор в этот момент по-прежнему над иконкой). Это всё полезно учитывать и при разработке.
Что делать в Берлине 11—16 мая? Куда сходить, на что посмотреть, с кем встретиться, где попить кофе? В Берлине буду шестой, кажется, раз, так что всё очевидное знаю. Рассказывайте неочевидное!
В школе бюро есть задание — сделать интерфейс заказа пиццы. В частности, там можно выбрать ингредиенты. Почему-то у очень многих студентов одна и та же проблема: в настройке ингредиентов очень тесно безо всяких на то причин.
Вот, например, неплохо всё нарисовано:
Но почему вместилось только три ингредиента? Этот экран существует для выбора ингредиентов, так почему он мешает мне их выбирать?
Или вот:
Это ещё хуже: вместо прокрутки тут листание мучительными стрелочками. Ну и не так красиво.
Или вот:
Тут совсем некрасиво, но мы сейчас не об эстетике. Я пишу студенту:
В настройке ингредиентов тоже всё мелко, тесно и задисейблено. Вдумайтесь: на экране настройки ингредиентов настройка ингредиентов занимает где-то 20-ю часть площади попапа, который сам занимает где-то четверть площади экрана. Почему бы не увеличить её в восемьдесят раз? Это не гипербола.
А вот снова приятный визуальный дизайн, но ингредиентам снова нет места:
В дизайне интерфейса полно случаев, когда мало места и приходится искать сложное пространственное решение. Но тут-то места полно! Студенты зачем-то сами себе создают тесноту и мучаются с ней.
Когда думаешь, как распределить пространство между разными фичами, полезно задать себе вопрос: зачем этот экран есть, зачем сюда приходит человек. Ответ на этот вопрос не всегда однозначный — бывают экраны, на которых можно много чего разного делать. Но если однозначный ответ есть, то стоит отдать максимум места именно тому, про что этот ответ.
Рассказываю основные принципы и приёмы, используемые при подготовке карт с информацией о челябинском транспорте. Показываю на примерах. Перерисовываю одну карту из внутреннего документа, чтобы показать, что это быстро. Заодно какие-то штуке в Фигми комментирую базовые:
00:00
Интро
00:52
Масштаб и пропорции. Откуда взялись и почему стоит соблюдать
05:29
Максимизация площади смысловой части
12:55
Десятипиксельные поля
13:41
Правило якорных объектов и важность углов
14:58
Неизменяемость стилей: толщин линий, размеров подписей, символов видов транспорта и номеров маршрутов. Лучше копировать и редактировать объекты, чем создавать новые
21:08
Неудачные примеры. Ошибки: неправильные пропорции, изменённые размеры элементов, использование неподходящих текстовых стилей, изломы линий, центровка подписей
29:25
Практика: рисуем маршрут автобуса 22а. Грубо срисовываем из внутренней документации
36:29
Настраиваем попадание в улицы и скругления на поворотах, рисуем и подписываем конечные
42:10
Подписываем районы и улицы, дорабатываем макет
46:10
Экспорт файла
Это видео не только для сотрудников транспортных ведомств и служб, которым предстоит рисовать карты и схемы, но и для всех любопытных дизайнеров.
Хорошая новость — наша с Алексеем Блиновым программа Эмси заработала в Вентуре:
Если вы не знали, что такое Эмси, узнайте:
Другие программы мешают работать яркими выезжающими плашками. При этом когда возникает вопрос, что играет, ответа на экране нет.
Эмси всегда на виду. Название песни не скроллится взад-вперёд, а стоит на месте.
В выпадающем меню — управление воспроизведением. Альт-клик по меню мгновенно перематывает трек в нужную точку.
Меню на Маке работает так: если какие-то элементы справа перестают влезать, они просто исчезают. Чтобы система не скрывала Эмси целиком чуть что, он адаптировался исходя из доступного места. Например, если название исполнителя и трека не влезает целиком, он показывал только название трека; если и оно не влезало, показывал хотя бы свою иконку.
В Вентуре больше нельзя определить, сколько места тебе доступно в меню, поэтому эта логика сломалась — Эмси всегда показывал только иконку. В новой версии под Вентурой мы ничего не адаптируем. Если текст не влезает целиком, пункт меню исчезает полностью. На предыдущих версиях Макоса поведение не изменилось.
