Большой чек-лист для аудита юзабилити интернет-магазина

Шапка сайта – это то, что встречает человека сразу после перехода на сайт (конечно, если нет проблем с иерархией загрузки и внутренней архитектурой кода страницы).

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

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

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

Если вы – крупный магазин по России или всему миру, скорее всего у вас несколько номеров телефона.

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

А) Если в шапке 2–3 телефона одного региона, оставьте только один. Есть сотни способов подать информацию о дополнительных номерах, из которых запихать их все в шапку – худший.

Это оправдано, если телефоны на разные регионы (естественно, это должно быть подписано рядом), либо один из них – многоканальный с роботом.

Помните, что, добавляя 2 номера одного региона, вы сбиваете человека с пути возможной конверсии. Элементарный вопрос, глядя на это непотребство, «На какой номер мне звонить?», с вытекающим далее – «То есть один может не работать?». Это не самый лучший сценарий по обработке посетителя сайта.

Если вы мне не верите и упрямо хотите сделать таким образом, хотя бы поставьте рядом иконки сотовых операторов для удобства посетителя. Вдруг у него, например, на Теле2 будут бесплатные минуты, а на МТС нет.

Б) Если в шапке только номер 8-800, укажите еще один местный либо номер представительства на вашей территории. Если офис в Москве – укажите под бесплатным номером телефон в Москве (естественно, с пояснением рядом).

8-800 – это удобно для посетителя, но не всегда. С этим номером связаны некоторые психологические установки: «Предстоит долгий разговор, пока меня переключат на нужного человека», «Это долго», «У меня маленький вопрос, зачем мне 8-800?», «У меня вопрос по товару/наличию, где номер местного отделения чтобы сразу позвонить им?», «Зачем мне «ехать в Москву через Китай»?».

В) Если больше 2 номеров в шапке сайта, хорошо подумайте, можно ли сократить их до 1–2? Как пример: если у вас магазин по России, есть бесплатный номер и куча региональных представительств, сделайте выбор региона (автоматически или вручную) и выводите под бесплатным номером только телефон конкретного региона. Вспомните о предыдущих пунктах и не заставляйте человека раздумывать там, где он должен действовать.

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

Логотип – не обязательная, но желательная часть, поскольку если ваш сайт понравится человеку (я не говорю про совершение покупки), есть вероятность, что он обратит внимание на логотип.

В некоторых ситуациях могут возникнуть проблемы с пониманием: если ваша компания в логотипе называется «Рога», а в домене написано «копыта.рф», невольно возникнет вопрос: «Что, нельзя было название сайта сделать таким же, как и НА сайте?»

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

К чему я все это? Да к тому, что логотип может работать на вас, если он правильно преподнесен и грамотно сделан.

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

• Если в логотипе есть фраза, она должна быть легко читаема.

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

• Если логотип не в стиле сайта, спросите себя, почему? Может быть, стоит отдать его на доработку специалистам (дизайнеру, например)?
• Если в логотипе название, отличное от домена сайта, могу предположить, что с высокой вероятностью вам так посоветовали неопытные SEO-шники, аргументировав это «плюсом для продвижения», либо необходимый домен был занят (что сомнительно, ведь всегда можно найти приличные варианты по разным зонам в разных вариантах написания).

«Ремонтник333 – отремонтируем даже космический корабль» – нередко можно видеть окаймляющую надпись у логотипа.

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

Причем сам текст логотипа чаще всего просто поясняет сферу деятельности компании.

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

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

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

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

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

Добавьте кнопки определения геопозиции либо модуль автоматического определения по ip.

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

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

Если у вас есть модуль личного кабинета, не забудьте его заметно оформить.

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

Вот неудачный пример:

Корзина для интернет-магазина – крайне важный элемент. Она может мотивировать на покупку, стимулировать к покупке, допродавать и делать многие другие вещи.

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

• Корзина должна быть заметна

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

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

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

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

• Корзина должна быть на виду

Здесь речь о плавающей шапке или футере или любом другом блоке с корзиной. Вариантов реализации масса.

• Не забудьте про адаптацию корзины под мобильную версию
• Корзина должна работать корректно

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

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

• Корзина не должна мешать просмотру страниц

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

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

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

Главная страница сайта чаще всего встречает посетителей.

Эта страница привлекает трафик общего плана, который не ищет конкретный товар, а хочет его подобрать.

Ввиду подобной общности запросов (типа «магазин сантехники в Москве») главная страница должна предоставить посетителю следующую информацию (как минимум):

• Чем занимается магазин

Понятно, что человек, набравший пример запроса выше, ожидает увидеть магазин сантехники. Но очень часто магазины могут быть узкоспециализированы (сантехника фирмы «ФИРМА» или итальянская сантехника), при этом, скорее всего, продвигаются они и дают рекламу по общим запросам. Поэтому из уважения к посетителю дайте сразу понять, что он найдет на сайте.

• Какой товар продается

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

Именно поэтому не заставляйте человека искать товар самостоятельно и потом натыкаться на фразу «ничего не найдено». Пример реализации:

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

Популярные альтернативы баннеру – слайдер и видеофон (либо видео как один из слайдеров).

Видео удобно в отношении демонстрации, к примеру, новой коллекции одежды, доступной для покупки.

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

Примеры баннеров, которые нужно убрать с сайтов как можно скорее:

Чем больше товара на сайте, тем, как правило, обширнее общее меню, обычно расположенное в шапке либо с левой стороны.

Основные принципы, которые нужно соблюдать при проектировании меню на сайте:

• Меню должно быть заметным

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

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

Вот пример «недружелюбной шапки» и меню, «исправляющего ситуацию»:

• Меню должно стабильно работать

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

• Меню должно быть правильно структурировано

Важно не только максимально разбить на подразделы (как мог посоветовать SEO-специалист), но еще и внести специфику ниши в каждый из разделов.

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

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

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

Чуть ниже, в разделе 3.2? я описал несколько вариантов компоновки.

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

Текстовый блок на главной странице обычно бывает 3 видов:

- отсутствует совсем;

- повествует о компании;

- повествует о тематике сайта (либо имеет комбинацию с предыдущим). Преимущественно содержит ключи для продвижения.

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

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

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

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

Пример:

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

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

- легко заметны (можно сделать выделением блока, не меняя стиль самого текста);

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

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

Пример (не самый лучший вариант, просто чтобы вы понимали, о чем речь):

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

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

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

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

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

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

Извиняюсь за хардкор, но надеюсь, вы не повторите таких ошибок и дадите специалистам поработать над необходимым списком фильтров и их порядком.

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

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

А вот как раз блоки сортировок отлично впишутся.

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

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

Не обязательно размещать их снизу, под товаром. «Юлмарт», например, размещает в левом сайдбаре. Некоторые – сверху перед товаром (скрывая часть текста под спойлер).

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

Совет – попробуйте уникализировать эти блоки относительно страницы. Например, на категории сковородок Tefal напишите плюсы не вашего магазина, а самих сковородок: гарантия от производителя 5 лет, РСТ, успешный тест-драйв, не пригорают, состоят из 5 слоев стали и титана и прочее. Вы делаете магазин для людей, а не для себя, так дайте им всю полезную информацию. Если они перед покупкой захотят о вас почитать, найдут страницу «О компании», даже если она спрятана. Даже если ее нет, вас «пробьют» по поиску по названию компании. Не сомневайтесь.

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

Частые ошибки и проблемы:

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

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

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

На страницу категории этих самых «сковородок тефаль» человек должен суметь перейти как минимум 3 способами:

- с поиска по сайту;

- с результатов фильтра;

- с меню (с мегаменю, с быстрой ссылки с общей категории).

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

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

Пример с почти полным отсутствием характеристик товара:

Зато куча лишнего пространства съедена информацией о магазине и преимуществах (естественно, общими словами без конкретики).

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

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

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

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

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

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

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

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

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

Вот пример, когда одна из ключевых характеристик просто не указана (говорю про время удержания температуры):

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

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

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

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

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

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

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

Также не советую делать первый элемент навигационного меню в виде «домика» (который ведет на главную). Домик на мобильном устройстве почти невозможно нажать пальцем из-за его размера.

Если у вас не пара строк в этом блоке, а целые списки номеров и офисов, подумайте над реализацией «карты филиалов», интерактивной или статической.

Примеры:

И вот пример динамической, просто оформленной карты с филиалами:

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

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

В целом, здесь также справедливы рекомендации от пункта 5.2.

Если есть необходимость в размещении формы обратной связи, следует предусмотреть максимум удобств для ее заполнения. А именно:

- «серые» подсказки в полях для заполнения;

- «маска» для телефона;

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

Здесь тоже нужно не переборщить, поскольку выбор города через выпадающий список – это ад. Я говорю про обычный вариант исполнения, который сделан в большинстве случаев.

Примечательно, что эту страницу или просто информацию с нее частенько размещают на главной.

Рекомендации к этому блоку справедливы с пункта 5.1.

Текст о компании – крайне важная вещь. Людям надоели тексты, написанные по одному шаблону копирайтером по 20 руб. / 1000 с. Никаких «мы работаем на будущее, внедряем инновационные технологии» и прочего словоблудства.

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

Если у вас «качественный сервис», пишите, что в него включено: доставка курьером в день заказа, гарантия защиты от потери на почте и прочее.

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

Нет, нет и нет!

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

Итак:

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

- текст должен содержать конкретные данные и информацию, никаких размытых формулировок;

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

Также неплохо снабдить информацию мультимедиа-материалами.

Если у вас собственное производство, предоставьте фото, если продажа лицензионных продуктов – сертификаты и лицензии.

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

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

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

Пример по автоматическому расчету стоимости доставки по клику на карту (расчет идет от точки офиса):

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

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

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

P.S.: Согласен, с информацией тоже нелады.

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

- как минимум была на сайте;

- имела всю необходимую и актуальную информацию до мелочей, включая отдельный email, куда писать или звонить;

- имела читаемый вид (вопрос форматирования на вашей совести).

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

Вход

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

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

Регистрация

Отдельная головная боль для большинства – много полей для заполнения.

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

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

Если присутствует страница с историей заказов, сделайте добро для клиентов и снабдите каждый заказ текущим статусом («Обработка», «Оплачен», «Отправлен», «Получен», «Отказ» и т.п.). В состав заказа добавьте ссылки на сами товары.

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

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

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

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

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

1) Попал из закладок браузера (сохраненных страниц, списка посещаемых и т.д.).

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

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

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

2) Перешел по внутренней ссылке на сайте.

3) Самостоятельно ввел неверный адрес.

4) Адрес страницы существует, но не обработаны редиректы (например, /).

Чаще всего на странице 404 делают либо карту сайта с основными разделами, либо пару кнопок «на главную»/«назад».

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

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

Не стоит уродовать сайт вот такими вещами:

Есть масса вариантов улучшения индексации сайта, среди которых этот – один из худших (но дешевый и легко реализуемый).

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

Можно также вставить небольшое окно с картой.

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

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

Чаще всего виджеты – это то, что всех раздражает. Увы, это суровая правда. Может казаться, что предоставляете посетителю множество вариантов связи с вами, но только напираете, как продавец в офлайновом магазине бытовой техники. Забудьте о всплывающих окнах на пол-экрана от виджета обратного звонка через 15 секунд после посещения страницы (хорошо, если 15). Это не работает так, как нужно вам.

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

Да, такие виджеты нужны в ряде проектов и тематик, но они должны быть в пассивном режиме: показать посетителю возможность связи, но при этом оставить инициативу за ним.

Смертельный грех вы совершите, если разместите на сайте более 1 активного виджета (который сам пытается взаимодействовать с посетителем). Окно чата обратного звонка, трубка телефона, мешающая нажать кнопку «наверх» – это все ставит крест на сайте и возможной продаже.

Пример неудачной простановки виджетов и их наложение:

Следите за тем, чтобы кнопка «наверх»:

- была на расстоянии от границ экрана;

- не перекрывалась виджетами (чаще всего грешат виджеты обратного звонка с плавающей трубкой и онлайн-чаты);

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

Правда, не везде это подойдет.

Также можете проработать кнопку «наверх» и на мобильной версии, если есть такая необходимость:

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

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

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

Очень неприятно, к примеру, когда после заполнения адреса, вам перезванивает менеджер и невинно говорит «Здравствуйте! Вы заказали то-то и то-то. На какой адрес отправить?».

Еще один момент – оптимизация процесса заполнения большого количества полей.

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