Дизайн-прожарка 2.0: препарируем десктопную и мобильную версию ВкусВилла

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

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

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

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

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

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

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

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

Дизайн кнопок в мобильном интерфейсе нужно делать, ориентируясь на средний размер подушечек пальцев — 16 — 20 мм. Минимальный рекомендуемый размер нажимаемых элементов для них — 1x1 см. В реальности стоит делать их немного больше — так приложением будет удобнее пользоваться.

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

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

Дизайнерам интернет-магазинов рекомендуем посмотреть на Самокат, Яндекс.Лавку и СберМаркет: там в центре внимания — товар, который продаёт компания. Выгоды такого подхода подтверждают и исследования Baymard Institute.

Блок «Новинки»

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

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

*звучит грустный тромбон*

Быстрый просмотр — сомнительное решение. В недавнем исследовании Институт Беймарда обнаружил, что к 22 году люди привыкли к функциональности быстрых просмотров страниц. Это хорошее решение, если так не пытаются прикрыть полупустой каталог, и если пользователи случайно не нажимают на быстрый просмотр, когда пытаются попасть на страницу товара. Было бы интересно, если ребята из ВкусВилла поделились данными на этот счёт ;)

Название раздела вызывает вопросы. Оно неинформативное: пользователю нужно разобраться, что ему предлагают в этом блоке. К тому же, в голове невольно появляется вопрос: «а кому доступны другие продукты?».

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

Классическая проблема ВкусВилла: мелкий и неконтрастный текст. Здесь он выглядит как издевательство — чтобы восприятие было комфортным, приходится увеличивать масштаб до 150%.

*грустный тромбон Максима Отмахова*

В поиске есть странная категория — прочее. При этом непонятно, что входит в «прочее». Поисковик всё также предлагает поискать манго.

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

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

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

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

Выбор способа доставки

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

Элементы очень (!!!) маленькие. Вместо того, чтобы растянуть карту на экран, её добавили в маленькое окошко. Из-за этого найти нужный адрес — это целый квест.

Кнопки снова неконтрастные. Мы заметили кнопку «список магазинов» лишь с четвёртого раза, пока разбирали этот блок.

*грустный тромбон Максима Отмахова*

Модальные окна накладываются на модальные окна. Помните мем «мы поставили монитор в монитор, чтобы ты мог смотреть монитор на мониторе»? ВкусВилл реализовал его по максимуму. При выборе способа получения в модальном окне открывается новое модальное окно — с выбором магазина. 🤦🤦🤦

Над каталогом в навигации ребята явно не старались:

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

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

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

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

*грустный тромбон Максима Отмахова*

Хорошая практика: ВкусВилл пишет, сколько продуктов осталось на складе. Это помогает пользователю принять решение о покупке.

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

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

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

Если товара нет в наличии, ВкусВилл открывает окно с подсказками. Это уменьшенный блок с главной страницы. Из-за этого возникает баг: окно и картинки уменьшили, а кнопку «Быстрый просмотр» — нет. Она перекрывает другие элементы.

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

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

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

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

Кажется, что это может отрицательно сказываться на конверсии в переход на страницу. А эта конверсия, в свою очередь, влияет на покупку товаров :)

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

*грустный тромбон Максима Отмахова*

Странное место для рекламы приложения: оно выглядит неестественным и перетягивает внимание от других элементов.

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

В одном месте сделали несколько функциональностей. Сложно догадаться, что означает «4.8» — это отзывы, только с оценкой 4.8? Или вообще все отзывы? Что это? Остальные пункты фильтруют комментарии по оценке, которую выставил комментатор.

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

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

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

По разделам три комментария:

Кнопка «Любимый продукт» выглядит как «Избранное» в других интернет-магазинах. При клике на неё выскакивает уведомление в правой части сайта. Что делает кнопка — тайна. Из-за того, что подпись неконтрастная, а люди сначала считывают пиктограммы, вероятность ошибочного использования стремится к единице.

*грустный тромбон Максима Отмахова*

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

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

Пищевая ценность описана через запятую. Её лучше разбить на блоки, чтобы воспринималось проще.

В карточках товара стоит заботиться о кросс-продажах: предлагать похожие продукты или показывать хорошие сочетания. Хороший пример взяли у METRO. У ВкусВилл этот аспект не продуман.

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

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

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

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

ВкусВилл словно ведёт покупателя по пути усложнения. До этого нам встречались мелкие шрифты на неконтрастном фоне, теперь — очень (!!!) мелкий шрифт. Надпись жёлтыми буквами на белом фоне. Интересно, что ждёт в конце.

*грустный тромбон Максима Отмахова*

Блок «Новинки»

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

*грустный тромбон Максима Отмахова*

Блок «Популярное»

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

*грустный тромбон Максима Отмахова*

Блок «Доступно каждому»

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

Нашли баг с цветом

У кнопки скачивания приложения не совпадает цвет с логотипом App Store: неаккуратность и невнимательность столкнулись.

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

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

*грустный тромбон Максима Отмахова*

Еще заметили, что карточки товаров в каталоге и в поиске выглядят по-разному. В поиске все края у фотографий на карточках скругленные, а в каталоге у фотографий прямые углы. Дизайнеры ВкусВилла, определитесь: вы на стороне Яндекс.Еды или Delivery Club?

Иконка корзины показывает фокусы с исчезновением: она то есть, то её нет.

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

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

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

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

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

Фильтры в мобильной версии тоже не изменились: их всё ещё 4 для любой категории. Показываем хороший пример из СберМаркета: столько фильтров можно применить только к сосискам. Для сыров, хлеба и других продуктов будут свои уникальные параметры для отбора.

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

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

*грустный тромбон Максима Отмахова*

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

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

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

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

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

Но в пользовательском опыте ВкусВилл явно перекреативил. Мелкие кегли, неконтрастные цвета и отсутствие единообразия — проблемы, которые полностью затмевают клевый визуал продукта. Наша оценка: 13 грустных тромбонов Максима Отмахова.

Пишите в комментах, на что ещё нам стоило обратить внимание? Делитесь своими впечатлениями и плюсуйте статье, если она вам понравилась — так её увидит больше людей. И подписывайтесь на наш блог, чтобы не пропустить новые материалы :)