Дизайн без обучения: интерфейс, которому не нужна инструкция Илья Бирман, дизайнер и арт-директор Бюро Горбунова, в подкасте make sense сформулировал простую мысль: если интерфейсу нужно обучение — проблема в интерфейсе, а не в пользователе. Дизайн напрямую влияет на активацию: каждый экран с объяснениями отделяет пользователя от первой ценности. Коротко о принципе: 👉 Инструкции не читают. Онбординг-слайды, туры и подсказки поверх экрана пролистывают, не глядя. В итоге знание, ради которого пользователя заставили пройти обучение, к следующему запуску пропадает. 👉 Интерфейс объясняет себя сам. Если кнопка выглядит как кнопка, ссылка — как ссылка, а на поле ввода понятно, что в него вписать, — это будет работать. Если элементу нужна подпись «нажмите сюда» — элемент сделан плохо. 👉 Учит само действие. Человек разбирается в продукте, когда им пользуется, а не когда читает о нем. Duolingo не объясняет, как устроено приложение: новый пользователь выбирает язык и сразу проходит первый урок — еще до регистрации. Механику он понимает в процессе, а аккаунт создает, когда уже получил ценность. 👉 Обучение лечит симптом. Тултип объясняет непонятное поле, но поле остается непонятным. Перепроектировать дольше, зато чинится причина. Как применять: 👌 Перед тем как добавить подсказку или онбординг, спросите себя: нельзя ли убрать саму необходимость объяснять? Каждый лишний экран до первой ценности увеличивает time-to-value и отток в первой сессии. 👌 Проверяйте сценарии на людях, которые видят продукт впервые. Каждый вопрос «а что тут делать?» показывает, что нужен редизайн, а не текст. В воронке это тоже видно: шаг, на котором пользователи застревают, обычно содержит что-то непонятное для пользователя. 👌 Пустые состояния используйте как обучение: в пустом экране сразу показывайте первый шаг. Например, Notion встречает нового пользователя не пустой страницей, а документом Getting Started с чекбоксами — он учит работать с блоками, пока по ним кликаешь. Это напрямую влияет на активацию в первую сессию. 👌 Пишите кнопки глаголами и называйте результат — например, «Отправить счет» вместо «ОК». Понятное действие совершают чаще, а в поддержку приходит меньше вопросов «а что будет, если нажать?». Лучший онбординг тот, которого пользователь не заметил. 🎧 Больше идей для дизайна продукта — в 400-м выпуске подкаста make sense с Ильёй Бирманом. Там он рассказывает, почему интерфейс — это сценарий, а не набор кнопок, где удобство пользователя конфликтует с бизнес-метриками и почему A/B-тесты часто не работают. Про принцип «без обучения» — с 42:52.

Визуальная простота Как-то раз оператор при изменении цены для клиента вместо цены в 25 рублей ввела цену 2 500 руб. Скорее всего кнопка с запятой заела или соскользнул палец. Новую цену потом согласовали коммерческий директор, финансовый директор и генеральный директор. Изменение цены заметил только кладовщик, который прикинул, что на этот объем товара стоимость уж слишком велика. Я тогда как раз отвечал за работу контролей, в том числе за контроль утверждения цены. Как можно было не заметить новую цену, которая должна была бы значительно выделяться из ряда чисел формата ##,## — мне было непонятно. Пока я не посмотрел на портал, в котором вводились эти цены: нет разделения разрядов, нет маски ввода, маленький шрифт, строчки идут вплотную друг к другу и так далее. Мы с ИТ переработали портал: сделали маску ввода, увеличили шрифт и расстояние между строчками и т.д. Сделали предупреждение об изменении цены более чем на 50 %. Если сотрудник меняет цену с 25 рублей на 40 — то система спросит, действительно ли вы хотите так изменить цену. После этих изменений ко мне подошла начальница управления по работе с клиентами и сказала спасибо. С новым порталом работать стало значительнее удобнее и проще. То есть, доработка портала помогла людям меньше уставать, а значит и меньше совершать ошибок. Кроме этого, у людей остается больше энергии на свою жизнь и другие дела. #ЧФ #когнитивная_нагрузка

Поиграл в Nivalis Эта игра во многом схожа с предыдущей игрой студии, которая Cloudpunk. Что понятно, логично развивать следующий проект, взяв удачные решения за фундамент из предыдущей игры, особенно, если вы инди студия. Плюс, в отличие от Cloudpunk, здесь нельзя переключаться на третье лицо, играем только от первого. Ощущения от игры по большей части приятные, просто тут нужно понимать, являетесь ли вы ЦА. Сама игрушка это симулятор владельца сети быстрого питания в мире воксельного киберпанка (ну, почти так, здесь много детализации). Продаём еду, находим новые рецепты, нанимаем работников, обставляем мебелью кафешки. Опыт скорее медитативный, это просто игра на специфическую ЦА, которая не про экшен, но судя по Стиму, эта ЦА довольно обширная. Тут есть рыбалка, можно выполнять разные квесты от NPC, некоторые из которых достаточно забавные, искать новые рецепты и так далее. Из того, что выделяет этот проект, я бы отметил визуал: здесь не такой большой мир, но локации очень запоминающиеся, уровни собраны с любовью к деталям, очень хорошо показана атмосфера города будущего. Стилистически именно по визуалу это не классический киберпанк по канону, а такой вот "киберпанк во Флориде", где всё выглядит гораздо ярче и богаче, чем в канонах научной фантастики. Ну, собственно и 2077 был такой же, чтобы сработать на большую аудиторию, тут понимаемо. Играется приятно, хорошая музыка и удобный контроллер, есть интересные диалоги местами, несмотря на визуал в игре интересные темы поднимаются. Из того, что не очень понравилось, отмечу не очень удобный UI, тут много всяких ингредиентов, и это всё сделано просто большой колбасой с поиском, который подлагивает. Можно и нужно было сделать намного удобнее. В игре есть сквозной сюжет, что однозначно плюс, на мой взгляд. То есть, можно как в песочницу играть, можно реально пройти. И он даже местами интересный становится со временем, хотя завязка вполне обычная. А так, если нравится яркий киберпанк и спокойная атмосфера в играх, плюс механики симулятора кулинарного бизнеса, Nivalis хороший вариант. #Nivalis #поиграл #мнение

Стабильное меню на новом сайте У меня на сайте текущий пункт меню выделяется жирным. Обычно при таком дизайне возникают прыжки: жирное слово ведь чуть шире обычного, так что при переходах между разделами более правые пункты немного сдвигаются влево-вправо. Бывают редкие «униширинные» шрифты, где разные начертания имеют одинаковую ширину, но не ограничивать же выбор ими. Когда я открыл новый сайт на прошлой неделе, меню у меня прыгало, потому что я не успел докрутить, а открываться уже было пора. Но надо было решить эту проблему. Идея решения простая: каждый пункт меню должен всегда занимать столько места, сколько занимал бы, будь он жирным, даже когда на самом деле он не жирный. Но как это сделать? Можно написать скрипт, который бы как-то незаметно временно рисовал пункты жирными, измерял бы их, а потом жёстко расставлял бы пункты по стабильным позициям. При этом пришлось бы ещё отслеживать адаптивное изменение размеров шрифта при разных ширинах окна и перемерять. Напрограммировать такое с Кодексом — дело минутное, но это тяжеловесно и неэлегантно. Хочется без скрипта. Можно положить внутрь каждого пункта невидимую жирную копию текста, распорку. Это лишний элемент в разметке, тоже не идеально, но смириться можно. Я не нашёл решения совсем без изменения разметки, но зато нашёл, как обойтись атрибутом, без лишних элементов: слово, жирность которого нужно мерить, ставится в атрибут, а потом в ЦССе делается псевдоэлемент, контент которого берётся из этого атрибута. Так уже неплохо. Есть и ещё одна есть сложность: у меня же при наведении под пунктом изменяется цвет подчёркивания, и мне надо, чтобы это подчёркивание было ровно по длине пункта. Если же элемент с текстом растянется до ширины его жирной версии, подчёркивание станет торчать правее видимого конца самого текста, что коряво. Соответственно надо как-то так сверстать, чтобы подчёркнутая часть осталась по ширине видимого текста, а вокруг неё уже была обёртка по ширине жирного текста, которая бы влияла только на лейаут меню. При этом ради Фиттса область нажатия пункта меню у меня дотянута до середины отступа с соседним пунктом. То есть сама ссылка на самом деле больше и чем её обычный текст, и чем её жирный текст. И да, все эти отступы ещё и адаптивятся по-всякому. С адаптивом есть ещё и такой момент. Когда меню не влезает целиком, важно, чтобы ты хотя бы видел, что какие-то пункты ещё есть за пределами экрана. На сайте Бюро для этого давно работает фокус: если меню не влезает полностью, то расстояния между пунктами подкручиваются так, чтобы последний пункт гарантированно обрезался краем экрана, и тем намекал на продолжение. Это я тоже к запуску сделать не успел, но хотел: https://ilyabirman.ru/meanwhile/all/bureau-school-lecture-layout/ В общем, теперь всё распутал: атрибут, используемый ЦССом для измерения жирного текста, стоит у обёртки, а сам текст пункта меню стоит у элемента внутри. Любой пункт можно делать и жирным, и обычным, и подчёркивание при наведении всегда остаётся ровно под буквами. Кликать можно в отступ между пунктами, и ничего никуда не прыгает при переключении. Жирность как бы переезжает с пункта на пункт при переключении, но каждый из них остаётся на своём месте. И расстояние между пунктами растягивается так, чтобы всегда было видно, что есть ещё пункты за краем. Красота!

Как Артём Горбунов показал мне справочник Атабекова 1. Когда-то в начале моей работы в бюро, Артём Горбунов рассказал мне о справочнике Атабекова. Артём часто ссылался на него в контексте разных задач на представление информации: как расположить выноски на иллюстрации, как выбрать толщину линий или тип штриховки на диаграмме. Сначала у меня его даже не было, потом появился какой-то скан, и только спустя несколько лет я нашёл его в каком-то букинистическом магазине на окраине Москвы. И сразу сильно впечатлился. 2. В каждой статье — гора знаний, многие классно иллюстрированы примерами или объяснениями. Посмотрите, какая красота. 3. Особенно мне нравятся вот такой фарш, как справа, когда на иллюстрации тридцать (!) картинок, а в тексте они коротко прокомментированы. Это эталон, к которому я стремлюсь с нашим своим справочником: https://ilyabirman.ru/reference/ Хочется, чтобы там со временем появились все возможные элементы интерфейса и прочие детали с описанием преимуществ и недостатков.

Не заставляйте меня думать Claude раньше на стартовом экране выводил текстовое поле с заголовком «Опишите, что создадим сегодня». Предполагалось, я расскажу — ИИшка сделает за меня. За 2 года ни разу не воспользовался этой функцией. А сегодня наткнулся на исследование: ребята показали три разных версии стартовых страниц 10.000 пользователей. На первой было текстовое поле с заголовком «Объясните, что хотите получить, и наш ИИ-агент сделает это»; на второй — кнопка «Зарегистрироваться с Google»; третьей — ссылка «Зарегистрируйся бесплатно». Остальное было одинаково. Победил вариант с кнопкой Google; а проиграл (причем по всем показателям — регистрациям, активациям, покупкам) — вариант с ИИ. Казалось, объясни и получишь результат. Но нет — думать неохота, а вот нажать кнопку — легко.

Пользовательский опыт (UX) UX — это впечатление, которое человек получает от взаимодействия с продуктом: насколько всё понятно, удобно и приятно. Чем легче пользоваться сервисом, тем охотнее клиент остаётся и возвращается. Что формирует хороший UX? Минимум действий — чем быстрее пользователь достигает цели, тем лучше Быстрая загрузка — медленные платформы отталкивают Понятный интерфейс — всё должно быть логично и не вызывать вопросов Приятное оформление — гармоничные цвета, удобочитаемые шрифты и заметные кнопки увеличивают вовлечённость Компании вроде Airbnb или Notion инвестируют в UX, потому что довольные пользователи — это не только продажи, но и повторные визиты. Фаундер | Бизнес и Стартапы