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

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


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

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

Общие проблемы

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

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

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


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

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

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

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


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

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

Главная страница и навигация | компьютер

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

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

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

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


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

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

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

«Теперь дешевле» — это что значит? На карточке старой цены нет. Мне не с чем сравнивать, поэтому вообще не понятно, к чему нужна эта информация.

Максим Отмахов, лид продуктовых дизайнеров Antro

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

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

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

Поиск | компьютер

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


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

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

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


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

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


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

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

Авторизация | компьютер


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

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

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


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

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

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


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

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

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

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

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

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

Каталог в навигации | компьютер


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

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

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


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

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


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

Каталог | компьютер


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

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


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

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

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


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

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


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

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


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

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

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


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

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


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

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


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

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


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

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


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

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

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

Карточка товара | компьютер


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

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

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


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

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


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

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


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

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

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


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

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


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

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


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

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

  • Табы — это неудобно. Тем более, когда они такие серые и незаметные.
  • Подсказка для комментариев — это хорошо!
  • Тултип в табе — зло. Поместить малозаметный элемент в малозаметный элемент = создать сложность для пользователя.


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

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

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


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

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


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

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


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

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


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


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

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

Корзина | компьютер


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

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

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

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


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

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


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

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

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


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

Представляю вашему вниманию комбо: в пределах одного блока два разных мелких кегля — 12 и 13. Они практически не различимы между собой по размеру. И неудивительно, ведь цвет гарнитуры серый, а цвет подложки — тоже серый!

Максим Отмахов, лид продуктовых дизайнеров Antro

Главная страница и навигация | телефон

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


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

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

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

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


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

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

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

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


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

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

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


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

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

Поиск и выбор способа доставки | телефон


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

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


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

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

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


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

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

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

Меню в навигации | телефон


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

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

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

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

Каталог | телефон


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


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

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


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

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


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

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

Корзина | телефон

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


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

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

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


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

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


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

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


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

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


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

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

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

Максим Отмахов, лид продуктовых дизайнеров Antro

Общий итог

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

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

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

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

Источник: vc.ru

Автор admin1

Добавить комментарий