Информативность

Рассмотрим на примере интерфейса заказа такси.

Есть страница, где отображаются данные заказа. Сейчас видны два статуса «Доступен» и «Отменён». Угадайте какой сейчас статус.

Не смотря на то, что цветом выделен «Доступен», на данный момент статус «Отменён».

К тому же есть проблема с логикой блока. Заголовок «Заказ №2» - он же получается и вкладка. Рядом есть вкладка «История заказа», которая выглядит задизайбленной.

Сперва статусы. Задаём идею - статусы в виде кружков.

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

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

Делаем hover-эффект для доступных статусов. Один из вариантов делать небольшую тень и поднимать на пиксель кружок. Так же выделять цветом статус «Доступен».

Вариант плох тем, что тенюха и подъём на пиксель еле заметны. А для людей слабовидящих или с пониженной способностью различать цвета этот hover будет вообще не ясным.

Поэтому выберем другой вариант для hover-эффекта. Увеличиваем толщину линии круга.

Теперь меняем логику. Заголовок делаем заголовком. Рядом добавляем водителя. А вкладку «История заказов» сносим вниз.

Трудности выбора иконки для дублирования заказа:

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