x
 
Даниил Постнов
3 ноября 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

Что не устраивает в оригинале:
1. Между вкладками много пространства. Выглядит как забор с выбитыми досками.
2. Количество товаров слишком далеко от их названия и больше приближены к типу доставки.
3. Из-за горизонтального выравнивания стоимость воспринимается как стоимость доставки.
4. Непонятная группировка: номер заказа с датой, статус с составом заказа.

Я решил сделать этот интерфейс удобней для восприятия:
1. Вкладки приблизил друг к другу.
2. Сделал вкладку «выпирающей», чтобы она создавала эффект слияния с контентом. Остальные вкладки отделил обводкой.
3. Обозначил все данные в таблицу. Мне кажется так список заказов выглядит собраннее.

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

Спасибо!


Даниил!

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

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

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

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

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

Поделиться
Отправить

Комментарии

Виктор Бусел
3 ноября 2020

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

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

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

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

После этого собираю всё в фигме и тестирую новые вариативные компоненты. Посмотреть и потыкать можно тут: https://www.figma.com/file/Kojcr382iOukTAYz4HdZgv/%D0%9F%D0%B5%D1%80%D0%B5%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%BE%D0%B2?node-id=0%3A1


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1 Где хранить скриншоты интерфейсных решений, чтобы было удобно искать референс? 9 Каким должно быть ресторанное меню на сайте? 1 Насколько оправдан звук в веб интерфейсах? Например: клик по ссылке, добавление товара в корзину, удаление из корзины и т. д. 2




Недавно всплыло

Какой фотоаппарат выбрать для путешествий? 2 Насколько уместно использование ЦСС-стилей cursor: default и user-select: none 2 Что такое профессиональная этика? 7 Я возьму интервью, а потом мы адаптируем информацию в формат статьи 1