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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы:

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

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

Минусы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой Behance.

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