«Встречают по одежке» — основы юзабилити и дизайна сайта

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

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

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

7 популярных ошибок дизайна и юзабилити

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

Излишний креатив

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

  • кричащие цвета,
  • резкие контрасты,
  • нестандартные шрифты, которые сложно прочитать,
  • излишек декоративных элементов.

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

Минимализм на грани

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

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

Избыток информации на главной странице

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

  1. Если нет разбивки на страницы, то бесконечную ленту никто не долистывает до конца. А отсутствие пространства между информационными блоками или карточками товаров затрудняет прочтение.
  2. Чтобы разместить большое количества графических элементов, их уменьшают — пользователю сложно ориентироваться. Часто на таких сайтах скидки и акции обозначены слишком мелким шрифтом и не привлекают внимание;
  3. Самый большой «грех» — наличие горизонтального прокручивания. Это неудобно даже в десктопной версии, а на мобильных устройствах большая часть содержимого может потеряться.
  4. Часто на таких страницах нет визуального контраста: товары, элементы навигации, кнопки заказа и меню выполнены в одном цвете, а цена графически не выделена. Это также усложняет юзабилити (см. пример ниже).

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

Устаревший дизайн

Старомодный веб-дизайн чаще всего используют по двум причинам:

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

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

Что выдает устаревший дизайн:

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

Не учтена целевая аудитория

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

Неудачное решение для сайта массажного центра

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

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

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

Дизайнерские решения скрывают важные функции

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

Прочие элементы неудобного интерфейса:

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

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

Расположение и содержание изображений

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

  1. Изображений слишком много. Когда страница перенасыщена картинками, это вызывает раздражение у посетителя. Кроме того, они отвлекают от важного контента и могут усложнить навигацию.
  2. Мало фото или они слишком мелкие. На просторах сети встречаются и сайты совсем без изображений на странице. Даже если контент не подразумевает визуала, следует разбавлять блоки хотя бы инфографикой: иначе «простыню» будет сложно читать. Мелкие картинки, которые трудно разглядеть, теряют свое основное назначение — визуализацию предлагаемого товара или услуги.
  3. Фотографии взяты со стоков и не дают полезной информации. Наполнять страницы изображениями для привлечения внимания, не несущими смысловой нагрузки, так же неэффективно, как и не использовать их совсем.

Секреты грамотного оформления сайтов: пошаговое руководство

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

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

Адаптивный дизайн

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

Оформление заказа

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

Корзина

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

Ненавязчивый онлайн-консультант

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

Привлекательный интерфейс

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

Иконки визуализации

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

Главная страница

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

Уместно будет использовать привлекательный динамический элемент: тематический видеоролик с описанием достоинств компании (не зацикленный). Обязательно следует отказаться от морально устаревшего Flash-плеера.

Контраст

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

Уместное использование анимации

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

Быстрота поиска

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

Изображения и шрифты

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

Шрифты. Они могут быть нетипичными, но главное — легко читаться. Дурным тоном в дизайне считается использовать более 2-3 видов шрифта на одной странице.

Расположение рекламы

На странице лучше не размещать более 2-3 баннеров. При этом они должны быть статичны и не закрывать контент. Сразу откажитесь от всплывающих рекламных блоков — это приводит к оттоку трафика. Но не стоит делать баннеры слишком незаметными — так прибыль вы не получите.

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

Ссылки

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

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

Итоги

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

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

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


Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *