Две игры с одинаковым кодом: в одну играют до конца, вторую закрывают через пять секунд. Разница не в графике — в том, понятно ли, что тут делать. Сегодня про то, как объяснить приложению, чтобы оно объясняло себя само.
Самый честный тест твоего приложения выглядит так: даёшь телефон другу и молчишь . Не «смотри, тут надо нажать вот сюда, а потом вон туда» — просто молчишь и смотришь. Первые пять секунд расскажут о проекте больше, чем весь твой код.
Обычно происходит одно из трёх. Друг сразу тыкает и играет — победа. Друг спрашивает «а что тут делать?» — значит, на экране не хватает подсказки. Друг тыкает, ничего не происходит, и он возвращает телефон — значит, приложение не отвечает на действия.
UX — это и есть три вещи: понятно · отзывчиво · попадаешь пальцем. Не «красиво». Красивое непонятное приложение закрывают ровно так же быстро, как некрасивое.
Тут работает то же правило, что в модуле 5 про первые две секунды ролика. Хук нужен не только видео: у приложения тоже есть пять секунд, чтобы человек понял, зачем оно.
📐 ТРИ ПРАВИЛА
Всё, что нужно знать про UX на этом этапе, помещается в три правила. Каждое переводится в промпт для Bolt одной фразой.
Понятно за пять секунд
На первом экране должно быть видно: что это, что нажимать и что будет дальше. Одна кнопка крупнее остальных — та, с которой начинают. Заголовок в одну короткую строку: «Поймай рыбок за 30 секунд».
Промпт: «Добавь на стартовый экран заголовок игры, одну строку правил и крупную кнопку "Играть"»
Каждое нажатие отвечает
Нажал — что-то изменилось: цифра, цвет, вспышка, звук. Даже неверный ответ должен подсветиться. Молчание в ответ на действие человек читает как «сломалось».
Промпт: «При нажатии кнопка коротко подсвечивается и слегка уменьшается, счёт меняется с анимацией»
Палец — не мышка
Курсором попадают в кнопку 20 пикселей, пальцем — нет. Кнопки крупные, между ними промежутки, всё в один столбец. Твою игру откроют с телефона: почти всё, что кидают в чат, открывают с телефона.
Промпт: «Сделай адаптивно под телефон: всё в один столбец, кнопки не меньше 44 пикселей по высоте, отступы между ними»
💡 Проверяй на телефоне сразу , а не в конце. В превью Bolt можно сузить окно браузера — уже видно половину проблем. Но настоящую проверку даёт только реальный телефон.
🔍 НАЙДИ КОСЯК
Четыре экрана из настоящих ученических проектов. В каждом нарушено одно из трёх правил — реши, критично это или мелочь. +5 за верный ответ.
🔤 ПОДПИСИ
Хорошая подпись отвечает на вопрос «что произойдёт, если я нажму». Плохая описывает, чем кнопка является. Выбери человеческий вариант. +5 за попадание.
📋 Чек-лист «дал другу и молчу»
Понял, что это, не спрашивая — или спросил «а что тут»? Нашёл, с чего начать, за пять секунд? После каждого нажатия что-то менялось на экране? Попал пальцем с первого раза или мазал? Понял, что игра закончилась, и как начать заново? Где он затупил — там и правь. Его затупы важнее твоего вкуса
Первые пять секунд Что человек видит в первые пять секунд твоего приложения?