Я в интернете

РСС    Джейсон-фид

Есть автоматические трансляции в Тумблер и Же-же. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

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

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

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

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

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

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

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

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

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

  1. Беседа с Сергеем Шановичем. Когда-то я был фанатом дизайна телеэфирной графики, и помню фамилию фамилию Шановича ещё с тех пор. Интересный мужик.
  2. Сергей Гуриев — о современной науке, мифах экономики и этике. Ведущий невыносим, еле успевал перематывает его вопросы длиной по пять минут. А Сергея слушать всегда интересно. Здесь особенно клёво, что он рассказывает о том, как сама наука устроена, а не о прикладных выводах, которыми он часто делится в других местах.
  3. Why I left YouTube: explaining everything. Люси, канал которой об английском я как-то уже советовал, рассказывает о непростой судьбе ютюбера во времена, когда за ошибки приходится так сильно извиняться, что ни на что другое уже не остаётся жизненных сил.

Неделя 13—20 сентября: договор без ссылок, выставки, фотки, размножение афиш • Задача об автозапуске

Обзор моего блога и соцсетей за неделю 13—20 сентября 2020 года и разбор задачи о настройке автозапускаемых программ в Макосе:

00:00 Интро
00:21 Блог: пустая Филадельфия
00:35 Договорённости — без ссылок
04:59 Видеоотзывы участников курса
05:45 Выставки в Лондоне
10:45 Совет
12:12 Твиттер: селфик из шахматного клуба, полоски на часах и мой домашний экран айфона с Ай-ОСом 14
14:22 Инстаграм: бургер, селфик, ноготь, ягоды, вывеска, дача, озеро, табличка
15:32 Телеграм: размножение афиш
17:45 Разбор дизайн-задачи прошедшей недели
25:29 Пока-пока!

Выставки в Лондоне: Фрида Кало и Национальная галерея

Вернёмся в Лондон летом 2018 года. Я уже рассказывал вообще и о транспортном музее. Как-то та поездка оказалась ударной по части музеев.

Например, побывал в музее Виктории и Альберта на выставке, посвящённой Фриде Кало. В непростую судьбу самой Фриды я особо не вникал, просто разглядывал экспонаты и то, как устроена выставка.

Среди экспонатов было много разных бутыльков и упаковок. Красивые:

1
2
3
4
5

Самый кайф — это как эти бутыльки и упаковки подписаны. Они схематично перерисованы на стекле и подписаны рядом:

6

Та же фигня с одеждой. Ещё и какие-то мексиканские регионы красиво отмечены:

7

Вёрстка:

8

Также, например, побывал в Национальной галерее. Навигационная стела на входе:

9

Навигационная штука внутри. Прикольно, что показано и на карте, и «списками» самих картин:

10

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

11
12
13
14
15
16
17

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

Ещё Лондон — в разделе «Мир».

Ещё выставки и музеи, например:

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

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

Например:

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

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

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

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

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

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

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

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

На курсе: как работает автоматическая вёрстка рекомендаций в будущей Эгее 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 сентября).

Ранее Ctrl + ↓
Эти ссылки принесут мне миллионы: When you need to buy a new car, you need car loan calculator - handy tool for car finance.   Joycasino