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

Анализ юзабилити сайта emilyshop.ru

Шапка сайта.

1. В шапку сайта добавить кнопки обратной связи «Заказать звонок» и заказа обратной связи

«Задать вопрос», при клике на которые будут открываться всплывающие формы.

Поля формы «Заказать звонок»:

Имя (необязательное поле)

Телефон* (обязательное поле)

Поля формы «Задать вопрос»:

Имя (необязательное поле)

e-mail* (обязательное поле)

Вопрос* (обязательное поле)

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

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

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

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

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

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

Навигация.

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

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

2.В строке поиска необходимо добавить подсказки при вводе текста. Это очень облегчит поиск по сайту.

Главная страница

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

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

2.Необходимо разместить 4 карточки рекомендуемого товара (в данный момент размещено только две), чтобы не было пустого неиспользуемого пространства. Это сравнимо с эффектом в магазине, когда продавцы выставляют товар на полке таким образом, чтобы они выглядели полностью заполненными.

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

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

4.На главной страниценеобходимо добавить блок «Новинки». В данном блоке необходимо размещать все добавляемые новые товары.

5. Добавить блок «Наши бренды», при клике на которые будет осуществляться переход на сортировку товаров по тому бренду, на который кликнули.

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

Подвал сайта.

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

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

Страницы каталога

1.На карточках товара в каталоге добавить кнопку "купить в 1 клик".

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

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

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

3.

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

4.Кнопки пагинации необходимо сделать в большем размере.

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

Необходимо сделать высотой, к примеру, как кнопка «следующая».

Карточка товара

1.Необходимо использовать имя бренда в названии товара.

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

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

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

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

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

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

3.В карточку товара добавить блок «Недавно просмотренные товары». Данная мера способствует увеличению конверсии, т.к. если человек ходил по сайту и потерял товар, который ему понравился, то в списке недавно просмотренных он его найдет.

4.Если на товар существует скидка, разместить выгоду для человека в процентах. Например, выгода 23%. Это показывает клиенту сколько он сэкономит на покупке.

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

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

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

В более подробном виде необходимо разместить в всплывающем окошке при клике на иконку или короткую фразу об оплате.

7.Необходимо разместить информацию о наличии продукта. Например, «в наличии», «готов к отправке» или, например, «временно отсутствует». Это повысит уверенность покупателя, что он получит товар.

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

9.Кнопку «купить в корзину» оформить объемно, чтобы вызывало желание кликнуть на неё.

10.При наведении и длительном расположении курсора мыши на кнопке «купить» необходимо сделать всплывающее окно подсказки с фразой «Добавить в корзину (вы можете удалить товар из корзины в любое время)». Эта мера позволит увеличить уверенность покупателя.

Формы на сайте

1.В форме регистрации в ЛК объединить 2 поля имя и фамилию для сокращения количества полей.

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

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

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

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

Дополнительные разделы

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

2.Добавить раздел «Акции», в который разместить все товары со специальными предложениями.

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

Дизайн

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

В данный момент на сайте реализовано в разных видах: с закруглениями и с полными углами.

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

3.Все элементы дизайна сайта выровнять по сетке для структурирования.

4.

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

2. Нарисовать макет - новый вариант страницы любого товара (например,

http://emilyshop.ru/category/sportivnaya_obuv/zhenskaya_kollektsiya_sport/24078/ или любого другого товара) с исправлением проблем по юзабилити.

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

Макет приложен к документу.