Прототип сайта: ответственность на заказчике или исполнителе?

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

Прототип сайта: пример из нашего инструмента structura.app

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

И как мы уже выяснили, каждому из тех, кто работает в вашей компании, может быть по силам создать такой прототип. Но отрывать сотрудников от своих прямых обязанностей, чтобы что? Неужели нельзя обойтись без схематичности и объяснить дизайнеру свою идею на пальцах?

Почему прототипы — это важно

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

Идея сайта на пальцах

Всё просто: кидаешь ссылку на созвон дизайнеру, а затем в выделенное время объясняешь свою концепцию или показываешь рисунки разных частей сайта (хорошо, если их будет больше одного).

Плюсы

• Не нужно обучаться новым навыкам
• Не нужно тратить деньги
• Быстро получаешь обратную связь

Минусы

• Не всегда получается донести мысли максимально ясно
• Рассказ или рисунок ограничены твоим воображением
• Всё, что не досказано, может домыслиться уже не тобой и не в твою пользу

Реальный прототип

Открываешь специальный инструмент и создаёшь структуру сайта. Тебе в помощь тексты, цвета, шрифты, изображения и анимация. Всё, что позволит отобразить прототип сайта максимально точно.

Плюсы

• Все детали видны сразу
• Ты можешь использовать разные виды визуализации
• Именно здесь появляется возможность показать функциональность и юзабилити

Минусы

• Это не бесплатно
• Приходится разбираться в новых инструментах
• На создание хорошего прототипа уходит много времени

Итог

Решение, кто победил в баттле, обычно принимают наблюдающие за баттлом. Примите своё решение и вы 🙂

На ком ответственность за подготовку

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

Заказчик делает прототип сам. Если проект небольшого размера и простой по функциональности, заказчику будет по силам справиться с этим самостоятельно.

+ В этом случае он полностью сможет контролировать процесс и будет готов отвечать на любые вопросы по созданному прототипу.

– Но если нет знаний по технической части и не будут учитываться тренды, разработка будет долго стоять на месте в ожидании согласования проекта целиком.

Прототипом занимается исполнитель. Отличный вариант, когда проект уже посерьёзнее, а у исполнителя есть опыт в этой сфере. Тогда от заказчика запросят только ТЗ, в котором будут присутствовать цели, задачи, ЦА, конкуренты, желаемые функциональность и структура, а также предпочтения по дизайну.

+ Исполнитель сможет поставить чёткие сроки и придерживаться их. А сам сайт будет полностью функциональным.

– При этом видение исполнителя может отличаться от того, что представлял заказчик. И каждая итерация правок — это дополнительные расходы для заказчика.

Заказчик и исполнитель совместно работают над прототипом. Редкий, но всё-таки возможный случай. И заказчик, и исполнитель полностью погружены в процесс. Оба знают о статусе проекта в любой момент времени.

+ Постоянная обратная связь — это шикарная возможность учесть все детали и сделать проект максимально классным.

– Но на погружение в проект требуется много времени: постоянные созвоны и обмен идеями не укладываются в 15 минут раз в месяц. А ещё обе стороны должны доверять друг другу, а это гарантировать не получится.

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

+ Опытный аутсорс может иметь в портфолио так много прототипов, что очередной заказ не будет его смущать и заставлять передвигать другие проекты.

– При этом есть риски срыва сроков (даже если со штрафами), дополнительные расходы на правки и возможные нарушения авторских прав и безопасности данных — ведь здесь не предполагается полное погружение в сферу заказчика.

Чек-лист к началу работы

Можно запомнить только эти четыре слова

Прежде чем выбрать ответственного за прототип, сначала учтите следующие моменты:

• Насколько сложным будет сайт. Как много деталей он должен содержать, какого характера функциональность вы от него будете ждать. Чем навороченнее проект, тем больше рисков. А риски лучше делегировать профессионалам.
• Сколько вы готовы выделить времени и денег. Здесь не получится сделать точные расчёты, потому что там, где работают люди, всегда есть место для вероятности. Например, если вы решите сэкономить деньги и сделаете прототип самостоятельно, он может оказаться нерабочим, и всё равно придётся заплатить исполнителю. А если передадите ответственность за прототип сайта на исполнителя сразу, не факт, что сэкономите много времени: иногда работа с правками — это самый затяжной этап проекта.
• В чём вы уже хорошо разбираетесь. Если есть опыт в веб-разработке, хорошо знакомы с дизайном и понимаете важность юзабилити, можете самостоятельно сделать прототип сайта или взять на себя только знакомую часть работы в этом процессе. Будьте честны с самим собой, и тогда есть шанс потратить меньше и времени, и денег.
• Как выглядит процесс создания прототипа. Если вы посмотрите пару видео на YouTube и прочитаете несколько статей с описанием процесса и кейсами компании с уже готовыми проектами, будете лучше понимать, чего можно ожидать при работе с вашим прототипом.

Выбираем лучший инструмент

Сейчас есть варианты под любой объём задач и уровень креативности. Среди них есть и бесплатные, которые полностью могут подойти под вашу идею.

Бумага и ручка. Начнём с очевидного. Они всегда под рукой и готовы выручить, когда нужно быстро набросать свою концепцию. Но как мы уже узнали во время баттла, такой подход ограничен вашим воображением. И, конечно, ни о какой интерактивности речи идти не будет. Ещё одна сложность появляется тогда, когда нужно оцифровать нарисованное от руки.

PowerPoint, Word, Excel. Такие программы могут быть установлены по умолчанию почти на любом устройстве, поэтому если это ваш случай, вы за короткое время сможете сделать схематичный каркас своего сайта и добавить к нему текст, изображения, графики и ссылки.

Но это базовые офисные инструменты, изначально созданные не для прототипов сайта, поэтому рекомендую их использовать только в крайнем случае.

Онлайн-сервисы. Отдельные инструменты, ориентирующиеся на создание прототипов в реальном времени. Нет нужды в установке отдельной программы, достаточно зайти на сайт и создать свой прототип с теми возможностями, которые доступны в этом инструменте.

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

В NinjaMock (от 5$), Moqups (от 9$) и Figma (от 12$) можно сделать wireframes и mockups. Эти инструменты также позволяют делиться проектами с другими пользователями.

А Sketch (от 10$), Adobe XD (от 16 000 рублей за лицензию), Axure (от 25$) и Balsamiq (от 9$) позволяют создавать все три вида прототипов, о которых я говорил выше, при этом у них есть возможность тестировать готовый прототип на разных устройствах.

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

В Structura.app можно создавать прототипы сайтов онлайн и на выходе получать готовое ТЗ сайта сразу в нескольких форматах: DOCX, PDF, PNG. А ещё это совершенно бесплатно — не только в определённый период, а вообще всегда (платно, если у вас больше одного проекта, но вместе с промокодом PROTOTYPE будет дешевле). Мы — российский сервис, поэтому оплата возможна российской картой.

Одноминутное видео с демонстрацией работы нашего конструктора

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

Установить оффлайн можно Sketch, Adobe XD, Axure и Balsamiq.

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

Подходящие для таких целей инструменты: Trello, Asana, Miro и sBoard (но в первых трёх тоже будут свои сложности с оплатой).

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

Без этого не стоит начинать работу

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

1. Желательно начать делать прототип сразу после того, как вы полностью сформировали идею в голове. Тогда у вас будет время на исследование и тестирование сайта. И если понадобится что-то править, аврала не случится.
2. Нужно фокусироваться на конкретных данных, а не на гипотезах. Ваш сайт — это то, чем будут пользоваться люди, поэтому подготовьте аналитику, проведите исследование, создайте опрос среди уже существующих клиентов, чтобы понимать, за что люди готовы будут заплатить.
3. Важен не только внешний вид, но и функциональность. Потенциальных покупателей не должны отпугивать неработающие кнопки и уж слишком креативные формы для заполнения.
4. Не нужно бояться нескольких итераций прототипа. Даже если кажется, что вы уже полностью сформировали готовый проект в голове, анализ трендов и обсуждение с профессиональной командой может подкинуть вам ещё несколько идей или исключить некоторые из существующих.
5. Увидеть прототип должны и другие люди тоже. Не обязательно платить всем, чьё мнение вам важно, но попросить оценить или дать обратную связь просто необходимо. Не получится держать проект в вакууме. Ведь чем больше вы узнаёте — тем лучше результат.

Выбирайте свой подход в создании прототипа, особенно не беспокоясь о правильности решения. Ведь как мы выяснили, одного правильного решения не существует. Есть только то, которое подходит под ваши текущие задачи сейчас.