Частые ошибки в дизайне сайта или как неправильные отступы снижают конверсию

Время чтения:10 минут

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

ошибки в дизайне сайта.jpg

Непродуманный макет сайта

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

прототип сайта.jpg

Неудобная навигация на сайте

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

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

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

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

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

Отсутствие адаптивной верстки

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

Самым эффективным способом обеспечить правильное отображение все элементов страницы – это использовать бутстрап верстку. 

Bootstrap – это css-фреймворк, предназначенный для разработки в первую очередь мобильных проектов. 

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

Неудачные решения в дизайне

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

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

И так далее.

Кривая типографика на сайте

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

типографика.jpg

На что стоит обратить внимание, чтобы повысить этот параметр?

Текст

Текстовая информация на странице должна восприниматься легко. Вот несколько советов по тому, как сделать текст читабельней:

  • Используйте ограниченное количество шрифтов. Не старайтесь в каждой новой строчке удивить пользователя разнообразием графических начертаний.
  • Соблюдайте визуальную иерархию. Н1 больше Н2, а Н2 соответственно больше Н3.
  • Не переусердствуйте с выделениями. Слишком много жирного текста или курсива раздражают пользователя.
  • Уместно форматируйте текст. Много текста с выравниванием по центру, разная выключка во всей статье, крупный шрифт в длинных заголовках, слишком малый или слишком большой интерлиньяж и прочие примеры неверного форматирования затрудняют чтение текста.
  • Разделяйте текст на блоки – никто не любит читать сплошную простыню.

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

Визуальный контент

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

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

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

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

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

визуальный контент.jpg

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!