Дизайн
Naxu.i.
2342

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

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

В закладки

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

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

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

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

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

booking.com

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

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

trivago.ru

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

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

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

quto.ru

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

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

cemeco.ru

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

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

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

reg.ru

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

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

smm-agency.ru

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

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

dialweb.ru

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

nimax.ru

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

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

the-village.ru

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

the-village.ru

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

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

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

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

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

beru.ru

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

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

​Прости, Selectel :( selectel.ru

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

hostinger.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Naxu.i.", "author_type": "self", "tags": [], "comments": 23, "likes": 13, "favorites": 67, "is_advertisement": false, "subsite_label": "design", "id": 86082, "is_wide": false, "is_ugc": true, "date": "Thu, 03 Oct 2019 16:59:09 +0300", "is_special": false }
0
{ "id": 86082, "author_id": 308798, "diff_limit": 1000, "urls": {"diff":"\/comments\/86082\/get","add":"\/comments\/86082\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/86082"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
23 комментария
Популярные
По порядку
Написать комментарий...
8

Naxu.i. иди отсюда

Ответить
0

Тот случай когда идея ника действует в обратную сторону))

Ответить
0

Это не ник - это название агентства

Ответить
0

Тогда это серьезный брендинг,)) желаю что бы клиенты не пользовались оборотом от Альберта

Ответить
6

Комментарий удален по просьбе пользователя

Ответить
2

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

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

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

Ответить
2

Самое смешное, что в первом пункте оба примера - продажи будут бОльшими на «неправильных» сайтах. И это я как дизайнер говорю. Да выглядит стремно, да много мусорной инфы, но покупатель на эти «посмотреть еще предложения» кликает и покупает, вставки «остался один номер» и т.д. работают. Бизнесу надо продать, а не сделать удобно, так что здесь та ситуация, когда дизайн идет на поводу у маркетологов и жертвует ux-ом. И очень странно, что дизайнер этого не понимает, а так да, в половине примеров баннеры выпили из реальных сайтов и уже инфа стала лаконичнее и читабельнее, только кто это делать будет?

Ответить
0

Спасибо за обратную связь по Личному кабинету. Мы стараемся и дорабатываем его. Если у вас или других пользователей будут комментарии — мы обязательно их учтём.

Ответить
3

А ещё у вас очень агрессивные рассылки. SSL сертификат мне всё пытаетесь впарить за 900 рублей :) Let's Encrypt мне его бесплатно предоставил. А ещё и стоимость доменов зон .net.ru и .msk.ru за гранью реальности.

Ответить
0

Альтернатива?)

Ответить
0

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

Ответить
0

Как вернуться в старый интерфейс? Новый полное ДНО!

Ответить
0

Не очень понятно, что не так со скролом на видео. Вы вообще о чем?)

Ответить
2

О том, что делаешь колёсиком мыши 15 оборотов, продвигаешься на 10 пикселей

Ответить
–4

Невозможно. Плавный ккролл жестко привязан к событию "колесика" мыши.

Ответить
2

Проблема была исправлена. Можно чекнуть.

Ответить
0

на макбуке не скроллится вообще

Ответить
1

Возможно. Проверьте.

Ответить
0

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

Ответить
0

Биржу грузоперевозок лучше реализовывать по более простой структуре:
1. Вверху шапка с лого и переключателем типа карточек (заявки, перевозчики)
2. Далее идут карточки с описанием услуг или заявок
3. Внизу классический футер с контактами и дополнительной информацией.
4. Дополнительно, можно добавить личный кабинет с авторизацией через соц.сети для продажи различных услуг или подписок.

Ответить
1

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

Ответить
0

Название домена у вас интересное! У нас весь город разсписан такими "тегами" с адресами телеграм каналов с "закладками" например увозит и т.д.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }