Расскажи друзьям:

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

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

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

1. Неудобное расположение привычных элементов сайта или их отсутствие

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

Пример сайта, на котором контакты расположены  в непривычном месте

2. Проблема с отступами

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

Пример сайта, меню которого сливается с браузером

3. Неграмотно используемое пространство страницы

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

Пример неправильного использования пространства на сайте

Пример неправильного использования пространства на сайте

4. Визуальный шум

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

Визуальный шум на сайте

5. Проблемы со шрифтами

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

Проблемы со шрифтами

6. Ошибки в полях различных форм

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

Отсутствует обработка ошибок

7. Неверное выделение ссылок в тексте

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

Выделение ссылок в тексте

8. Проблемы с изображениями

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

Пример нечитаемого текста из-за отсутствия подложки



Вернуться назад: Технические ошибки и ошибки в структуре сайтаЧитать далее: Ошибки в контенте сайта
 

 
 
 
 

10 грехов SEO-оптимизатора



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 1 главу Энциклопедии поискового продвижения Ingate. Поисковые системы



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 2 главу Энциклопедии поискового продвижения Ingate. Ранжирование в деталях



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 3 главу Энциклопедии поискового продвижения Ingate. Ограничения для продвижения



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 4 главу Энциклопедии поискового продвижения Ingate. Этапы продвижения



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 5 главу Энциклопедии поискового продвижения Ingate. Оптимизация сайта в деталях



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 6 главу Энциклопедии поискового продвижения Ingate. Работа со ссылками в деталях



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 7 главу Энциклопедии поискового продвижения Ingate. Повышение конверсии сайта



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Скачать 8 главу Энциклопедии поискового продвижения Ingate. Инструментарий для продвижения



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Сasebook. ROOKEE для бизнеса.



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

Анализ SEO-ошибок: как повысить эффективность сайта.



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.
 

КАК ПОПАСТЬ В ТОП: практика эффективного SEO



 
 
 
Данное поле обязательно. Введите ФИО
 
 
 
Данное поле обязательно. Введите e-mail
 
— Обязательные для заполнения поля Ваш запрос успешно отправлен
Регистрацией на сайте пользователь подтверждает свое согласие получать информационные письма и рассылки от компании Ingate.
Получить
ссылку
 
 
 
Данное поле обязательно. Введите ФИО
 
 
Уважаемый пользователь!

Для скачивания книги «Энциклопедия поискового продвижения», пожалуйста, настройте в своем браузере возможность сохранения cookies.

Либо отправьте письмо на почту elena.kirilina@ingate.ru.

В ближайшее время Вам будет выслана электронная версия книги.