Прототипирование сайта

Прототипирование – это схематический «дизайн» сайта. Является первый шагом к созданию сайта

Прототипирование определяется как черновая реализация функциональности веб-портала.

Зачем нужен прототип сайта

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

На этапе прототипирования определяется путь клиента, создается воронка продаж, тестируется юзабилити (удобство) сайта, что в дальнейшем облегчает SEO-продвижение сайта.

Задачи прототипирования

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

• Коммуникация. В данном случае прототип – это канал общения между разными группами людей, которые участвуют в создании интернет ресурса.
• Доработка и проектирование. Улучшение или радикальная переработка существующего портала, разработка дополнительных модулей сайта.
• Продвижение идеи своего проекта. Прототип позволяет представить и донести до целевой аудитории особенности концепции вашего проекта.
• Тестирование удобства использования. Основное назначение прототипа– тестирование удобства системы. Это одна из основных целей создания прототипа.
• Оценка технической осуществимости и стоимости. Прототип может помочь определить возможность создания нужной системы, сайта и затраты на его реализацию.

Важность прототипа при создании сайта

Прототип является фундаментом для дальнейшей разработки сайта. Этап создания прототипа важный во всем процессе разработки сайта:

1. Прототип создается на основе анализа продукта, целевой аудитории, конкурентов, поэтому вложенные в него идеи важны с точки зрения маркетинга.
2. Бизнес-процессы и структура компании должны быть отражены на сайте. Сделать это можно на этапе прототипирования.
3. На этапе проектирования определяется наполняемость сайта фото и видео материалом. Это дает возможность определить количественные и качественные показатели медийного контента и запланировать фото и видео съемки.
4. Сокращается процесс согласования проекта и внесения правок в прототип.
5. В проекте могут принимать участие любое количество сотрудников, достаточно предоставить им онлайн-доступ к прототипу. При добавлении возможности комментирования, можно собрать разностороннее мнение профильных специалистов.

Методы прототипирования

В зависимости от выбранной модели и целей создания прототипа выбираются инструменты и методы прототипирования. Выделяют следующие методы создания прототипа:

1. Бумажное прототипирование.
2. Прототипирование при помощи специальных программ.
3. Прототипирование при помощи графических программ.

У каждого метода свои особенности и области применения.

Прототипирование на бумаге

Бумажное прототипирование – это самый простой и быстрый метод создания прототипа сайта. Для него не требуются специальные знания и инструменты, но при этом позволяет создавать детализированные прототипы.

Существенными недостатками являются:

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

Данный метод эффективен при создании относительно простых сайтов с небольшой командой разработчиков.

Прототипирование при помощи специальных программ

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

Программы для персонального компьютера (офлайн вариант): Balsamiq Mockups, Axure RP и др.

Облачные сервисы: Figma, Wireframe.cc, Moqups.com

Преимущества использования специальных программ и сервисов:

• Высокая скорость создания прототипа
• Высокая детализация и эстетичный вид прототипа
• Интерактивность интерфейса
• Скорость внесения изменений.
• Доступность для всех участников разработки проекта, при условии использования облачных сервисов.
• Возможность просмотреть результат в браузере.

Недостатки специальных программ и сервисов:

• Необходимость освоения соответствующей программы
• Высокая стоимость для версий на ПК и наличие ежемесячной абонентской платы для облачных сервисов.
• Многие сервисы не имеют бесплатных тарифов для небольших проектов.

Прототипирование при помощи графических программ

Графические редакторы, которые используются для создания прототипа: Photoshop, CorelDraw, PhotoPaint, Illustrator и др.

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

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

Метод подходит под несложные прототипы, где делается акцент на графическое представление.

Этапы прототипирования и виды прототипов

Предварительный анализ

Анализ продукта и компании

Прежде чем приступить к созданию прототипа, в первую очередь необходимо провести анализ самой компании.

Какая информация важна при разработке сайта:

• Статистика компании по услугам, товарам, в том числе и по отказам
• Статистика по отзывам и жалобам
• Этапы оказания услуг, продажи товаров и доставки
• Какие преимущества есть
• Какие выгоды от сотрудничества предлагаете
• Какие гарантии предоставляете
• Цель создания сайта – от этого зависит вид будущего сайта.

Основная задача – найти «Уникальное торговое предложение». Т.е. ответить на вопросы: «Чем вы лучше конкурентов?», «Почему клиент доверит вам деньги?» и др.

Анализ целевой аудитории

Вторым шагом на данном этапе будет составление портрета покупателя.

Очень важно определить следующие параметры:

• Возрастная группа
• Уровень доходов целевой аудитории
• Социальный статус
• Преобладание женщин или мужчин среди покупателей
• Семейное положение

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

• Тематические форумы
• Социальные сети конкурентов
• Ключевые запросы в Яндекс Wordstat и подсказки Google
• Отзывы на специализированных сайтах
• Видеоролики на YouTube и других площадках

Полученные сведения лягут в основу разработки макета и дальнейшего дизайна сайта.

Анализ конкурентов

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

Таким образом, в списке будут топовые конкуренты.

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

Проведите глубокий сравнительный анализ сайтов конкурентов на наличие общих блоков, структуры и уникальных «фишек», которые помогают им занимать 1-ю страницу поисковиков, насколько подробно и понятно расписана услуга.

Более подробно анализ конкурентов мы рассмотрим в статье Анализ конкурентов и семантическое ядро (статья в разработке)

Предварительное прототипирование

На основе полученных данных из предыдущего шага рисуется примерный эскиз – прототип с низкой детализацией.

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

Прототип с низкой детализацией помогает перенести идею в цифровой вариант и согласовать начальный объем работ.

Он не содержит контента — это макет с примерным представлением блоков в виде геометрических фигур.

Особенности разработки прототипа или что и куда поместить.

• Не размещайте блоки на несколько экранов – посетитель может забыть, что он читает.
• На каждой странице должны быть контакты – вверху и внизу. Причем, предоставьте клиенту несколько способов связи.
• Если есть офис или магазин, то должна быть карта с возможностью проложить маршрут.
• Укажите режим работы – дни недели, обед.
• Обязательно должны быть реквизиты компании — ИНН, ОГРН, юридический адрес, наименование, расчетный счет. Это публичная информация, но размещая ее на сайте вы увеличиваете доверие посетителей.
• Размещайте блоки в порядке важности и ценности, сначала важные. У вас есть несколько секунд, чтоб заинтересовать посетителя, иначе он закроет сайт.
• Первым блоком, обычно, помещают «Наши преимущества». Но заголовок должен быть другим, «Наши преимущества» — это слишком банально, проявите креатив.
• При выборе порядка размещения блоков ориентируйтесь на путь клиента – сначала он выбирает качественный сервис, потом услуги или товар, затем стоимость и, в случае успеха, оставляет заявку, либо ищет как добраться до магазина.
• На каждой коммерческой странице должен быть блок «Оставить заявку». Если страница содержит много блоков, то добавьте дополнительный блок «Написать нам» или «Заказать услугу».
• Пользователи ожидают, что меню находится сверху на каждой странице. Не проявляйте креатив, иначе пользователи не смогут найти нужное и уйдут разочарованными.
• Главная страница должна раскрывать 80% информации о компании и услугах. Но не нужно выкладывать все, иначе клиент потеряется в изобилии сведений. Практичнее, когда каждый блок имеет ссылку на основную страницу для уточнения деталей или заказа услуги/товара.
• Более детальная информация, характеристики товара, спецификация услуг и т.п. располагается на остальных страницах 2-го уровня.
• Не усложняйте поиск информации для клиента, помните о правиле «3-х кликов». Абсолютно любая информация на сайте должна находится на расстоянии 3-х кликов. Не более 5% пользователей совершают глубокий поиск по сайту.
• Важная информации размещается слева. Например, для товара, это его изображение. Для вакансии – требование к соискателю. В данном вопросе, также не стоит проявлять креатив.
• Оставьте место под тэги или дополнительные ссылки на внутренние страницы.
• Регулируйте размер кнопок и блоков, не делайте слишком мелкие и слишком крупные.
• Выделяйте конверсионные кнопки цветом и размером. «Купить», «Заказать», «Забронировать» и т.п. должны привлечь внимание посетителя, но на одном экране должна быть одна кнопка призывающая к действию.
• Адаптивная верстка. Прототипов должно быть два – для десктопной версии и для мобильной.
• Если возникают проблемы с размещением блоков на мобильной версии, удаляйте маловажные элементы. Обычно мобильная версия упрощается ради удобства.

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

Не важно нравится сайт вам, вашим друзьям или родственникам. Он должен понравится и быть удобным для клиентов.

Детализация прототипа

После утверждения низко детализированного прототипа переходят к проработке деталей.

Прорабатывается каждый блок. Заполняются все заголовки, надписи, меню, ссылки. Образы заменяются картинками. Прорисовываются мелки элементы, такие как «добавить в избранное», «скидки» и т.п.

Некоторые моменты детализации:

• Все надписи должны иметь окончательное значение. Переименование меню, кнопок и других элементов не допускается на следующем этапе – разработке дизайна.
• Каждый заголовок должен нести ясность. Не откладывайте придумывание заголовков на этап написания контента. Слишком длинные заголовки могут испортить верстку, а короткие создадут лишние пустоты.
• При проработке блоков, помните, сплошной текст люди не читают. Абзацы должны быть из 2-3 предложений. Между блоками добавляйте пропуски.
• Если абзац сложный – разбейте его. Когда текста много, добавьте картинки.
• Интерфейс должен быть одинаков на всем сайте. Если решили добавить кнопкам тень и объем, то на сайте добавьте тени и объем всем кнопкам.
• Каждый законченный блок должен содержать заголовок h2.
• Если блок сложный и содержит много дополнительной структурированной информации – разбейте ее на части, и озаглавьте каждую тегом h3.
• Используйте высокую детализацию каждого блока. Например, для иконок используйте реальные иконки из библиотеки программы. Окончательный вариант подготовит дизайнер.

Добавление интерактивности

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

На нем сложно проработать путь клиента, протестировать динамичные элементы.

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

Интерактивность позволяет:

• Нажимать на кнопки, отследить отображение наведенных и нажатых элементов
• Переходить по внутренним ссылкам
• Вызывает всплывающие окна
• Раскрывает меню

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

Это финальный этап прототипирования. После согласования интерактивный макет передается дизайнеру.

Когда к работе приступает дизайнер, внесение изменений в прототип не допускается.

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

Инструменты для создания прототипа

Количество программ для создания прототипа на 2022 насчитывается более 50, часть из них приложения для компьютера, другая – облачные сервисы.

Что выбрать – приложение или сервис? Для этого, сначала надо посмотреть на отличительные особенности:

Десктопные версии.

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

Облачные сервисы.

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

Balsamiq Mockups как пример десктопного приложения

Какие преимущества на наш взгляд:

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

Из недостатков отметили бы следующее:

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

Figma — лучшая альтернатива облачному сервису

Порядка 80% фрилансеров и 50% веб-студий используют Figma. И при заказе разработки сайта, на согласования будет предоставлен макет на Figma. Поэтому, данный сервис стоит хотя бы поверхностно изучить всем, кто каким-либо образом связан с разработкой сайтов.

Плюсы

• Есть бесплатный тариф с доступом ко всему функционалу. Ограничение – не более 3-х проектов на аккаунт и для одного пользователя. Идеально подходит для самостоятельного проектирования и для начинающих дизайнеров, когда заказов мало.
• Не требуется дополнительное программное обеспечение для дизайна. Он создается в Figma, причем на основе разработанного прототипа. Только не забудьте сделать копию оригинала.
• Огромное количество плагинов и виджетов. Библиотека постоянно пополняется энтузиастами.
• Служебные плагины, настраивающий интерфейс и увеличивающие функционал Figma, облегчают работу дизайнер и проектировщика.
• Возможность точной настройки интерактивности, вплоть до дизайна элементов по наведению курсора.
• Точная настройка размеров, позиционирования и сеток.
• Точная визуализация страниц.
• Возможность предоставлять удаленный доступ клиентам к проекту для ознакомления. В том числе и на бесплатном тарифе.
• Возможность создавать «классы» для цвета, настройки шрифтов.

Минусы

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

Некоторые советы:

• Прежде чем приступить к прототипированию, создайте bootstrap-скую сетку, состоящую из 12 колонок с зазором между ними.
• Если не хватило 3 бесплатных проектов, зарегистрируйтесь под новым аккаунтом google.
• При прототипировании используйте компоненты при создании элементов. На следующем этапе дизайнер будет работать только с ними, а копии, расположенные на страницах, автоматически поменяют внешний вид.
• Обязательно ознакомьтесь с уроками по Figma. Много полезного контента на YouTube.
• Figma не подходит для создания схемы сайта. В этом случае советуем воспользоваться бесплатной программой XMind.

Прототип Mobile Platform — как пример авторитетного сайта с тщательной проработкой.

Список литературы:

1. Варфел Т. «Прототипирование. Практическое руководство» / ТоддЗакиВалфел; пер. с англ. И. Лейко. – М.: Мани, Иванов и Фербер, 2013. – 240 с
2. «Ководство» Артемий Лебедев
3. Алан Купер, Роберт Рейман, Дэвид Кронин «Алан Купер об интерфейсе. Основы проектирования взаимодействия»

Авторитетные ресурсы

1. Википедия. Что такое прототип
2. Журнал MDPI — https://www.mdpi.com/2073-4441/7/2/780
3. Независимое издание для дизайнеров — https://uxdesign.cc/

Автор материала: Моисеенко Роман Александрович

Дата публикации: 07.09.2022

Авторское право. Полное или частичное копирование материала запрещено.