Даниил!

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

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

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

Уважаемые советчики, выкладывайте в комментарии свои варианты редизайна таблицы.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

Интерфейс
Отправить
Поделиться
Запинить

Комментарии

Я не знаю контекста задачи страницы, но попытался её улучшить.

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

После этого я собрал таблицу с заказом. Мне нравится, когда таблицы можно читать как текст. В моём варианте заголовок читается как «Заказ от 17 февраля в обработке». Вот список товаров. Самовывоз из места. Цена.

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

После этого собираю всё в фигме и тестирую новые вариативные компоненты. Посмотреть и потыкать можно тут: https://www.figma.com/file/Kojcr382iOukTAYz4HdZgv/Переработка‑списка‑заказов?node‑id=0%3A1

3 ноя 2020

Рекомендуем другие советы