В феврале выступил на симпозиуме транспортных картографов в Абу-Даби с докладом:

Видео также доступно в ВК Видео.

Недавно в связи с появлением Game Mode мы обсуждали проблемы режимов.

Есть общеинтерфейсное знание, что модальность (то есть «режимность») — зло. Суть режима в том, что он изменяет поведение привычных элементов управления. Из-за этого страдает предсказуемость и надёжность: ты вроде делаешь всё как обычно, а система работает иначе. Оказывается, там другой режим. Про это подробно написано у меня в книге.

Но помимо этой проблемы есть ещё чисто лингвистическая: режимы часто называются существительными. Например, отключение экрана у часов называется «режимом кино». А в обсуждении фототерминологии мы выяснили, что функция «Никогда не пересвечивать» может вдруг называться Highlight exposure mode. Функция «если блин я нажал кнопку фоткать, то надо фоткать!» называется Release priority. В машинах тоже дурдом: функция «соблюдать дистанцию автоматически» называется Adaptive cruise control.

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

Глагол — понятнее. Многие модальные интерфейсы выиграли бы от простого переименования режимов с использованием глаголов. Название Do not disturb — хорошее, а Silent mode — хуже. Кстати, это два разных независимых режима, что совершенно не укладывается у меня в голове.

Наша новая версия схемы метро Ташкента принята в качестве официальной.

С Димой Бирманом говорим про чудеса цифровой фотографии: Лейка против Айфона, цифровой зум, режимы работы автофокуса, бардак в терминологии, нейрообработка и  криптосертификация против фейков.

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

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

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

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

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

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

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

Метод:

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

Формы:

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

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

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

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

Интерфейс:

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

Таблицы:

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

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

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

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

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

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

Вёрстка:

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

Эстетика:

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

Ход:

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

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

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

Инструмент:

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

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

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

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

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

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

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

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

Вы будете смеяться, но я научился менять обои на Айфоне.

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

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

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

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

1. Нажать и подержать на обоях на локскрине, чтобы включился режим листания вариантов обоев.
2. Нажать Customize.
3. Нажать Lock Screen.
4. Дальше лотерея. Если слева есть иконка фотогалереи, то вам повезло. Если её нет, то всё, вы проиграли лотерею и поменять обои не сможете. Как я понял, она есть только если вы изначально делали обои со своей фотографией. А если вы выбрали какую-то из картинок предложенных Эплом, то они это уже классифицируют как не просто картинку, а что-то такое особенное, что поменять нельзя. В общем, если вы выиграли лотерею и кнопка фотогалереи есть, то на неё надо нажать.
5. Найти как-то нужную картинку в фотогалерее. Открывшийся экран показывает фотогалерею, но вся навигация и логика в ней никак не соотносятся с тем, как устроено приложение Фотос, то есть там надо просто долго блуждать и изучать всё, и в итоге что-то найти и выбрать.
6. В этот момент на фотке появится синий кружок с галочкой, как будто вы выделяете несколько фоток. Тут вы испытаете растярянность, типа «чё, я могу несколько фоток выбрать?..», но Айфон через полсекунды вдруг сообразит, что нет, применит вашу фотку и покажет, как она смотрится на экране.
7. Очень важно: нажать Done! На всём пути очень важно не сбиться, но на этом шаге это критично. Когда ты уже видишь, как обои встали, хочется сделать движение пальцем снизу вверх — ну, типа, выйти из всего. Но если так сделать, то всё сбросится, и придётся начинать с начала. Важно именно нажать Done.

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

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

1. Три парадигмы проектирования. Лекция Жени Арутюнова.
2. Математик Денис Фуфаев в «Основе». Мне понравилось про задачу определения формы барабана на слух.
3. Как начать выступать диджею? Почему другие выступают, а ты сидишь дома? Лидваль объясняет, как устроена жизнь.
4. Мэтт Уолш у Джо Рогана. Рассказывает про свой новый фильм «Am I Racist?», посвящённый американскому воук-безумию.
5. Difference between made of, made from, made with, made out of. Во всех её примерах в начале мне очевидно, какой вариант правильный безо всякой теории, а в вот в конце я в паре случаев хотел сказать иначе. Это английский с Люси, на который я уже как-то ссылался.

Если на экране всё зелёное, пользователь может даже не заметить, что у него долг. Навигацию по истории можно сильно упростить. 2 минутки:

Также есть на ВК-видео.

Это фрагмент № 150 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 3 ноября 2023 года.

Идёт запись на курс, который пройдёт с 12 октября по 10 ноября.

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

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

Когда-то я писал о левостороннем движении в Лондоне — сколько сюрпризов оно таит.

Интересно, что в Токио эффект был совершенно другой. Я только на третий день поездки вспомнил о самом факте левостороннего движения в Японии и удивился, что вообще не обращаю на него внимания. В остальные дни оно вообще никак не вмешивалось в мою жизнь и привычки.

Интересно, почему так и в чём отличие? В Токио нет нерегулируемых перекрёстков на дорогах с двусторонним движением или что? Загадка!

Участник курса презентаций Роман Туров презентует коллегам-дизайнерам инструмент для подбора цветов на основе правильного расчёта контраста.

Это третий семинар: Илья и Миша изображают тех самых коллег, которые пришли на зум послушать Романа, перебивают и говорят чепуху. А потом разбираем, как с таким поступать. Аж 29 минут, но можно смотреть на 1,5x легко:

Это фрагмент № 8 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 1 апреля марта 2024 года.

До 6 октября идёт запись на курс, который пройдёт 7⁠—27 октября.

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

Программа и запись