Главное Свежее Вакансии   Проекты
Продвинуть свой проект
😼
Выбор
редакции
2 944 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

5 причин, почему сайт вызывает отторжение

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

Добрый день, маленькие мальчики и девочки, взрослые дяденьки и тетеньки, и прочие бизнес-гендерфлюиды!

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

Что-что? Ваш сайт делал компетентный исполнитель и уж его-то это точно не касается? Как бы не так!

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

1. Информационная "передозировка"

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

b_5d94ceddc8e86.jpg

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

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

b_5d94cf16ebd7e.jpg

Важно, чтобы на сайте всегда был баланс одновременно видимых на мониторе элементов.

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

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

b_5d94cf38cee18.jpg

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

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

b_5d94cf556b58e.jpg

Стоит отметить, что Cemeco обладает не самой уникальной дизайн-концепцией, однако лишен большинства описанных выше недостатков. Можете сравнить его с Quto и ощутить контраст.

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

Например, посмотрите насколько удобно и просто выглядит обновленный в 2019 году личный кабинет REG:

b_5d94cfa856ea1.jpg

2. Смысловой контраст и акценты

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

b_5d94d07a8dc87.jpg

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

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

b_5d94d0b649d70.jpg

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

b_5d94d0d025b63.jpg

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

Обратите внимание, как The-Village справляется c большим количеством информационных блоков, правильно расставляя акценты. Хорошо подобранная типографика, а также яркие цветовые плашки упрощают восприятие контента. И все же, если более точно расставить "якорные" точки для основных элементов, вроде навигации, можно сделать более структурированный интерфейс.

b_5d94d1078d941.jpg

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

b_5d94d11c1e0c7.jpg

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

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

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

3. Цветовая палитра

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

b_5d94d13b3aecf.jpg

Чтобы удостоверится в этом, просто посмотрите на цветовые палитры известных компаний: ВКонтакте (синий, белый), Яндекс (желтый, белый), Беру.ру (пурпурный, белый), М.Видео (красный, белый), VC.RU (розовый, серый).

А вот пример сайта, на котором нет акцента на конкретной цветовой схеме:

b_5d94d1541f5a3.jpg

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

b_5d94d16a828f7.jpg

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

4. Изображения

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

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

b_5d94d18806f58.jpg

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

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

Фотографии, имеющие не более 3 планов (передний, средний, фоновый) в сочетании с небольшим количеством ключевых объектов намного проще воспринимаются нашим мозгом.

b_5d94d1cf1bb5f.jpg

Например, ниже представлены фото для сайта компании-производителя труб, на которых нет конкретного фокуса на каком-то ключевом объекте и четко выделенных планов:

b_5d94d1ebd89f2.jpg

b_5d94d1f3ba81d.jpg

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

b_5d94d20b9fe0b.jpg

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

5. Топорные анимации

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

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

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

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

Заключение

К сожалению сайты, подобные представленным в данной статье в качестве положительных примеров, в интернете можно пересчитать по пальцам.

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

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

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

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
MTT Forum
Главное бизнес-событие осени
Павел Коркодинов
А можно про Spark узнать) Хотим обновить дизайн. Как вы думаете, что нужно поправить?
Ответить
Партнеры Spark
Реклама на Spark
Филипп Алексенко
Подпишусь на комментарии, как говорится)
Ответить
Naxu.i. - digital creative
Создаем сайты, упаковываем бренды, приводим клиентов.
Naxu.i.
Если провести краткий аудит, то можно выделить пару моментов:
1. Самое основное - редактор статей. Лучше, чем на VC редактора мы не встречали. Т.к. Spark и VC - проекты Комитета, думаем перенести редактор от VC на платформу Spark не составит особых усилий. Но на текущий момент, не скрою, система редактирования статей на Spark действительно крайне неудобная.
2. Превью статьи в форме круга справа - это крайне не информативно. Последовательно идущие статьи плохо дифференцируется, а также стоит учитывать, что юзер подсознательно сперва смотрит на изображение, а уже потом на заголовок. Не понятно, почему именно на Spark большинство изображений находятся справа в округленной рамке, в отличие от остальных проектов Комитета.
Ответить
Редакция Spark.ru
Материалы от команды Спарка
Николай Гришин
Все круто, но мы не проект "Комитета" уж год как. Мы сами по себе)
Ответить
Naxu.i. - digital creative
Создаем сайты, упаковываем бренды, приводим клиентов.
Slonon.ru
Маркетинговое digital интернет агентство полного цикла
Светлана Ерофеева
Спарк не раздражает) и мне кажется автор статьи довольно придирчив в своих примерах, вот у меня есть настоящие кошмары причем отметьте реально новых дизайнов, владельцы которых реально спорили со мной, что они довольны результатом и менять ничего не хотят) Z-spravedlivost.ru и sofadreams.ru
Ответить
Nastu March
Поддерживаю
Ответить
Дмитрий Яковенко
Зачем так грубо?
"А Вы в курсе, что 95% процентов сайтов в сети - высокосортный digital-помет..."
А дальше приводить пример сервисов которые деньги поднимают для инвесторов. Предлагаю вам посмотреть кейсы про booking ком и их маркетинг. Там не дураки сидят ведь)
Ответить
Вова Хвальцев
Скажу как обычный обыватель. Но Букинг очень яркий пример. И пользователю который не очень дружит с ПК, с интернетом, с кучей фильтров как в Яндекс маркете будет реально отторжение. Лично у меня далее как у современного юзера и пользователя Букинг, тоже отторжение. Слишком много кнопочек, фильтров, картинок, иногда не ясно куда надо щёлкнуть...
Ответить
Coalla
Мы создаём сайты, web-сервисы, мобильные приложения и яркий брендинг!
Волков Алексей
Любой онлайн сервис с большим количеством SKU без фильтров не конкурентноспособен.
Ответить
Slonon.ru
Маркетинговое digital интернет агентство полного цикла
Светлана Ерофеева
автор статьи довольно придирчив в своих примерах, вот у меня есть настоящие кошмары причем отметьте реально новых дизайнов, владельцы которых реально спорили со мной, что они довольны результатом и менять ничего не хотят) Z-spravedlivost.ru и sofadreams.ru
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Комментарии

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.