Что в коробке? Разбор интерфейса приложения Ebay

Всем привет, я Женя. Я UX/UI дизайнер, специализируюсь на интернет-магазинах.

В рубрике «Что в коробке?» я буду обозревать интернет-магазины и их приложения.

Сегодня смотрим на Android-приложение аукциона и интернет-магазина Ebay.

Что в коробке? Разбор интерфейса приложения Ebay

Навигация

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

Текст в строке поиска крупный и жирный, по размеру и плотности он конфликтует с размерами заголовков и ценниками. Строка текста обрывается.
Текст в строке поиска крупный и жирный, по размеру и плотности он конфликтует с размерами заголовков и ценниками. Строка текста обрывается.

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

Авторизация

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

Что в коробке? Разбор интерфейса приложения Ebay

Если вы не залогинены, то на главной вы не найдёте ранее просмотренных товаров и не сможете добавлять товары в избранное и корзину. Не надо так делать. Исследование Baybard показывает, что 28% пользователей бросают корзину из-за требования регистрации.

Классную штуку сделали в Leroy Merlin: если вы не залогинились и добавили товары в корзину, то все они сохранятся после авторизации.

Что в коробке? Разбор интерфейса приложения Ebay

Главная страница

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

Что в коробке? Разбор интерфейса приложения Ebay

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

Добавить товар в избранное из карточки вы не сможете.

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

Что в коробке? Разбор интерфейса приложения Ebay

Поиск товаров

Удобно, что есть поиск по картинке и голосу, но есть и минусы:

— Отсутствует поиск по категориям.

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

Что в коробке? Разбор интерфейса приложения Ebay

Каталог

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

Наиболее важные элементы интерфейса должны первыми попадать в поле зрения.

Ещё один способ попасть в каталог – найти его пиктограмму в слайдере под шапкой, но все ли обратят на него внимание?

Вот, как далеко спрятан каталог
Вот, как далеко спрятан каталог

Ebay использует комбинированный вариант каталога.

Основные категории проиллюстрированы и отображаются плиткой, а подкатегории 2-го 3-го уровней представляют собой нечто среднее между аккордеонным и последовательным меню: при раскрытии категории на экране остаются только её подкатегории, а другие категории скрываются.

Для интернет-магазинов с небольшим количеством категорий, подойдёт тип каталога с боковой панелью навигации. Вот пример из моей последней работы.

Пример каталога в магазине спортивного питания
Пример каталога в магазине спортивного питания

Фильтры

Плюсы:

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

+ Вы можете отфильтровать товары по похожести на загруженную фотку.

Минусы:

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

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

— Нет ползунка (слайдера) для изменения цены товара. Только ввод с помощью клавиатуры.

Что в коробке? Разбор интерфейса приложения Ebay
В своём приложении я разметил теги примененных фильтров рядом с основными кнопками
В своём приложении я разметил теги примененных фильтров рядом с основными кнопками

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

Маленькие фото и отсутствие превью в слайдере

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

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

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

Что в коробке? Разбор интерфейса приложения Ebay

Скидку фиг увидишь

Посмотрите на скрин ниже и постарайтесь найти информацию о скидке.
Она там есть, просто написана мелким кеглем и серым цветом.

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

Попробуйте найти скидку
Попробуйте найти скидку

Незаполненные селекты

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

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

Поля с выбором цвета и памяти не заполнены по умолчанию
Поля с выбором цвета и памяти не заполнены по умолчанию

Рекомендую почитать про принцип «Пусть потеет машина». Суть его такова: если машина может сделать что-то за нас, не создавая нам проблем, пусть она это делает.

Неправильные акценты у кнопок

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

Что в коробке? Разбор интерфейса приложения Ebay

Нет возможности сортировать отзывы

Отзывы нельзя фильтровать от 1 до 5. Вы будете вынуждены смотреть все отзывы в случайном порядке. Исследования Baymard показывают, что 95% пользователей полагаются на отзывы, а 53% — намеренно изучают отрицательные отзывы.

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

Что в коробке? Разбор интерфейса приложения Ebay

Корзина и оформление товара

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

Что в коробке? Разбор интерфейса приложения Ebay

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

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

Что в коробке? Разбор интерфейса приложения Ebay

Ещё одна проблема: в корзине нет рекомендуемых товаров и товаров аналогов. Странно, что Ebay игнорирует очевидный способы увеличения среднего чека.

Спасибо, что дочитали обзор до конца!

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

Проголосуйте, пожалуйста, в каком формате стоит сделать следующий обзор.

В каком формате стоит делать обзоры интернет-магазинов?
Текст
Видо

Всех интересующихся интернет-магазинами интерфейсами в целом, приглашаю в свой блог в телеграме: Исповедь ux/ui-дизайнера.

Поздравляю всех с наступающим Новым годом! До новых обзоров!

1111
5 комментариев

очень интересно почитать такое ревью! спасибо 

2
Ответить

Спасибо:)

1
Ответить

Привет, Евгений.
Классная и очень полезная статья.
С почином, так сказать и успехов в дизайне и работе.

2
Ответить

Благодарю! 

Ответить

https://t.me/mydaybug/314 и следующее сообщение

Ответить