Как создать прототип страницы, способной выйти в топ? Правильная SEO-структура глазами SEO-специалиста
Привет, на связи Seoremica. Сегодня хочу поделиться своим опытом создания прототипов страниц в процессе SEO-продвижения. Как сделать это быстро, правильно, UI/UX ориентированно. Практический опыт с примерами прототипирования и пошаговым описанием процесса работы. Шпаргалка для работы прилагается.
Созданием прототипов конверсионных лендингов и проектированием структуры интернет-магазинов я занимался три года. Этот опыт я переношу «на бумагу». Важно отметить: я не считаю, что если один специалист выходит за рамки привычных обязанностей в SEO, каждый должен начать делать также. Прототипирование — работа маркетолога. Мне повезло, что смог получить практический опыт, который помогает в поисковом маркетинге сегодня.
Навигация по статье
Когда нужны прототипы страниц?
Опытный SEO-специалист без труда сможет проанализировать страницы сайтов-конкурентов и выделить повторяющиеся элементы, оценив их значимость в рамках оптимизации сайта. Как правило, самые ценные элементы ложатся в основу On Page SEO.
On Page SEO — это улучшение отдельно взятой страницы сайта. Касается это контента, визуального оформления и кода. Улучшение страницы приводит к росту ее видимости по ключевым запросам. С помощью on page seo можно затащить продвигаемую страницу в ТОП.
Далее информация, полученная в ходе исследования, должна быть отражена в техническом задании, что и станет итогом эффективной работы SEO-специалиста.
Проблема заключается в том, что одно и то же техническое задание на практике может быть реализовано десятью различными способами. Нет никакой гарантии, что выбранный способ будет оптимальным и самым удачным.
Поэтому я предпочитаю дополнить описание предлагаемых доработок прототипом — в нем я отражаю все, что хочу увидеть на продвигаемой странице.
Когда SEO-специалист, владелец сайта и привлечённые к доработкам технические специалисты видят одну картину — получить нужный результат становится намного проще и быстрее. Любой другой сценарий приводит к непредсказуемым результатам.
В подтверждение своих слов подобрал три интернет-магазина одной тематики (все книжные). Предлагаю сравнить, как могут выглядеть товарные карточки ИМ, соответствующие следующим десяти требованиям:
- Отображается наличие на складе;
- Представлена актуальная цена;
- Представлена информация о доставке;
- Добавлены рейтинг и отзывы о товаре;
- Указан автор и издательство;
- Доступна для просмотра обложка книги;
- Добавлено описание к книге;
- Добавлен код товара;
- Реализован функционал скидок;
- Реализована кнопка «в корзину».
А вот страницы соответствующие требованиям:
Получившиеся страницы такие разные и если примеры вы рассмотрели внимательно, могло показаться, что на одной из товарных карточек нет функционала рейтинга. На самом деле, он реализован через дополнительную вкладку и спрятан от любопытных глаз таким вот образом:
У всех трех товарных карточек различная статистика, конверсия, позиция на поиске и визуальное оформление. А как правильно?
Вообще, конверсия и результаты зависят от стратегии и тактики маркетологов и SEO-специалиста. Реальные цифры позволяют оценить эффективность выбранных решений.
Чтобы гениальная задумка на 100% совпадала с результатами — нужны прототипы. Без них вы не можете быть уверены, какой из трех вариантов увидите перед собой в итоге. Каждый выполнен по ТЗ.
Правильным будет вариант, показывающий лучшие результаты или, как минимум, закрывающий задачи бизнеса.
Считаю, что точность реализации рекомендаций особенно важна для SEO-специалиста. Поэтому поднимаю тему работы с прототипами в этой статье.
Умение эффективно реализовать хорошую идею отличает практикующего маркетолога от теоретического специалиста. И первые, и вторые рынку нужны.
Переходим к реализации.
Где я создаю прототипы?
Сегодня инструментов для создания прототипов масса, я же рассмотрю самый простой и, по моему мнению, самый удобный инструмент для закрытия внутренних задач.
Функционал Wireframe.сс интуитивно понятен. Немного не хватает палитры инструментов для оформления, но с опытом находишь простые решения. Иконок для обозначения внутри инструмента достаточно.
Я получаю возможность демонстрировать проект по ссылке или скачивать его в PDF или PNG.
Как работать в Wireframe.сс?
Все управление происходит с помощью мыши. Просто по клеткам создаем геометрические фигуры и размещаем их в нужном порядке, последовательности и слое.
Удобно визуализировать и «адаптивную верстку», просто сменив макет:
Весь функционал для создания прототипа появляется как только вы нарисуете нужную вам фигуру и отпустите левую кнопку мыши:
Описанных мной действий уже будет достаточно, чтобы начать пользоваться сервисом.
Первые 7 дней бесплатно (перерегистрацию с новой почты никто не отменял). Для комфортного использования: 16$ в месяц (или 1234 рубля по текущему курсу).
Сколько времени требуется на создание прототипа?
На создание простых скетчей у меня уходит 5-10 минут. Это особенно актуально, когда быстрее визуально показать, что я хочу увидеть на сайте, чем объяснить это словами.
При создании подробных прототипов могу провести за работой несколько часов. Это сложный процесс правильного расположения всех необходимых элементов на странице, учитывающий удобство для пользователя и визуальное восприятие.
Обучался прототипированию я у действующего специалиста и еще несколько лет работал в связке с дизайнером интерфейсов. Где и как прокачать нужные скиллы этой статьей не отвечаю. Рассчитываю, что у вас есть личный опыт, но одной шпаргалкой поделюсь (осторожно, это якорь в конец статьи).
Первый вопрос, на который предстоит ответить:
На сколько профессиональными получаются прототипы?
Хотя профессионализм определяется опытом и навыками специалиста, попробую найти подходящее определение.
Профессиональный прототип — это работа, которая позволяет быстро донести идею до дизайнера, технического специалиста и команды. А точная реализация проекта по прототипу не приведет к ошибкам и негативным последствиям.
Исходя из своего же определения, wireframe.сс работать профессионально позволяет. Кстати, удачная визуализация и анимирование товарных карточек в статье о конверсии были выполнены по прототипам wireframe.
Как прототипы упрощают работу с дизайнерами?
Работая над статьей о конверсии, я понимал, что визуализация предложенных идей — определяющий фактор успеха. В такой работе текст лишь дополняет содержание анимации, а не наоборот.
Можно бесконечно правильно и точно описывать функционал работы каждого блока, но пока описанное не будет реализовано на практике, идеи остаются красивой теорией.
Дизайнер, как и любой специалист, вправе интерпретировать описанное в техническом задании по своему. Моя задача (как и задача любого SEO-специалиста) — правильно донести идею, чтобы все участники рабочего процесса видели одинаковую картинку. Прототипы с этой задачей справляются лучше всего.
Упрощение — естественное желание любого специалиста. Для выполнения сложных задач требуется высокая детализация и подробные инструкции.
Показываю живое техническое задание для дизайнера из Google Docs, которое составлял для визуализации собственной статьи:
По прототипу был отрисован и анимирован следующий блок, который я предлагаю вам оценить:
Уверен, что без опоры на прототип результат отличался бы от текущего и был менее реалистичным.
Это простой пример работы с небольшим элементом структуры посадочной страницы. Кстати, некоторые идеи улучшения конверсии товарной карточки я применил на клиентском проекте, получился неплохой SEO-кейс с ростом трафика на 4300%.
Проработка полноценной страницы сайта
С wireframe.сс я решаю и более объемные задачи: от проектирования отдельных страниц, до постраничной проработки интернет-магазина.
Многие задачи, которыми хотелось бы поделиться, находятся в работе и публиковать прототипы до финального релиза будет неправильным. Однако некоторые работы с детализацией показать могу.
Пример прототипа сайта компании, занимающейся металлоломом. За основу была взята структура посадочной конкурента из другого региона, а далее SEO-рекомендации были дополнены визуальными прототипами.
Промежуточный результат визуализации при работе дизайнера по предложенному прототипу:
Как SEO-специалисту использовать wireframe в работе?
Для простейшей визуализации. Схематично показать, где необходимо расположить кнопку и как SEO-специалист видит реализацию своей рекомендации.
Например, за пару минут показать, как может выглядеть блок «бесплатный замер» на сайте:
Или показать, как может быть реализована перелинковка между услугами или товарами:
Wireframe позволит детально визуализировать работу корзины, так появляется возможность улучшить каждый ее шаг и исправить самые частые причины «брошенной корзины» и другие логические ошибки.
Детально проработать страницу сайта или товарную карточку:
Область применения ограничивается только актуальными задачами специалиста и его коммуникацией с участниками рабочего процесса.
Как учитывать UI/UX при прототипировании?
Вопрос юзабилити самый дискуссионный. Любую идею и прототип можно раскритиковать, правым окажется тот, за кого по итогу будут говорить цифры.
Безусловно область UI/UX — это большая область маркетинга и серьезная аналитика, выводами которой нам всем посчастливилось пользоваться. Для профессиональной работы этому необходимо учиться.
Однако я хочу поделиться шпаргалкой, которой пользуюсь сам при прототипировании страниц. Она простая по своей логике, но мне, как SEO-специалисту, позволяет сделать правильные выводы о приоритете расположения элемента на странице.
Таблица для проектирования структуры — SEO-шпаргалка
Эта табличка-шпаргалка доступна также по ссылке на Google Docs.
Объясню логику работы с таблицей. Даже если большого опыта в проектировании структуры страниц сайта нет, она способна помочь не упустить главное.
Полезно привлекать к ее заполнению владельца сайта, получите немало ценных и неожиданных комментариев.
В ней всего пять пунктов.
В первый столбец выписываем все «находки» с сайтов-конкурентов, все текущие элементы страницы и пожелания заказчика. Таким образом у вас формируется полный перечень элементов, которые необходимо учесть в прототипе.
Во втором столбце словами прописываем итоговую цель использования элемента. Сразу становится понятно, насколько важен этот элемент, влияет ли он на продажи, и какую пользу он вообще может принести бизнесу.
В третьем столбце описываем, что идет вместе с этим элементом. Так мы закладываем в элемент дополнительный функционал и логику взаимодействия с другими блоками на странице.
В четвертом столбце выставляем приоритет элементу. Логику оценок определяете для себя сами. Привожу классический вариант приоритетности:
- Высокий — влияет на принятие решения и конверсию;
- Средний — помогает в навигации, не влияет на конверсию;
- Низкий — не помогает в навигации, не способствует продажам.
В пятом столбце словами прописываем куда добавим элемент, основываясь на его приоритете и ранее заполненных пунктах.
Такая табличка позволяет избежать серьезных ошибок и заложить в структуру страницы все значимые элементы и нужный функционал, которые становится проще отразить в прототипе. С этим согласитесь?
Выводы
К проектированию структуры, как SEO-специалист, я прибегаю часто. Это важная часть SEO-аудита и ежедневный рабочий процесс. Даже ответить на вопрос мне порой проще с помощью скетча. Возможно, это мои привычки и особенности работы. А, быть может, требования к специалисту растут и скоро создание прототипов станет еще одним важным навыком при работе с сайтом. Что думаете об этом?
Этим я хотел поделиться с вами сегодня. Не скрою, буду рад видеть вас среди подписчиков в своем SEO блоге на vc. Это мотивирует писать чаще и лучше!
Предложить дополнения к материалу или обсудить со мной задачу по SEO можно в Telegram: https://t.me/seoremica
Увидимся в комментариях к материалу! Стараюсь отвечать на каждый.
Делаю прототипы в draw.io
Но не детальные, а показываю блоки (с текстом для них и пояснениями) + таблица с анализом элементов страницы у топовых конкурентов (отобранных по ряду критериев) + список этих конкурентов.
Такой подход не ограничивает полёт фантазии дизайнера и одновременно уменьшает кол-во правок.
Создавать "настоящие" прототипы? Возможно, если дизайнер неопытный. Но так можно вообще всех заменить собой )
Кстати, сейчас принято начинать проектировать с мобильного варианта.
Легендарная картинка из времен, когда я ещё занимался шаблонами. Пришла заказчица. Час возбужденно орала мне в ухо, рисовала шаблон на бумажке. В интерфейсе подразумевалась выезжающая панель с анекдотами и музыкой (сайт об авиационном текстиле, чистый b2b), а под занавес мощным тычком сломала мою ручку об этот вот "прототип". Картинка прилагается.
Я после этого веб-диз бросил.
В draw.io не работал, по-моему, удобно?
Полёта фантазии я немного опасаюсь, поэтому прошу важные мне блоки выполнять по прототипу. Но специалистам, с которыми работаю, доверяю. Часто дизайнер находит решение лучше, чем было предложено в прототипе. Это всегда классно )
Я замечаю, что все профессионалы выходят за рамки стандартного набора функций. Это вопрос личного интереса, скорее, узнать что-то новое.
С дизайнерами общался, говорят, что по прототипу удобнее рисовать. В разы меньше правок и доработок. И можно сослаться на прототип всегда )
Проектирование с мобильного варианта я не начинаю — на практике это вообще отдельная версия. Что-то удаётся заадаптивить в блоках из полной версии сайта, но чаще требуется отдельный анализ. Версии могут заметно отличаться и закономерности будут разными. В этом случае не важно с какой из них начинать, потому что требуется выполнить обе.
Спасибо, полезно.
Я по старинке использую наработки копирайтера, почёрпнутые у Д.Кота в "Шпаргалке для копирайтера" - книжица оказалась очень полезной в качестве пособия по структуре продающих страниц, от лендингов до товарных категорий. Нечто типа "Оффер с УТП - CTA - социальные доказательства - ...".
А вот дальнейшие правки и проработка блоков - тут уже нужны необщие данные, и одной текстовой структурой и картинками не обойтись.
У Кота действительно все доступно написано. Не знаю, почему в работе не прижилось у меня, но информация действительно подана интересно.
Спасибо за обратную связь, Виктор!
Прототипирование приближает seo к проектированию структуры контента/блоков на странице.
Считаю, что прототипирование сейчас обязательно. А проги: adobe xd, figma. Общепринятые, удобные инструменты. Если wireframe также удобен, с точки зрения шэринга и комментирования, то стоит попробовать.
Мне кажется, процесс комментирования в wireframe от идеала далёк, но мне позволяет сэкономить время на работе. Для меня лично это золотая середина.
Согласен с вами, что прототипы сегодня должны быть. Но вопрос дискуссионный, многие могут посчитать, что происходит перекладывание обязанностей с маркетологов на SEO-специалистов. Хотя современные реалии требуют знаний во всех смежных областях.