MVP Блог. UX трюк из телевизора

# UX трюк из телевизора
Tags: дизайн

Смотрел вечером по телику Cinemassacre, это был обзор на древнюю игрушку про разносчика газет - Paperboy на NES (нашу денди).

Сама игра - порт с более древних платформ, графон так себе даже для NES. Для таких древних и простых игр характерно, что человек должен потратить много времени, разбираясь в правилах игры. Не как в IT, конечно, но все же. Даже мануалы к играм писали, сейчас даже для софта документация - это моветон.

![IT](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/it.png)
>> Игра IT

И тут Нёрд [показывает заставку игры, перед началом уровня](https://www.youtube.com/embed/5oH0rzY5zOA?start=140).

Заставка нам объясняет одно из правил игры:
  * В белые дома газеты бросай.
  * В красные не бросай.

Все это за несколько секунд, с анимацией, максимально понятно.

![yes](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/yes_customers.png =476x338) ![no](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/no_customers.png =484x340)

>> Понятно?

![animation](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/animation.gif)

>> Понятнее!

Можно было расписать все это текстом, но эффект был бы не тот.

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

Для тех, кто считает, что интуиция построена на том, что "плохие" дома - красные, в самой игре они не особо-то и красные, а смена цвета домов выглядит вполне логично - дома-то разные!

![hard-explain](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/hard-explain_customers.png =484x340)
>> Сложновато

![track](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/trash.jpg)
>> Ты же понимаешь? Выкинь меня в мусорку!

![hard-explain](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/are_red_is_bad.png =484x340)
>> Настолько ли красные дома - плохие? Просто разный дизайн.

Причем в игре ничего больше не объясняется: какие препятствия нужно объезжать, как кидать газету - все это игрок "исследует" сам.

Если показывать все это в заcтавке - начнет бесить, особенно если это нельзя будет пропутить. Гораздо интереснее разобраться самому.

А вот попробуй разберись, что при броске газеты в красный дом - очки уменьшаются, в белый - увеличиваются? Тут помогает заставка.

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

![Alladin](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/aladdin.jpg)
>> Кто успевал понять что-то или запомнить, пока это было на экране?

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

**Итого**:
1. Интерактивное обучение
2. Анимация
3. Исследовательские механики обучения

**Теперь меня интересует два вопроса**:
1. Как применить это в продукте?
2. Кто-то это уже применил?

## Первое, что приходит в голову...

Есть множество JavaScript-библиотек, которые позволяют сделать "интро" для пользователя, прямо на странице сайта или приложения.

Часть из них бесит максимально, когда встречаешься с ними в реале, а некоторые оказались вполне ничего!

**Так себе**: introjs.com

![js1](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js1.gif =550x325)

**Аналогично**: Shepherd

![js2](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js2.gif =550x246)

**Интересно!** Если так же быстро будет закрываться - возможно даже не будет бесить(похоже на легенду из Алладина): Chardin.js

![js3](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js3.gif =550x332)

**Максимально бесит**: Enjoyhint

![js4](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js4.jpg =550x381)

Когда встраивают блоки прямо в интерфейс, а не поверх интерфейса - **мне равится**: Hopscotch

**Удобно**: Можно оставить как есть - не будет мешать, можно закрыть и использовать больше пространства на экране.

![js5](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js5.png =550x394)

**Интересный кейс** - запуск по кнопке помощи: PageGuide

![js6](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/js6.gif =550x181)

К большинству библиотек претензии две: монструозность, и длительность.

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

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

## Только ли в пользователе дело?

В какой-то книге (у [Стива Круга](https://www.goodreads.com/book/show/41149839), либо у [Дональда Нормана](https://www.goodreads.com/book/show/16031296)) читал про иновационное, на свое время, приложение со списком задач. Создавали его, когда смартфоны были еще молодыми, создатели решили отказаться от стандартных менюшек и сделать управление целиком на свайпах, что было в новинку. А чтобы научить пользователя всем этим движениям, после установки запускался полноценное обучение: с примерами, которые пользователь должен был повторить, чтобы перейти на следующий этап. Насколько я понял эмоциональное описание автора, пользователям это очень нравилось - будто перед началом пользования им предлагали пройти увлекательную игру.

Вот только как часто мы разрабатываем по-настоящему **иновационный** интерфейс? Скорее всего, мы просто косячим с обычным. По словам того же автора из книги, все выученные движения забывались примерно в течении недели и приложением пользоваться становилось очень проблематично. Нелегка ноша инноватора.

## Пример с лендингом

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

![animation](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/active_example.gif)

Без анимации смотрится уже не так понятно и интересно:

![no_animation](https://github.com/kolko/kolko.github.io/raw/master/data/static/2020-12-09_ux_trick/no_animation.gif)

>> Статичные картинки в 2к20?? Срочно заведите аккаунт в тиктоке вашему дизайнеру!

## Идеи

Идея: нажимаешь кнопку помощи, появляется 5 или 10 курсоров и одновременно выполняют кучу действий drag'n'drop

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

Гипотеза: у тебя есть 1-2, максимум 3 секунды чтобы что-то показать. Все что дольше - будет бесить пользователя.