С Женей Арутюновым обсуждаем, кто какой проект бы хотел делать, ну и там между делом всякое.

Все выпуски подкаста:
Эпл · Ютюб · Я.Музыка · Мейв · РСС для подкастного приложения

Виспер и ЧатГПТ послушали выпуск за вас и делятся выводами:

В этом выпуске Илья и Женя делятся ощущениями от работы, рассуждают о личных и клиентских проектах, о кризисе интереса, мотивации и способах самореализации. Женя говорит о своем уходе от желания «делать проект мечты» — ему стало важнее не реализовывать свои амбиции через проект, а просто внимательно слышать клиента и помогать решать его задачу. Илья, напротив, по-прежнему ищет точки пересечения интересов: чтобы было и полезно, и интересно, и красиво, и гордиться можно.

Разговор уходит в сторону консультационного формата — оба подкастера обсуждают, как вести регулярные встречи с клиентами, где ценность в том, чтобы помогать думать и принимать решения. Женя описывает типичного клиента таких консультаций как небольшую, но растущую компанию, не верящую в чужие рецепты и ищущую аутентичные решения. Илья поднимает идею «понимания задачи» как отдельного продукта: не просто поговорить, а составить документ, который зафиксирует суть проблемы и шаги, что с ней делать.

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

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

Основные идеи и выводы:
— Делать проект ради самореализации и ради клиента — это две разные мотивации, и в каждой есть плюсы и минусы.
— Консультации могут быть ценны не только разовыми советами, но и регулярным участием в развитии бизнеса.
— «Понимание задачи» — важная и редкая услуга, которая часто ценнее, чем сам макет или интерфейс.
— Конфигураторы — это не про техническую сборку, а про объяснение сути продукта пользователю.
— Автоматизация дизайна упирается в систематизацию бизнес-логики, а не в кнопки в Фигме.
— Визуальная культура в транспорте и других инфраструктурных вещах может быть нормальной, если за это берутся осознанные люди.
— Часто в компаниях нет культуры улучшения — и это главная преграда, а не технологии или деньги.

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

Про схему эвакуации из трамвая мне даже понравилось.

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

ЧатГПТ от моего лица: «В этом фрагменте я объясняю, что элементы интерфейса работают по правилам — у каждого свой „синтаксис“ и ожидаемое поведение. Если, например, внутри выпадающего списка вместо значения написать подсказку вроде „требуется замер“, это будет сбивать с толку: пользователь ожидает увидеть там варианты выбора, а не комментарии. То же самое с кнопками — на них должен быть глагол действия („Оплатить“), а не призыв что-то ввести в другом месте. Когда элементы начинают вести себя не по правилам, интерфейс становится непредсказуемым и мешает пользователю».

Это фрагмент № 176 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 марта 2024 года.

Идёт запись на курс, который пройдёт 30 августа — 28 сентября. Сейчас −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.

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

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

У меня назрел вопрос к совсем начинающим дизайнерам. Что вас привлекло в дизайне? Почему вы захотели им заняться? В чём, как вам кажется, может быть ваш вклад, где может быть интересно или весело? Может, есть какие-то конкретные части работы, которые особенно манят? Расскажите, о чём вы мечтаете.

Недавно участвовал в обсуждении дизайна, где надо было отобразить список из трёхсот человек. Это экран результатов тестирования — показаны участники и как кто из них справился.

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

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

У нас выяснилось, что пользователю полезно понимать, кто не прошёл тест, чтобы можно было им написать, мол, давайте-ка проходите. Я спрашиваю: а если половина не прошли тест, он что, будет 150 человекам в личку писать? Может, мы сделаем кнопку «Напомнить», которая будет сама отправлять уведомления? А может оно и без кнопки сможет за этим следить и напоминать тем, кто забыл? Тогда полный список не особо-то и нужен. Бывает любопытно просто поглядеть, кто прошёл, кто нет.

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

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

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

Разобрал 175 фрагментов.

Сборная солянка:

• № 1. Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму
• № 2. Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа
• № 19. Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе
• № 26. ФИО как в паспорте и эффект японской квартиры
• № 89. Прямоугольнизация дизайна и свобода, которую даёт фотошоп
• № 119. О дизайне переключателя (segmented control) и положении кнопки
• № 138. Разное про кассу в магазине
• № 146. Разбор конфигуратора окон и как классифицировать сообщения об ошибках

Почти самостоятельные лекции:

• № 3. Папочка comparisons, листаю и комментирую после лекций об информационном дизайне (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)
• № 33. Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм
• № 37. Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс
• № 46. Про сложное цветовое кодирование и триаду Мейксенара
• № 55. Соответствие между логической структурой и выразительными средствами и дизайн-системы
• № 167. Опрятность прячет проблемы

Метод:

• № 30. Метод «Например»
• № 40. Сценка со звонком в пиццерию
• № 126. Решение существует

Формы:

• № 4. Двигаем простенькую форму регистрации, чтобы стало поаккуратнее
• № 5. Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки
• № 11. Первое впечатление, синтаксис и язык формы заказа с доставкой
• № 15. Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму
• № 28. Улучшаем форму обратной связи Букинг.кома
• № 35. Первое впечатление от формы
• № 50. Упорядочиваем вёрстку формы
• № 52. Расстояние между полями и сокращение подписей
• № 53. Редизайним форму настройки сложной логики
• № 63. Добавление нескольких телефонов в форме
• № 84. Разбираем мелочи в форме регистрации
• № 85. Исправляем форму формы, ну и немножко содержание
• № 103.Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню
• № 104. Подробный разбор сложной формы
• № 108. Кирпичная кладка и другие недостатки формы
• № 118. Обозначение обязательных и необязательных полей
• № 130. Как сделать сетку в форме
• № 143. Не надо ставить элементы формы под главную кнопку
• № 145. У Гугля плохой дизайн
• № 154. Форма слишком сложная
• № 156. Размеры и кнопка в форме
• № 159. Поле поиска — это не часть полей формы

См. также тег: веб-формы

Элементы интерфейса:

• № 60. Рассуждения о текстовых кнопках
• № 67. Меняем табы на переключалку и настраиваем вёрстку
• № 72. Представляем выбор внятно радиокнопками
• № 76. Так это кнопка или ссылка? Оказывается, это радиокнопка!
• № 114. Что не так с аккордеоном
• № 116. Как назвать чупа-чупс
• № 144. Три вида серенького текста в поле
• № 147. Показываю старинные радиокнопку и чекбокс
• № 151. Про хоум-индикатор
• № 169. У прямоугольника недостаточно признаков поля

Интерфейс:

• № 9. Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование
• № 16. О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки
• № 44. Упрощаем экран успешного заказа пиццы
• № 61. Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»
• № 74. Так это форма или мастер?
• № 75. Точно описываем поведение интерфейса для разработчиков
• № 77. Жму синюю кнопку на автомате, не читая
• № 83. Уважать ли интерфейсные традиции разных платформ?
• № 86. Не надо ничего активировать
• № 97. Ширина и прокрутка на десктопе
• № 101. Елена Семёновна и валидация ввода
• № 105. Как именно работает взаимодействие?
• № 107. Как делать, чтобы программа не тормозила
• № 109. Двухпанельный интерфейс
• № 115. Мир пользователя
• № 121. О связях сущностей в сложных системах
• № 122. Думать из мира пользователя (продолжение из 115)
• № 149. Двойная обратная связь
• № 150. Зелёный значит «всё хорошо»
• № 153. В играх всё иначе
• № 155. Кнопка «Сохранить» — плохой знак
• № 168. Что делать, пока ЭВМ думает медленно?

Таблицы:

• № 8. Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря
• № 10. Что не позволено базе данных, то позволено обычной таблице
• № 29. Круговая диаграмма для красоты, табличка для пользы дела
• № 39. Дизайн универсальных таблиц с непредсказуемым содержимым
• № 65. Живые спарклайны в таблице
• № 102. Как выравнивать цифры в таблицах
• № 112. Собираем табличку с диапазоном и разной точностью
• № 113. Рекомендую жирную, а не бледную шапку в таблице
• № 117. Горизонтальная прокрутка в таблицах
• № 142. Про динамические таблицы
• № 157. Иерархия в таблице
• № 171. Повышаем плотность таблиц

См. также тег: таблицы

Графики, диаграммы, инфографика:

• № 34. Визуализация помогает увидеть закономерности
• № 43. Объясняю про тафтианские 45 градусов на графике
• № 94. Если данных мало, то и график не нужен
• № 95. Рассуждения про инфографику и её задачи
• № 98. Когда визуализация потрачена впустую
• № 110. В чём проблема интерактивных графиков
• № 111. Нужны не круговые диаграммы, а таблица
• № 132. Дискуссия о задачах инфографики
• № 134. Музыкальная нотация и чтение с листа
• № 172. Толщина — носитель цвета

Редактура в дизайне:

• № 7. Механически редактируем примечание к таблице
• № 24. Отступления от синтаксиса интерфейса и линейки в таблицах
• № 49. Редактура привела к радиокнопке
• № 66. Исследование о тексте в интерфейсе Эпла (1980-е)
• № 70. Показать примечание в контексте и заодно сократить
• № 80. Редактируем интерфейс конфигуратора окон
• № 92. Поле «Комментарий для курьера»
• № 96. Жирный против курсива
• № 120. Непонятный выбор и названия кнопок
• № 127. Редактируем регистрацию на вымышленном сайте
• № 129. Формулировки ошибок в форме
• № 135. Сокращаем текст про почту

Вёрстка:

• № 17. Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально
• № 42. Улучшаем эстетику с помощью контраста и прямоугольности
• № 73. Верстаем интерфейс конструктора окон
• № 78. Неудачные выравнивательные связи
• № 99. Комментирую вёрстку окна
• № 160. Двигаем иконки в виджете
• № 161. Вписываем кусок карты в виджет
• № 162. Чистим виджет от шума
• № 164. Виджет умного дома с иконками
• № 173. Срисовываем большой круг для виджета
• № 174. Срисовываем виджет погоды

Эстетика:

• № 12. Как делать градиенты в инфографике
• № 13. Упаковка таблицы, симультанный контраст и борьба за красоту цветов
• № 27. Cкруглённое поле поиска и ужасный шрифт Мирьяд-про
• № 79. Улучшаем дизайн кнопки
• № 81. Классические признаки поля ввода и кнопки
• № 87. Вспомогательные линии — тоньше и скромнее
• № 91. Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые
• № 93. Задисейбленность кнопки
• № 140. Выбор цветов для интерфейса
• № 141. Шрифты с засечками в интерфейсе
• № 148. Настраиваем толщины линий
• № 152. Много стилей и плохие тени

Ход:

• № 6. Ставим красную блямбу рядом с таблицей
• № 20. Изображаем нестандартную конструкцию окна символом
• № 25. Чтобы пользователь нажал, можно написать «Жми!»
• № 71. Запрещаю выравнивание по центру

Бизнесовое и продуктовое:

• № 23. Как продать подписку на «Афишу»
• № 32. Закоулки интерфейса можно просто не делать
• № 38. Продаём окна, объясняя разницу профилей
• № 47. Аккуратное внедрение нового дизайна без ущерба привычкам
• № 48. Что, если на реализацию хорошего интерфейса нет времени
• № 56. Разделяем сценарии оплаты частично, ровно по счёту и впрок
• № 57. Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»
• № 59. Постоянные напоминания о цене могут мешать покупать
• № 64. Вопросы клиента к интерфейсу кассы самообслуживания
• № 82. Заранее спросить у клиента про сео и персональные данные
• № 88. Убрал шум — добавь сигнал!
• № 90. Классно упростить себе задачу
• № 100. Программисты могли бы подумать о пользе для бизнеса
• № 106. Оговорка, что интерфейс — это не всё
• № 136. Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?
• № 175. Работа дизайнера — разобраться в теме

Инструмент:

• № 18. Последовательное волшебство в интерфейсе Фотошопа
• № 41. Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов
• № 45. Режимы наложения слоёв с овощами и фруктами
• № 54. Секреты встроенной скриншотилки на Маке

Работа над дизайном и подача:

• № 36. Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру
• № 58. Не описывайте макеты и не делайте «невозможные» макеты
• № 128. Что не так с ваерфреймами
• № 139. Сначала презентуйте линейно, а потом уже рисуйте диаграммы
• № 158. Важность подачи дизайна
• № 165. Крутой интерфейс кассы и крутая его презентация
• № 170. Дизайн дизайна, или как расположить макеты на холсте

Разное интересное:

• № 14. Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10
• № 21. Что бы я поменял в дизайне Бёрдвью спустя девять лет
• № 22. Технические ограничения и дизайн для будущего
• № 31. Двусмысленная иконка и проверка венгерским языком
• № 51. Глючная обработка ввода пользователя в интерфейсе Сафари
• № 62. Что делать, если клиент хочет фигню?
• № 68. Благодарности и в чём польза теории
• № 69. Что делать дизайнеру, если разработчики напрограммили всю магию?
• № 123. Благодарности
• № 124. Мастрид ли Тафти?
• № 125. Как я отношусь к войсикам и кружочкам
• № 131. Когда нужны моноширинные цифры
• № 133. Плакаты и бумага, которая горит
• № 137. Почему я не могу дать список дизайнеров, за которыми надо следить
• № 163. Про компасную стрелку, стороны света и смелость
• № 166. Как быть с пустой лепёшкой

Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 30 августа — 28 сентября.

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

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

Рассказал о проекте, который делал больше трёх лет назад — интерфейс управления флотом самокатов Суперпедестриана:

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