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

Коли бы существовал способ составить безупречное техническое урок для создания интернет-магазина, электронная коммерция была бы похожа сверху санаторий. «Купил путевку», то бишь заказал торговое помещение согласно чудесному ТЗ, а дальше все само лицом. Но это невозможно, а потому разработка каждого ресурса, предназначенного на ecommerce – это индивидуальный и очень непростой процесс. Присутствие этом, сколь бы объемным ни было ТЗ, оно неважный (=маловажный) гарантирует отсутствия ошибок. В этой статье мы остановим свое подчеркнуть что на ошибках интерфейса.

Все значения термина интерфейс сводятся к тому, что такое? это взаимодействие человека и механизма. В данном случае система – это сайт интернет-магазина. Пользователь видит под собой графический интерфейс, и понятно, что это реализуется по причине системе управления контентом (платформа, CMS, движок). Однако благо пользователь пришел за покупкой, но быстро покинул сайт, безлюдный (=малолюдный) совершив ее, это выражение его мнения. Почему-то ему не понравилось на этапе лапа. Взаимодействие не сложилось. И есть вполне типичные ошибки, которые к этому могли вогнать.

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

I. Фаза беглого ознакомления

Неинформативная шапка

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

Наравне правильно:

• Логотип служит не для красоты, а к описания вида деятельности интернет-магазина (атрибут alt, другой текст). Логотип кликабелен и служит ссылкой на главную с других страниц.
• Контактная исходны данные: несколько кликабельных номеров телефонов (8 800 либо с кодом города), ключ обратного звонка, электронная почта, адрес.
• Время работы (буде круглосуточно – заметно это указать).
• Если вы работаете в разных регионах река у вас есть офисы и точки выдачи в различных городах, так виджет с автоматическим определением либо возможностью выбора города.
• Тара на видном месте (в правом верхнем углу).
• Ссылки для пользовательскую информацию (способы оплаты, способы и стоимость доставки, внутренние резервы возврата/обмена товара и пр.) на видном месте.
• Вид поиска по сайту на видном месте.
• Всё-таки ключевые элементы находятся в первой трети окна.

Одна и та но версия как для десктопного, так и для мобильного сайта

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

Как правильно:

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

Верстка с багами

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

Как правильно:

Тут никак не быть без тестирования. Первым делом понадобятся валидаторы возьми W3C (HTML и CSS). Популярный сервис – https://validator.w3.org. Корректность микроразметки дозволяется проверить инструментами поисковиков (валидаторы микроразметки есть и у Google, и у Яндекса).

• В основе дизайна – модульная сеть. Таким образом в случае изменений верстка не перестань слетать.
• Все медиафайлы (фото, графика, видео) оптимизированы подина веб-формат.
• Проверка в разных разрешениях (ширина макета подстраивается перед разрешение экрана).
• Проверка масштабирования (в диапазоне от 70 по 150%).
• Проверка доступности и функциональности всех элементов на шаблонных страницах.

Диапозитив-шоу непонятного назначения

Возможность вывода слайдеров и каруселей в главной странице обычно предусмотрена. И действительно, нет смысла с них отказываться, но в чем здесь может находиться (в присуствии) ошибка? Дело в том, что слайдеры долго загружаются и про мобильных устройств вообще не предназначены. А раз эдак, то «для красоты» – это неуважительная причина их использования. К тому но слайды, сделанные кустарным способом и непонятно что точно по сути рекламирующие, противоречат принципу: первый экран необходимо быть максимально информативным.

Как правильно:

Информация для слайде должна обслуживать ваше торговое предложение. Вотан слайд – одно предложение, причем оно должно (пре)бывать таргетированным, сезонным и, естественно, привлекательным. Конечно же, сие должна быть не просто картинка: по ссылке ламер должен попадать на страницу с подробным описанием предложения.

Мажоранта важна, но не реализована

Понятно, что блоки с картинками, анонсирующие популярные разделы каталога держи главной, уместно вписанные в другие страницы и позволяющие пользователю cross-sell’ить и up-sell’ить – сие резонно и удобно. Есть и другие факторы юзабилити, которые должны делать в каждом конкретном случае. И не только в интернет-магазине, а в ряде коммерческих сайтов, которые хотят жить(-быть конкурентоспособными. Хорошо бы, но не реализовано. Благодаря этому? Потому что функционал используемого движка изначально сего не предполагал. А если технически движок слаб тож устарел, то это сказывается и на удобстве юзабилити сайта. Во, вам нужны такие-то фильтры товаров и блоки, а они в движке без- предусмотрены. Доработки же вручную сильно затягивают, усложняют и удорожают развитие.

Как правильно:

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

II. Этап поиска

«Неудобный искания – способ подольше удержать посетителя»

Есть несколько причин того, поэтому навигация и поиск по фильтру в интернет-магазине неудобны. И однако же причина не должна быть заведомо циничной. Как ни говорите ваша цель – продавать! А если пользователь сходу приставки не- понимает, что тут есть и как тут шарить, он минутку, может, и задержится, но это бросьте первый и последний раз. В этой же связи игра стоит свеч упомянуть и другую ошибку: «Вы не сразу найдете ответы получи и распишись простые вопросы!» Например, о наличии и способах доставки товара. (не то пользователь готов совершить покупку, а ему предлагают квест «Сначала разыщи, затем уточни, потом столкнись с непреодолимым препятствием», то нетрудно догадаться о его негативной реакции. А некоторые не поленятся отыскать выход своим эмоциям в виде отрицательного отзыва. Вдобавок не на вашем сайте, где есть модерация, а получи сторонних ресурсах.

Как правильно:

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

Карту возможных путей покупателя (Journey Map) нужно отобразить в виде инфографики для внутреннего пользования. Исходная перицентр – откуда посетитель пришел на сайт, нужная финальная эквант – подтверждение заказа. Чтобы этот путь был комфортным, и да и нет-магазин должен отвечать следующим условиям:

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

Отрывок товаров, возникающие в ответ на определенный запрос, должны содержать ЧПУ, а не реализовываться динамически. Это важно и интересах SEO, и для некоторых пользователей (например, чтобы сохранить себя или переслать кому-то ссылку);

• присутствует депортация для возврата к списку товаров и хлебные крошки;
• в любой странице сайта есть визуальное напоминание о волюм, что пользователь хотел сделать покупку. Например, некто захотел прочесть FAQ, а в отдельном блоке увидел «недавно просмотренные товары». Кликнул – и не сомневайся вернулся.

Навязчивость

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

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

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

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

Кое-кто примеры навязчивого сервиса тоже всем известны. Их мишень – добиться контакта с пользователем. Это и всплывающая форма подписки, и вибрирующий яркий значок сервиса обратного звонка, и поп-ап в стиле: «Уже уходите? Подождите, у нас смотри что еще есть!»… Некоторые владельцы интернет-магазинов мало-: неграмотный знают меры, внедряя эти функции и превращая тем самым нахождение на сайте в раздражающий процесс. Таким образом теряется неисчислимое объем потенциальных покупателей.

Как правильно:

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

Коридор на карточку товара – и отказ

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

Абсентизм подробных характеристик товара

Казалось бы, наличие подробного описания – одно изо основных требований, предъявляемых к товару в интернет-магазине. Как ни говорите распространены два вида ошибок. Первая: «Товар точно товар, что его описывать!», и вторая – спарсить описания у конкурентов. Что другой эти вида ошибок чреваты тем, что ваш магазуха будет вызывать меньше доверия, чем вам бы того желательно. А низкое доверие = низкая конверсия.

Как правильно:

Заказывайте описания у копирайтеров. Самоочевидно, что 100% уникальность описаний не всегда возможна и нужна, опять-таки чем полнее будет представлено в карточке описание, тем вернее. Тут важна именно всесторонность описания, а не его распространенность. Сравнивайте свое предложение с конкурентами и добавляйте выгодные заслуги: обзоры, отзывы, «плюшки» при покупке. Если ваш брат уверены в качестве своего товара, предлагайте пользователям бонусы следовать оставленный отзыв. Дополнительно внедрите блок для cross-sell: схожие товары, популярные товары и прочие товарные рекомендации.

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

Неконкурентоспособные фото

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

Хоть (бы), самые распространенные проблемы:

• загрузка неоптимизированных (очень больших) изображений десктопной версии сайта к мобильной версии;
• непрофессиональные фото (темные, снятые с единственного не то — не то неверного ракурса, эстетически сомнительные);
• некликабельное изображение – гляди только 300 × 200 и больше никак. У конкурентов тем временем оный же товар представлен прекрасными фото и даже в 3D.

Якобы правильно:

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

III. Исторический момент оформления заказа

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

«Усложним вам оформление заказа!»

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

Как правильно:

• у пользователя очищать возможность логиниться на сайте через социальные аккаунты. Минуточку занесения личных данных пользователя в форму возникает, идеже он необходим, не раньше;
• последовательность оформления заказа: сортировка товара, выбор способа доставки, выбор способа оплаты, расчет, подтверждение заказа;
• до того, как заказ сформирован, започинщик получает информацию об общей стоимости заказа, о возможных сервисных сборах, стоимости доставки и прочих дополнениях, которые невыгодный должны приниматься к сведению постфактум;
• для каждого целевого образ действий – свой смысловой блок либо элемент. Если аюшки?-то пошло не так, он ясно видит, будто именно и почему. Отредактировать информацию ему легко;
• запросы ФЗ-54 соблюдены. Да, это уменьшает конверсию, так клиент обязан согласиться с вашей политикой обработки персональных данных, перво-наперво чем отправит свой заказ или свои причина.

Содержимое заказа и факт покупки

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

Как правильно:

• Содержимое корзины предельно наглядно. Глотать картинка превью, краткое описание, количество, сумма вслед каждое наименование, другая информация вроде положенной скидки.
• Сформировав поручение, пользователь проверяет все параметры на странице подтверждения заказа и дает свое гармония на переход к оплате.
• Страница подтверждения заказа точно по содержанию соответствует выбранным способам доставки, оплаты и получения товара.
• Впоследствии отправки заказа на сервер пользователь видит информацию «Спасибо после покупку». Там указан состав заказа и краткие показания о программе лояльности (промо-код, бонус, подарок и т.п.) Равным образом письмо с этой информацией дублируется на электронную почту покупателя.

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

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

— «Зайдите получи главную страницу. Понятно ли, куда вам складываться дальше, когда вы смотрите на первый морда (не листая вниз)?».

— «Вы собираетесь купить мал с набором характеристик A, B, C, D. Осуществите это намерение, начав с главной страницы».

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

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

— «Перейдите из каталога на любую другую страницу (пользовательской информации, статью, являвшийся личной собственностью кабинет). Легко ли вам вернуться к просмотренному товару?»

— «Есть ли получи сайте мешающие и раздражающие факторы?»

Когда по результатам независимого тестирования станется ясно, что психологически люди готовы у вас расхватать, вас можно поздравить: ошибки исправлены и теперь часы заняться развитием!

Источник: www.seonews.ru