Ошибки в веб-дизайне, которые могут стать фатальными
Андрей Батурин,
Андрей Батурин
Веб-дизайн влияет на эффективность сайта, на его восприятие посетителями, на их решение о покупке или сотрудничестве. Поэтому важно, чтобы веб-ресурс, который вы решили выпустить в Интернет, был визуально привлекательным, комфортным для пользователей.
Но сколько людей — столько и мнений! То, что кому-то кажется интересным и завораживающим, другого просто оттолкнет. В этой публикации разберем типичные и не очень ошибки веб-дизайна, в том числе те, которые могут напрочь загубить сайт. Дадим подсказки, как лучше поступить.
Общие ошибки
Плохой макет
Если сайт изначально сделан плохо, структура, подача информации, организация представления контента не продуманы, это заранее сокрушительный провал. Потому что пользователю обычно все равно, получить услугу в вашей компании или перейти на сайт конкурента. Естественно, оказавшись на ресурсе, где не понятно, куда зайти, как искать ответ на вопрос, человек не будет долго разбираться. Он просто уйдет на другой сайт, более понятный, где позаботились о его комфорте.
В идеале при первом взгляде на страницу посетитель должен понимать, куда зашел, что ему предлагают, в каком разделе он найдет то, что ищет, как воспользоваться поиском, формой звонка, обратной связи или заказа.
Веб-дизайнеры дают такие рекомендации во избежание создания плохих макетов: использовать канонические правила — золотого сечения, закона двух третьих, применять сетку (grid). Главное же — приступать к работе над дизайном после полного маркетингового исследования бизнеса, для которого создается сайт.
Калейдоскоп в оформлении
Когда нет единой последовательности, и разные страницы получают разный дизайн, противопоставляются в оформлении, то, как минимум, пользователь придет в замешательство. Может сложиться впечатление, что человек перешел на другой ресурс. Если вместе с дизайном меняется навигация, перемещаются важные элементы, то это приведет к непониманию и отторжению.
Поэтому таких крайних решений стоит избегать:
- Сохраняйте цветовую схему на всех страницах.
- Контролируйте расстояния между элементами по вертикали и горизонтали. Они должны быть равными.
- Сохраняйте единую навигационную систему.
- Выдерживайте единство заголовков, оформления ссылок, иконок, форм.
Неправильная цветовая схема
Сейчас подобрать удачную схему помогают специальные сервисы. Однако часто неопытные веб-дизайнеры стремятся выделиться или опробовать некое экстраординарное решение, что может привести к провалу. Цвета, используемые на сайте, должны подчиняться единой логике.
Если у компании выработан фирменный стиль, это станет подсказкой. Не стоит брать больше 3 цветов, надо составить и придерживаться пропорций их применения. Гамма должна подчиняться тематике ресурса и не контрастировать с ней.
Неудачные цветовые решения влияют на восприятие и нередко отталкивают. Если на сайте присутствуют сливающиеся цвета, на поведении посетителей это отразится отрицательно. Основной цвет также должен хорошо сочетаться с изображениями и фотографиями, которые необходимо использовать.
Проблемы с текстом
В этом плане могут возникать разнообразные ошибки. Но эпичным провалом окажется такая ситуация, когда текст невозможно прочитать. Если он:
- Слишком мелкий,
- Чересчур крупный,
- Настолько экзотичный, что размывается привычное очертание букв,
- Сливается с фоном,
- Создает с ним резкий цветовой контраст,
— это грубейшие ошибки, поскольку мешают посетителю сделать то, зачем он оказался на сайте — получить информацию.
Отсутствие адаптивности
Когда дизайн некорректно отображается на некоторых разрешениях экрана, сайт теряет трафик. Даже если не затрагивать техническую сторону вопроса (не адаптированные для мобильных ресурсы хуже ранжируются в поиске), в любом случае на пользователя это произведет негативное впечатление. Следите за тем, чтобы сайт, его оформление, контент, элементы были полностью доступны и корректно показывались на экранах мобильников, планшетов, компьютеров.
Когда при уменьшении размера экрана возникает необходимость в горизонтальной прокрутке — это грубое нарушение.
Нелепая анимация
Анимированные элементы используют часто, но делать это надо с осторожностью. Если такие детали выполнены чрезмерно агрессивно, навязчиво или, наоборот, долго не загружаются, заторможены, это, по меньшей мере, вызовет раздражение посетителей.
Недоработки навигации
Поставьте себя на место пользователя: если вы зашли на ресурс и не можете понять, как перейти в нужный раздел, или ссылка приводит туда, куда вы не хотели попасть, вряд ли у вас появится желание разобраться в ситуации и понять логику построения ресурса, связи страниц. Скорее всего, вы махнете на такой ресурс рукой и вернетесь к результатам выдачи.
Поэтому при разработке и сайта, и веб-дизайна, нужно помнить, что:
- Выпадающее меню замечают не все. Когда страниц немного, его лучше не использовать. То же касается меню-гамбургеров.
- Горизонтальную навигацию посетители интуитивно ищут сверху, а вертикальную — на левой стороне экрана.
- Ссылки должны быть оформлены единообразно.
Про ссылки отдельно заметим, что многие пытаются подчеркнуть, выделить их дополнительно, но проявляют излишнюю старательность. И это отпугивает пользователей. Другая сторона медали – чрезмерно лаконичное оформление ссылок, при котором они становятся незаметными. Крайностей надо избегать.
Flash-элементы
От этих технологий все давно отказались. Если они присутствуют на сайте, надо избавляться от «пережитков прошлого». Они тормозят работу сайта, отрицательно влияют на индексацию, им на смену пришли другие, более прогрессивные технологии.
Отсутствует свободное пространство
Иногда владельцам сайта кажется, что поскольку это информационный ресурс, его надо использовать по максимуму, то есть загрузить данными до отказа. Нужно понимать, что сплошной поток информации очень быстро утомляет пользователей. Смотрится это тяжело и нелепо. Поэтому между логико-смысловыми блоками должно присутствовать свободное пространство, текстовый контент должен перемежаться с изображениями, видео, графикой, другими элементами. Иначе возникнет ощущение нагромождения.
Веб-дизайнер должен позаботиться о том, чтобы текст легко читался и воспринимался, при его размещении оставалось место, которое будет создавать атмосферу легкости, свободы.
Перебор с картинками
Многим нравится минималистичный дизайн, где главная роль принадлежит не тексту, а иллюстрациям, анимации, видео. Смотрятся такие решения элегантно, свежо, но лишь при умелом и гармоничном воплощении. Если использование изображений переступает грань разумного, посетитель словно оказывается в фотогалерее.
Нужно найти оптимальный баланс, когда иллюстрации и текст будут взаимно дополняемыми, не перетягивая значение на себя. Если многое говорит фото или видео, уберите излишки текста. Если опубликована качественная, обширная, хорошо структурированная статья, не загромождайте ее картинками. Оставьте лишь те, что вносят долю нового в содержание.
Конечно, предпочтение надо отдавать оригинальному фото- и видеоконтенту. Изображения должны быть оптимизированы по размеру. Это важно для нормальной скорости загрузки сайта и целостности восприятия!
Скромные контакты
Крайне мало тех ресурсов, которые не имеют цели привлечь клиентов. В основном, их задача прямо противоположна — рассказать пользователям о компании так, чтобы они захотели воспользоваться услугами. И тут может возникать серьезная ошибка: владелец из лишней скромности или просто не подумав решает, что формы связи, контактные данные можно сделать менее заметными, придавая основное значение информации о товарах, услугах, полезному контенту. Делать этого никак нельзя: потенциальный клиент на любой странице сайта должен получать сведения, как ему связаться с представителями компании, чтобы купить, оформить заказ, уточнить информацию.
Эффектные, заметные призывы и контакты — важнейшая составляющая продающего сайта.
Частные ошибки в дизайне сайтов
Поговорили о тех досадных недоработках, которые распространены в современном сайтостроении. Встречаются и другие ошибки, которые обнаружить сложнее. Часто это происходит не с первого взгляда – они не очевидны. В чем их коварство, разбираемся далее.
- На сайте используются несколько стилей, шрифтов, не гармонирующих между собой. Такая неумелая комбинация типографики создает дискомфорт, ощущение недоработки, непрофессионализма, мешает восприятию.
- Содержимое страницы не имеет деления на смысловые блоки. Иногда информация подается нелогично, возникают «перекосы» блоков, деление вообще отсутствует. Отчасти эта проблема затронута в разделе про свободу пространства. Однако ошибки часто связаны и с оформлением блоков. Отступы рекомендуется делать единообразными. Слишком большие, когда возникает пустота, или слишком маленькие, когда элементы склеиваются друг с другом, становятся недостатком. Делителем может выступать и отличающийся цвет фона, но важно не переборщить.
- Текст располагается на изображении и сливается с ним. Часто заголовки и подзаголовки, названия разделов располагают на фоне фотографии или видео. Важно не допустить его размывания, слияния, плохого различения. Ошибкой выступает и такое расположение текста, когда он закрывает собой значимую часть изображения. Решается проблема наложением на картинку контрастного фильтра, расположением текста на затемненной части фото. Или переносом текста.
- Загромождение меню. Этот вопрос больше относится к планированию структуры сайта, но важен и с точки зрения дизайна. Задача пользователя — быстро получить интересующую информацию. Иногда это понимают превратно и стараются все услуги, разделы поместить в основное меню. В итоге оно получается перегруженным. Человеку становится сложнее найти нужную страницу, хотя изначально ставилась иная цель. Поэтому структурируйте информацию, планируйте расположение разделов и не загружайте меню, которое в идеале может содержать 5-7 пунктов.
- Неуместные акценты. Бывает, что цветом выделяется отдельный узкий блок со значимой информацией. Однако такой акцент дробит логико-смысловые блоки, затрудняет целостное восприятие страницы. Как это преодолеть? Заголовки, как важный элемент текста, и так выделяются — шрифтом, его размером, насыщенностью, отступом. Тут нет смысла привлекать для выделения цвет. Весь блок можно подчеркнуть фоном, но аккуратно.
- Неправильное выравнивание и расположение текста. Ошибка, когда много текстового контента попадает в узкие колонки. Написанное с трудом читается и воспринимается. Не стоит выравнивать по центру большой по объему текст. Пользователю из-за этого сложнее читать, выглядит подобное оформление неаккуратно.
- Обводка кнопок. Она необходима, если кнопка прозрачная. Если она цветная, обводка лишь утяжелит восприятие.
- Отсутствует иерархия объектов. В дизайне должна прослеживаться железная логика. Допустим, заголовки выделены крупным шрифтом, для подзаголовков применяется шрифт меньше. Есть текст списков, который визуально отличается от обычного текста. Правильно, когда вырабатывается единый подход к визуальной иерархии и воплощается на каждой странице сайта. Это поможет посетителям ориентироваться в информации по степени ее значимости.
- Вытекает из предыдущего пункта некорректное оформление заголовков. Плохо, когда они выделяются слишком мелким или слишком крупным шрифтом. Еще существует зависимость от длины заголовка. Заголовок из 3 слов, написанный одним размером шрифта, будет хорошо смотреться, но если заглавие содержит 6-7 слов, этот же заголовок получится преувеличенно крупным. На этот аспект важно обращать внимание, и для длинных заголовков лучше пользоваться шрифтом меньшего размера.
— С чем бывают связаны распространенные ошибки в веб-дизайне? Преимущественно вы можете пострадать от неуемной тяги амбициозного и молодого дизайнера к новаторству. Можете в целях экономии обратиться к непрофессиональному фрилансеру. Есть риск связаться с такой студией, где дизайнер будет выполнять любую прихоть заказчика, даже заведомо провальную. Любой из этих случаев не приведет к созданию эффективного, стильного и визуально привлекательного сайта.
— Поэтому не рискуйте, не теряйте напрасно время и деньги. Обращайтесь к надежным специалистам, проверенным временем, с благоприятной репутацией. Звоните в WebEvolution!
