Иногда можно услышать, что людям трудно представить бесконечное пространство и время. Мне же бесконечность кажется естественной и комфортной, а вот конечность как раз взрывает мозг. Если есть конец, то неизбежно есть нечто за ним, а тогда это был не конец. Бесконечность же — это когда конца никакого нет. Это легко представить: отсутствие не требует объяснения, не вызывает никакого противоречия. Если вы не можете представить бесконечность, то значит вы представляете, что где-то есть конец. Но как это возможно, как это укладывается в голове? Только для конечности возникает необходимость в объяснении.
Фрагменты интерфейсного курса
За те годы, что мой интерфейсный курс идёт в онлайне, я выложил уже почти две сотни фрагментов с наших семинаров. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.
Разобрал 200 фрагментов, потом разберу ещё.
Сборная солянка:
- № 1. Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму
- № 2. Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа
- № 19. Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе
- № 26. ФИО как в паспорте и эффект японской квартиры
- № 89. Прямоугольнизация дизайна и свобода, которую даёт фотошоп
- № 119. О дизайне переключателя (segmented control) и положении кнопки
- № 138. Разное про кассу в магазине
- № 146. Разбор конфигуратора окон и как классифицировать сообщения об ошибках
- № 184. Эпицентрический дизайн и понятность с первого раза
- № 189. Фиттс плачет от размера кнопок, а пицца могла быть крупнее
Почти самостоятельные лекции:
- № 3. Папочка comparisons, листаю и комментирую после лекций об информационном дизайне (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)
- № 33. Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм
- № 37. Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс
- № 46. Про сложное цветовое кодирование и триаду Мейксенара
- № 55. Соответствие между логической структурой и выразительными средствами и дизайн-системы
- № 167. Опрятность прячет проблемы
Метод:
- № 30. Метод «Например»
- № 40. Сценка со звонком в пиццерию
- № 126. Решение существует
- № 200. Разбираем каждый сценарий отдельно
Формы:
- № 4. Двигаем простенькую форму регистрации, чтобы стало поаккуратнее
- № 5. Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки
- № 11. Первое впечатление, синтаксис и язык формы заказа с доставкой
- № 15. Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму
- № 28. Улучшаем форму обратной связи Букинг.кома
- № 35. Первое впечатление от формы
- № 50. Упорядочиваем вёрстку формы
- № 52. Расстояние между полями и сокращение подписей
- № 53. Редизайним форму настройки сложной логики
- № 63. Добавление нескольких телефонов в форме
- № 84. Разбираем мелочи в форме регистрации
- № 85. Исправляем форму формы, ну и немножко содержание
- № 103.Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню
- № 104. Подробный разбор сложной формы
- № 108. Кирпичная кладка и другие недостатки формы
- № 118. Обозначение обязательных и необязательных полей
- № 130. Как сделать сетку в форме
- № 143. Не надо ставить элементы формы под главную кнопку
- № 145. У Гугля плохой дизайн
- № 154. Форма слишком сложная
- № 156. Размеры и кнопка в форме
- № 159. Поле поиска — это не часть полей формы
- № 182. Фотошоплю форму смотреть бесплатно
- № 199. Сложная форма и сложный текст
См. также тег: веб-формы
Элементы интерфейса:
- № 60. Рассуждения о текстовых кнопках
- № 67. Меняем табы на переключалку и настраиваем вёрстку
- № 72. Представляем выбор внятно радиокнопками
- № 76. Так это кнопка или ссылка? Оказывается, это радиокнопка!
- № 114. Что не так с аккордеоном
- № 116. Как назвать чупа-чупс
- № 144. Три вида серенького текста в поле
- № 147. Показываю старинные радиокнопку и чекбокс
- № 151. Про хоум-индикатор
- № 169. У прямоугольника недостаточно признаков поля
- № 185. Крутилка значит «программа думает»
Интерфейс:
- № 9. Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование
- № 16. О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки
- № 44. Упрощаем экран успешного заказа пиццы
- № 61. Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»
- № 74. Так это форма или мастер?
- № 75. Точно описываем поведение интерфейса для разработчиков
- № 77. Жму синюю кнопку на автомате, не читая
- № 83. Уважать ли интерфейсные традиции разных платформ?
- № 86. Не надо ничего активировать
- № 97. Ширина и прокрутка на десктопе
- № 101. Елена Семёновна и валидация ввода
- № 105. Как именно работает взаимодействие?
- № 107. Как делать, чтобы программа не тормозила
- № 109. Двухпанельный интерфейс
- № 115. Мир пользователя
- № 121. О связях сущностей в сложных системах
- № 122. Думать из мира пользователя (продолжение из 115)
- № 149. Двойная обратная связь
- № 150. Зелёный значит «всё хорошо»
- № 153. В играх всё иначе
- № 155. Кнопка «Сохранить» — плохой знак
- № 168. Что делать, пока ЭВМ думает медленно?
- № 177. Пошаговый интерфейс только кажется простым
- № 179. Мы не заставим пользователя перепроверить данные, если ему самому это не надо
- № 180. Вопрос о грани, после которой нужна пошаговость
- № 190. Перегруз в интерфейсе и отзывы на курс в конце
- № 191. На карте происходит «что-то странное»
- № 196. Хорошее решение задачи со вводом адреса
- № 198. Кажется, с некоторыми привычками нет смысла бороться
Таблицы:
- № 8. Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря
- № 10. Что не позволено базе данных, то позволено обычной таблице
- № 29. Круговая диаграмма для красоты, табличка для пользы дела
- № 39. Дизайн универсальных таблиц с непредсказуемым содержимым
- № 65. Живые спарклайны в таблице
- № 102. Как выравнивать цифры в таблицах
- № 112. Собираем табличку с диапазоном и разной точностью
- № 113. Рекомендую жирную, а не бледную шапку в таблице
- № 117. Горизонтальная прокрутка в таблицах
- № 142. Про динамические таблицы
- № 157. Иерархия в таблице
- № 171. Повышаем плотность таблиц
- № 181. Сначала подлежащее, затем сказуемое
См. также тег: таблицы
Графики, диаграммы, инфографика:
- № 34. Визуализация помогает увидеть закономерности
- № 43. Объясняю про тафтианские 45 градусов на графике
- № 94. Если данных мало, то и график не нужен
- № 95. Рассуждения про инфографику и её задачи
- № 98. Когда визуализация потрачена впустую
- № 110. В чём проблема интерактивных графиков
- № 111. Нужны не круговые диаграммы, а таблица
- № 132. Дискуссия о задачах инфографики
- № 134. Музыкальная нотация и чтение с листа
- № 172. Толщина — носитель цвета
- № 192. Не выделяй второстепенное «как второстепенное»
Редактура в дизайне:
- № 7. Механически редактируем примечание к таблице
- № 24. Отступления от синтаксиса интерфейса и линейки в таблицах
- № 49. Редактура привела к радиокнопке
- № 66. Исследование о тексте в интерфейсе Эпла (1980-е)
- № 70. Показать примечание в контексте и заодно сократить
- № 80. Редактируем интерфейс конфигуратора окон
- № 92. Поле «Комментарий для курьера»
- № 96. Жирный против курсива
- № 120. Непонятный выбор и названия кнопок
- № 127. Редактируем регистрацию на вымышленном сайте
- № 129. Формулировки ошибок в форме
- № 135. Сокращаем текст про почту
- № 176. На элементах интерфейса не надо писать что угодно
Вёрстка:
- № 17. Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально
- № 42. Улучшаем эстетику с помощью контраста и прямоугольности
- № 73. Верстаем интерфейс конструктора окон
- № 78. Неудачные выравнивательные связи
- № 99. Комментирую вёрстку окна
- № 160. Двигаем иконки в виджете
- № 161. Вписываем кусок карты в виджет
- № 162. Чистим виджет от шума
- № 164. Виджет умного дома с иконками
- № 173. Срисовываем большой круг для виджета
- № 174. Срисовываем виджет погоды
- № 187. Зачем делать виджеты на Ай-ОСе похожими на системные
- № 193. Зачем делать виджеты на Ай-ОСе непохожими на системные
- № 197. Фотошопленье виджета автомобиля
Эстетика:
- № 12. Как делать градиенты в инфографике
- № 13. Упаковка таблицы, симультанный контраст и борьба за красоту цветов
- № 27. Cкруглённое поле поиска и ужасный шрифт Мирьяд-про
- № 79. Улучшаем дизайн кнопки
- № 81. Классические признаки поля ввода и кнопки
- № 87. Вспомогательные линии — тоньше и скромнее
- № 91. Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые
- № 93. Задисейбленность кнопки
- № 140. Выбор цветов для интерфейса
- № 141. Шрифты с засечками в интерфейсе
- № 148. Настраиваем толщины линий
- № 152. Много стилей и плохие тени
- № 188. Делаем кнопку в виджете
- № 194. Историческая справка по эстетике и пара слов о чекбоксе
- № 195. Рассуждение про экономию выразительных средств на примере формы
Ход:
- № 6. Ставим красную блямбу рядом с таблицей
- № 20. Изображаем нестандартную конструкцию окна символом
- № 25. Чтобы пользователь нажал, можно написать «Жми!»
- № 71. Запрещаю выравнивание по центру
- № 183. Дедубликация элементов
Бизнесовое и продуктовое:
- № 23. Как продать подписку на «Афишу»
- № 32. Закоулки интерфейса можно просто не делать
- № 38. Продаём окна, объясняя разницу профилей
- № 47. Аккуратное внедрение нового дизайна без ущерба привычкам
- № 48. Что, если на реализацию хорошего интерфейса нет времени
- № 56. Разделяем сценарии оплаты частично, ровно по счёту и впрок
- № 57. Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»
- № 59. Постоянные напоминания о цене могут мешать покупать
- № 64. Вопросы клиента к интерфейсу кассы самообслуживания
- № 82. Заранее спросить у клиента про сео и персональные данные
- № 88. Убрал шум — добавь сигнал!
- № 90. Классно упростить себе задачу
- № 100. Программисты могли бы подумать о пользе для бизнеса
- № 106. Оговорка, что интерфейс — это не всё
- № 136. Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?
- № 175. Работа дизайнера — разобраться в теме
- № 178. Не отвлекай ценой и сроками от конфигурирования
Инструмент:
- № 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. Как быть с пустой лепёшкой
- № 186. Фотки сделать превьюшками и поставить наверх
Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 6 июня — 5 июля.
Программа, отзывы, запись
Насчёт Дэвида Дойча
Есть физик и философ Дэвид Дойч. Давно знаю о его существовании, слушал подкасты и эфиры с его участием; упоминания и обсуждения его взглядов. Было ощущение, что интересный человек. Наконец я добрался до книг. Начал со второй — «Начало бесконечности» (2011).
Обычно, когда я дочитываю какую-нибудь книгу, я выкладываю выписку в блоге. Потом удобно ссылаться на какие-то мысли. С Дойчем ситуация сложная. Сначала я послушал книгу в аудиоверсии, поэтому цитат у меня не было. Плотность смысла там высочайшая, и я, конечно, не успевал всё обдумать, распутать и понять, но останавливаться не хотелось, потому что было очень интересно, что дальше. Меня сопровождало чувство, что это одна из самых важных книг в мире. Своими впечатлениями я прожужжал уши всем, включая семью, друзей, участников кинки-пати и коллег по работе.
Сейчас я уже читаю текстовую версию и делаю заметки, так что, возможно, когда-нибудь будет и выписка, но вероятно, какие-то отдельные вещи я вам принесу и до того. А в аудиоверсии я взялся слушать предыдущую книгу, «Структура реальности» (1997).
Самое впечатляющее у Дойча — необыкновенная стройность и глубина мысли. Стройность может ощущаться как занудство: он не спешит с выводами, пока не рассмотрит все составляющие его компоненты. Само это меня очень вдохновляет: отчасти то, как он рассуждает — это ответ на мой вопрос о ясности мышления. Глубина проявляется в том, что ты начинаешь видеть взаимосвязь огромного числа явлений, которые до этого казались независимыми.
Одно из важнейших понятий у Дойча — это «хорошее объяснение». Он сравнивает разные способы того, как наука объясняет те или иные явления, и даёт критерий хорошего объяснения: его сложно изменить. На его примерах видно, что это работает, но нужно какое-то время, чтобы уяснить, почему именно трудноизменяемость делает объяснение хорошим. Но когда это понимание формируется, ты видишь эту связь качества и трудноизменяемости везде! Если дизайнер принёс дизайн, который работает, но любой элемент можно переставить куда-то ещё без потерь, такой дизайн ощущается слабым. Он не выглядит продуманным; нет ощущения, что каждый элемент на своём месте; на вопрос «почему именно так» нет ответа. Теперь я понимаю: дизайн слишком легко изменить, а значит он слишком слабо связан с задачей; он неточно на неё отвечает; она слабо проявлена в нём.
В «Начале бесконечности» переплетены эпистемология (теория познания), квантовая физика, теория эволюции и разное другое. Например, оказывается, что в основе всего верного — механизм проверки и отбрасывания неверного. Его наличие обеспечивает прогресс хоть в науке, хоть в морали, хоть в устройстве общества. (Разумеется, он приходит к выводу об объективности морали). У него есть глава «Почему цветы красивые», которая вскрывает связь между эволюцией и объективностью красоты.
Уже в «Структуре реальности» он рассказывает, почему из двухщелевого эксперимента следует сделать вывод о существовании мультивселенной. Содержательная сторона мне пока недоступна — это высшая физика; но интересно именно, как устроено само рассуждение; как он последовательно разбирает другие интерпретации, подсвечивает, почему они являются «плохими объяснениями». Не хочу вас случайно напугать; книга не про физику, она как бы про всё вообще, и непонимание нюансов физики не помешает насладиться.
Половина того, что у него написано вызывало у меня реакцию «офигеть, вот это поворот!», а вторая — «я всегда именно так это и чувствовал, но никогда бы не смог так чётко изложить!» Как вы понимаете, и то и то очень приятно.
Имена ботоспамерш
Когда в чат пробирается очередная ботоспамерша, это сразу видно, и её можно забанить, не дожидаясь первого сообщения. Почему спамеры не могут дать своим ботам нормальные имена типа Оля Смирнова или Лена Петрова? Почему это должна быть обязательно Анфиса Стебелькова или Нинель Беляшова?
Прогулка по объекту навигации без сопровождающих
При начале работы над навигацией на очередном объекте критически важно погулять там одному, без сопровождающих.
Обычно бывает как? «Приезжайте, мы вам всё покажем!» Приезжаешь, и тебя начинают везде водить, рассказывая разные истории. Проблема тут в том, что навигация нужна для людей, которых не сопровождают, но ты не можешь себя почувствовать таким человеком. Ты не понимаешь, где именно возникает вопрос, сомнение, непонимание. Перед тобой открывают нужные двери, за тебя нажимают нужный этаж в лифте, тебя провожают до туалета. И ты даже аналитически не успеваешь представить себя простым посетителем из-за разговоров с сопровождающим — мозгу просто не остаётся ресурса.
Понятно, что можно каждую минуту напоминать человеку, что тебе не надо ничего подсказывать, пока ты сам не спросишь. Можно постоянно останавливаться, чтобы подумать и сделать себе пометки. Но в воздухе быстро копится напряжение: ты же понимаешь, что тебя ждут, опять ждут, и снова ждут. Тебе постоянно приходится просить перестать что-то рассказывать, когда ты записываешь предыдущее. Сопровождающий ещё вечно идёт впереди тебя, мешая всё фотографировать. Ему нужно объяснять, почему ты вдруг решил уйти в коридор, куда тебя не вели, чтобы сделать фотографию. Или почему ты решил вернуться назад, когда тебе в голову пришла какая-то мысль. Это выматывает всех и мешает работать.
Поэтому если для вежливости и надо с кем-то походить и поговорить, то это можно, но после этого надо вернуться и сказать: «Спасибо, а теперь дайте мне часик походить одному». Ну или денёк, смотря что за место.
Банный этикет
Когда кого-то разбанили в чате, вежливо будет написать ему «С лёгким паром!»
Накидайте реакций
Раньше аудиторию пытались подталкивать к взаимодействию с контентом через смысл контента: задавали вопрос по теме, рассчитывая на комментарии; призывали ставить лайк, чтобы получить больше подробностей по теме. Потом стали буквально ссылаться на алгоритмы, мол, когда вы подписываетесь, алгоритмы нас чаще рекомендуют. Теперь уже в каком-нибудь СММном телеграм-канале бара или пляжа можно встретить пост «Накидайте реакций!».
Обойдусь без оценок.
Если интерфейс плохой, дело не в недостатке идей
Оказался участником обсуждения некоего интерфейса. Пригласивший меня человек говорил, что им нужны свежие идеи. Мол, интерфейс плохой, и мы никак не можем придумать, как улучшить — уже всех дизайнеров в компании попросили предложить свои варианты, а всё равно чё-то не то. Говорит, может, ты каких-то ещё свежих идей принесёшь.
Разумеется, как всегда оказалось, что дело не в недостатке свежих идей. Дело в том, что никто не хочет делать обычную работу проектировщика: выделять сценарии, применять теорию близости и закон Фиттса, редактировать текст. Хороший интерфейс появляется не в результате озарения, а в результате вдумчивого проектирования. Но, похоже, большинству людей это кажется скучным и занудным, и они мечтают, чтобы у них хороший интерфейс появился как-нибудь чудом.
Отзыв Захара Кириллова о консультации
Я провожу платные консультации про информационный и продуктовый дизайн, интерфейс сайтов, программ. Есть два формата:
- Часовой разговор по Зуму или что вам нравится. В этом случае моё внимание ограничено только временем нашего разговора. Вы показываете, я комментирую и делюсь советами.
- Публичное комментирование на Ютюбе. Вы присылаете ссылку или картинку с небольшим пояснением и главными вопросами. Я включаю запись экрана, смотрю и комментирую. Запись выкладываю на Ютюб на всеобщее обозрение.
Оба варианта сейчас стоят 25 000 ₽.
Захар Кириллов написал отзыв о недавней консультации со мной:
Я обратился к Илье за советом, как реализовать в интерфейсе нашего продукта несколько приоритетных фич из беклога. Перед консультацией я хотел подготовить варианты дизайна, но потом передумал и решил просто обсудить с Ильёй всю концепцию интерфейса и как встроить в него новые фичи. Считаю, что не ошибся — преждевременное проектирование было бы тратой времени.
Мне понравилось, как быстро Илья погрузился в тему — на это у нас ушли первые 20 минут. В ходе дальнейшего диалога он не давил «экспертностью», а задавал вопросы и делился своими рекомендациями, которые подкреплял убедительными, на мой взгляд, примерами из жизни. Ценно, что наш дискуссия не превратилась в «брейнсторм» и не закончилась выводом «надо всё переделать», а была весьма конкретной: я получил ответы на все заданные вопросы — как сделать главную страницу интереснее, что улучшить в профиле пользователя и где разместить новую информацию. Отдельно приятно, что большинство предложений будет легко запилить без изменения архитектуры и мы уже взяли их в работу.
Спасибо за консультацию, Илья!
Записаться на консультацию: ilyabirman@ilyabirman.ru.
На интерфейсном курсе: разбираем каждый сценарий отдельно
Небольшой кусочек, где я хвалю участника курса за то, как он разложил экраны по сценариям, рассмотрев каждый отдельно. Минутка:
Это фрагмент № 200 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 23 сентября 2024 года.
Открыта запись на курс c 6 июня по 5 июля! Сейчас −20%, потому что заранее:
Программа, отзывы, запись