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

Низкая контрастность текста

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

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

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

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

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

Страдает просмотр сайта на мобильных устройствах. Легко ли будет прочитать серый текст на светло-серой странице на улице под ярким солнцем?

Сайт становится неудобным для пользователей со слабым зрением. А это миллионы людей.

Зачем же дизайнеры вообще используют текст с низкой контрастностью?

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

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

Давайте лучше подумаем: как выделить элементы дизайна без вреда для юзабилити?

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

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

Проверьте, чтобы заголовки, текст и фон не сливались по цвету.

Добавьте отступы вокруг важного элемента. Перенесите важную информацию в отдельный столбик.

Проследите, чтобы раскрывающееся меню и выпадающие окна не закрывали важную информацию.

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

Мелкий шрифт

Мелкий шрифт воспринимается с трудом. Сейчас минимально допустимый стандарт – шрифт в 14 пикселей. Впрочем, на многих сайтах и вовсе используется шрифт не меньше 18 пикселей.

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

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

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

Слайдеры

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

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

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

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

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

Неправильная высота строки

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

Однако на восприятие чрезмерно малая высота строчки способна произвести впечатление слепленного текста и испортить дизайн страницы.

Слишком длинная строка

Другая распространенная ошибка — очень большая ширина текста.

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

Оптимальная длина строки - 50-60 символов, максимум 75.

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

На какие пропорции стоит ориентироваться? Если вы выставите максимальную ширину текста равную 516 пикселям, то при шрифте 18 пикселей длина строчки составит 65 символов.

Отсутствие цветового акцента на кнопках призыва

Пренебрежительное отношение к цветовыми акцентам может убить конверсию.

Вы хотите, чтобы кнопки «Попробовать бесплатно» и «Купить» привлекали внимание? Сделайте их яркими.

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

Как лучше всего оформить кнопки призыва к действию?

Используйте яркие цвета.

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

Кнопка должна выделяться на общем фоне. Темно-зеленая кнопка на светло-зеленом изображении — не самая удачная идея.

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

Нарушение привычных принципов дизайна

Седьмой смертный грех — отказ от общепризнанных стандартов дизайна.

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

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