Как создать прототип страницы, способной выйти в топ? Правильная SEO-структура глазами SEO-специалиста
Привет, на связи Seoremica. Сегодня хочу поделиться своим опытом создания прототипов страниц в процессе SEO-продвижения. Как сделать это быстро, правильно, UI/UX ориентированно. Практический опыт с примерами прототипирования и пошаговым описанием процесса работы. Шпаргалка для работы прилагается.
Навигация по статье
Когда нужны прототипы страниц?
Опытный SEO-специалист без труда сможет проанализировать страницы сайтов-конкурентов и выделить повторяющиеся элементы, оценив их значимость в рамках оптимизации сайта. Как правило, самые ценные элементы ложатся в основу On Page 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), а под занавес мощным тычком сломала мою ручку об этот вот "прототип". Картинка прилагается.
Я после этого веб-диз бросил.
"Не верю" )
Я даже картинку отсканировал - и использовал как иллюстрацию несколько раз.
У меня, может, вся психика с того случая поломана. Вот что значит без аккаунтов с клиентами работать.
На самом деле, сочувствую дизайнерам. Вот уж где сплошной субъективизм.
Основываясь на собственном опыте, полагаю, что сеошники помогают дизайнерам в их нелёгком труде, снижая степень неопределённости.
о да, это извечная борьба SEO с мега-дизайнерами по типу "Я так вижу".
С профессионалами проще договориться, приводя аргументы (бывает, приходится слишком много аргументировать). "Я так вижу" чаще исходит от таксебедизайнеров.
Но тут важно каждому оставаться в рамках своей профессии. Не всегда получается, да.
«Выезжающая панель» — такое описание приступ ностальгии вызывает. Сколько всего выезжающего требовалось сайтам.
Отдельный вид искусства получился )
Издалека похоже на массовые беспорядочные контакты в борделе.
Ага. Так сказать, хаос и промискуитет.
Хорошо, что анимация сайтов стала историей.