Как правильно провести редизайн сайта | Блог ЛБК
открыть доступ

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

05.11.2016 | UX дизайн

Предупреждаем сразу: редизайн сайта — рискованная затея.

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

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

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

Кстати, расскажу немного о том, как я узнал об их редизайне.

Я довольно давно сотрудничаю с ребятами из Crayon.co. То, что предлагает их сайт, проще всего описать как “новые идеи и вдохновение для веб-дизайнеров”. Они очень помогли с формированием нашей собственной стилистики на DigitalMarketer.com, за что я безгранично им благодарен.

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

Как вы понимаете, недавно на меня снизошло озарение, и я решил написать эту статью, использовав возможности Crayon.co.

Оценивать успешность “переделки” сайтов я буду опираясь на 5 критериев — 5 элементов оптимизации, по которым будут засчитываться баллы.

5 элементов оптимизации веб-дизайна

Ясность (Clarity). Если ваши посетители в первые несколько секунд не поняли, о чем страница и какую ценность она для них представляет… увы и ах.

Вот что требуется, чтобы никаких “увы” и “ах” не было:

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

Читабельность (Readability). Этот очень значимый фактор по каким-то причинам постоянно упускается из виду практически везде, кроме, может быть, блогов.

Вот на что обязательно следует обратить внимание:

  • Шрифт;
  • Количество символов в строке;
  • Размер абзацев и расстояние между ними;
  • Выделение жирным;
  • Цвета.

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

Внешний вид (Appearance). Знаете, в чем основное преимущество качественного, профессионального дизайна сайта? Посетители доверяют ему, а следовательно, и вам.

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

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

Пользовательский опыт (On-site experience). На каждой странице должна быть четко сформулированная цель, отточенная юзабилити для пользователей с любым уровнем навыков и быстрая загрузка всех элементов. Если один из этих элементов будет упущен, то вашим посетителям будет тяжело находиться на сайте, и в итоге они с него просто уйдут, не совершив целевое действие (не купив ваш товар, не оставив вам email и т.д.).

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

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

Итак, приступим…

1. Страница “Категории” на сайте Versace

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

Итоговый счет

Старая версия: 0 из 5
Новая версия: 3 из 5

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

Вывод: креатив — это, бесспорно, хорошо, но если мы говорим о классическом интернет-магазине, то он должен быть скорее похож на обновленный вариант Versace, нежели на версию “до”.

2. Сайт Iron Mountain

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

Iron Mountain (компания предоставляет услугу по хранению больших объемов документации других компаний) переделали на своем сайте страницу, на которой описывается суть их предложения. Все внимание на видео:

Итоговый счет

Старая версия: 0
Новая версия: 3

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

3. Блог компании Freshdesk

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

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

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

Итоговый счет

Старая версия: 1
Новая версия: 4

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

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

4. Сервис-страница сайта Best Buy

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

Давайте посмотрим, что сотворила компания Best Buy (крупный магазин электроники и сопутствующих товаров) в попытке переделать свою сервис-страницу, посвященную подключению к интернету.

Итоговый счет

Старая версия: 0
Новая версия: 4

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

Продолжение читайте здесь…

 

 

Скачай 500+ готовых заголовков для блога, лендингов, постов. И авто-конструктор для составления убойных заголовков по методу 4U.

Введите свой E-mail


Похожие материалы

raspisanie