В интерфейсах бывает, что дизайнеры хотят что-то сказать пользователю, и «говорят» это в подписях элементов интерфейсов в нарушение синтаксиса. В итоге пользователю вообще ни черта непонятно. 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 сентября.

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

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

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

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

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

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

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

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

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

Затем обсуждают будущее голосовых интерфейсов: где они действительно полезны, а где мешают. Илья размышляет, что голос — лишь промежуточный этап, пока не появятся способы «ввода прямо из мозга». Миша говорит, что важно оставлять действия за собой, а не передавать всё «ассистентам», даже если они умны. Они обсуждают идею, что идеальный интерфейс — это тот, где исчезает сам процесс взаимодействия, остаётся только мысль и результат. Приводится пример из фильма с Брюсом Уиллисом, где он общается с компьютером о характеристиках оружия, и это воспринимается как будущее. А также появляется важная мысль: сейчас дизайнеру стоит начинать проектировать интерфейсы уже с учётом того, что пользователь будет взаимодействовать с ними голосом или через ЛЛМ.

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

Основные идеи и выводы:
— Иногда чистка мелочей в дизайне (типографика, выравнивание) — это не «помыть стекло», а способ втянуться в задачу и начать думать.
— Красивый макет может усыплять критическое мышление: кажется, что всё отлично, даже если суть провалена.
— Плашки и визуальные блоки создают иллюзию порядка, которая мешает увидеть реальные связи и ошибки.
— Графики должны быть устойчивыми к редким или неравномерным данным; обобщения могут вводить в заблуждение.
— Голосовые интерфейсы полезны в некоторых сценариях, но в долгосрочной перспективе — это временный этап на пути к более прямым формам взаимодействия.
— Хорошие интерфейсы должны учитывать возможность ЛЛМ-команд, но оставлять контроль пользователю.
— Исследование — это не цифра в отчёте, а способ понять, что происходит. Важен не результат, а вывод и действия, которые из него следуют.

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

Обсуждаем форму, которая получилось слишком формальной (да). Сначала говорю о том, что в предметную область нужно вникать, а потом разбираю конкретные проблемы в получившемся интерфейсе. 8 минут:

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

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

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

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

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

С Сашей Каном обсуждаем эпловское жидкое стекло и всё вокруг.

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

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

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

Собеседники критикуют эстетическое и функциональное оформление новых интерфейсов — особенно на Макосе, где решение отрывать панели от краёв окон выглядит как дизайнерская некомпетентность. Обсуждаются проблемы плохой читаемости, перегруженности и нарушения устоявшихся гайдлайнов, включая чрезмерное добавление иконок в меню. При этом признаётся, что технология «Жидкое стекло» сама по себе может быть интересной — как пример выразительных возможностей, которые со временем можно отшлифовать.

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

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

Основные идеи и выводы:
— Эпл теряет фокус на своих сильных сторонах, гнавшись за ИИ и жертвуя качеством интерфейсов.
— Жидкое стекло — интересная технология, но её текущее воплощение в Макосе вызывает массу вопросов.
— Интерфейсная деградация — результат непонимания масштабов и контекста: мобайл-фёрст разрушает опыт на больших экранах.
— ИИ в Эпл пока встроен фрагментарно и неубедительно, в отличие от конкурентных платформ.
— Разработка под Макос и Ай-ОС становится всё менее привлекательной по сравнению с вебом.
— Дизайнеры, ограниченные только Фигмой, неспособны придумывать выразительные эффекты — важны навыки в Фотошопа, 3Д, анимации.

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

Как-то ходил в Москве в Дом культуры:

Под мостом, который ведёт к нему, красивая кирпичная галерея:

Так что же это за Дом культуры такой? Ответ:

Кажущая простой как пробка типографика ГЭСа-2 обладает магической притягательностью.

Перед входом расположена «Большая глина № 4».

Расписания и навигация проецируются на стены проекторами:

В местном магазине продаются шахматные наборы Ворлд Чесса:

А на одном из балконов ими же люди играют в шахматы:

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

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

Типографика:

Штука:

Другая:

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

Но самое интересное было, если выйти на парковку. Там звучали потусторонние звуки, но одновременно с ними регулярно скрипели шины приезжающих и уезжающих автомобилей:

Ещё там такие волшебные приборы стоят и тоже проецируется навигация:

Информационная наклейка лифта:

Я бы так никогда не сверстал.

Фотографии из поездки в мае 2022 года. Слетайте в Москву!