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

• в Телеграме,
• в Мейве.

Все выпуски:

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

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

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

1. Apple CEO Tim Cook on what it takes to run the world’s largest company
2. Просветлённый парень даёт интервью журналисту из Дагестана. Это мне Ютюб подсунул, и я с удовольствием послушал на фоне. У просветлённого парня есть чему поучиться в плане ведения диалога.
3. Элон Маск у Лекса Фридмана. «Dinasaurs. Where are they now? They didn’t have spaceships». А также зачем Спейс-икс воспроизводим моржам громкие звуки в наушниках.
4. Джефф Безос у Лекса Фридмана. Понравилось про строительство инфраструктуры для будущих поколений, про двухсторонние двери, про papercut team в Амазоне и про паверпоинт против плейнтекста (похоже на то, как я борюсь с перебором подзаголовков в документах: «они создают иллюзию структуры, а я хочу, чтобы у вас само изложение было последовательным»).
5. Как делать продукт. Бесплатная лекция Вани Замесина. Очень сложный язык, но всё равно интересно.

Пришло время для традиционного вопроса.

Что делать в Дубае и Абу-Даби в конце февраля? Куда сходить, на что посмотреть, с кем встретиться, где попить кофе? Какие есть максимально попсовые развлечения типа «подняться на крышу небоскрёба» или «покататься с горки в бассейн»? А непопсовые? Может, там есть какой-нибудь крутейший музей арабского искусства?

Буду там первый раз, не имею даже примерного представления ни о чём. Так что будут полезны советы типа как добраться из аэропорта DWC, как перемещаться между Дубаем и Абу-Даби, как пользоваться транспортом, где менять деньги и всё остальное такое базовое.

Пишите в комментарии или на почту: ilyabirman@ilyabirman.ru. Спасибо.

Я редко пользуюсь навигатором — хорошо знаю город, да и редко езжу в загадочные места. А ради выигрыша пары минут на пробках лень даже тыкать в телефон. Но недавно у меня добавилась регулярная поездка, длительность которой может быть от 20 до 50 минут в зависимости от выбора маршрута в конкретное время дня. Пришлось приучиться к навигатору.

Теперь я хочу специальный навигатор, который не рисует никакие карты, а просто говорит одним предложением, как мне ехать прямо сейчас: «Езжай через плотину — Гостевую» или наоборот «Щас лучше по Университетской набережной, потом развернуться и на Северную — Тополиную — Татищева». Всё, больше ничего не нужно.

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

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

С Никитой Прокоповым обсудили, что две главные фичи нового Макоса, виджеты и видеообои, сделаны через жопу:

• в Телеграме,
• в Мейве.

Все выпуски:

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

Всю жизнь напрягает разделение на «цели» и «задачи». Хрен поймёшь, чем одно отличается от другого, и где проводить границу!

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

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

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

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

А вот ещё кусочек из подкаста. В 312-м выпуске «Ток-шоу» Джон Грубер рассказывает про работу в программе Кварк-экспресс, а потом — что нет так с текстовым вводом на Айпаде (с 1:05:20):

Он говорит: «Всё, что могло быть быстрым, было быстрым. И точным. Очень точным! Я всё ещё помню клавиатурные сочетания, например чтобы подвинуть текст на сотую дюйма. А если на тысячную, то нужно было зажать ещё и Альт. И это всё работало так быстро на тех старых компьютерах! Представь, как быстро работало бы сегодня! А у современного софта такого нет. И точности этой нет. Взять хотя бы фрустрацию от Ай-ОСа, особенно на Айпаде. Я не знаю, как должно быть, но я знаю, что Эплы это ещё не нашли. Как точно выделять текст на тач-экране? Когда я пытаюсь выделить текст на несколько строк, я постоянно промахиваюсь с началом или концом. 25 лет назад я никогда не промахился даже на один символ, и мне даже задумываться над этим не нужно было!»

У Оди вышла статья про опасность минимализма в дизайне. На мой взгляд, примеры, приведённые в ней, иллюстрируют совсем не то, а половина из них вообще опровергают исходный тезис.

Очевидно, что телефонная будка справа — кусок говна:

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

Пишут: «Даже скамейки подверглись влиянию минимализма!»

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

И здесь логотип явно улучшили:

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

Минимализм сам по себе не плох и не хорош. Плохо делать дизайн спустя рукава.

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

Разобрал 125 фрагментов, потом разберу ещё.

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

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

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

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

Метод:

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

Формы:

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

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

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

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

Интерфейс:

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

Таблицы:

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

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

Графики и диаграммы:

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

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

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

Вёрстка:

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

Эстетика:

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

Ход:

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

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

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

Инструмент:

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

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

• № 36. Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру
• № 58. Не описывайте макеты и не делайте «невозможные» макеты

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

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

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

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

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