Чего не хватает дизайну вашего сайта? В розыске 6 “пробелов”.

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

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

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

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

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

Так какие же прорехи дизайна у нас в розыске для ликвидации?

1. Отсутствие уникальности дизайна в рамках вашей сферы деятельности

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

Вот что стоит учесть:

• Дизайн должен привлекать и запоминаться (создавать “вау”-эффект).
• Контент должен представлять собой своего рода “повествование”, сопровождающее пользователя по всему сайту.

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

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

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

• Hover-анимации добавят вашему сайту интуитивности и даст дополнительную подсказку касательно функции того или иного элемента. Задержание курсора на изображении позволяет сразу же получить визуальный фидбек.
• Large-Scale анимации включают эффекты по типу параллакса и поп-апов.
• Анимации загрузки используются, чтобы держать пользователя вовлеченным на странице, часто применяются в flat-дизайне и минимализме.
  

  

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

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

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

2. Отсутствие черт UX и UI

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

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

  

• Material дизайн и Flat 2.0: с тех пор, как Google заговорил в новом стиле - стиле material design - дизайнерам была дана возможность развить принципы минималистичного “плоского” дизайна в нечто более привлекательное, используя его в комбинации с несколькими элементами старого-доброго скевоморфизма. Это используется для того, чтобы сделать дизайн более реалистичным и клиентоориентированным. Вот несколько примеров успешного применения Flat 2.0.
  

  

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

  

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

  

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

3. Нет призыва к действию.

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

Они могут быть в форме регистрации, подписки на рассылку, “Купить”, “Подробнее” или “Перезвоните мне!”.

Кнопки не только ведут трафик на определенные страницы. Они повышают вовлеченность и повышают рейтинг конверсий на сайте.

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

4. Отсутствие поиска по сайту

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

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

5. “Тугой” медленный сайт

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

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

Исправить страницу по этому параметру можно:

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

6. Сайт плохо работает на мобильных устройствах

48% пользователей утверждают, что если они попадают на коммерческий сайт, который не адаптивен под мобильный, то они это воспринимают, как безразличное отношение к своим потребностям (Источник: MarginMedia.com). Отсутствие адаптивного сайта практически можно приравнять к отсутствию сайта, как такового.

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

Если вы начинаете разрабатывать дизайн сайта, то начните лучше с мобильной версии, до того, как ваш креатив доберется до версии для десктопа. Вовсе не стоит волноваться, что так вы ограничиваете возможности дизайна с таким подходом. Большинство самых классных тем на Wordpress (включая TheGem) были созданы с мыслью о “mobile-first” в голове.

Итог

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

И хоть “книги оценивают не по обложке”… мы, люди, ведь все равно это делаем.

Так что лишний UI UX ни одной обложке не помешает.

По материалам: https://designmodo.com