Створіть робочий прототип застосунку за допомогою ШІ і покажіть його людям

Чому робочий прототип розповідає більше, ніж макет

Статичні екрани перевіряють, чи подобається людям вигляд. Чи можуть вони цим користуватися, такі екрани перевіряють рідко, бо тестувальник мусить уявляти, що стається після кожного натискання, а ведучий сесії зрештою переказує продукт словами. Клікабельний прототип застосунку, який справді реагує, прибирає цей переказ. Тестувальник вводить дані в справжнє поле, бачить, як змінюється справжня сума, отримує справжній порожній стан, коли видаляє останній елемент. Його збентеження стосується вашого дизайну, а не прогалин прототипу.

Змінюються й питання, які можна ставити. З макетом ви питаєте «чи користувалися б ви цим?», і люди відповідають ввічливо. Коли щось працює, можна дати завдання («додайте зміну на наступний вівторок і подивіться, як зміняться ваші години за тиждень») і спостерігати, де людина вагається.

Вирішіть, що має довести прототип

Перш ніж щось описувати, запишіть одне-два питання, на які має відповісти тест. Так прототип лишиться невеликим, а сесії — зосередженими. Типові питання:

• Розуміння: чи збагнуть люди за кілька секунд, для чого головний екран?
• Основне завдання: чи зможуть вони без допомоги виконати ту одну роботу, заради якої існує продукт?
• Незручний момент: що відбувається на межі, щодо якої ви не впевнені: порожній список, помилка, яку треба скасувати, довга назва, що переноситься?
• Готовність: після використання чи замінили б вони цим свою таблицю, блокнот чи застосунок?

Усе, що не працює на ці питання, можна пропустити або імітувати. Сторінка налаштувань, яку за двадцятихвилинну сесію ніхто не відкриє, — марна праця, хоч би як легко її було згенерувати.

Як описати його для Anticode

Опишіть кількома реченнями людину, завдання й екрани і скажіть, якими мають бути приклади даних. Наприклад: «Прототип застосунку для обміну змінами для команди кав’ярні. Екрани: графік на цей тиждень, запит на обмін зміною і список відкритих запитів. Використай вісім прикладів працівників і реалістичний тиждень. Познач усе як демодані». Architect відповідає коротким планом (назва, екрани, вигляд, функції) і може поставити до трьох запитань там, де відповідь змінює результат, кожне із запропонованими відповідями, які можна натиснути.

Коли ви обираєте «Build it», модель пише весь застосунок як один HTML-документ, і ви можете спостерігати, як надходить код. Нові застосунки також можна відкрити в безголовому браузері в ширині телефона і ноутбука, зробити знімки екрана й прокликати, а помилки повертаються на виправлення, коли цей сервіс перевірки доступний.

Зробіть імітацію чесною

Застосунки Anticode працюють у пісочниці без мережі, тож усе, що зазвичай потребує сервера, імітується всередині сторінки: інші користувачі — це приклади людей, «надіслані» повідомлення потрапляють до локального списку, а екран входу приймає будь-що. Там, де це важливо, застосунок позначає такі речі як демодані. Не прибирайте цих позначок під час тестування. Тестувальники, які думають, що користуються живою системою, ухвалюють інші, ризикованіші рішення, ніж ті, хто знає, що це модель, а на цьому етапі вам потрібен відгук саме другого типу.

Зберігається те, що застосунок записує в браузер самого тестувальника. Якщо людина додала три елементи, закрила вкладку й повернулася завтра, елементи на цьому пристрої лишаться. Цього достатньо для тижневого щоденникового дослідження, якщо кожен тестувальник користується одним телефоном чи ноутбуком.

Проведення сесій і зміни прототипу

1. Опублікуйте прототип на його адресі anticode.dev і надішліть тестувальникам посилання. Нічого не треба встановлювати.
2. Зацікавленим особам натомість надішліть посилання для перегляду клієнтом: вони можуть відкрити поточний попередній перегляд без акаунта і залишити коментарі, прив’язані до розділу. За замовчуванням посилання діють 14 днів, і їх можна відкликати.
3. Після кожного раунду просіть про зміни простими словами («перенеси кнопку обміну на кожну картку зміни»). Останні збереження лишаються в історії версій (до кількості, яку визначає ваш тариф), тож можна показати перший і третій раунди поруч або повернутися назад.

Що не може перевірити прототип в одному браузері

Будьте чесні із собою щодо меж. Прототип у пісочниці працює одночасно лише на одному пристрої, тож він не перевірить:

• Нічого між людьми: справжні сповіщення, спільні списки, двоє тестувальників, які бачать зміни одне одного.
• Справжній вхід, права доступу чи відновлення акаунта.
• Живі зовнішні дані, платежі чи функції ШІ всередині застосунку (їх можна лише імітувати фіксованими прикладами відповідей).
• Швидкодію зі справжніми обсягами даних чи на повільних мережах.

Коли ідея витримала тестування, експорт у Next.js — крок до справжнього продукту. Він охоплює застосунки й дає стандартний проєкт App Router на TypeScript із Postgres через Prisma, входом через електронну пошту, ролями клієнтів і працівників та адмінпанеллю. Це основа, яку розширюватиме розробник, а не готовий багатокористувацький застосунок, і його можна надіслати у вибраний вами репозиторій GitHub. Що в ньому є, описано в посібнику з експорту в Next.js. Якщо вам потрібні багатокористувацькі функції для робочого продукту без написання коду, no-code інструмент із бекендом може підійти краще за обидва варіанти.

Часті запитання

Це генератор прототипів застосунків на ШІ чи інструмент для дизайну?

Він створює робочий код, а не фрейми на полотні. Ви отримуєте справжній застосунок у браузері, що добре підходить для юзабіліті-тестування; якщо вам потрібні файли дизайну з точністю до пікселя для дизайн-команди, використовуйте поряд інструмент для дизайну.

Чи можуть тестувальники користуватися ним на телефонах?

Так. Опублікований застосунок — це вебсторінка, що працює в браузері телефона, а все, що він зберігає, лишається на цьому телефоні.

Чи можу я побачити, що ввели тестувальники?

Не те, що вони зберегли в застосунку: це лишається на їхньому пристрої. Якщо додати форму відгуку чи зворотного зв’язку, ці дані надходитимуть вам на пошту й на панель керування.

Чи стане прототип справжнім застосунком?

Він може стати відправною точкою. Експорт у Next.js перетворює його на проєкт із базою даних і входом, на основі якого розробник може працювати далі.