Создание работающих прототипов веб-сайтов

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

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

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

Начинайте с бизнес-результата, а не с макета страницы

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

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

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

Отобразите путь пользователя до создания веб-прототипов

Прототип должен отражать путь, который проходит посетитель, а не просто внутреннюю структуру компании. Бизнес-команды часто организуют информацию по департаментам. Пользователи организуют свои решения вокруг вопросов: Что вы предлагаете? Подходит ли это мне? Могу ли я доверять вам? Сколько это будет стоить? Как со мной связаться?

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

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

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

Создайте иерархию информации в серых тонах

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

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

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

Используйте подстановочные метки, которые описывают реальный контент, а не общий текст, где это возможно. Написание «24/7 управляемая поддержка хостинга» более полезно, чем написание «заголовок здесь». Конкретные подстановочные метки показывают, является ли стратегия контента убедительной, повторяющейся или неполной. Они также помогают заинтересованным сторонам понять, какую информацию они должны предоставить до начала разработки.

Проектирование для принятия решений, а не для декора

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

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

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

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

Учитывайте мобильные и технические ограничения на раннем этапе

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

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

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

Обзор прототипов с правильными заинтересованными сторонами

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

Задавайте практические вопросы: Отвечает ли эта страница на первый вопрос посетителя? Очевидно ли основное действие? Какая информация отсутствует, прежде чем кто-то может связаться с нами или купить? Существует ли бизнес-правило, которое должна учитывать страница? Может ли наша команда поддерживать этот контент после запуска?

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

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

Преобразуйте одобренные прототипы в план производства

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

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

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