Экспедиция

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

Задача

Сделать редизайн главной страницы инернет-магазина так, чтобы заинтересовать топ-менеджеров «Экспедиции» в полноценной разработке интерфейса.

Что такое плохо?

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

Грубые ошибки в интерфейсе и взаимодействии, которые я обнаружил:

1. Сложная и запутанная навигация

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

Это неполный список недугов. Я анализировал только главную страницу. Уверен, что если провести тщательный разбор, количество косяков увеличится еще на десяток-другой.

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

Решение

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

Теперь о том, что я сделал более детально:

1. Линейный интерфейс

Моя версия сделана на основе существующего сайта. Интерфейс представлен в линейном виде, который в будущем упростит адаптацию под мобильную версию сайта (640 пикселей)

2. Навигация

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

3. Типографика

Все важные элементы сайта имеют размер не менее 50 пикселей в высоту. Это растянуло макет вертикально, но ссылки стали более явными. Тоже самое относится к типографике — средней размер шрифта на странице варьируется от 15 до 16 пунктов, что позволяет читать информацию не напрягая глаз.

4. Графическая привязка 

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

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

Сама карточка стала немного больше, что позволяет получше рассмотреть фотографию товара:

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

6. Дополнительное меню

Меню каталога должны отображать подкатегории, чтобы сфокусировать покупателя и показать ассортимент. Категорий было 11, осталось 8. Также это экономит как минимум один экран и время пользователя:

7. Поиск

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

8. Взаимодействие после нажатия кнопки «В рюкзак» 

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

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

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

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

9. Разделение на две целевые аудитории:

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

Итог:

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

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

Спасибо за внимание!