В продолжение темы того, что знания теряются. В 391-м выпуске «Ток-шоу» Джона Грубера Джон Сиракьюса описывает свой опыт использования нового приложения «Журнал» на Айфоне (с 1:27:44).

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

Плачем вместе.

Вторая лекция о пользовательском интерфейсе, которую я обновил — о взгляде новичка.

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

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

Вчера писал вам про принцип полезных трейлеров. В трейлере «Взгляда новичка» — пример из Телеграма и разбор проблемы окна подтверждения из редактора «ВС Код»:

Сейчас экономия 10% при записи на мой февральский курс.

Я обновил очередные лекции о пользовательском интерфейсе. Сегодня — о последовательном волшебстве.

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

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

В трейлерах у меня, в основном, обрезки для заманухи. Но также я придумал принцип, что трейлер сам по себе должен быть полезен. То есть кроме заманухи в нём должна содержаться хотя бы одна самостоятельная мысль или хотя бы один пример должен быть разобран содержательно.

В трейлере «Последовательного волшебства» — домашний экран Айфона как пример «сильного» закона в интерфейсе и Эйрдроп как пример набора заплаток:

Сейчас экономия 10% при записи на мой февральский курс.

Если вам никак не удаётся поверить, что 0,(9) = 1, то давайте я попробую убедить:

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

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

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

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

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

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

Метод:

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

Формы:

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

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

Таблицы:

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

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

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

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

Интерфейс:

• № 9. Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование
• № 16. О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки
• № 44. Упрощаем экран успешного заказа пиццы
• № 60. Рассуждения о текстовых кнопках
• № 61. Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»
• № 67. Меняем табы на переключалку и настраиваем вёрстку
• № 72. Представляем выбор внятно радиокнопками
• № 74. Так это форма или мастер?
• № 75. Точно описываем поведение интерфейса для разработчиков
• № 76. Так это кнопка или ссылка? Оказывается, это радиокнопка!
• № 77. Жму синюю кнопку на автомате, не читая
• № 83. Уважать ли интерфейсные традиции разных платформ?
• № 86. Не надо ничего активировать
• № 97. Ширина и прокрутка на десктопе

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

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

Вёрстка:

• № 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. Программисты могли бы подумать о пользе для бизнеса

Инструмент:

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

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

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

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

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

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

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

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

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

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

«Technology needs to be regulated», — говорит Тим Кук.

«I’m increasingly inclined to think that there should be some regulatory oversight», — говорит Элон Маск.

«I think if this technology goes wrong, it can go quite wrong ‹...› We want to work with the government to prevent that from happening», — говорит Сэм Альтман.

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

Государства — лучшие друзья корпораций.

Никогда не мог понять, что значит «западный ветер». Это с запада или на запад? Причём, разумеется, мне уже тыщу раз объясняли, как это понимать, но запомнить это невозможно, потому что в равной степени логичны противоположные трактовки.

См. также:

• Солонка и перечница
• Часы швейцарских железных дорог

Обсудили ещё деталей интерфейса текстового ввода, зачем люди пользуются терминалом и анимацию:

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

Все выпуски · РСС для подкастного приложения

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

Есть простая идея: насилие неприемлемо. Люди могут вступать в отношения только по обоюдному согласию. Человек не должен быть хозяином другим людям. Может, идея утопическая; может, она не сработает. Но, кажется, что заблудиться в ней негде.

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

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

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