Какие ошибки веб-дизайнеров могут стоить вам клиентов

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

Для удобства мы разделили распространенные ошибки в веб-дизайне на семь блоков:

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

Ошибки в дизайне

1. Зачем адаптивный дизайн? На компьютере будет круче смотреться

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

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

Также, по рекомендации команды Google, адаптивный сайт с каскадными таблицами стилей (CSS) отображается выше в поисковом запросе. Подробнее об этом написано в руководстве Google.

2. Никакого фавикона

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

Фавиконы (иконки в браузере) дают посетителям визуальную подсказку, необходимую для ориентации и возврата ко вкладке во время просмотра.

3. Создавать страницы с ошибкой 404

«Страницы 404 – бесшумные убийцы трафика. По данным независимой американской компании Zona Research, три с половиной тысячи юзеров (37% от общего числа респондентов) даже не пытаются предпринять какие-либо действия по устранению этой проблемы, – говорит Илья Муромов из Екатеринбурга. – В России подобного исследования не видел, но, думаю, процент недовольных будет не меньше».

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

Что может удержать пользователя на 404? Красивый идейный дизайн или встроенный полезный функционал – строка поиска или предложения других товаров.

4. На вашей странице есть карусель

«Карусель сама по себе не ужасна. Но она может стать проблемой, когда начинается автоматическая прокрутка, – пояснил Сергей Иванов из Брянска. – Она убивает конверсию, потому что баннер перестает восприниматься адекватно, а больше похож на рекламу. Человек просто не видит нужное сообщение».

Карусели раздражают, отвлекая от главного целевого действия.

5. Ваш сайт долго грузится

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

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

Важно и то, что скорость загрузки влияет и на рейтинг сайта. Google page speed можно расценивать как фактор ранжирования страниц для оценки индекса.

Google использует несколько параметров оценки скорости сайта.

1. Время ответа сервера. Когда вы вводите URL, он запрашивает у сервера документ HTML по этому адресу. Чем меньше время отклика, тем больше вероятность того, что остальная часть страницы будет загружаться быстро.
2. Start to render. Компьютерный код создает и представляет визуальный дисплей на вашем экране. Он показывает посетителям, что процесс идет и веб-страница начала загружаться.
3. Визуальная полнота. Веб-страница закончила загрузку, стала полностью видимой и доступной для посетителей.
4. Загрузка завершена. Веб-страница может быть визуально завершена, но в фоновом режиме загружается много дополнительной информации. Когда речь идет о времени загрузки, это более точный показатель полноты.
5. Количество файловых запросов. Асинхронный код начинает загрузку данных после полной загрузки сайта. Он не мешает пользователям использовать сайт, поэтому не считается частью времени загрузки.

6. Медленное время отклика сервера

«Если вы оптимизировали свои веб-страницы для скорости, но сервер долго откликается, ваш веб-сайт все равно будет медленным», – пояснил Григорий Сильман. Google настоятельно рекомендует сократить время ответа сервера до 200 миллисекунд и менее.

И для этого есть много причин:

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

Типографические ошибки

7. Использовать нечитабельный шрифт

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

8. Плохой кернинг, отслеживание и ведение

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

9. Использовать слишком много шрифтов

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

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

Хорошее правило – использовать не более трех шрифтов. Но бывают исключения. Вот, например, классный вариант дизайна с семью шрифтами.

Ошибки в контенте

10. Ориентирование контента не на пользователя

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

11. Ваш контент не считывается

Согласно исследованию Nielsen Group, пользователи просматривают в среднем 28% текста на веб-странице.

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

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

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

12. Отсутствие выделенного пространства

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

Но есть примеры, когда пространства слишком много. И это не всегда хорошо.

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

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

13. Несоблюдение грамматических правил

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

Ошибки в юзабилити

14. Не отвечать на вопросы пользователей

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

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

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

Такие вопросы конвертируют посетителей в подписчиков, которые становятся впоследствии покупателями.

15. Плохой поиск

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

• опечатки,
• множественное число,
• дефисы,
• ключевые слова.

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

Навигационные ошибки

16. Меняйте цвет просмотренных страниц

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

17. Центрирование логотипа убивает навигацию по сайту

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

18. Невидимое навигационное меню

Оно не отвечает на вопрос «Где я?» Оно помогает лучше сориентироваться в пространстве.

Невидимое навигационное меню дает понять:

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

19. Бесконтрольная навигация

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

Графические и имиджевые ошибки

20. Генератор стоковых фотографий

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

• дополнять историю, помогая пользователям отвечать на их вопросы,
• учить и демонстрировать визуально информацию.

21. Плохое масштабирование

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

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

22. Нехватка метаданных

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

23. Вы зависимы от Javascript

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

24. Никаких имиджей или даже компрессии фото

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

25. Отсутствие кэширования в браузере

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

26. CSS, HTML или JavaScript не были уменьшены

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

Юридические ошибки

27. Отсутствие политики конфиденциальности

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

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

28. Отсутствие гарантий

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

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

Материалы по теме:

Кейс: как перезапустить сайт с посещаемостью в 500 тысяч в день

Три самые дорогие ошибки при запуске сайта

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

Так что просто не дай ему уйти: как превратить случайных посетителей сайта в полноценных покупателей

UX/UI – что это? Разбираемся в терминах

Фото на обложке: Unsplash