Позднее Ctrl + ↑

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

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

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

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

Или вот:

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

Или вот:

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

В настройке ингредиентов тоже всё мелко, тесно и задисейблено. Вдумайтесь: на экране настройки ингредиентов настройка ингредиентов занимает где-то 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 заработал на Вентуре

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

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

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

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

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

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

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

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

Видео по вторникам: сравнение размеров во Вселенной

В Ютюбе миллион видосов со сравнением размеров планет, звёзд и галактик, но вот этот мне особенно понравился:

Понравился тем, что сравнивает объекты, которые обычно не сравнивают друг с другом. На 4:55 рядом с Марианской впадиной появляется ммарафон, а тут уже рядом пульсар Краба давно стоит. Или вот в 5:30 перед нами Седна и другие планета, а тут вдруг бац — Мадагаскар! Космические объекты редко сравниваются с земными, а это и даёт более полное представление, и немного удивляет. Когда вышли за размеры Солнца, казалось, что уже ничто земное тут не может оказаться рядом, но вдруг в 8:25 появляются «все люди, если их поставить на голову друг другу»!

Отложил себе в папочку «Сравнения». См. также трейлеры разных лекций, включая «Сравнения».

На интерфейсном курсе: ширина и прокрутка на десктопе

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

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

До 21 апреля идёт запись на курс, который пройдёт с 22 апреля по 21 мая.

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

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

Что послушать — 63

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

Вот что я слушал в последнее время, что мне понравилось:

  1. Сэм Альтман у Лекса Фридмана. Про искусственный интеллект и ЧатГПТ. Философия.
  2. Chernobyl — How It Happened. Лекция из курса МИТа про ядерную энергию и радиацию. Мало что понятно, если ты не в теме, но всё равно очень интересно.
  3. Как и зачем писать книгу? Женя Арутюнов рассказывает о том, как написал свою книгу «Сложный дизайнер».
  4. An Evening with Richard Dawkins — вторая часть. Я выкладывал первую часть недавно.
  5. Чуковский. Беседы о русском языке. Передача 1 и Передача 2. Много про сложносокращённые, как они вдруг оказались супервостребованными в советское время, а до этого никто не обламывался говорить «сберегательная касса» и «заработная плата» целиком.

Видео по вторникам: эксперименты с сэмплами в Эйблтоне

Непонятно, в «видео по вторникам» это постить или в «аудио по четвергам», но по четвергам вроде обычно всё-таки музкальные произведения, а не видосы про звук, так что пусть будет вторник. Человек показывает, сколько всего можно делать со звуком просто меняя параметры сэмплера:

Моё любимое начинается с 5:57, а звук в 6:12 вообще нужно срочно куда-то слизать.

Подписался на канал.

Свет в предбаннике

Вы идёте вечером по городу и думаете перекусить. Как думаете, открыто ли это заведение с игреком?

А так?

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

Бо́льшую часть времени, что идёшь по тротуару и видишь эту дверь, за ней глухая темнота — уже успеваешь придумать себе другой вариант, где поесть.

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

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

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

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

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

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

На интерфейсном курсе: жирный против курсива

Коротко рассказываю, чем отличаются выделение жирным и курсивом. Минуточка с курса:

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

До 21 апреля идёт запись на курс, который пройдёт с 22 апреля по 21 мая.

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

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

Ранее Ctrl + ↓