Как спроектировать сравнение товаров на телефоне

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

Что должно получиться

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

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

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

Из чего это складывается

Для макета возьмите настоящие позиции с различающимися названиями, картинками и объёмом данных. Учтите неизвестные параметры и длинные значения. Демонстрационная таблица, где все строки короткие и заполнены, не проверяет сложные части сценария.

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

Как это сделать по шагам

1. Определите сопоставимую группу. Выберите позиции с общими важными характеристиками. Запишите, какие различия помогают принять решение и какие сведения нельзя свести в одну строку.
2. Спроектируйте добавление. Отделите выбор для сравнения от открытия подробностей. Покажите, когда позиция уже включена, и предусмотрите снятие выбора.
3. Сделайте набор обнаружимым. После добавления человек должен понять, где увидеть выбранное. Согласуйте место входа так, чтобы оно не перекрывало содержание и основные действия.
4. Выберите представление. Проверьте таблицу с прокруткой, сравнение по отдельным признакам или ограниченное число видимых столбцов с переключением. Оценивайте способность сопоставлять значения, а не только компактность.
5. Сохраните идентификацию. На длинном экране и при горизонтальном движении должны оставаться понятны название характеристики и принадлежность значения товару.
6. Опишите изменения набора. Подготовьте удаление одной позиции, пустое состояние, единственную оставшуюся позицию и достижение ограничения, если оно есть в продукте.
7. Продумайте возврат. Проверьте переход в подробности, движение назад и продолжение отбора. Укажите, что сохраняется и как обозначаются потерянные или недоступные позиции.
8. Проведите проверку на телефоне. Добавьте позиции из разных мест каталога, найдите отличие, удалите вариант и вернитесь за новым. Повторите путь с увеличенным текстом и без точного попадания пальцем.

Таблица с горизонтальным движением

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

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

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

Сравнение по характеристикам

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

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

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

Только различающиеся характеристики

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

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

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

Частые ошибки

Не показывать результат добавления

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

Молча ограничивать число позиций

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

Путать разные варианты одного товара

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

Удалять столбец вместе с контекстом

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

Считать доступность только размером текста

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

Как проверить

• Выбор для сравнения отличается от перехода к товару.
• Добавленные позиции легко найти в составе набора.
• Название и вариант каждой позиции различимы.
• Значения связаны с названиями товаров и характеристик.
• Горизонтальное продолжение обнаруживается без догадок.
• Длинный текст и увеличение масштаба не скрывают действия.
• Неизвестные сведения не обозначены как отсутствие функции.
• Режим различий объясняет скрытие строк и позволяет вернуть их.
• Удаление одной позиции не очищает набор неожиданно.
• Возврат в каталог соответствует обещанным правилам сохранения.

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

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

Вопросы и ответы

Обязательно ли делать сравнение таблицей?

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

Можно ли прокручивать таблицу по горизонтали?

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

Сколько товаров разрешать сравнивать?

Универсального числа нет. Выберите ограничение по задаче, данным и способу отображения, затем объясните его в интерфейсе, если оно предусмотрено.

Нужен ли режим только различий?

Он полезен при большом числе совпадающих признаков, если данные корректно сопоставлены. Оставьте полный просмотр и ясно объясните, какие строки скрыты.

Должен ли набор сохраняться после закрытия сайта?

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

Что показывать, если остался один товар?

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