Прототипы сайтов: зачем нужны и как их создавать

Прототип сайта — это упрощённая модель будущего ресурса. Можно сказать, что это набросок, эскиз.

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

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

Вот что может быть на прототипе:

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

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

1. Визуализация идеи. Любой сайт делается для чего-то, у него есть цель. Например, ресурс для студии маникюра помогает вести рекламу, привлекать новых клиентов и давать им возможность записываться на процедуру. На цель накладывается идея, то есть видение будущего сайта. Для  той же студии маникюра можно определить, где будут находиться примеры работ, фото и рассказы о мастерах, форма записи на процедуры.

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

3. Экономия средств. Прототип делается во много раз быстрее и дешевле готового рабочего сайта, но справляется с задачей поиска и исправления ошибок ничуть не хуже. Например, сравнив прототип дизайна сайта с ресурсами ближайших конкурентов, можно понять, что не хватает важных блоков и буквально за пару часов добавить их. Если бы сайт был полностью свёрстан, это потребовало бы нескольких дней.

4. Тестирование UX (пользовательского опыта — User Experience). Прототип сайта должен не только нравиться заказчику, но и быть удобным и понятным для будущих клиентов компании. Поэтому часто такие схематичные продукты проходят тестирование, когда выявляются потенциальные проблемы, недопонимания, неудобства для пользователей. Прототипы помогают позаботиться о конверсии сайта ещё до его запуска.

Таким образом, прототипы помогают всем, кто работает над сайтом:

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

• дизайнеру — понять задачу, создать эффективный и красивый интерфейс, получить обратную связь от заказчика, избежать недопонимания;

• веб-разработчику — прототипы дизайна сайта помогают понять структуру и логику работы ресурса, определить технические требования и решения, согласовать работу с дизайнерами и избежать ошибок и «костылей» в коде.

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

• Прототипы низкой детализации (вайрфреймы, от англ. wireframes) — это самые простые эскизы, «каркасы», обычно не содержащие контента. В них даже могут отсутствовать подписи на кнопках и пунктах меню. Вайрфреймы нужны, чтобы быстро «схватить» идею и зафиксировать порядок расположения блоков сайта.

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

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

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

• Статичные — это просто картинки в формате веб-страниц на десктопе или мобильных устройствах. Кнопки на них не нажимаются, а переходов между страницами нет.

• Интерактивные — прототипы, способные реагировать на действия пользователей, например открывать всплывающие окна, другие страницы, выдавать различные оповещения.

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

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

• повышение узнаваемости бренда — презентация торговой марки через донесение её УТП, миссии, ценностей, истории компании;
• сбор лидов — получение контактов от заинтересованных пользователей, и они далеко не всегда становятся клиентами;
• презентация новинки — рассказ о новом продукте без его прямой продажи, с акцентом на информирование.

Каждая из этих целей будет влиять на структуру и содержание будущего сайта.

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

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

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

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

Создать прототип и сайт на его основе несложно, особенно если вы используете конструкторы. Но чтобы страница успешно привлекала клиентов, нужно следовать правилам. Не помешает экспертная оценка, проверка слабых мест, рекомендации, над чем стоит поработать. К счастью, это можно устроить быстро и недорого. Хотите подготовить страницу к продвижению — воспользуйтесь аудитами Точка Рекламы.