Школа
Интерфейс

Делаю редизайн блока со списком заказов пользователя

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

Что не устраивает в оригинале:

  1. Между вкладками много пространства. Выглядит как забор с выбитыми досками.

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

  3. Из‑за горизонтального выравнивания стоимость воспринимается как стоимость доставки.

  4. Непонятная группировка: номер заказа с датой, статус с составом заказа.

Я решил сделать этот интерфейс удобней для восприятия:

  1. Вкладки приблизил друг к другу.

  2. Сделал вкладку «выпирающей», чтобы она создавала эффект слияния с контентом. Остальные вкладки отделил обводкой.

  3. Обозначил все данные в таблицу. Мне кажется так список заказов выглядит собраннее.

Справедливы ли мои замечания к оригиналу? Что я сделал неправильно в своём варианте? Что можно сделать лучше?

Спасибо!

Даниил Постнов
3 ноя 2020
👁 6903   🗩1
Интерфейс

Делаю редизайн блока со списком заказов пользователя

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

Что не устраивает в оригинале:

  1. Между вкладками много пространства. Выглядит как забор с выбитыми досками.

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

  3. Из‑за горизонтального выравнивания стоимость воспринимается как стоимость доставки.

  4. Непонятная группировка: номер заказа с датой, статус с составом заказа.

Я решил сделать этот интерфейс удобней для восприятия:

  1. Вкладки приблизил друг к другу.

  2. Сделал вкладку «выпирающей», чтобы она создавала эффект слияния с контентом. Остальные вкладки отделил обводкой.

  3. Обозначил все данные в таблицу. Мне кажется так список заказов выглядит собраннее.

Справедливы ли мои замечания к оригиналу? Что я сделал неправильно в своём варианте? Что можно сделать лучше?

Спасибо!

Даниил Постнов
3 ноя 2020
👁 6903   🗩1
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Даниил!

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

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

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

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

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

Интерфейс
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

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