Дизайн-прожарка 2.0: что не так с «‎Петровичем‎»?

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

Дисклеймер: в прожарке руководствуемся своим опытом, лучшими практиками на рынке, гайдами Baymard Institute и Nielsen Norman Group.

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

Здесь кнопки на привычном месте не оказывается. Это создает когнитивную нагрузку, что подтверждается законом Якоба.

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

Как и AliExpress, интернет-магазин «Петрович» не поддался влиянию конкурентов и оставил кнопку для авторизации и регистрации в меню второго уровня. В очередной раз уточка говорит «зря-зря». Хоть такое расположение и близко к привычному, оно всё равно нарушает шаблон.

Сам же каталог устрашает своими размерами. Читать подкатегории, которые написаны 14 pt и блеклым серым цветом — особое удовольствие.

В IKEA решили эту проблему: интерфейс ведёт пользователя от общего к частному:

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

Разместив тег «Новинки» слева от популярных категорий, можно было бы создать якорный объект для пользователя, во время сканирования страницы. Это привлекло бы больше внимания к рядом стоящим категориям. В подтверждение — исследование NNG: пользователи в большей степени сканируют левую часть страницы в поиске якорных объектов.

Как думаете, что кроется под кликабельной иконкой рубля? Поиск и оплата заказа! Очевидно? Нет!

Стоит подписать элемент, как это делает OZON. То же — для иконки справа от рубля. Давайте больше ясности пользователю в интерфейсе. Особенно, если в нём есть специфические элементы.

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

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

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

Так магазин упускает возможность заинтересовать пользователя товарами или познакомить с ключевыми предложениями. Интерфейс требует действий со стороны клиента. В лучшем случае, пользователь сам разберётся, что означают теги «По дружбе». Если он зайдёт сразу в каталог, то смысл тегов не поймёт вовсе.

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

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

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

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

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

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

Каталог не позволяет увидеть товары, которые входят в категорию и подкатегории, пока вы не откроете конкретную группу.

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

К примеру, Эльдорадо и LEROY MERLIN при переходе в категорию, предлагают пользователю перейти сразу к товарам, «перепрыгнув» выбор подкатегории.. Так каталоги этих интернет-магазинов решают несколько задач:

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

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

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

Ещё несколько моментов, которые бросаются в глаза:

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

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

Заставлять пользователя думать и переводить числа «09/12» в «9 декабря» — тоже не лучшее решение, как и любая когнитивная нагрузка в интерфейсе.

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

Рассмотрим вертикальное представление карточек в каталоге:

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

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

Здесь проблема с длинными названиями обостряется еще сильнее. Четыре строки — чересчур много для товара. Проблема решается выносом характеристик на карточку.

Очень нестандартное, а оттого плохое решение — спрятать разделы страницы в табы. Поначалу кажется, что навигация в рамках одного экрана удобна. Но на уровне пользовательского опыта картина складывается иначе. Когда пользователь захочет узнать что-то о товаре, по привычке будет скроллить вниз. Там он не найдёт ответа, придётся искать дальше — дополнительная когнитивная нагрузка.

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

По поводу самой упаковки информации в табы, будем кратки, и процитируем себя из 2020 года:

Блок с ценой и доставкой находится чуть выше обычного. Из-за этого создается ощущение, что вёрстка страницы «поехала», так как на других сайтах такой визуал не используется.

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

Приписка «6 шт.» в блоке доставки создает ощущение, что доставят такое количество товара. Стоило разместить эту приписку около «Наличие», чтобы не путать пользователя.

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

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

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

Перейдем к карточкам товаров в корзине.

Цена товара за штуку оторвана от окна с общей стоимостью и управлением количества товара. Это создаст неудобство при сверке заказа со сметой.

Мы снова сталкиваемся с длинной строкой, которая неудобна для восприятия. Об оптимальной длине строки Baymard написал целую статью. Это не только неудобно, но и «грязнит карточку», выглядит небрежно.

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

Почему вес заказа здесь — загадка. Разместить его среди чисел, которые определяют стоимость — неудачное решение. Рекомендуем выделить его в отдельную сущность — так логичнее.Снова взглянем как это устроено на Яндекс.Маркете и OZON.

Хороший пример: Яндекс.Маркет и Ozon. Вес товара не смешивается с его стоимостью.

Футер и хедер в оформлении заказа все еще не принимает упрощенный вид.

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

Если бы сайт задействовал геопозицию пользователя и предварительно рассказывал о стоимости и способах доставки, такого бы не произошло. Рекомендуем взять на заметку. Эта ошибка может стоить вам сотен и тысяч оставленных корзин. Baymard Institute в своем исследовании говорит о том, что 48% корзин пользователи оставляют из-за дополнительных расходов.

Кнопки для определения местоположения «не завезли». Придется работать ручками, потому что интерфейс не облегчил работу пользователя там, где мог это сделать. Вместо этого заставил работать покупателя.

Адрес пункта вывоза заказа тоже придется вспоминать самому, потому что он не указан.

Кратко: выделять активный этап неактивным цветом — плохое решение.

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

Поругаем за то, что контент в блоке центрируется и расположен по вертикали, а не горизонтали, что было бы удобнее. Такой способ сканирования информации быстрее, что доказали Мэтью Х. Филлипс и Джей А. Эдельман в исследовании о визуальном сканировании.

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

Блок со способом оплаты не упрощает жизнь пользователя. Снова! Помогите пользователю считать информацию визуально простыми иллюстрациями. И желательно, учитывая F-паттерн, размещая ключевые элементы с левой стороны экрана. Так пользователь точно их заметит.

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

Согласитесь, формулировка заголовка «Телефон для звонков и СМС» отбивает желание делиться своими персональными данными? Так, капля за каплей, мы подталкиваем пользователя к тому, чтобы он бросил корзину. А ведь решение проблемы очень простое: расскажите пользователю, зачем вам его данные и объясните, почему полезен звонок оператора.

Длина полей для ФИО и почты поражает своими размерами. Длиннее только время страданий автора этой статьи, который описывал базовые ошибки интернет-магазина для этой прожарки. Устанавливайте длину полей, которая будет соответствовать ожидаемой длине информации в них. Об этом также, пишет Baymard Institute.

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

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

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

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

Чтобы понять, как люди привыкли держать современные мобильные устройства и взаимодействовать с ними, Стивен Хубер из UXmatters проводил исследование.

Исходя из этого, 64% пользователей были проигнорированы и будут страдать.

Кегль в тегах товара, кнопке «В корзину», выпадающем списке слишком мал для удобного чтения. Сами кнопки тоже вряд ли дотягивают до минимальных требуемых 40 px в высоту для удобного взаимодействия.

В карточках товаров нет даже намёка, что их можно листать. Хорошее решение можно увидеть на сайте «Ленты». Они демонстрируют слайдер, показывая часть следующей карточки и индикатор слайдера ниже.

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

Половину подписи «Загру» съела тьма. Нам пришлось тоже загрустить :(

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

Вернуться в подкатегории, кстати нельзя — для этого нет соответствующей кнопки. Пользователь вынужден снова открыть каталог и выбрать категорию.

У выпадашки сортировки отсутствует дизайн. Выбивается из дизайна сайта и разрывает бесшовный опыт взаимодействия с ним.

Кстати, карточки унаследовали проблемы карточек из десктопа.

В фильтрах можно убрать слово «Наличие» — без него смысл всё также легко прочитать, но интерфейс станет чище.

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

Строка поиска все еще идет рука об руку с нами по страницам. Костыльное решение: поиск можно было поместить в таббар.

Кнопки навигации по характеристикам и отзывам очень мелкие. Чтобы всем было удобно пользоваться интерфейсом, стоит использовать кегль не менее 13-14 pt, в том числе для сносок.

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

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

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

Вдобавок, все усугубляется малой высотой кнопок.

По какой-то причине сортировка отзывов стоит над кнопками «Оставить отзыв» и «Задать вопрос», хотя механика относится к комментариям пользователей.

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

Блок «Вам могут понадобиться» — отдельный кошмар дизайнера. Половину экрана занимают только категории. Снова нет намеков, что это слайдер с товарами.

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

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

Не писали о кнопке «Удалить все» в десктопе, но в мобильной версии невозможно это проигнорировать. Если кнопка взаимодействует и относится к товарам, то почему находится на одном уровне с кнопкой возврата в каталог? Не самое очевидное место для нее.

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

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

Открываете страницу оформления заказа:

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

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

Только успели в десктопе похвалить за то, что написали число и месяц человеческим языком, а тут ошибка повторяется снова. Более того, кликабельная зона не во всю ширину экрана — пользователю снова нужно тянуться к кнопке. Аналогичная проблема и с инпутом номера телефона. Кстати, у Baymard Institute есть целая статья с рекомендациями о том, как делать инпуты.

Делать один инпут для ФИО — плохое решение. Особенно с учетом того, что у поля нет лейбла. Пользователь может отвлечься, не заполнить отчество, или вписать только что-то одно. Из-за этого возникнут проблемы с получением посылки, менеджеру придется звонить пользователю для запроса данных. А всё из-за того, что интерфейс создаёт возможность для ошибок. Решение максимально простое — разделить ФИО на 3 поля. Так пользователю будет чуть менее удобно, но он точно не ошибётся.

Интерфейс, кстати, не расскажет вам, в чём проблема и как ее решить. Просто подсветит где есть ошибки. Это нарушение 9 эвристики Якоба Нильсена. Помогайте пользователям распознавать, диагностировать и устранять ошибки.

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

Но здесь есть, с чем работать. Особенно это касается главной и этапа оформления заказа: это одни из ключевых точек на пути пользователя, к которым нужно относиться очень серьезно. Желательно, вооружившись user’s flow, исследованиями потребностей пользователей, web-аналитикой и остальным инструментарием, позволяющим сделать ПрОдАюЩиЙ и удобный для целевой аудитории сайт. У нас, кстати, такой арсенал есть ;)