Работая над новыми продуктами или фичами, гоняясь за метриками, мы иногда забываем про то, как людям предстоит знакомиться с тем, что мы напридумывали. Спрашиваешь дизайнера: как люди вообще узнают, что фича появилась, как её найдут? Как поймут, зачем это и как этим пользоваться?

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

1. Есть люди, которые хотят прочитать инструкцию, когда сталкиваются с новым продуктом. Хотят, чтобы им всё показали и объяснили. Но есть и те, кто всегда сразу кидается изучать продукт методом тыка, закрывая и отбрасывая любые обучающие материалы. Можно снять самый распрекрасный видеоролик про продукт, при первом запуске открыть его на весь экран, а люди всё равно будут хотеть всё это пропустить и сразу что-то делать. Поэтому хороший онбординг — это не только указатели и обучающие материалы, но и то, как продукт устроен сам по себе.

2. Например, очень помогают продуманные пустые состояния. Большинство дизайнеров работают только над «основным сценарием» — рисуют экраны интерфейса, сразу заполненные примерными данными. Хорошо ещё, если эти данные похожи на настоящие, а не просто «здесь будет текст текст текст». Например, если мы рисуем мессенджер, там в макетах будут люди с красивыми аватарками (серьёзно, есть целый сайт, на который дизайнеры закачивают свои аватарки, чтобы другие дизайнеры их могли использовать в макетах: https://uifaces.co), смешные диалоги, картинки все друг другу шлют. Но что если человек только-только скачал и поставил этот мессенджер, что если разговоров и контактов ещё вообще нет, ни одного? Как должно выглядеть пустое состояние? Как вообще начать новый разговор? Об этом всём часто дизайнеры забывают. Иногда хорошего пустого состояния достаточно, чтобы спасти ситуацию. Оно может подталкивать человека к тому, чтобы сделать определённое действие.

3. Другой способ сделать продукт понятным без объяснений — опереться на привычную конструкцию, стандартный паттерн. Например, Google Docs намеренно сделаны так, чтобы сразу же восприниматься привычными для любого, кто раньше работал c Microsoft Office. Даже цвета иконок сделали те же самые: документы синие, таблицы — зелёные. Документы в Google Docs выглядят как листы бумаги, хотя в 99% случаев их никто не распечатывает — просто потому что это привычный формат.

4. Иногда сложность можно спрятать и раскрывать постепенно — такой подход называется progressive disclosure. Например, редактор текста в Medium выглядит по сравнению с тем же Google Docs суперпростым и минималистичным. В Медиуме нет даже панели инструментов — просто текст на белом листе, и всё. Большинство контролов появляются только после выделения части текста мышкой. Сложность спрятана и проявляется только тогда, когда она нужна.

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

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