7 признаков устаревшего сайта: от чего стоит избавиться прямо сейчас

Ключевые моменты

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

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

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

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

Устарел ли ваш веб-сайт?

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

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

• Есть ли на главной странице привлекательные визуальные элементы? Люди запрограммированы на восприятие визуального контента. Включая визуальные элементы, которые нравятся вашим посетителям, вы создаете увлекательный опыт, который удерживает их на сайте.
• Является ли ваш сайт мобильно-дружественным? Учитывая, что количество пользователей мобильных устройств в мире составляет 6,92 миллиарда, крайне важно использовать адаптивный дизайн, чтобы ваша мобильная аудитория могла легко перемещаться по сайту.
• Загружается ли ваш сайт достаточно быстро? Сайты, которые загружаются за секунду, также конвертируют в 2,5 раза больше, чем сайты, загружающиеся за пять секунд — доказательство того, что оптимизация скорости сайта должна быть приоритетом.
• Совместим ли ваш сайт с различными устройствами и браузерами? У людей есть несколько устройств с доступом в интернет, и они ожидают плавной навигации на всех из них. Повысьте совместимость вашего сайта, чтобы удовлетворить разнообразные предпочтения вашей аудитории.
• Защищен ли ваш сайт от угроз безопасности? Киберугрозы никуда не денутся. Расставьте приоритеты в надежных функциях безопасности, чтобы защитить данные пользователей и укрепить доверие.
• Создает ли ваш сайт качественный контент? Если вы хотите, чтобы ваши посетители оставались, публикуйте контент, который будет для них интересным, актуальным и полезным.

Устаревшие дизайны веб-сайтов, которых следует избегать

• Adobe Flash.
• Чрезмерное использование стоковых фотографий.
• Автовоспроизведение каруселей.
• Агрессивные всплывающие окна.
• Автовоспроизведение видео.
• Удержание контента «above the fold» (в видимой области без прокрутки).
• Гамбургер-меню (три полоски) на десктопных версиях сайтов.

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

1. Adobe Flash

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

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

Когда Apple удалила поддержку Flash из iPhone, это ознаменовало конец этой устаревшей веб-технологии. Крупные платформы, такие как YouTube, быстро перешли на HTML5 из-за его улучшенной производительности и современных возможностей. К 2017 году Google Chrome отказался от совместимости с Flash, а полное прекращение поддержки Flash компанией Adobe в 2020 году оставило бесчисленные сайты, построенные на этой устаревшей технологии, нефункциональными, вынуждая бизнес модернизировать свою устаревшую веб-инфраструктуру или рисковать стать недоступными для пользователей.

Почему переход на HTML5? И вот почему:

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

Последний гвоздь в гроб: элементы Flash не индексируются поисковыми системами. В наше время большинство брендов уделяют большое внимание SEO, чтобы получить лучшие позиции в Google. Если вы конкурируете за этот органический трафик, предпочтительнее избегать Flash.

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

2. Чрезмерное использование стоковых фотографий

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

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

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

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

В противном случае вы можете попробовать создавать визуальные ресурсы самостоятельно. Используйте инструмент для создания контента, такой как Canva, PicMonkey или Adobe Creative Cloud.

3. Автовоспроизведение каруселей

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

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

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

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

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

Для более эффективного способа демонстрации ваших предложений рассмотрите эти альтернативы:

• Статичное основное изображение (hero image) с четким призывом к действию: Выберите одно, эффектное изображение в сочетании с короткими, понятными инструкциями для читателя.
• Контент-блоки (Content buckets): Организуйте ваш контент в отдельные разделы для удобной навигации и более чистого представления.
• Сетка (Grid layout): Представьте ваш контент в структурированном формате сетки, чтобы дать вашим посетителям более полное представление о ваших предложениях.

4. Агрессивные всплывающие окна

Всплывающие окна — эффективный инструмент продаж. Но при агрессивном использовании они прерывают и ухудшают пользовательский опыт.

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

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

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

Попробуйте следующее:

• Всплывающие окна по клику: Если сомневаетесь, выбирайте всплывающие окна, которые появляются, когда пользователи нажимают на определенную кнопку. Согласно исследованию Wisepop, всплывающие окна, срабатывающие по клику, показывают наилучшие результаты с огромным отрывом.
• Избегайте всплывающих окон на смартфонах: Пользователи отмечают, что всплывающие окна более раздражают при просмотре на мобильном устройстве. Не стоит расстраивать мобильных пользователей.
• Всплывающие окна с отслеживанием ухода (exit-intent): Вы можете настроить всплывающие окна, которые срабатывают, когда курсор мыши пользователя движется к кнопке выхода или назад. Это ваш момент, чтобы сделать им предложение, от которого они не смогут отказаться, образно говоря.
• Сделайте всплывающие окна легко закрываемыми: Говоря об отказе, крайне важно реализовать всплывающие окна, которые пользователи могут легко закрыть или свернуть. Лучше, чтобы люди просто отказались, чем разозлились и всё равно отказались.
• Всплывающие окна, срабатывающие при прокрутке: Вы можете настроить всплывающие окна, которые активируются, когда пользователи прокручивают страницу на определенный процент. Прокрутка указывает на уровень интереса, что является хорошим знаком, чтобы предложить релевантный контент или выгодные предложения.

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

5. Видео с автовоспроизведением

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

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

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

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

6. Удержание контента «над сгибом»

В контексте веб-дизайна «над сгибом» (above the fold) относится ко всем частям вашего сайта, которые отображаются без прокрутки вниз. Когда-то, когда сайты загружались целую вечность, было разумно размещать всё важное в этой области; некоторые пользователи не ждали, пока загрузятся части ниже.

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

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

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

7. Гамбургер-меню на десктопных сайтах

Гамбургер-меню обычно обозначается символом из трех полос в углу веб-сайта или мобильного приложения.

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

В 2012 году гамбургер-иконки начали появляться на многих десктопных сайтах. Каким был общий консенсус? TechCrunch сообщил об этом явлении, назвав гамбургер-иконки «дьяволом».

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

Заключительные мысли

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

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

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

Часто задаваемые вопросы об устаревшем веб-дизайне