Основные ошибки в дизайне сайта

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

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

Я уже упоминала об основных правилах в дизайне сайта. Кому интересно (а там много пользы!), даю ссылку на свою публикацию.

>> Подробнее: Об основных правилах для дизайна сайта

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

А сегодня давайте рассмотрим, к чему может привести игнорирование или неточное следование правилам и рекомендациям для создания дизайна сайта.

Знаете, почему возникают ошибки при работе над дизайном сайта?

Причины возникновения ошибок в дизайне сайта

На мой взгляд, можно выделить несколько общих причин  появления ошибок в веб–дизайне:

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

Если веб–дизайн — это не искусство и веб–дизайнеры — это не художники, то что такое веб–дизайн?

Что такое веб–дизайн

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

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

Тут, пожалуй, следует раскрыть скобки.

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

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

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

>> Подробнее: Почему сайт теряет клиентов

Ошибки дизайна сайта и как их исправить

1. Скрытие основного меню сайта

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

>> Подробнее: 11 способов улучшить сайт

2. Перенасыщение основного меню сайта

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

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

>> Подробнее: Как правильно провести обновление дизайна сайта

3. Недостаточно негативного пространства

Свободное пространство вокруг вашего контента — условие отличного дизайна.

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

С помощью негативного пространства легко выделить самое важное на странице и упростить посетителям сканирование содержания страницы.

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

Нам не стоит бояться свободного пространства.

Стоит понимать, что негативное пространство решает очень важную роль в веб–дизайне.

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

>> Подробнее: Секреты дизайна главной страницы сайта

4. Недостаточный контраст между текстом и цветом фона

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

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

Контраст — важный фактор доступности и удобства (юзабилити) вашего сайта для пользователей.

>> Подробнее: Большой список полезных ссылок для работы с сайтом

5. Отсутствие форматирования текста

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

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

Длинные абзацы очень трудно сканировать, поэтому ориентируйтесь на 3–4 строки в одном абзаце в десктопном варианте.

Тут следует упомянуть и ширину строки. Читать предложение из одного края экрана до другого края экрана монитора достаточно трудно. Поэтому ориентируйтесь на ширину примерно 600 пикселей.

>> Подробнее: Способы брендинга сайта

6. Выравнивание по центру для больших фрагментов текста

Наиболее привычный тип выравнивания текста — по левой стороне экрана. Такие тексты легко читать, это удобно и привычно. Труднее воспринимается текст с выравниванием по правой стороне экрана.

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

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

>> Подробнее: Основные компоненты брендинга бизнеса

7. Большое количество шрифтов

Шрифт — такой же важный элемент веб–дизайна, как и формы или цвета.

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

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

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

>> Подробнее: Шрифты для бренда: как подобрать удачное сочетание

8. Маленький размер шрифта для основного текста

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

Какой размер шрифта установлен на вашем сайте для основного текста?

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

Удобство чтения на сайте можно обеспечить размером букв для основного текста не меньше 12, а лучше 14 пунктов.

Настроить размер шрифта в Вордпресс очень легко: зайдите с настройки темы во вкладке «Внешний вид», найдите раздел с типографикой и перейдите к настройкам размера шрифтов.

>> Подробнее: Как исправить ошибки брендинга

9. Курсивное написание для больших фрагментов текста

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

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

Только представьте, много ли посетители сайта поймут из содержания вашего сайта, если в нем основной прием для оформления текста — это курсив?

>> Подробнее: Как повысить эффективность сайта личного бренда

10. Большое разнообразие цветов на сайте

Широкий ряд цветов в палитре — ошибка в дизайне сайта, которая «разваливает» весь дизайн, из–за чего ваш сайт приобретает неряшливый вид и выглядит разобщенно.

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

>> Подробнее: Правила составления палитры для сайта

>> Подробнее: Готовые цветовые схемы для дизайна сайта

11. Отсутствие согласованности и преемственности в дизайне сайта

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

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

Именно из–за отсутствия строгого разделения ролей элементов в дизайне сайта и четкого соблюдения этих правил.

Например, если вы определили для своих заголовков H2 36 кегль и цвет #272727, то важно использовать это «правило» дизайна для ваших заголовков H2 на всех страницах сайта.

Чтобы не позабыть все установленные вами «правила» для каждого элемента дизайна сайта, то следует их внести в фирменный стиль бренда или UI/UX–кит.

>> Подробнее: Как составить руководство по фирменному стилю

12. Несколько соперничающих между собой кнопок CTA

Это одна из основных ошибок в дизайне сайта тяжелыми потерями для конверсии вашего сайта.

Я часто наблюдаю такой набор кнопок на лендингах: на одной странице буквально рядом даже на «первом экране» могут располагаться две кнопки с призывами «Купить» и «Узнать подробнее».

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

Запомните: две рядом расположенные цветные кнопки нанесут вашей конверсии много ущерба, поскольку вы сами уводите внимание посетителя сайта от намерения купить продукт или услугу.

>> Подробнее: Как улучшить коэффициент конверсии сайта

13. Использование стандартной страницы 404

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

Обычно ошибка 404 возникает, если вы перемещали, переименовывали или удаляли страницы на сайте

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

Признаки отличной страницы 404:

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

>> Подробнее: Как получить больше от страницы 404

14. Использование верхнего регистра букв для заголовков

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

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

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

>> Подробнее: Оцените юзабилити своего сайта

15. Отсутствие страницы «Спасибо»

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

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

>> Подробнее: Как разработать лид–магнит

>> Подробнее: Какие страницы нужны и как структурировать сайт

16. Использование в дизайне сайта узнаваемых стоковых изображений

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

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

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

Все эти приемы повышают нешаблонность дизайна сайта.

>> Подробнее: Список ссылок на лучшие бесплатные фотобанки

17. Использование изображений без оптимизации в дизайне сайта

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

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

>> Подробнее: Как подготовить изображение для публикации на сайте

>> Подробнее: Подробно о SEO–оптимизации изображений

18. Сложный процесс оформления заказа или регистрации на сайте

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

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

Речь идет о сложных и длинных формах с введением большого количества персональных данных.

Но вот в чем дело.

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

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

>> Подробнее: Разбор распространенных ошибок в работе сайтов

19. Низкая скорость загрузки сайта

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

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

Вы можете проверить скорость своего сайта с помощью Google PageSpeed ​​Insights . Если ваш сайт загружается медленно, убедитесь, что вы используете оптимизированные изображения.

>> Подробнее: Как улучшить скорость сайта на Вордпресс

20. Наличие ошибок в правописании слов

Это не совсем сугубо ошибка веб–дизайна, но тоже одна из основных ошибок дизайна сайтов, которая не работает на укрепление или поддержание имиджа вашего сайта.

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

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

Не стыдно не знать узкопрофильные слова. Вы можете уточнить у вашего клиента правописание и значение незнакомого слова.

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

>>Подробнее: 50+ причин полюбить Вордпресс

21. Избыток анимации в дизайне сайта

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

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

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

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

Обязательно проведите проверку работоспособности сайта и отдельных элементов дизайна перед запуском.

>> Подробнее: Чек–лист проверки сайта перед запуском

Спасибо, что дочитали до конца! Публикация вышла приличная, но оно того стоило, не так ли?

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

>> Свяжитесь со мной, если вам нужна профессиональная помощь с вашим сайтом на WordPress , я разрабатываю брендинг и создаю сайты на WordPress, чтобы вы могли сосредоточиться на том, что любите!

Заключение

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

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

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

• Анатомия целевой страницы: 13 ключевых элементов
• Как завоевать доверие пользователей к сайту
• Всплывающие окна на сайте: 13 правил дизайна поп–апов
• Как получать больше клиентов с помощью сайта
• Как сделать сайт частью воронки продаж