Прототип приложения или сайта за 5 шагов: создание и тестирование
Разработка продукта — многоступенчатый процесс. И то, что получится в итоге, зависит от грамотно созданного прототипа. По сути, прототип приложения или сайта — это скелет, который затем обрастает мышцами в виде UI.
Его также можно сравнить с планом: прототип позволяет наметить ключевые моменты интерфейса и логики его работы, чтобы убрать страх белого листа перед разработкой основной версии продукта и чтобы в будущем не приходилось переделывать всё с нуля. Правки в любом случае будут стоит вам денег, а если они будут глобальными или их будет много — больших денег.
Поэтому на начальных этапах работы над продуктом так важно разработать прототип и, более того, сделать это правильно.
Мы, студия NoCode/LowCode-разработки Zero To One, постарались подробно рассказать о том, что же такое прототип, как его создавать и как это делают у нас :)
А еще мы запустили телеграм-канал о новостях из мира бизнеса и стартапов. Каждое утро говорим о главных событиях: кто сколько привлек, кто кого купил и какие стартапы сейчас поднимают самые большие раунды. Подписывайтесь!
Прототип: что это такое и зачем он нужен
Это тестовая версия будущего продукта, своего рода муляж с низкой степенью детализации. Прототип симулирует взаимодействие пользователей с интерфейсом и помогает продумать расположение элементов, проработать логику их взаимодействия, понять, что в данном конкретном случае сработает лучше, а что использовать не стоит.
Помимо этого прототип помогает:
- Визуализировать будущий продукт. Прототипирование помогает понять, что вы получите в результате разработки: какие функции и элементы будет иметь интерфейс, по каким сценариям пользователь будет взаимодействовать с продуктом и т. д.
- Выработать единую концепцию, правила дизайн-системы и иерархию блоков. Например, в соответствии с негласной дизайнерской матчастью, расстояния между блоками (к примеру, заголовками) и подблоками (абзацами) везде должны быть одинаковыми. Аналогичные правила работают и в случае с визуальным контентом (фото, видео и пр.) и графическими элементами (кнопки, иконки).
- Закрепить договорённости с заказчиком. Он страхует от ситуаций, когда команда разработчиков уже сделала весь интерфейс, выкатила итоговый продукт и передала заказчику для оценки, а всё работает, оказывается, совсем не так, как нужно: тут текст не влезает в границы кнопки, там блок не так расположен, где-то элементов не хватает, а какие-то из них вообще лишние. Прототип даёт возможность «свести» пожелания и видение заказчика с возможностями и видением разработчиков.
- Сформировать ТЗ для верстальщиков. Прототип показывает, какие расстояния должны быть между элементами, какие использовать отступы от края блока до его содержимого, в случае с high-fidelity прототипом (о нём расскажем дальше) можно договориться даже о цветах и анимациях переходов между окнами.
- Понять ЦА и собрать фидбек. Как мы уже рассказывали в одной из публикаций, MVP можно создавать в виде прототипа. Но для MVP подходят только high-fidelity прототипы: они могут выглядеть как реальный, законченный продукт и с ними можно полноценно взаимодействовать.
Виды прототипов
В зависимости от инструментов, используемых при создании прототипа, можно выделить следующие его виды:
- Бумажный прототип. Да, на бумаге и от руки. Обычно такой прототип создаётся в самом начале работы для иллюстрации концепта продукта, когда нужно быстро сделать набросок и скорректировать основные детали. Однако бумажное прототипирование совершенно не подходит для полноценной работы и тестирования.
- Low-fidelity прототип. Он выглядит как «голая» версия конечного продукта и, как правило, делается в ч\б. Такой прототип состоит из:
- Макетов экранов
- Контуров элементов
- Изображённой в виде стрелок логики взаимодействия элементов или базовой кликабельности элементов
Ключевые характеристики lo-fi прототипа — наглядность и интерактивность. Он может быть выполнен с помощью карандаша в Paint или фреймов и фигур в Figma — неважно. Главное — он должен показывать алгоритм решения проблемы пользователя.
Один из прототипов нашей студии
- High-fidelity прототип. Такой прототип гораздо больше похож на итоговый продукт, чем lo-fi. В нём уже есть актуальные изображения, текстовые заглушки с Lorem ipsum заменены на реальный UX-текст со смысловым наполнением. По сути, hi-fi прототип — это максимально подробный дизайн-макет, практически финальная версия проекта, но без фронт- и бэкенда.
При создании high-fidelity прототипа от точки А до точки Я прорабатывается логика взаимодействия элементов в каждом отдельно взятом сценарии, на каждую кнопку макета назначаются действия и кнопки демонстрируются во всех возможных состояниях, между собой связываются экраны приложения и т. д. Такой прототип должен давать полное представление о структуре сайта/приложения, навигации внутри них и решении всех возможных проблем пользователей.
Чаще всего все эти виды прототипов используются поочерёдно на различных стадиях разработки: всё начинается с бумажного наброска и приходит к high-fidelty прототипу.
Как правильно создать прототип: алгоритм действий
Важная вещь, которую нужно помнить, если вы хотите создать хороший продукт — коммуникации в процессе разработки должно быть и будет много. Здесь всё как в любых человеческих отношениях: хотите что-то получить и чтобы это «что-то» было качественным — говорите о своих потребностях, идеях и сомнениях, обсуждайте их.
- Первое, что нужно сделать при создании любого пользовательского продукта, будь то сайт, приложение, текст или рекламный креатив — это изучить целевую аудиторию. Перед созданием прототипа вам необходимо узнать о потребностях потенциальных пользователей, их болевых точках. Как говорится, знание — сила. И в данном случае знание и понимание аудитории вашего продукта поможет уже на этапе прототипирования создать удобный UX, который потом только останется доработать.
- Формирование ТЗ. На этом этапе создания прототипа необходимо провести брифинг и совместное обсуждение требований к будущему макету, чтобы наметить план работы. Здесь обсуждается вся информация, полученная при изучении ЦА, структура сайта или приложения: подробно описываются экраны, текстовое и визуальное наполнение, функции отдельных элементов и навигация. На основании выводов обсуждения составляется техзадание для дизайнеров.
- Создание low-fidelity прототипа. Имея на руках данные исследования ЦА, техзадание от клиента и набросок интерфейса, можно приступать непосредственно к прототипированию.
На этом этапе создаются макеты экранов и определяются размеры и расположение элементов. Кроме того, именно сейчас формируется базовый флоу навигации.
На этом этапе нет необходимости вникать в детали. По сути, вы просто создаёте базовый набросок экранов вашего продукта, который позволит клиентам, всем заинтересованным сторонам и пользователям просмотреть и опробовать его.
Создание low-fi обычно занимает около 7-14 дней. После того, как черновик создан, нужно вновь обсудить всё с заказчиком и скорректировать имеющийся макет.
- Создание high-fidelity прототипа. По мере перехода к финальному дизайну продукта ваш прототип должен становиться более функциональным. Например, на стадии hi-fi прототипа можно добавить в макет строку поиска, которая будет подгружать данные, хранящиеся в прототипе (например, образцы товаров), на основе того, что пользователь или тестировщик вводят в поле, и представлять результаты в виде меню-аккордеона, выпадающего списка и других подобных элементов.
Еще один аспект, отличающий прототипы класса hi-fi от прототипов более низкого класса, заключается в том, что они часто хранят как числовые, так и текстовые данные, а также определенные настройки, вводимые пользователем. Эти настройки могут сохраняться и влиять на другие элементы прототипа, как на одном экране, так и на разных.
- Тестирование. Да-да, оно самое, долгожданное. На этом этапе на практике отлавливаются проблемы, которые могли остаться незамеченными в процессе работы над макетом и при обсуждении его с заказчиком, и интерфейс шлифуется практически до идеала.
Плюсы тестирования — в следующем:
- Оно позволяет выявить ошибки на ранней стадии разработки;
- Оно экономит (иногда сильно) средства на разработку итогового продукта;
- Оно позволяет начать знакомство пользователей с финальным продуктом «на хорошей ноте»: правильно и ответственно проведённое тестирование гарантирует, что сразу после запуска приложения или сайта пользователи не столкнутся с критическими ошибками и не останутся недовольны.
Перед началом тестирования ставятся и распределяются по приоритетности цели, которые нужно достичь в процессе проверки прототипа. Например:
- «Оставить ли меню-бургер или вынести категории в шапку?»
- «Понятно ли из текста в окне, что именно нужно от пользователя?»
- «Достаточно ли крупный размер шрифта меню, чтобы пользователям было комфортно взаимодействовать с сайтом?»
- «В качестве обложки сайта лучше оставить изображение или заменить его на видео?»
Дальше мы подробнее расскажем о том, как проводить тестирование так, чтобы финальный запуск вашего продукта был успешным.
Инструменты прототипирования
Есть более и менее удобные для прототипирования инструменты, специально созданные для него и универсальные. Здесь мы не откроем Америку, если скажем, что лучше всего для работы с прототипами подходят Figma, Sketch и InVision. Figma мы регулярно используем сами, а Sketch и InVision доверяют тысячи других команд.
Figma
Плюсы:
- Можно использовать бесплатно;
- Работает и на Windows, и на MacOS;
- Есть веб-версия;
- Удобна для командной работы;
- С помощью плагинов вроде Autoflow и Figmotion можно создавать интерактивные сценарии взаимодействия пользователей с интерфейсом и анимации окон.
Минусы:
- Ну тут даже мы бессильны в поиске минусов — Figma идеальный инструмент
Sketch
Плюсы:
- Легко создавать связи между экранами: это делается через перетаскивание векторов от одного экрана к другому;
- Понятный интерфейс;
- Можно массово редактировать типовые элементы (кнопки, векторы и т. д.) сразу на всех экранах прототипа: менять цвета, размер и прочие атрибуты;
- Есть бесплатная пробная версия.
Минусы:
- Работает только на MacOS;
- Стоимость полной версии — $99 в год и $9 в месяц.
Invision
Плюсы:
- Полностью работает в браузере;
- Удобно взаимодействовать в команде: функция Freehand позволяет рисовать, делать заметки и обсуждать проект;
- Можно быстро создавать интерактивные прототипы и воспроизводить их с помощью LiveShare.
Минусы:
- В бесплатной версии доступно создание лишь одного проекта. Тарифы начинаются от $15 в месяц.
Пара советов
- При разработке low-fidelity прототипа сфокусируйтесь на проработке userflow, сделайте взаимодействие пользователя с интерфейсом настолько понятным и комфортным, насколько это возможно. Lo-fi прототип не обязан быть красивым — он должен в первую очередь работать.
- Опять же: коммуницируйте. Обсуждайте всё, в чём сомневаетесь, даже то, что вам кажется незначительным. От вовлечённости разработчиков и самого заказчика зависят и скорость работы, и её качество.
- Если позволяют сроки, лучше сделать прототип максимально подробным и проработанным. Так на этапе тестирования вы сможете проверить больше гипотез.
- Делайте кликабельный прототип. Этот совет перекликается с предыдущим, но всё же немного о другом: можно сделать визуально подробный интерфейс, но не наделить его интерактивностью. Однако если прототип будет кликабельным, значит, он будет более приближен к реальному продукту. Следовательно, при разработке чистового проекта вы с меньшей вероятностью встретитесь с какими-либо подводными камнями: навигация будет проработана и протестирована.
Как создаются прототипы в нашей студии
- В начале было слово, и слово было бриф. Первое, что мы делаем — высылаем заказчику бриф (или он просто оставляет на сайте почту и ему приходит готовый шаблон), где просим как можно более подробно рассказать об идее, описать ЦА, конкурентов и задачи проекта, дать пожелания по дизайну и сервисами разработки.
Для описания, например, дизайна вы можете прикрепить референсы интерфейсов, ссылки на приложения/сайты, визуал которых вам нравится и т. д. В пункте про желаемые сервисы/технологии можете указать либо конкретные инструменты, либо положиться в этом вопросе на нас — мы подберём наиболее подходящие решения и обсудим с вами. После заполнения брифа мы обычно созваниваемся с заказчиком и обсуждаем детали, пытаемся лучше понять видение клиентом его продукта.
- Приступаем непосредственно к прототипированию. Сначала создаём low-fidelity прототип интерфейса со всеми основными элементами и сценариями навигации, подробно описываем его наполнение и функции, существующие в системе роли и их возможности. Дальше результат работы согласовываем с заказчиком, вносим необходимые изменения.
- Создаём high-fidelity прототип: добавляем в lo-fi набросок цвета, иконки, окна подсказок и прочие графические элементы.
- Передаём разработчику high-fidelity прототип и ТЗ с полным списком требований к продукту. В техзадании мы описываем взаимосвязь элементов, логику их работы, те результаты, которые нужно получить при взаимодействии с каждым из них. Благодаря этому у разработчика не возникает дополнительных вопросов, он точно знает, что и где нужно делать, как именно это должно работать. Таким образом, процесс разработки не затягивается и вы можете получить готовый продукт в те сроки, которые поставили изначально.
Что в итоге
Этап прототипирования, пожалуй, один из самых важных во всей разработке приложения или сайта. Правильно собранный прототип интерфейса позволяет установить рамки, не выходя за которые можно быстро и спокойно создать удобный продукт.
Чтобы узнать о сроках, ценах и возможностях разработки больше — на сайте нашей студии ZeroToOne можно записаться на бесплатную консультацию. За полчаса обсудим ваш проект, поможем рассчитать сроки, стоимость и подобрать подходящие инструменты :)
Странно что в списке нет аксуры
Безусловно, Axure больше заточена под прототипирование и имеет право быть в списке, но нам спокойно хватает и Фигмы - не стали говорить о том, с чем не работаем настолько плотно. Статья больше опирается на наш опыт, а для нас Фигма достаточно удобна, чтобы ей не изменять :)