Избранное

Позднее Ctrl + ↑

Контролёр и контроллер

В русском языке есть слова контролёр и контро́ллер. Первое произошло от русского глагола «контролировать», который означает «следить», а второе — от английского глагола to control, который означает «управлять».

Поэтому, кстати, когда чиновник берёт что-то под личный контроль, это значит, что он просто планирует компостировать подчинённым мозги вопросами «ну что там?». А когда чиновник takes personal control of something, это значит, что он теперь командует.

На интерфейсном курсе: срисовываем экран интерфейса у Эпла, чтобы выглядело нормально

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

Беру экран, сделанный участницей курса, и перерисовываю с нуля, поглядывая на похожий экран Эпла. Чтобы выглядело нормально, важно сначала посмотреть, как сделали другие.

Заодно коротко говорим про то, как подумать о дальтониках.

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

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

Муз-ТВ: «Элементы» и инопланетяне

Продолжаю разгребать эфирную графику «Муз-ТВ». Напомню, я выкладывал их заставки несколько лет назад, а потом что-то забросил это дело, а ведь у меня их целая куча. Сегодня посмотрим ещё несколько, про инопланетян.

Заставка ночной программы «Элементы». Там играло техно и всё такое. Кайф:

Этот же инопланетянин использовался в таких айдишных заставках:

А вот его подруга:

Тогда инопланетяне были бинарными.

Предыдущие — по тегу «Муз-ТВ». Самое золото:

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

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

00:00 Подача результата дизайна. Теория близости
05:55 Лейблы отвалились от полей. Как быть с исключениями в дизайне?
10:44 Избавляемся от левой колонки сетки вообще
13:05 Жирные заголовки — сразу кайф
13:32 Про важность горячих клавиш
15:48 Ссылки незаметны внизу, надо поставить их функции на место

Сегодня — последний день записи на курс, который пройдёт с 28 сентября по 25 октября.

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

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

Договорённости — без ссылок

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

Например:

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

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

Вот, допустим, поставили мы ссылку на Дропбокс, и что? Дизайнеры вообще посмотрели, что там? Вникли? Поняли что-то? А как то, что они поняли, отразится на проекте? Потом ещё случайно окажется, что в папку залили не ту версию документа, и весь проект мы смотрели не на то. Из-за ссылки возникает иллюзия договорённости. Клиент думает: «мы им дали все подробные материалы, теперь они всё сделают как надо». Дизайнер думает: «там ещё какие-то ссылки были, надо бы их посмотреть на досуге, вдруг там что-то полезное». В результате клиент считает дизайнера идиотом, который не вник в задачу и не соблюдает договорённости.

Ну или записали ссылки на конкурентов. Дизайнер их посмотрел и составил какое-то своё впечатление; что-то захотел использовать, что-то нет. А клиент потом на любую вещь говорит: «Так а вы что, не посмотрели, как сделано у „Рогов и копыт“?» «Так а в чём проблема как у „Лютика“ нарисовать?» «Да зачем вы изобретаете велосипед, эту задачу отлично уже решили в „АКМЕ“, вы что, не смотрели ссылки, которые я вам давал?». Клиенту что-то понравилось у каждого из конкурентов, и он решил, что мы возьмём каждую из этих вещей (которые нигде не перечислены и ни разу даже не обсуждались) ровно в том виде, как ему понравилось.

Или вот поставили ссылку на страницу сайта «Доси», и написали, что ввод даты должен вести себя так же. Клиент замечает ссылку где-то в переписке о разработке, идёт по ней, ходит по сайту и запоминает: «ок, у нас будет как у „Доси“». Разработчик смотрит сайт и радуется: «о, там стандартный выпадающий календарик из знакомого фреймворка, тоже поставим его». Время проекта подходит к концу, а клиент вдруг спрашивает: «А когда уже заработает трекинг доставки заказов? И я думал мы хотели сделать красивое видеообъяснение работы сервиса» Дизайнеры недоумевают: откуда эти требования вообще взялись? А потом выясняется, что это есть у «Доси», а клиент считает, что мы договорились делать как у них.

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

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

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

Дизайнер и разработчик:

Д: Ещё ввод даты надо сделать как у «Доси».
Р: А в чём там особенность? Чем отличается от нашего обычного календаря из фреймворка, который мы использовали на прошлом проекте? Давай опишем в спеке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бело-лунный

Есть такая шиза, что белый свет светофора (встречающийся на трамвайных светофорах и на железнодорожных переездах) называется «бело-лунным».

На маневровых светофорах самой железной дороги белый хотя называют «лунно-белым», в чём есть хоть грамм смысла (ну типа белый как у луны, вдруг я без примера не смогу представить, как это — белый). А «бело-лунный» — это вообще что? Как будто он не совсем белый, а смесь белого и лунного! Какого же цвета луна, интересно?

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

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

Ранее Ctrl + ↓