Позднее Ctrl + ↑

На интерфейсном курсе: как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10

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

В общем, фрагмент № 14 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 31 июля 2020 года. Покажите дизайнерам и разработчикам.

00:00 Задача и примеры
01:35 Дизайн «раскладок» для разных случаев
04:29 Описание раскладок в коде
05:50 Автоматический выбор и оценка раскладок
07:47 Режим отладки

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

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

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

Неделя 6—13 сентября: бело-лунный, навигация и брендинг, оферта, Фосфалюгель • Задача об аэропорте

Обзор моего блога и соцсетей за неделю 6—13 сентября 2020 года и разбор задачи о навигационном знаке в челябинском аэропорту «Баландино»:

00:00 Интро
00:33 Блог. Бело-лунный цвет, китайский мост
02:42 Кусочек про цвета с интерфейсного онлайн-курса
03:51 Чикагский аэропорт О’Хара: почему навигация не должна быть унылой
07:42 Оферта о совместной работе, что послушать
10:16 Апдейт лекций в школах бюро
12:17 Инстаграм. УАЗик и закрытие Торнквиста
13:13 Твиттер. Жирное выделение Медузы, селфач, греческая церковь и 11 сентября
14:13 Телеграм. Призыв помощников со схемой, красивый Фосфалюгель
15:20 Интерфейсный нюанс про переключалку, ещё красивая клавиатура и Грифарт
17:03 Разбор дизайн-задачи прошедшей недели
30:04 Дизайн-задачка на неделю. Ответы шлите в комментарии, разберём в следующие выходные.

Заметка опубликована в блоге только 21 сентября 2020 в 22:15:00, но ей искусственно поставлена дата исходной публикации видео (для сохранения хронологии самих видосов)

Новые лекции о звуке и легендах для школ бюро

Продолжаю держать вас в курсе новых лекций в школах и на курсах бюро.

Недавно добавилась лекция «Звук в интерфейсе». О чём речь:

Если вы застали времена «Ай‑си‑кью», то наверняка помните противный звук «о‑оу», из‑за которого во многих офисах было невозможно работать. Избыточный звук в интерфейсе не только раздражает самого пользователя, но и может мешать окружающим. При этом если использовать звук правильно, он помогает привлекать внимание пользователя и давать обратную связь. В лекции Илья Бирман на примере бытовой техники, метро и даже арбуза объясняет, как убирать из интерфейса ненужные звуки, а нужные — делать более информативными.

Фрагмент лекции:

Ещё недавно добавилась новая большая лекция «Легенды, кодирование и нумерация» — это о представлении информации, а не интерфейсе. О чём речь:

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

Фрагмент лекции, где я разбираю схемы тель-авивского рынка «Сарона» и выставки Московского марафона:

Это фрагменты двух лекции из 35 по дисциплине «Интерфейс и информация» в Школах бюро. Программа школы и как поступить

Также эти лекции доступны слушателям моего онлайн-курса «Пользовательский интерфейс и представление информации», на который до 22 сентября открыта запись (начнётся 28 сентября).

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

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

Сегодня дизайнерский выпуск.

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

  1. Костя Горский и Алина Ермакова: как руководить дизайнерами и исследователями?
  2. Владимир Зимин: Дизайн для реального мира. Владимир руководит дизайном в Почте России.
  3. Екатерина Соломеина о том, то волнует продуктовых дизайнеров в Лондоне. Не очень понятно, почему у видоса полтора просмотра.

Оферта о совместной работе

Я выступил в роли арт-директора в нескольких особенных проектах. Это две схемы трамваев Челябинска, включая официальную, две схемы метро Екатеринбурга, а также схемы метро Минска и Санкт-Петербурга — обо всех них есть рассказы на моём сайте.

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

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

Насколько я понимаю, единственное место, где оферта пока была опубликована — рассказ Паши Омелёхина о первой версии схемы метро Екатеринбурга, причём там она называлась «сделкой». Вот её полный текст:

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

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

Пусть теперь будет и тут для удобства.

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

Чикагский аэропорт «О’Хара»

От одной фотографии — беспросветная американская тоска:

Немного кайфа — в светящемся пожарном указателе «лестница»

Табличка, которую даже не хочется стащить:

Как нужно делать навигацию, чтобы пожарные знаки смотрелись живее и интереснее её?

Некоторые относятся к навигации как к чисто служебной вещи — показывает же, где какой гейт, что ещё надо?

Но элементы навигации — главный носитель графического стиля места. Логотип, визитки, календарики и фирменные ручки не имеют никакого значения, потому что 99,9% визуального внимания людей занимает именно навигация.

Тут ощущение, что мы просто на складе каком-то.

Ну прикольная иконка укрытия от суровой погоды:

Зато довольно аккуратно сделаны экраны со списком рейсов. Синий экран смерти, конечно, не очень, но хотя бы без лишних рамок, чересполосицы и капса:

Странная иконка компьютера, который бьёт током:

Уныние:

Тлен:

Но обратите внимание на иконку лимузина!

Безысходность:

В 2018 году антисептик, установленный над кнопкой лифта, меня удивил, и я даже сфоткал:

Бесконечная дорога на выход без единого окна:

Переход между терминалами и к станции метро:

А вот и станция метро:

Станция называется «О’Хара» по названию аэропорта, но тут написано в начале CTA — это типа Chicago Transit Authority. Они пихают свою аббревиатуру везде. Представляете, в Москве был бы не просто автобус M10, а «Дептранс M10»? А тут нормально.

Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Чикаго! (Когда дадут.)

Более симпатичные аэропорты:

Ещё Чикаго:

Аудио по четвергам: Phone the Lab

Ох чё вспомнил:

0:49 Совсем непситрансовая перкуссия
2:09 Главное. Это можно повторять бесконечно
2:57 Почти незаметный сбой паттерна
4:56 Глюки-глюки
5:20 Ну и снова о главном

Прям густой такой транс из тех времён, когда такой транс уже подходил к концу, но некоторые ему не давали. То есть по идее это саунд конца 90-х, но выпущено это было в 2007-м.

Саундклауд

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

На интерфейсном курсе: упаковка таблицы, симультанный контраст и борьба за красоту цветов

Фрагмент № 13 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 31 июля 2020 года. Покажите дизайнерам.

00:00 Боковик — по левому краю
00:36 Что не так с дизайном такой таблицы для этих данных. Убираем мусор — таблица разваливается. Плохой признак!
02:59 Упаковываем элементы вокруг таблицы внутрь самой таблицы
04:12 Подписываем элементы ячейки на примере одной из ячеек, а не отдельно
07:04 Как правильно забледнять чёрный на цветном фоне. Хуже всего делать серый, чуть лучше — прозрачный, ещё лучше — подкрашенный прозрачный.

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

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

Ранее Ctrl + ↓