Ошибки при дизайне интернет-магазинов: ТОП-10 для главной и каталога
Привет, это Antro. Мы провели больше 50 аудитов интернет-магазинов и собрали топ ошибок, от которых бизнес может терять деньги. Показываем примеры и объясняем с помощью исследований.
В своей работе мы делаем ставку на CX, клиентский опыт. Делаем дизайн не просто красивым, но и функциональным. Важно, чтобы покупатель легко ориентировался в магазине, находил нужные товары и не отвлекался от покупок. Чтобы помогать бизнесу зарабатывать, изучаем исследования авторитетных дизайнерских институтов, проводим собственную аналитику. В статье делимся главными наблюдениями.
5 ошибок главной страницы магазина
Главная встречает пользователя. В некоторых случаях по ней он принимает решение о том, знакомиться ли с магазином, либо дальше блуждать по интернету. Страница должна отображать важную для пользователя информацию, быть понятной и впечатляющей. Разбираемся, каких ошибок избежать:
Ошибка 1: главная страница не отображает ассортимент
Иногда по главной странице сложно понять, какие товары предлагает магазин. Из-за этого пользователь может растеряться: подумать, что на сайте нет нужного продукта, и уйти к конкурентам. В этом случае бизнес теряет клиента в самом начале пути — ещё до того, как он познакомился с магазином.
Как грамотно продемонстрировать ассортимент:
- если на сайте продают много разных товаров, стоит показать как можно больше типов продуктов. Baymard Institute рекомендует показывать не менее 40% типов товаров. Пользователи делают вывод о новом магазине по его ассортименту. Если в магазине одежды показать на главной только обувь, многие подумают, что компания продаёт одни кроссовки и туфли.
- обойдитесь без лишнего креатива. Сделайте интерфейс сайта похожим на другие интернет-магазины. Новые пользователи определяют тип сайта по навигации и оформлению главной страницы, поэтому важно, чтобы дизайн был привычным и узнаваемым.
- покажите не только ассортимент, но и дополнительные преимущества, которые предлагает интернет-магазин. Укажите, что доставку можно оформить в день заказа, существует программа лояльности или скидка на первую покупку. Эти факторы повлияют на то, какое впечатление составит покупатель о магазине.
- добавьте отзывы к товарам — на них полагается 95% пользователей при оценке ассортимента интернет-магазина. В интерфейсе сайта стоит отобразить среднюю оценку и количество отзывов о товаре.
- предложите пользователю разные способы подбора товаров. Распределите продукты по категориям, добавьте фильтры в поиске. Так вы акцентируете внимание на разных сценариях использования покупок.
Ошибка 2: недостаточно информации о товаре на карточках
Главная страница должна показывать не только ассортимент, но и давать представление о товарах. Пользователи делают часть выводов о магазине, посмотрев на товары. Они оценивают их внешний вид, прикидывают, по карману ли им покупки, изучают цвета и характеристики продуктов.
Что обязательно нужно разместить:
- название товара;
- фото в хорошем качестве;
- цена и скидка, если она есть;
- смена фото товара по ховеру, если их несколько.
Что стоит разместить:
- ключевые характеристики товара (например, габариты);
- кнопка для сохранения в «избранное» или корзину;
- вариации товаров по типу, размеру или другим характеристикам;
- средняя оценка и количество отзывов.
Ошибка 3: отсутствие позиционирования на первом экране
Когда пользователь заходит на сайт малоизвестного интернет-магазина, он может не сразу понять, на чём специализируется компания. Стоит понятно объяснить, что продаёт организация, на каких покупателей ориентируется, в чём особенность товаров. Так пользователю не придётся разбираться во всех тонкостях самому.
Часто большие магазины и маркетплейсы не описывают свое позиционирование. Но это не значит, что они знают какие-то определенные секреты. Просто они уже достаточно известные и могут себе позволить использовать первый экран под другие нужды :)
Ошибка 4: непроработанная навигация в хедэре
По категориям в навигации пользователь делает выводы об ассортименте магазина. Если в хедэре типы товаров представлены узко, потенциальный покупатель подумает, что на сайте почти нет выбора. Он просто перейдёт к конкурентам, где сразу видно широкий ассортимент.
Решить проблему легко — перечислите категории товаров в навигации. Если продаёте одежду, добавьте категории «для мужчин», «для женщин», «для детей». Продаёте технику — добавьте разделы «ноутбуки», «наушники», «комплектующие для ПК». Так пользователь сможет бегло пройтись по навигации и составить представление о товарах в магазине.
Ошибка 5: полотна текста — плохая вёрстка информации
Пишите для интернетов: коротко, понятно, без премудростей. Куча букв без абзацев и оформления оттолкнёт читателя. Такой текст читать просто лень ¯\_(ツ)_/¯
Советы здесь очень простые:
- разбивайте текст на подзаголовки;
- делайте маркированные и нумерованные списки;
- выделяйте важное;
- делайте абзацы короткими;
- пишите просто, без сложных оборотов и непонятных терминов.
5 ошибок каталога товаров
Пользователь перешёл с главной в каталог — поздравляем! Но радоваться всё равно рано: в любой момент он может передумать и закрыть сайт. Разбираем опасные места:
Ошибка 1: недостаточно информации о товаре на карточках
Когда информации мало, пользователь может не заметить продукты, которые ему подходят. Если информации много — она отвлекает. Перегруженная страница пугает пользователя, ему не хочется разбираться во всех деталях.
Тестирование Baymard Institute показало: когда информации мало, пользователь начинает переключаться между списком товаров и отдельными страницами продуктов. Каждый раз посетителю сайта нужно открывать новую вкладку и читать подробности о товаре. Пользователей хватает ненадолго: чаще всего такие неудобные сайты они закрывают через 3–15 минут.
Обратный результат — когда карточки товаров отображали дополнительную информацию при наведении. Так пользователи быстрее узнавали о нужных характеристиках и не тратили много времени на бессмысленные поиски.
Базовый минимум, который стоит показать на карточке товара:
- фото товара в контексте и в отдельности от него. Покажите, как выглядит продукт на прозрачном фоне, а затем поместите его в контекст. Так пользователь сможет представить, как выглядит товар сам по себе, и как он выглядит во время использования. Например, магазин сантехники может сфотографировать кран на белом полотне, а затем добавить фото крана в ванной комнате.
- важные для выбора характеристики. Их стоит отобразить в описании карточки, либо показывать при наведении на неё. Например, в магазине матрасов можно показывать габариты и жёсткость, когда пользователь наводит курсор на фото
- повторяющиеся элементы. Кнопки и информацию, которая распространяется сразу на много товаров, можно вынести на карточку в каталоге. Например, «добавить в избранное», «добавить в корзину», «бесплатная доставка». Чтобы не засорять каталог, эту информацию можно показывать при наведении на карточку.
- варианты товара. Если продукт существует в других вариациях — стоит об этом сказать. Предложите пользователю купить продукт в другом цвете, с другим размером, либо из другого материала. Так вы дадите покупателю больше выбора, и он сможет подобрать товар себе по душе.
- фото, которые помогут в выборе. Покажите характеристики продукта с помощью фотографий. Для этого покажите его в таких сценариях, которые помогут представить его в действии. Например, сумку для ноутбука стоит показать снаружи, чтобы пользователь оценил её внешний вид, а затем показать внутри — чтобы оценить вместимость.
Ошибка 2: неправильно спроектированы фильтры
С фильтрами можно допустить сотни ошибок, но чаще всего мы встречаем эти:
- нет очевидного подтверждения, что фильтры применены. Если после применения фильтры пропадают из виду, пользователь может неправильно воспринять ассортимент. Например, он может выставить фильтрацию по цвету, а затем забыть про неё. Покупатель будет смотреть на 10 товаров одного цвета и думать, что на этом ассортимент магазина закончился — всё из-за того, что применённые фильтры нигде не обозначили.
- нельзя разом увидеть весь список фильтров. Из-за этого при тонкой настройки параметров пользователь может растеряться. Возникает та же проблема: пользователь смотрит на 10 чёрных кружек и думает, что на этом ассортимент в магазине посуды закончился.
- нет быстрого способа удалить фильтры. Иногда после удаления каждого нового фильтра страница обновляется, либо пользователю заново приходится пролистывать список параметров. Сложными фильтрами посетители сайта просто не пользуются — проще зайти в другой магазин, чем перенастроить список фильтров.
Как исправить ошибки с фильтрами:
- разместите фильтры в боковой панели, либо над карточками товаров. Фиксируйте там все применённые параметры. Так фильтры всегда будут в поле зрения, и пользователь не забудет, какие характеристики отметил.
- добавьте кнопку очистки фильтров. Когда пользователь захочет найти другой товар, ему не придётся удалять каждый параметр по отдельности. Небольшой крестик в интерфейсе значительно облегчит жизнь покупателям.
- указывайте параметр фильтра. Некоторые характеристики непонятны без дополнительных пояснений. Например, применённый фильтр «15 см» можно прочитать по-разному. Это может быть высота, длина или ширина. Чтобы не возникало путаницы, параметры стоит подписывать.
Ошибка 3: отсутствие релевантных фильтров
Согласно исследованию Baymard Institute, существуют пять основных фильтров, которые применяют пользователи вне зависимости от типа товара:
- цена (12% магазинов не указывают её);
- пользовательские рейтинги (53% сайтов отражают их);
- цвет (10% не добавляют такой группировки);
- размер (15% не делают таких фильтров);
- бренд (27% не обозначают их).
Когда этих фильтров нет, пользователю сложнее подобрать товар. Если товар в магазине подобрать сложно, он пойдёт в другой магазин. Всё просто.
Как улучшить фильтрацию:
- предлагайте фильтры в соответствии с категорией товара. Если пользователь заходит в раздел с наушниками, предложите настройки поиска по типу конструкции и диапазону частот. Не стоит тащить в раздел фильтры по количеству мегапикселей и другие параметры из остальных разделов.
- сделайте фильтры под все характеристики. Позаботьтесь о том, чтобы пользователю не приходилось открывать все карточки подряд в поисках нужного товара. Подстройте фильтры так, чтобы они учитывали даже параметры, которые ищут не так часто — например вес у ноутбуков.
Ошибка 4: плохой UX для товаров, которых нет в наличии
Когда в магазине нет товара — это печально, но ситуацию можно подпортить ещё и некачественным UX с оповещением об этом. У проблемы есть несколько вариаций:
- самое худшее — когда товара нет в магазине, но на сайте об этом не сказано. Пользователь попробует купить продукт, но в последний момент его постигнет разочарование. Очень плохой сценарий.
- непонятное решение — просто указать, что товара нет в наличии. В этом сценарии нет понятного ответа на вопрос «а что делать?». Пользователя оставляют в растерянности: товар следует ждать? Товар прекратили выпускать?
- костыльное решение — добавить кнопку «сообщить о поступлении товара». Так магазин старается позаботиться о пользователе, но не шибко качественно. Если товар пользуется спросом, продавец просто подаёт сигнал — «купи товар в другом магазине». Пользователь так и поступит.
Решения такие:
- Если товара нет в наличии временно, но вот-вот появится — просто увеличьте сроки доставки. Для тех, кому товар требуется срочно, предложите аналоги: продукт в другом цвете, либо его заменители.
- Если товара нет в наличии, и больше он не появится — сообщите об этом сразу. Не стоит давать ложных надежд. Скажите напрямую и предложите покупателю другие продукты, которые могут заменить искомый товар.
Ошибка 5: отсутствие хлебных крошек
Хлебные крошки — это путь до страницы, на которой находится пользователь. Они указывают этапы, которые прошёл посетитель сайта, чтобы он мог вернуться к любому из них. Когда хлебные крошки настроены неправильно, либо их вовсе нет, навигация усложняется.
Исследование Baymard Institute показывает, что от проблем с хлебными крошками страдает 68% интернет-магазинов. Из них 45% — это сайты, где хлебные крошки отображают только предыдущий этап, и не учитывают путь пользователя целиком. Остальные 23% — интернет-магазины, где хлебных крошек вовсе нет.
Решение проблемы невероятное — добавить хлебные крошки. Так пользователь сможет перемещаться по разным категориям товаров, и поиск нужного продукта станет для него гораздо удобнее.
Это первая статья из нашего цикла об ошибках в дизайне интернет-магазинов. Ставьте лайк и подписывайтесь на наш блог, если публикация вам понравилась. Пока мы готовим новые материалы, вы можете узнать больше о дизайне интернет-магазинов из других наших статей:
Подписывайтесь на наш канал в Telegram, чтобы узнавать больше о пользовательском опыте и дизайне. В нём мы делимся исследованиями, анонсируем наши статьи и рассказываем о работе команды.
Следуйте этим советам и ваш интернет-магазин станет неотличим от всех остальных интернет-магазинов, которые следуют этим же советам!
С одной стороны вы сейчас противоречите закону Якоба.
А с другой стороны — проблемы можно решать разными способами. Поэтому насколько ваши решения будут похожи на решения других интернет-магазинов — решать только вам :)
ну да, а если не будете следовать, то будете неотличимы от всех остальных интернет-магазинов, которые не следуют этим же советам. так и останетесь неконкурентоспособным убыточным магазином.
Лет 10 или больше, не вспомню уже, читаю одни и те же статьи под таким заголовком.
И за 10 лет до сих пор не все умеют правильно базово проектировать интернет-магазины!)
Статьи на тему "Тренды в дизайне 20хх" все равно впереди планеты всей. В них каждый год рассказывают, что нужно использовать 3d, анимацию и "нежные" пастельные цвета.
А что еще писать если уже все важное было написано