Почему снижается конверсия сайтов? Примеры 60 ошибок в дизайне и юзабилити

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

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

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

Как Вася выбирал микрофон в интернет магазине с плохим юзабилити

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

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

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


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


Поскольку в рубрикаторе не было никаких подсказок, Вася отфильтровал товары по назначению и выбрал студийные микрофоны. Логика здесь такая: если студийный — значит качественный. Все остальное второстепенно и непонятно.

В разделе «Микрофоны» Васю встретил сложный фильтр, который новичку правильно не настроить. Если на знаете тему — не сможете выбрать подходящий микрофон.


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

Выбор Васи — микрофон Superlux HO8 стоимостью 50 $.


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

Источник фантомного питания — это дополнительный элемент, без покупки которого студийный микрофон Superlux HO8 не будет нормально звучать. В карточке товара этот момент прописан одной строкой, которую неподготовленный новичок легко пропустит.


Далее Вася начал самостоятельно собирать информацию о выбранном микрофоне и выяснил следующие нюансы:

1. На сайте этого же интернет-магазина самая дешевая установка фантомного питания ZEEPIN 48V. Она стоит около 37 $ и доступна только по предзаказу. Стоимость более дорогих установок начинается от 65 $.
2. Помимо фантомного питания к микрофону Superlux HO8 нужно приобрести стойку и поп-фильтр. Еще не помещает внешняя звуковая карта и акустический экран для подавления лишних шумов. Все вместе это еще не менее 100 $.
3. Вместо всего перечисленного можно было приобрести бюджетный USB-микрофон, который смог бы удовлетворить потребности начинающего ютубера. Например, за 50 $ можно приобрести Trust GXT 232; а за 85 $ — Blue Microphones Snowball iCE.

Что получилось в итоге: Вася зря выкинул деньги и не пользуется купленным микрофоном, а владелец интернет-магазина потерял постоянного клиента.

Установка фантомного питания ZEEPIN 48V за 37 $.



Чтобы избежать потери клиента, владельцу интернет-магазина стоило посмотреть на свои товары с позиции новичка и сделать ставку на образовательный контент — ко всем сложным продуктам добавить подсказки, полезные статьи или видео. Если бы Вася своевременно узнал о фантомном питании, то не купил ненужный ему товар: он бы перешел на страницу с микрофоном Superlux HO8 → из открывшихся подсказок узнал про фантомное питание → перешел бы на статью, где подробно рассказывается про фантомные установки → изучил материал про разновидности микрофонов → вернулся бы к списку микрофон и выбрал из доступных предложений оптимальный вариант с USB-разъемом. Все бы остались довольны и продолжили сотрудничество. А так обида и уход к конкурентам.

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

Техническая часть

Низкая скорость загрузки

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

Долгая загрузка сайта.


В примере показано, что время загрузки сайта составляет 9,83 секунды. Это недопустимый вариант, поскольку редко когда посетители ждут более 3 секунд.

Тяжёлые файлы картинок.


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

Большое количество запросов во время загрузки страницы.


В Amazon провели исследования и посчитали, что если скорость загрузки сайта падает хотя бы на 100 мс, то конверсия продаж сразу снижается на 1%. Чтобы этого не допустить — владельцам сайтам рекомендовано проводить два типа тестов. Первый тест должен проводиться в реальном времени и по нему можно сразу вычислить медленные страницы. Второй тест должен быть периодическим (раз в неделю или месяц) и по его результатам можно исправлять все медленные элементы.

Неработающие или битые ссылки

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

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

Битые ссылки в программном коде.


Постоянный мониторинг — это единственный способ избежать битых и неработающих ссылок. Когда обнаружите неисправность — сразу же займитесь корректировкой программного кода.

При открытии страницы в новом окне.


Ошибка 404


Если у вашего сайта до 100 000 страниц — запускайте мониторинг хотя бы раз в месяц. Если страниц больше, то старайтесь устраивать еженедельные проверки.

Не оптимизированная страница 404

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

Следите за тем, чтобы страница 404 не была скучной и пустой.


Чтобы оптимизировать страницу 404 — придерживайтесь следующих рекомендаций:

1. Кратко опишите, куда попал человек и почему он здесь.
2. Разместите ссылку на главную страницу сайта.
3. Разместите ссылки на популярные разделы сайта.
4. Попросите пользователя сообщить об ошибке администратору сайта.
5. Заморочьтесь с дизайном и сделайте так, чтобы 404 страница была оформлена в том же стиле, что и весь сайт.

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

Плохо реализованная горизонтальная прокрутка

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


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

Отсутствие адаптивной верстки

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

Сайт без адаптивной верстки.


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

Сайт не настроен под сверхчеткие Ultra HD мониторы

В 2019 году большинство сайтов ориентируются на мониторы с двумя типами разрешений: HD и Full HD. В HD-экранах плотность пикселей составляет 1366×768 — это самые бюджетные мониторы, которые постепенно утрачивают свою популярность. В Full HD-экранах плотность пикселей составляет 1920×1080 — это самые популярные мониторы, на разрешение которых ориентируются большинство разработчиков при настройке адаптивного верстки.


Вместе с HD и Full HD-мониторами набирают популярность экраны с Ultra HD-разрешением (4К мониторы). В Ultra HD-экранах плотность пикселей составляет 3840x2160 — это позволяет достигать сверхчеткой картинки с детализированным показом мельчайших деталей на сайте. Также уже можно купить 8К монитор, где плотность пикселей составляет 7680×4320.

Учитывая такую тенденцию можно предположить, что Full HD-стандарт скоро перейдет в бюджетную категорию и самыми популярными будут мониторы с Ultra HD-разрешением. Поэтому важно проводить дополнительный тест и следить за тем, чтобы все элементы сайта корректно отображались на 4К мониторах. Если этого не делать, то по мере перехода пользователей на сверхчувствительные мониторы конверсия вашего сайта будет стабильно снижаться.

Нерабочий поиск на сайте

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

Неправильный приоритет в поисковой выдаче.


Когда будете настраивать поисковик, держите в голове тот нюанс, что некоторые запросы часто вводятся с ошибками. Например, если пользователь будет спешить, то вместо «ноутбук» может ввести «наутбук». Для поисковика на сайте это не должно быть проблемой — он должен правильно распознать запрос и выдавать нужный результат: «наутбук» → «ноутбук» → список нужных моделей.

Ненастроенное автосохранение в корзине заказов

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

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

Настройте автосохранение в корзине и не заставляйте своих клиентов совершать двойную работу. Иначе вы рискуете остаться без постоянных покупателей.

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


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

Проблемы с версткой

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

Пример слетевшей верстки: жмете на форму для заполнения → экран автоматически возвращается в исходное верхнее положение.


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

Пример слетевшей верстки: иконки соцсетей налезают на текст страницы.


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

Пример слетевшей верстки: некорректное отображение текста в адаптивной версии сайта.


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

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


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

Некликабельные кнопки

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

Пример некликабельных кнопок: не работают кнопки «Купить в кредит» и «Купить в 1 клик».


После нажатия кнопки «Купить в кредит» перед пользователем должна появится страница с размером ежемесячных платежей и условиями кредитования. Через менеджера все нюансы выяснять долго, поэтому легче закрыть сайт и все посмотреть у конкурентов. Кнопка «Купить в 1 клик» нужна для постоянных клиентов, которые много покупают и ценят свое время. Если кнопка не будет работать, то такие пользователи сразу найдут замену неудобному сайту.

Пример некликабельных кнопок: не работают фильтры для оценки или окончательного выбора альтернативных цветовых решений.


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

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


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

Пример некликабельных кнопок: некликабельный баннер на главной странице.


В примере баннер не только некликабельный, но и составлен без призыва к действию. Чтобы это исправить — достаточно добавить работающие кнопки «Перейти» или «Подробнее».

Некликабельная корзина товаров

Корзина товаров — это привычное место, куда посетители интернет-магазина заходят перед подтверждением заказа. Если значок «Корзина» сделать некликабельным, то многие пользователи не захотят разбираться с непривычным функционалом и совершат покупку в другом месте. Чтобы этого избежать — не экспериментируйте с корзиной товаров и всегда делайте ее значок кликабельным. И еще момент: не используйте вместо слова «Корзина» другие креативные названия. Есть риск, что на «Тележку», «Склад» или «Лукошко» пользователи не кликнут.

Самостоятельный запуск аудио и видеофайлов

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


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

Логика

Кнопка «гамбургер» в основной версии сайта

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


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

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

Сайт без логотипа

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

Слайдер на главной странице

Стоит учесть, что главную страницу видят 1-5% от всего трафика сайта. Также большинство слайдеров плохо отображаются на мобильных девайсах и сохраняют те же проблемы, что и сайты с горизонтальной версткой. Качественный слайдер делать иногда дорого, а бюджетные варианты сразу портят общее представление о ресурсе: пользователь переходит на сайт → видит неудобный и плохо проработанный слайдер → покидает страницу или начинает изучать страницу с негативным настроем. Чтобы этого избежать — достаточно отказаться от слайдера на главной странице и разложить презентационный материал о сайте с помощью простых дизайнерских решений: текста, графики или видео.

Невыделенные ссылки

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


Чтобы повысить вероятность перехода — можно собрать все рекомендованные ссылки и продублировать их в заключении к статье. Так пользователь точно увидит, что еще почитать по выбранной теме.

Избыточные анимации

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

Не допускайте избыточности и акцентируйте внимания на важных анимациях.

Отвлекающие элементы

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

Всплывающие окна без кнопки «Закрыть»

Посетитель сайта — это гость, все действия которого должны носить только добровольный характер. Если добавить на сайт всплывающие окна и спроектировать их без кнопки «Закрыть», то никакого свободного выбора у пользователя не будет. Из-за этого ему гарантированно не понравится ваш сайт и в следующий раз он обязательно выберет конкурирующий ресурс. Поэтому если пользуетесь произвольно всплывающими окнами — обязательно добавляйте к ним крупную кнопку «Закрыть».

Раздражающая капча

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

Навязчивые pop-up окна

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




Если делаете pop-up окна — предлагайте в них что-то полезное и настраивайте их так, чтобы пользователь успевал хоть немного изучить содержимое сайта.

Обязательная регистрационная процедура

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


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


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

Сложная регистрационная процедура

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

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

Маскировка поля ввода пароля

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

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

Навигация

Ненастроенная пагинация

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

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

Непродуманные сценарии перемещения

Находясь на сайте пользователь всегда должен знать, какие действия он может выполнить и что за этим последует. Как только какой-то момент будет не согласован — начинается путаница и проблемы с конверсией. Чтобы было понятно — разберем этот момент на примере несогласованной покупки товара в один клик:

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

Номер телефона указан, но нет подтверждения, что он доставлен менеджеру.


Для закрепления разберем еще один случай. Программисты некачественно проработали сайт и у пользователей проблемы с карточками товара. В карточках нельзя менять количество единиц товара и нельзя удалять выбранный товар из корзины. Поскольку никаких подсказок нет — пользователь быстро разочаруется и не будет ничего покупать в таком интернет-магазине.

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


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

Нет «хлебных крошек»

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

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

Навигация на главной странице

«Главная» — это та страница, на которую будет возвращаться пользователь если заблудится на сайте. Если такой страницы нет, то при первых проблемах с навигацией часть посетителей будет уходить с сайта. Чтобы «Главная» страница выполняла больше полезных задач — целесообразно в ее описании добавить основные рубрики или рассказать о всей структуре сайта.

Для интернет-магазина, этот пункт меню можно не использовать.

Отсутствует навигация внутри статей сайта

Для больших статей в блог нужна своя навигация. Чтобы ее подготовить — достаточно выполнить два действия:

1. Установить плагин, который из подзаголовков статьи будет автоматически формировать содержание. Это содержание будет выводится в начале статьи и с его помощью пользователь сможет сразу начать чтение с нужного раздела.
2. Добавить кнопку «Вверх», которая позволит быстро перемещаться из любого раздела назад к содержанию.

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

Формальная навигация

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

Ниже опубликовано меню с неправильным ранжированием категорий: не выделен основной раздел и не структурированы второстепенные категории.


Еще одна распространенная ошибка формальной навигации — дублирование позиций. Это когда в разделе «Аксессуары» можно встретить категорию «Аксессуары». Такие совпадение нужно убирать и не запутывать пользователя.

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


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

Пример товарного каталога без меню верхнего уровня. У пользователей нет возможности в один клик перейти к выбору другой категории.


Чтобы сделать правильную навигацию — поставьте себя на место новичка, который ничего не знает о сайте. Теперь задайте вопрос: сможет ли такой новичок быстро передвигаться по опубликованным пунктам меню и находить нужную информацию? Если ответ отрицательный, то навигационную цепочку стоит переработать.

Оформление

Неподходящий дизайн

Дизайн — это визуальный образ, который должен привлекать аудиторию и упрощать взаимодействие с сайтом. Качественный дизайн именно так и работает. Непродуманный, устаревший или слишком креативный дизайн снижает все конверсионные показатели и нуждается в немедленном исправлении.

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


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

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


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

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


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

Неудобная текстовая колонка

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

Непропорциональные изображения

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

Пример слишком высокого изображения в шапке. Чтобы добраться к контенту — нужно скролить страницу. Проблема решается уменьшением высоты шапки на 50-70%.


Часто проблемы с пропорциональностью возникают в адаптивной верстке. Поэтому важно проверить дизайн на как можно большем количестве устройств.

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


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

Несочетаемый текст и фон

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

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

Пример плохо читаемого текста на иллюстрациях.


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

Пример нечитабельного текста в адаптивной верстке.


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

Непроработанный дизайн текста

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

Это скучная текстовая простыня.


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

Задизайненый текст.


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

Креативное использование ссылок в элементах интерфейса

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

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


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

Неудачное цветовое оформление

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

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

Урок цветовой арифметики.


Если вам не интересно изучать колористику и разбираться с цветовой гаммой — оставьте на сайте белый фон. Этим пользуется Apple и с клиентами все в порядке.

Чрезмерное количество рекламы

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

Непроработанный призыв к действию

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

Пример баннера со слабым призывом к действию.


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

Пример слабого призыва к действию. Нет четкого предложение ни в кнопке, ни в баннере, ни в тексте.


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

Пример слабого призыва в подписной форме.


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

Пример поврежденного призыва в адаптивной версии сайта.


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

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


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

Некачественные изображения

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

Пример некачественной фотографии товара.


Чтобы быстро поднять качество изображений — купите портативный китайский куб для предметной съемки (фотобокс). Это недорогой аксессуар, который придаст всем изображениям вашего интернет-магазина фирменности.

Отсутствие или переизбыток иллюстраций

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

Плохо сверстанные кнопки соцсетей

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

Пример неправильно оформленных кнопок социальных сетей с устаревшим виджетом instagram.


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

Маркетинг

Нет четкого главного предложения сайта

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

Отсутствие гарантий

Гарантия — это признак того, что продавец уверен в товаре и может ручаться за его качество. Возьмем два интернет-магазина, в которых MacBook Air 2018 года продается за 1900 $. Первый магазин работает без гарантий, а во втором срок гарантийного периода составляет 12 месяцев. При таких условиях большинство пользователей совершать покупку во втором интернет-магазине.

MacBook Air 2018 года — это пример товара, который во всех интернет-магазинах будет продаваться примерно по одной цене. Выиграет в конкуренции сайт с лучшей гарантией.


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

Сложные товары продаются без подсказок

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

Онлайн-чат без менеджера

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

Нет информации о количестве доступного товара

Представьте такую ситуацию: крупная IT-компания открывает новый офис и покупает в него сорок 2К мониторов Dell P2418D. Представитель IT-компании переходит на сайт интернет-магазина → оформляет заказ → получает накладную с указанием точного срока доставки и отталкиваясь от этого срока объявляет сотрудникам о дате начала работы в новом офисе.

Если компании нужно сорок 2К мониторов Dell P2418D, то им важно знать, могут ли они купить такое количество товара в одном месте. Обычно оптовая покупка обходиться дешевле.


На следующий день менеджер интернет-магазина начинает собирать заказ и выясняется, что указанного количества мониторов на складе нет: нужно сорок штук, а есть только десять. Менеджер перезванивает заказчику и объявляет о проблеме. Представитель IT-компании отменяет заказ, поскольку у него есть корпоративным стандарт, правилами которого разрешается использовать только указанный тип мониторов. Кроме того, вышедшим раньше срока сотрудникам придется платить неустойку за каждый день, когда они выходят на работу и не могут выполнять свои обязанности из-за отсутствия монитора.

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

Нет данных о доставке и способах оплаты

Тарифы перевозчиков вместе с комиссией платежных сервисом могут прибавить к первоначальной стоимости заказа до 15%: выбрали товар на 100 $ → получили к оплате 115 $. Из-за этого важно прописывать все службы доставки и все платежные системы, которые поддерживает интернет-магазин:

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

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

Нет письма подтверждения

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

Контент

Проблемы с грамматикой

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

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

Неактуальная информация

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

Если расценки и информацию о себе не обновлять, то у клиентов формируется неправильное ожидание: рассчитывали заказать визитки за 100 $, а минимальная цена еще полгода назад выросла до 200 $. Это раздражает, вызывает недоверие и становится стимулом для того, чтобы никогда не пользоваться услугами компании.

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

Некачественный текстовый контент в блоге

Блог — это инструмент, который должен работать на общее полезное действие сайта. Поэтому любой контент, который не помогает это полезное действие выполнять, будет считаться некачественным. Например, если сайт посвящен продаже газонокосилок, то и блог должен быть посвящен продаже газонокосилок: клиент приходит на сайт → сомневается в выборе той или иной модели газонокосилки → переходит в блог и читает обзоры → получает необходимые ответы → делает заказ или обращается за консультацией. Это качественный контент.

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

Отсутствие обязательных страниц «О нас» и «Контакты»

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

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

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

Слишком длинное страница товара и/или категории

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

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


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

Есть страница, но нет описания товара

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

Отсутствие описания на странице карточки товара.


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

Непродуманная структура карточки товаров

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

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

Отсутствие заголовков и подзаголовков

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

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

Непродуманные названия заголовков и подзаголовков

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

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

Маскировка полезного контента

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

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

Игнорирование списков

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

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

Что дальше

Шаг №1. Скачайте чек-лист с перечисленными ошибками в дизайне и юзабилити.

Шаг №2. Проверьте свой сайт и отметьте все моменты, которые нуждаются в улучшении.

Шаг №3. Устраните отмеченные проблемы и замерьте конверсию сайта.

А с какими ошибками в дизайне и юзабилити сталкиваетесь лично вы? Делитесь опытом в комментариях.

Автор: Андрей Чорный, CEO Plerdy.com