Excalidraw: три шага до рисунка
В Excalidraw нечего разбирать в экране регистрации, потому что до рисования регистрироваться не нужно. Мы открыли адрес, выбрали инструмент и потянули мышь. Интересна не скорость, а то, чему по дороге учит пустой холст.
Точка входа: excalidraw.com — приложение и есть главная страница — excalidraw.com
3 шага до первого полезного действия~1,0 с время до первой пользыпервое полезное действие: фигура на холсте
Путь, который мы прошли
- Открыть excalidraw.com. Отвечает само приложение: перед ним нет лендинга, нет куки-баннера, нет диалога и нечего принимать.
- Нажать инструмент «прямоугольник» на панели (или клавишу R — горячая клавиша напечатана прямо на инструменте).
- Потянуть мышь по холсту. Прямоугольник появляется под курсором. Это и есть первое полезное действие: рисунок есть там, где его не было.
Что мы измерили
| Шагов до первого полезного действия | 3 |
| Время до первой пользы | около 1,0 с — приложение стало рабочим через 0,98 с после открытия адреса; выбор инструмента занял 12 мс; прямоугольник рисовался под курсором, ниже нашего порога измерения в 16 мс |
| Загрузка страницы | первый байт 0,10 с, DOMContentLoaded 0,63 с, событие load 0,85 с |
| Вес при холодном кэше | 0,9 МБ за 18 запросов |
| Что стоит на пути | ничего — ни куки-баннера, ни модального окна, ни требования аккаунта, ни согласия |
| Когда просят аккаунт | на пути — никогда; «Sign up» стоит четвёртым пунктом в списке из четырёх на пустом холсте |
| Сколько ещё шагов, чтобы забрать рисунок | ещё 2 — меню → Export image → PNG, SVG или буфер обмена, по-прежнему без аккаунта |
Экраны
Что сделано хорошо
Продукт и есть парадная дверь
Между адресом и холстом нет лендинга. Загружается ровно то, ради чего пришли. Продукты, которые ставят перед приложением маркетинговую страницу, платят дважды: лишним кликом и сомнением, хорошо ли само приложение.
Пустой экран показывает пальцем, а не объясняет
Две нарисованные от руки стрелки указывают на панель и на меню, а сами инструменты носят горячие клавиши на лицах (R, D, O, A). Закрывать ничего не нужно, а вторая фигура получается быстрее первой, потому что клавишу вы выучили, пока смотрели на инструмент.
Следующий ход подсказывается в момент, когда сработал предыдущий
Как только появляется первый прямоугольник, строка подсказки меняется на «Enter to add text, Cmd + ↑↓ to create a flowchart». Это всё искусство внутрипродуктовых подсказок в одной строке: не тур в начале, а нужная фраза в момент, когда она стала правдой.
Неудобная правда сказана заранее
Стартовый экран говорит, что рисунки лежат в хранилище браузера и что хранилище может очиститься неожиданно. Говорит до того, как есть что терять, — а это единственный момент, когда такое предупреждение является заботой, а не оправданием.
Три вещи, которые мы бы изменили
Не открывать диалог экспорта с пустым превью
Откройте меню → Export image без выделения — и диалог появится с включённым «Only selected» и пустой шахматкой там, где должен быть рисунок. Если фигура выделена, превью правильное: переключатель делает ровно то, что написано. Но экран об этом не говорит. Выключать переключатель, когда выделения нет, или писать одну строку под превью: «Ничего не выделено — показан весь холст».
Почему это важно. Экспорт — момент, когда работа уходит из инструмента. Пустое превью в этот момент читается не как «включён переключатель», а как «мой рисунок пропал». Это единственный экран продукта, где неверное впечатление стоит доверия, а не времени.
Дать предупреждению про хранилище кнопку
Стартовый экран предупреждает, что хранилище браузера может очиститься, и советует регулярно сохранять в файл. Рядом четыре пункта: Open, Help, Live collaboration и Sign up. Сохранения в файл среди них нет. Добавить «Save to file» в этот список и один раз — не при каждом заходе — повторить предложение, когда рисунок перерастёт несколько объектов.
Почему это важно. Предупреждение без действия просит держать пункт «не забыть сохранить» в голове, пока рисуешь. Отказ, который оно предсказывает, полный и тихий: о том, что хранилище очистили, узнаёшь, когда возвращаешься за схемой.
Сказать, что такое Excalidraw+, там же, где показана кнопка
Кнопка «Excalidraw+» стоит в правом верхнем углу — там, где новый человек ищет аккаунт и шеринг, — и сама по себе ничего не объясняет. Одна строка при наведении или под пунктом меню на первом визите: что именно добавляется, простыми словами.
Почему это важно. Первый экран нигде не говорит, что изменится после регистрации, — значит, единственный коммерческий элемент на нём должен нести эту фразу. Кнопка, которая называет свою пользу, информативна; та же кнопка без неё — единственная часть экрана, которую внимательный человек учится не замечать.
Чего мы не увидели
Мы не заводили аккаунт, поэтому не видели рабочее пространство Excalidraw+, командные файлы, права доступа и тот онбординг, который идёт после регистрации. Всё написанное выше — публичный холст на excalidraw.com и ничего больше.
Как мы считали
- Шаг — это одно осознанное действие, которое продвигает по пути: клик или тап, одно заполненное поле, один обязательный выбор или одно закрытие того, что продукт поставил на пути (куки-стена, модальное окно, тур). Нажатие на точку входа — кнопку или адрес, с которого мы начинаем, — это шаг 1. Загрузки страниц, редиректы и ожидание шагами не считаются.
- Часы запускаются в момент нажатия на точку входа и останавливаются, когда результат первого полезного действия виден на экране. Мы измеряем собственную задержку продукта часами самой страницы, а не секундомером: каждое ожидание заканчивается по условию, которое мы опрашиваем, и в число не входит время, которое человек тратит на чтение и решение. Это нижняя граница, а не опыт пользователя.
- Первое полезное действие — первое, что даёт результат, ради которого приходили: рисунок на холсте, ответ на вопрос, который вы сами задали своим данным, сработавший сценарий. Пройденный тур, подтверждённая почта и чужой готовый дашборд — не считаются.
- Мы не заводим аккаунты. Каждый проход — это публичное демо, песочница или тестовый режим. Если до продукта нельзя добраться без регистрации, мы говорим об этом и берём другой. Значит, мы видим парадное, а не дом изнутри, — и честно пишем, чего не увидели.
Раскрытие
Вопросы
Три шага — это рекорд?
Это самый короткий путь, который мы пока измерили, и короткий он потому, что продукту не пришлось делать для этого ничего: приложение и есть главная страница. Побеждать надо не тройку, а количество решений, которые человек принимает до того, как инструмент сделает для него что-то. Здесь это количество равно одному: какая фигура.
«Около секунды» — это то, что увидит любой?
Нет. Это собственная задержка продукта на нашей машине и нашем канале: первый байт 0,10 с, событие load 0,85 с, приложение рабочее на 0,98 с. В число не входит время, которое человек тратит на чтение экрана и решение, куда нажать, а на первом визите оно намного больше секунды. Мы публикуем его потому, что это та часть, которой управляет продукт.
Почему не разобрать платную версию?
Мы не заводим аккаунты в чужих продуктах. Публичный холст — та часть Excalidraw, с которой встречаются все, и именно она решает, дойдёт ли кто-нибудь до платной.
Что бы вы забрали к себе?
Строку подсказки, которая меняется в тот момент, когда появился первый объект. Большинство внутрипродуктовых подсказок срабатывает на входе, когда у пользователя ещё нет контекста; эта — на первом успехе, когда контекст уже есть. Мы делаем такие подсказки профессионально и всё равно здесь кое-чему научились.