Редизайн сайта без ошибок [полное руководство]

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

Вот такая сложная на самом деле у нас с вами тема на повестке дня. Полная субъективизма, наравне с обсуждением дизайна при создании сайта.

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

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

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

Давайте разбираться.

И мы с вами сразу определимся, что редизайн сайта — это не только про эстетику вашего ресурса.

Что такое редизайн сайта

Редизайн сайта — это процесс изменения и обновления сайта с целью его оптимизации, повышения производительности и привлечения большего числа пользователей.

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

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

Модернизация сайта может быть разной и по глубине редизайна: глубокие изменения или только поверхностные.

Редизайн сайта может быть самостоятельным элементом при оптимизации вашей бизнес–системы или как один из этапов в ребрендинге компании.

Вот такой неоднозначный процесс. А это мы только слегка царапнули по поверхности.

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

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

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

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

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

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

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

По данным статистики, 80% потребителей говорят, что впечатления от вашей компании так же важны, как и продукты или услуги, которые вы продаете, включая опыт, который они получают от вашего веб-сайта.

Как узнать, нужен ли сайту редизайн?

Давайте просмотрим основные причины для обновления вашего сайта.

Сразу скажу, что наиболее часто встречающаяся причина, с которой я сталкиваюсь в своей работе как веб–дизайнер,— это как само собой разумеющееся «Потому что мне не нравится мой сайт!».

Так вот, ваше мнение о сайте (или руководителя вашей компании)  — это псевдопричина, нельзя запускать обновления ради самих обновлений. Обычно такие действия ни к чему хорошему не приводят.

Вернемся к причинам планирования редизайна сайта.

Основные причины редизайна сайта

Ребрендинг или репозиционирование

Ребрендинг — это маркетинговая стратегия, направленная на изменение восприятия компании и ее ценностей конечными потребителями.

Ребрендинг и репозиционирование происходят при слиянии и объединении компаний, при обновлении бизнес–целей или сути бренда компании, при обновлении ассортимента продуктов или услуг, при обновлении рынка и целевой аудитории, при адаптации компании к новым условиям рынка.

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

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

Более 70% респондентов отмечают свое недоверие бренду, если его сайт выглядит непрофессионально.

Редизайн сайта при ребрендинге и репозиционировании компании является обязательным этапом.

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

>> Подробнее: 50+ причин выбрать WordPress для своего сайта

Запуск нового продукта или услуги

Запуск нового продукта или линейки услуг в компании неизменно ведет за собой редизайн сайта.

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

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

Добавление нового функционала на сайт

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

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

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

Обновление сайта для увеличения конверсии

Увеличение конверсии — закономерная цель после анализа показателей сайта и ключевых страниц.

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

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

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

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

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

>> Подробнее: Как уменьшить показатель отказов (простые способы)

Редизайн с целью адаптивности сайта

Адаптивность сайта — обязательная характеристика современных сайтов, эта характеристика настолько важна, что не является заменяемой.

Т.е., например, если у вас на сайте нет возможности принять оплату от клиента картой «Мир», то это не самая грубая ошибка, которая просто свалит ваш проект с ног, — покупатель может совершить платеж другим способом.

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

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

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

>> Используйте для своего сайта тему WordPress№1 — ASTRA!

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

>> Скачать с официального сайта разработчика плагин Elementor

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

Улучшение производительности, юзабилити и SEO–оптимизация сайта

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

>> Подробнее: Как составить контент–план для блога (бесплатный шаблон)

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

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

>> Подробнее: Как улучшить скорость сайта WordPress

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

Долгое время загрузки сайта разочаровывает посетителей. По статистике, 40% из них покинут сайт, если его загрузка длится дольше 3 секунд.

Редизайн с целью улучшения юзабилити также должен опираться на полученные ранее данные на основе аудита юзабилити сайта.

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

>> Подробнее: Как улучшить юзабилити сайта

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

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

Почему важен редизайн сайта?

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

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

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

Хорошо, давайте двигаться дальше.

Рассмотрим как проходит редизайн сайта.

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

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

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

Чтобы собрать свой «стартовый набор», предлагаю вам ответить на несколько важных вопросов.

9 вопросов перед редизайном сайта

— Какие страницы вашего сайта наиболее важные? Почему?

— Какие страницы сайта наиболее посещаемые и почему?

— Что ищет посетитель на вашем сайте?

— Какую конкретную измеримую потребность клиент не может решить с помощью вашего сайта и почему?

— Какие страницы сайта и его элементы (блоки) работают наиболее хорошо?

— Является ли контент сайта достаточно информативным?

— Отражает ли сайт ценности вашего бренда?

— Как вы планируете измерить успешность редизайна сайта?

— Как вы планируете проверить успех редизайна сайта?

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

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

Если у вас есть ответы на все вопросы — прекрасная работа! Вы отлично потрудились.

Если у вас возникли затруднения или есть сомнения в правильности своих выводов, то не спешите отчаиваться. Возможно, вы пока просто не докопались до истины. Или не знаете, где получить все данные.

Просто идите дальше. У вас будет еще возможность вернуться к этим вопросам.

Этапы проведения редизайна сайта

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

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

1. Этап аудита сайта (контент, ЦА, юзабилити и SEO)

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

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

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

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

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

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

>> Подробнее: SEO–оптимизация изображений для сайта

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

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

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

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

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

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

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

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

Как это сделать: используйте Google Analytics (или любой другой  аналитический инструмент, к которому подключен ваш сайт) для получения всех необходимых данных.

Перейдем к анализу ЦА. Вам нужны данные о вашей целевой аудитории сайта.

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

 Согласно  исследованию Google , существует четыре основных типа мотива для посещения любого сайта: «Я хочу знать», «Я хочу пойти», «Я хочу сделать» и «Я хочу купить».

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

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

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

Как это сделать:  если вы никогда раньше не описывали портрет идеального клиента, вы можете начать с работы над шаблоном личности вашего идеального клиента и посетителя сайта.

>> Подробнее: Как составить портрет целевой аудитории (бесплатный шаблон)

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

 Где пользователи застревают и испытывают проблемы на сайте?

Что работает, а что — нет на отдельных страницах?

Что посетителям нравится или не нравится в при взаимодействии с сайтом?

Работают ли ваши текущие призывы к действию?

Различается ли опыт взаимодействия с сайтом на мобильных устройствах и настольных компьютерах?

Что останавливает посетителей от конверсии?

Что вызывает сомнения и разочарование при взаимодействии с сайтом?

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

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

>> Закажите аудит юзабилити своего сайта, чтобы избавиться от ошибок на сайте, которые мешают вам получать больше клиентов!

2. Этап определения цели редизайна сайта

 Зачем вам нужен редизайн сайта?

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

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

• Чтобы увеличить количество посещений?
• Чтобы уменьшить показатель отказов?
• Для увеличения времени пребывания на сайте?
• Для повышения авторитета домена?
• Чтобы увеличить общее количество новых потенциальных клиентов?
• Чтобы увеличить объемы продаж и т.д.

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

3. Этап проектирования сайта

Основываясь на результатах ваших количественных и качественных исследований, вы переходите к разработке начального каркаса сайта и его страниц и кликабельного прототипа. 

Как правило, в результате проектирования вы получаете картину с иерархией страниц в составе сайта и постраничной структурой.

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

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

Как это сделать: на этапе проектирования мы не работаем с цветовой палитрой, забудьте об анимации и прочих визуальных рычагах! Сейчас важен сам контент, не совершайте ошибку и не вставляйте «текст–рыбу» Lorem Ipsum — бессмысленные блоки текста. На этом этапе важно каждому смысловому блоку отвести свое место и добиться наиболее точной формулировки.

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

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

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

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

>> Подробнее: Как подобрать цветовую палитру для сайта

4. Этап разработки сайта

Все страницы строятся на основе карты сайта. На этом этапе тестируются все функции сайта, и элементы системы управления контентом, такие как корзины для покупок и формы оплаты, также вводятся в действие. 

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

Если были запланировано изменение в цветовой палитре сайта, добавление новых страниц и функционала, то на этом этапе все переносится на сайт.

Если для редизайна сайта вы запланировали и перенос сайта на новый «движок», например, WordPress, то это тоже следует включить в план работы на этом этапе.

>> Подробнее: Как правильно настроить WordPress после установки

5. Этап тестирования и запуска обновленного сайта

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

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

Что важно проверить перед запуском сайта:

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

>> Подробнее: Чек–лист проверки сайта перед запуском

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

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

Надеюсь, вы увидели, что редизайн сайта, — это больше, чем просто обновить цвета и шрифты.

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

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

Чем сложнее им достичь своей цели на вашем сайте, тем менее эффективным будет ваш UX-поток.

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

• Нужен ли им более легкий доступ к вашей продукции?
• Насколько понятна навигация по сайту?
• Передает ли сайт ценности и особенности вашего бренда?
• Как удержать пользователей на странице?
• Как пользователи взаимодействуют с сайтом с телефона? Насколько это удобно?

 Обязательно учитывайте, что до 58% всех поисковых запросов в Google приходится на мобильные аккаунты, вы должны быть готовы к тому, что клиенты сначала будут заходить на сайт с мобильных устройств.

Ошибки редизайна сайта

Итак, теперь, когда мы разобрались с этапами проведения редизайна сайта, вы все еще не отказываетесь от идеи провести обновление своего сайта? Если да, то читайте дальше.

# 1. Ошибка — фокус внимания на внешней привлекательности сайта

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

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

# 2. Ошибка — перенос внимания со стратегии на технологии

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

Все это для того, чтобы у вас не было ошибки рассеивания внимания с целей редизайна сайта, чтобы вас не бросало из стороны в сторону от разных отвлекающих факторов: то у конкурентов новые «примочки» на сайте, то вам понравилось что–то на стороннем сайте и потому появилась идея…

Запомните простую вещь: ваш сайт существует для развития вашего бизнеса. Каждый ваш выбор должен подчиняться этому постулату!

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

>> Подробнее: Полезные инструменты для ведения сайта

# 3. Ошибка — нечеткие цели проведения редизайна сайта

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

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

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

# 4. Ошибка — расплывчатое определение объема задач и требований перед началом редизайном сайта

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

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

# 5. Ошибка — редизайн сайта без учета преемственности бренда

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

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

# 6. Ошибка — сжатые сроки для проведения редизайна сайта

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

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

# 7. Ошибка — игнорирование проблем клиента при редизайне сайта

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

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

# 8. Ошибка — игнорирование производительности сайта

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

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

# 9. Ошибка — запуск сайта без предварительного тестирования после окончания редизайна

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

Все эти детали сведут к нулю все усилия по улучшению вашего сайта.

Что ж, самые распространенные ошибки редизайна сайта мы с вами рассмотрели.

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

Как успешно провести редизайн сайта

Особое внимание к самым рейтинговым страницам

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

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

Редизайн сайта стоит тщательно планировать

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

Собирайте информацию о проблемах посетителей на сайте

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

Сначала прототипирование и тестирование, визуальные эффекты потом

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

В структуре навигации сайта всегда придерживайтесь логики и минимализма

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

Сохраните структуру URL–адресов страниц, если это возможно

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

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

Убедитесь, что контент сайта тоже обновлен

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

>> Подробнее: О чем писать в блоге: 35 идей

Сохраняйте фокус на пользователе сайта

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

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

Не приступайте к редизайну сайта под очарованием своего продукта или услуги.

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

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

Убедитесь, что ваш хостинг обеспечивает ваш сайт необходимыми ресурсами (качественными серверами, объемом для хранения файлов сайта, пропускной способностью, защитой от DDos–атак, сканированием вашего ресурса и сертификатом безопасности SSL).

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

>> Подробнее: Что учесть при выборе хостинга для сайта

>>Подробнее: Как проверить доступность сайта

>> Подробнее: Руководство по настройке безопасности сайта

Оптимизируйте сайт для мобильных устройств

Адаптивность сайта — обязательная его характеристика. Вам не стоит игнорировать более 55% интернет–серферов, которые посещают сайты с телефона.

Критически проанализируйте все СТА на сайте

CTA играют важную роль в процессе редизайна сайта. Как правило, они нацелены на увеличение числа потенциальных клиентов и повышение коэффициента конверсии. 

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

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

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

Найдите мотивы пользователей для посещения сайта

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

Это самые мои основные рекомендации для успешного проведения редизайна сайта.

Еще я вам обещала примеры редизайнов сайтов.

Примеры редизайна сайтов

Давайте посмотрим на примерах крупных сайтов, которые не проводят редизайн в спешке или по прихотям и капризам руководства.

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

Хотя есть и исключения: в быстро меняющихся областях, например, в разработке программного обеспечения, такой интервал еще больше сокращается до 1–2 лет, а в области юриспруденции, производстве продовольствия — увеличивается до 4–5 лет. НО, если не было изменений в компании. Какие причины — ребрендинг, введение нового продукта или услуги и все прочее мы уже упоминали.

Итак, готовы посмотреть, как эволюционировал дизайн некоторых сайтов? Я люблю анализировать это «было–стало», здесь именно важен процесс анализа причин и внедрения решений.

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

Редизайн сайта хостинг–компании Спринтхост тоже прошел в результате ребрендинга. судя по изменениям в логотипе, и добавлении персонажа бренда (кот — он присутствовал на старом сайте, но не так явно, теперь сопровождает весь сайт) и есть небольшие обновления в цветовой палитре. Есть изменения в навигации сайта, но в целом организация сайта мало изменилась.

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

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

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

Сайт Creative Fabrica — «мекки» для всех творческих людей — пример редизайна с целью улучшения юзабилити. Здесь нет обновления в политике бренда или обновлении предоставляемых услуг. Прошло обновление шрифта логотипа, который стал основным шрифтом на сайте, и обновилась навигация на сайте — стала более понятной. В остальном изменений нет: цветовая гамма осталась прежней, глобальная архитектура основных страниц тоже. Сайт стал заметно более удобным.

Как видите, в качестве примеров я подобрала для вас разные типы редизайна: с масштабными изменениями и не такими большими обновлениями.

Во всех примерах присутствует одинаковая характеристика — их объединяет стремление стать понятнее своему пользователю, предложить ему наилучший способ взаимодействия с интерфейсом сайта.

Как вам наше путешествие во времени? Вы тоже можете «навестить» свои любимые сайты в прошлом: просто существует громадный ресурс (бесплатный!) Wayback Machine, где можно указать нужный адрес сайта и выбрать дату — и, вуаля! ваш прыжок в прошлое.

И, что самое примечательное, это не статичная картинка, а вполне рабочий сайт, с кликабельными ссылками! Выделите себе время — процесс настолько увлекательный, что трудно оторваться!

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

Спасибо, что дочитали до конца! Публикация вышла приличная, но оно того стоило, не так ли?

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

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

Заключение

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

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

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

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

Одна небольшая просьба: если вам понравилась эта статья, то поделитесь ею на вашей любимой социальной платформе, — это сделает мой день! Спасибо!