{"id":13842,"url":"\/distributions\/13842\/click?bit=1&hash=4092fa5bbad74653204c7561dcd5fe57486fea481929ecdbf7bbf16b31cd3087","title":"\u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0434\u0430\u0432\u0435\u0446 \u043d\u0430 \u00ab\u041c\u0430\u0440\u043a\u0435\u0442\u0435\u00bb \u0445\u043e\u0442\u044c \u0440\u0430\u0437 \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0443\u043c\u0430\u043b ","buttonText":"\u041e \u0447\u0451\u043c?","imageUuid":"a6164600-1125-55db-8c60-f927d5e7e7d4","isPaidAndBannersEnabled":false}

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

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

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

Навигация и главная, десктоп

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

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

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

Якоб Нильсен, основатель Nielsen Norman Group

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

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

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

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

«Детский мир» и «Леруа Мерлен» пошли по тому же пути

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

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

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

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

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

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

Почему при поиске монтажной пены предлагают конвекторы и пистолет для герметика — загадка

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

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

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

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

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

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

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

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

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

Каталог, десктоп

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

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

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

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

Фильтры

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

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

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

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

  • неактивный чекбокс, представленный на 1 блоке, лучше не показывать. Он не несет никакой практической пользы, а только перегружает интерфейс;
  • раздел с брендами ломает всю целостность дизайна в рамках блока. Непонятно, чем было обусловлено использование тегов. Стало сложнее считывать информацию. Почему бы не использовать чекбоксы, как и ранее?
  • раздел «Часто ищут» находится в конце списка фильтров. Если люди действительно пользуются этим часто, стоит обратить их внимание на эти фильтры и показать их сначала;
  • нет отступов между фильтрами: это превращает их в одно полотно с текстом и затрудняет сканирование;
  • у фильтров нет тултипов, которые могли бы пояснить пользователю смысл элемента. Это сильно ограничивает его полезность.
Пример Яндекс.Маркета: тултипы помогают понять, что означает фильтр

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

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

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

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

При проектировании всегда нужно помнить:

«Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя». © Илья Бирман

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

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

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

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

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

Страница товара

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

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

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

Если ты что-то скрыл, то пользователи этого не заметят

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

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

Оформление заказа

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

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

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

Доставка

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

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

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

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

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

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

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

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

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

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

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

Навигация и главная

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

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

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

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

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

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

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

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

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

Каталог

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

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

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

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

Фильтры

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

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

Страница товара

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

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

Оформление заказа

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

  • вы попадаете в ловушку жокера. Потому что будет скроллиться карта, а не страница. Чтобы скрыть карту или проскроллить страницу, пользователю придется тянуться вверх. Напоминаем, что из таких мелких, но бесячих ошибок складывается UX;
  • у вас может отвалиться карта и просто пропасть. Ловушка выходит более жестокой.

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

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

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

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

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

Итог

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

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

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

0
98 комментариев
Написать комментарий...
Андрей Иванов

Вы бы свой сайт в начале привели в порядок - а то кровь из глаз

Ответить
Развернуть ветку
Friendly Design

а что тут не так?

Ответить
Развернуть ветку
9 комментариев
Женя Князев из antro.cx

Кровь из глаз, когда взрослый человек использует дефис вместо тире — вот примерно такого же уровня и ваш коммент :) По теме статьи вам есть, что сказать?

Ответить
Развернуть ветку
2 комментария
Pigeon P

Держите, чтобы быстрее прочитать

Ответить
Развернуть ветку
Борис Интеграторов

Картинки не озвучивает!!!

Ответить
Развернуть ветку
2 комментария
John Doeman

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

Ответить
Развернуть ветку
ZIPA

По меркам этих дизайнеров вы не считаетесь нормальным человеком

Ответить
Развернуть ветку
1 комментарий
C C

мне тоже нравится наглядный каталог

Ответить
Развернуть ветку
Antro
Автор

Рады, что вам удобно так. Только так не всем :) А если вы давно пользуетесь сервисом, то вы уже привыкли

Ответить
Развернуть ветку
Ekaterina Maftakhudinova

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

Ответить
Развернуть ветку
Дмитрий Филиппов

Точно, полная противоположность инструкций от IKEA

Ответить
Развернуть ветку
Д Хб

Можно вернуть этот убогий магазин? Мне нравилось в нём мучаться.

Ответить
Развернуть ветку
Antro
Автор

Местами есть, на что посмотреть

Ответить
Развернуть ветку
Случайные фотографии

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

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

Интернет тупеет, люди медленно читают и им конечно удобнее эти ваши шашечки, и это ппц как грустно.

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
C C

Очень много букаф, что по итогу то? Дизайн у Петровича говно или нет?

Ответить
Развернуть ветку
John Doeman

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

Ответить
Развернуть ветку
Виталий

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

Ответить
Развернуть ветку
Иннокентий Фефилов

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

Ответить
Развернуть ветку
4 комментария
Женя Князев из antro.cx

Прорабы тоже люди :)

Ответить
Развернуть ветку
1 комментарий
ChampionTommy

И действительно дизайн-прожарка...Вот только когда разрабы не шарят за дизайн, то зачем вообще этим заниматься? почти весь CSS на !important, какой-то "заштопанный", по идее это должен быть лендинг с описанием плюшек компании, а по факту я вижу разноцветные блоки от которых глаза уже болят, какие-то анимации, кнопочки, градиентики. Вы на 12-ти летних детях ориентируетесь в компании, что ваш продукт тиктокеры купят или что?
Какие-то полублоки, полукруги, к чему это вообще и для кого?
Ну это выглядит ужасно на мобилках, я сижу на iphone7\13 (на семерке там вообще печально - "ну а зачем оно нам надо? ну я тоже так думаю")
На пк - это вообще отдельный вид искусства. Мне приходится перед чтением Вашего кейса чисто колесо + ctrl крутить назад, чтоб при 80-90% масштабе, хоть что-то прочитать, настолько огромные буквы, что я на 4к экране уже лицом задолбался вертеть. С головой вообще в норме все?
По посту:
"Хедер и футер несут большое количество информации и даже CTA, которые могут отвлечь пользователя от покупки и увести на другие страницы" - кейс свой откройте IDDIS.store, который имеет такой же футер на пол-лица + столько же инфы, как и там, где вы делали прожарку, вот только значки по меньше сделали и один див убрали. Так где тут опыт за UX\UI? Как я и говорил ранее - вы стартап, а вакансии от 21 года, где вы искали хотя бы стажеров - говорит само за себя, gl hf.

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

Ответить
Развернуть ветку
ChampionTommy

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

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

Особенно орнул с предложения "менеджеру придется звонить пользователю для запроса данных" с полями ФИО при заказе..В той же шторке(IDDIS) ему не придется звонить пользователю и задавать вопросы по покупке "в один клик"? и я даю 100% на то, что человек позвонит и уточнит ФИО и т.д. Какая же у вас борьба мочи и говна. Чисто шедевр. НУ ЗАТО ОШИБОК НЕ БУДЕТ. Да-да.

Ответить
Развернуть ветку
ChampionTommy

И еще самое главное так это то, что я начал писать про страницу товара и сайт просто сдох. Просто выдал err500 и упал, отличная сборка SSR на nuxt + yii2 + rest-api, который при обновлении товара\страницы грузится 2-3 секунды, ну юзабилити, чо ты хотел, карл.
Фронтенд я вижу, но вот сделан он через очко, спасибо и на этом
А еще...
Волшебная кнопка, КОТОРУЮ Я ВООБЩЕ НЕ ПОНЯЛ НАХУЯ ЭТО НАДО БЫЛО))))
10 компаний из 10
digital i-one видимо постарался, дочернюю парашу создал, жаль держат ее клоуны

Ответить
Развернуть ветку
Konstantin

Гораздо важнее сам сервис и цена, чем то, где там каталог расположен.

Ответить
Развернуть ветку
Иннокентий Фефилов

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

Ответить
Развернуть ветку
3 комментария
Женя Князев из antro.cx

В статье обратного и не написано. Сервис и цена — часть клиентского опыта, которые существенно влияют на выбор покупателя. А ещё влияет качество пользовательского опыта :)

Ответить
Развернуть ветку
C C

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

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
2 комментария
Mikhail Glagolev

Стройка все же длительный процесс, и наверное, важно удобство для постоянных покупателей. Петрович, на мой взгляд, самый удобный строительный магазин, приводить в пример Леруа Мерлен очень странно.
В отличие от Леруа, у Петровича нормальный поиск, который ищет по совпадению всех слов, а не выдает кучу лишнего, суммируя результаты по каждому слову запроса.
Также удобные фильтры, по которым реально быстро подобрать нужный по характеристикам товар.
Он запоминает несколько последних адресов, и контакты людей на объекте, которые использовались в прошлых заказах.
По удобству сайта он может соперничать разве что со Всеми Инструментами.

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Основной ключ

Прочитал где-то 1/4, больше не осилил, слишком долго, муторно и в некоторых моментах странно...

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

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

Ответить
Развернуть ветку
Antro
Автор

Мы примерно это и написали в конце статьи. Рекомендуем дочитать, но не настаиваем :)

Ответить
Развернуть ветку
Жаркий кавалер

со своим сайтом разберитесь, а потом чужой разбирайте.

Ответить
Развернуть ветку
Antro
Автор

Тут проблема не в нас, а в ESET. С другими антивирусами сайт открывается. Но и с этим разберёмся в ближайшее время, спасибо за напоминание :)

Ответить
Развернуть ветку
4 комментария
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Женя Князев из antro.cx

Хорошее замечание, спасибо!

Ответить
Развернуть ветку
Andrei M

Статью не читал. Сразу перешёл к комментариям.

Ответить
Развернуть ветку
Альберт Базалеев

Аналогично. По комментариям ещё не понял нужно ли читать

Ответить
Развернуть ветку
2 комментария
Antoshka Zhuravlyov

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

Ответить
Развернуть ветку
Antro
Автор

Спасибо вам за поддержку!

Ответить
Развернуть ветку
Protein Wars

Шикарный разбор!

Ответить
Развернуть ветку
Женя Князев из antro.cx

Спасибо за поддержку!

Ответить
Развернуть ветку
Mark Kats
Так магазин упускает возможность заинтересовать пользователя товарами или познакомить с ключевыми предложениями

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

Безусловно, на маркетплейсах поведение будет другим, но вы полностью исключаете, что ЦА Петровича может заинтересоваться предложением, даже если в моменте им это не нужно? Или, если они планировали закупиться в другом магазине, а здесь увидели более выгодное предложение?

Ответить
Развернуть ветку
3 комментария
Яникус

очень нравяться ваши детальные разборы

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Bo.G

1. все эти ваши "лучшие практики" шляпа полная. пример. большинство людей с момента появления смартфонов используют одну руку и большой палец. Но, бля, все упорно (упорото) впихивают строку адреса/поиска/вкладок и прочих наиболее часто используемых управляющих элементов, сука, вверху (!!!) Карл! туда сложнее всего пальцем дотянуться(!!)
и всем насрать. Да сделайте хоть настройку размещения этих панелей. Лучшие практики.
то же касается и имбецильной строки адреса в мобилке. вместо позиционирования и дальннейших манипуляций и текстом дебильное меню... кой хер оно надо.
2. нужен минималистичный интерфейс. одна строка поиска и нормально реализовпнный поиск. показывающий адекватный рещультат с возможностью доп фильтрации. а вот в карточке уже можно и все остальное прорекламировать. чел заходит чтобы найти и купить товар, а не выискивать неточности "лучших практик" и теряться во всем этом, стремительно меняющемся говнище потому что кого то посетила очередная "гениальная" идея.
сегодня вы будете "поливать говном" интерфейс, а завтра юзеров потому что завтра срочно изменятся "лучшие практики". такое происходит с завидной регулярностью.

Ответить
Развернуть ветку
Женя Князев из antro.cx

1. Так а в чём шляпа? Мы везде пишем о том, что не нужно часто используемые управляющие элементы пихать наверх, как будто это десктоп. И это одна из лучших практик. Так таб бары появились

Ответить
Развернуть ветку
5 комментариев
Marianna Yaksarova

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
1 комментарий
Юный спрей

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

Ответить
Развернуть ветку
Antro
Автор

Обязательно вернёмся к вам, когда договоримся с Петровичем на публикацию данных :)

Ответить
Развернуть ветку
2 комментария
Aleksandr Re

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
1 комментарий
Antonio Semaskov

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

Ответить
Развернуть ветку
Читать все 98 комментариев
null