Дизайн для опытных пользователей

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

Мейнстримный UX говорит о первом запуске и активации. Эксперт этого никогда не видит. Он открыл ваш продукт в восьмисотый раз, нажал Cmd-K и либо пролетел через работу, либо психанул и ушел, потому что ваша палитра выдала пять нерелевантных результатов. UX для опытных пользователей это второй продукт, и большинство команд его пока не выпустили.

Скрытый продукт за видимым

В каждом великом продукте два продукта. Видимый для нового пользователя и скрытый для того, кто уже все знает.

Видимый продукт это кнопки, меню, подсказки и туры. Скрытый продукт это сочетания клавиш, командные палитры, сохраненные представления, множественный выбор и состояние, адресуемое через URL. Первый делает понятной первую сессию. Второй делает быстрыми следующие тысячу сессий.

Linear выпускает оба, и делает это намеренно. Новичок видит чистый инбокс с понятным главным действием. Эксперт нажимает g, затем i, чтобы перейти во входящие, c, чтобы создать задачу, shift-клик для множественного выбора, а каждое сохраненное представление это URL, которым можно поделиться. Один продукт. Два продукта. Оба спроектированы.

Опытные пользователи это когорта, которую нельзя терять

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

Решение не в том, чтобы «добавить шорткаты». Решение в том, чтобы относиться к поверхности для опытных как к полноценному продукту с собственным дизайн-бюджетом и роадмапом.

Пять слоев UX для опытных пользователей

UX для опытных это не одна функция. Это пять слоев, которые усиливают друг друга. Большинство продуктов выпускают один или два. Лучшие выпускают все пять, и слои подкрепляют друг друга.

1. Командная палитра

Палитра Cmd-K это единая поверхность поиска и действий. Одно нажатие вызывает каждое действие, маршрут и объект продукта, отсортированные по давности и частоте. Палитра Linear это эталон. Raycast построил целый слой ОС вокруг того же примитива. Notion, Vercel, GitHub и Slack выпустили свои.

Настоящая палитра ищет контент и действия в одном поле, показывает подсказки клавиш рядом с каждым результатом и принимает аргументы прямо в строке. «Move issue to in progress» работает как одна команда вместо цепочки из четырех кликов. Типичная ошибка это палитра только для поиска: окно, которое находит документы, но не умеет запускать действия, это строка поиска с манией величия. Смысл Cmd-K в том, чтобы найти и сделать. Разбор пустые состояния это продукт объясняет, почему важно состояние палитры по умолчанию.

2. Клавиатурные шорткаты как полноценная система

Шорткаты это не список привязок, спрятанный в модалке помощи. Это система с обнаруживаемостью, последовательностью и постепенной глубиной. Superhuman это золотой стандарт. У каждого действия есть клавиша, шпаргалка встроена в продукт, а онбординг учит клавиатуре раньше мыши.

Linear использует систему буквенных пар, которая масштабируется. Первая буква называет раздел (g от go), вторая называет пункт назначения (i для inbox, p для project, m для my issues). Пользователь учит одно правило и получает пятьдесят шорткатов. Notion дает слэш для команд и Cmd-K для палитры. Figma использует однобуквенные инструменты (V для перемещения, R для прямоугольника, F для фрейма, T для текста). Шорткаты Gmail до сих пор золотой стандарт для почты спустя двадцать лет.

Система и есть продукт. Куча разрозненных шорткатов это не система, а бэклог, который команда забыла удалить.

3. Сохраненные представления, фильтры, закладки

Эксперт выстраивает продукт вокруг своего рабочего процесса. Сохраненные представления Linear появляются в боковой панели, переживают выход из аккаунта, передаются по URL и обновляются вживую. Отфильтрованные представления баз данных Notion делают то же для контента. Сохраненные поиски Stripe хранят точный фильтр, который ловит аномалии. Vercel закрепляет команду и проект за каждой закладкой, так что нужный дашборд находится в одном нажатии.

Непреложное условие: сохраненное состояние должно быть адресуемым. У каждого сохраненного представления должен быть URL, который переживет выход из аккаунта, смену устройства и отправку коллеге. Состояние, которое живет только в localStorage, исчезает в тот момент, когда пользователь открывает продукт на другом ноутбуке.

4. Массовые операции

Эксперт трогает сотню объектов в день. Продукт либо это поддерживает, либо наказывает за это. Множественный выбор в Linear через shift-клик и затем массовое обновление клавишей B это канон. Множественный выбор в базах Notion позволяет поменять статус, исполнителя и теги у тридцати строк за одно движение. Шорткаты Gmail плюс shift-J это причина, по которой инбокс терпим в больших объемах.

У массовых операций три обязательных свойства. Выделение должно быть очевидным. Действие должно быть доступно с клавиатуры. Отмена должна быть настоящей. Массовое действие за правым кликом это массовое действие, которым вы не воспользуетесь, а массовое действие без отмены одним нажатием разрушает доверие при первой же ошибке.

5. Поверхности только для опытных

Некоторые поверхности существуют только для эксперта. Консоль API Figma, библиотека расширений Raycast, админ-вид баз данных Notion, Vercel CLI, Cron и слой тайм-блоков только для клавиатуры в Notion Calendar. Это слой глубины, внутри которого живет эксперт.

Raycast это самая чистая версия. Базовый продукт это командная палитра. Эксперт ставит расширения и собственные скрипты, которые превращают палитру в личный слой ОС. Базы данных Notion имеют ту же форму: новичок видит список, эксперт видит реляционную модель данных с ролапами и формулами.

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

Внутри командной палитры

Палитра Cmd-K это важнейшая поверхность для опытных, и большинство команд выпускают слабую. Пять элементов отделяют сильные палитры от строк поиска в костюме.

Хорошая палитра ранжирует результаты по давности и частоте, показывает подсказку клавиши рядом с каждым результатом, принимает аргументы в строке, учитывает контекст и закрывается одним нажатием Esc. Палитра Linear делает все пять. Raycast делает все пять и превращает палитру в весь продукт. Большинство палитр делают два пункта, и пользователь учится их игнорировать.

Пять правил проектирования UX для опытных пользователей

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

1. У каждого действия есть клавиша. Если пользователь может сделать это мышью, он должен мочь сделать это с клавиатуры.
2. Показывайте клавиши, не навязывая их. Подсказки в палитре, в тултипах, в строках меню. Шорткат должен быть виден в момент, когда пользователь тянется к мыши, а не похоронен на странице настроек.
3. Множественный выбор должен быть очевиден. Видимые чекбоксы или понятный паттерн shift-клика. Массовое действие, о существовании которого пользователь не знает, это массовое действие, которого не существует.
4. Сохраненное состояние должно быть адресуемым. На основе URL, постоянное, доступное для шеринга. Состояние, которое живет только в браузере, исчезает.
5. Поверхность для опытных в одном нажатии. Cmd-K, слэш или одна буква. Если эксперту нужно к ней навигировать, это страница функции, а не поверхность для опытных.

Продукт, который выполняет четыре из пяти, ощущается живым под руками эксперта. Продукт, который выполняет два, ощущается как сайт с парой прикрученных клавиатурных трюков.

Антипаттерны, которые выдают, что команда забыла про эксперта

Пять паттернов убивают больше поверхностей для опытных, чем что-либо другое.

Шорткаты, конфликтующие с браузером. Ctrl-W или Ctrl-T, переназначенные внутри веб-приложения, закрывают вкладку, и пользователь теряет несохраненную работу. Лучше используйте пространство имен внутри Cmd-K.

Шорткаты, задокументированные только в модалке помощи на глубине трех кликов. Шпаргалка за цепочкой Настройки, Помощь, Горячие клавиши это шпаргалка, которую пользователь никогда не увидит. Показывайте клавиши в момент действия. Superhuman делает шпаргалку полноценным экраном. Большинство продуктов выпускают ее как ссылку в футере, на которую, как они надеются, никто не нажмет.

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

Платный Pro-тариф на базовые шорткаты. Некоторые продукты прячут клавиатурные шорткаты, палитры или сохраненные представления за тарифом «Pro». Шорткат не функция, а способ использовать функцию. Закрыть его значит закрыть сам продукт.

Сохраненные представления, не переживающие выход из аккаунта. Фильтр, живущий только в localStorage, стирается, когда пользователь открывает продукт на другом устройстве. Храните на сервере, привязывайте к пользователю, пусть URL несет состояние.

Аудит для опытных пользователей

Пропустите любой продукт через эти семь вопросов. Провалите два или больше, и к концу квартала эксперт будет в чужом продукте.

1. Есть ли у каждого основного действия клавиатурный шорткат? Перечислите двадцать главных действий и проверьте. Если больше трех требуют мыши, клавиатурный слой неполон.
2. Есть ли палитра Cmd-K, которая ищет и действует? Не строка поиска. Палитра, которая выполняет команды, принимает аргументы и показывает подсказки шорткатов.
3. Обнаруживаемы ли шорткаты в контексте? Тултипы, подсказки в палитре, подписи в меню. Пользователь должен узнавать шорткат во время действия, а не из документации.
4. Работает ли множественный выбор с клавиатуры с понятной отменой? Shift-клик, затем действие клавишей, затем отмена одной клавишей. Любое недостающее звено ломает цепочку.
5. Адресуемы ли сохраненные представления по URL и постоянны ли они? Скопируйте URL, вставьте в другой браузер, войдите. Если представление не загрузилось, сохраненное состояние это театр.
6. Доступны ли поверхности для опытных в одном нажатии откуда угодно? Консоль, поверхность API, библиотека расширений. Если эксперту нужно навигировать к ним, это страницы функций, а не поверхности для опытных.
7. Относится ли продукт к клавиатуре как к полноправному гражданину? Никаких шорткатов, конфликтующих с браузером. Никаких шорткатов за пейволлом. Никаких массовых действий только мышью.

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

Где это вписывается в продукт

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

Стройте скрытый продукт намеренно

Видимый продукт получает пост о запуске и демо-видео. Скрытый продукт получает продления и сарафанное радио. Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe и Cursor объединяет одно: они выпустили настоящий второй продукт для тех, кто уже знает.

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

FAQ

Что такое UX для опытных пользователей?

UX для опытных пользователей это слой дизайна, нацеленный на того, кто уже знает продукт. Он включает командную палитру, клавиатурный слой, сохраненные представления и фильтры, массовые операции и поверхности только для опытных. Новичку это не нужно. Эксперт живет внутри этого.

Нужна ли каждому продукту командная палитра Cmd-K?

Почти каждому продукту для продуктивности нужна. Палитра становится единой поверхностью поиска и действий и дает эксперту одно нажатие, открывающее любое действие. Linear, Raycast, Notion, Vercel, GitHub и Slack выпустили свою. Потребительские продукты с единственным основным действием могут обойтись без нее. Большинство B2B и prosumer-инструментов не могут.

Как научить шорткатам без тура?

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

Выпустите второй продукт

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