Удивительно на сколько плохо до сих пор верстаются уведомления.
В приложения для аренды электросамокатов есть страница уведомлений. В основном уведомления об акциях и вечном снижении цен.
Плохая система индикации. Зелёный (включенный) индикатор говорит нам о том, что сообщение не прочитано, серый цвет индикатора говорит о том, что он выключен (то есть сообщение прочитано). Создаётся диссонанс. Зелёный — цвет завершенности действия. По логике работы индикатора, правильнее было бы помечать зелёным — прочитанные сообщения. И вообще, зачем показывать неработающий индикатор? Серый индикатор = шум.
Вёрстка текста. Мелкий текст, который окружен пустотами. Плохая читаемость текста. Места явно хватает для того, чтобы заканчивать фразы. Дата, когда пришло уведомление, не относится к тексту, но почему-то стоит к нему близко. К плохой верстке текста можно добавить плохую редактуру. Короткую мысль выражают кучей слов, для простого заполнения пространства.
Иконка для перехода на конкретное уведомление. Эта иконка будто показывает, с какой стороны сейчас выйдет текст. Но дизайнеры видимо не уловили суть такой иконки. Нажимая на уведомление, оно выводится снизу:
Текст в окне такой же по размеру, что и в списке уведомлений. Тут также куча свободного места, но при этом текст скромненько прижимается к уголочку, зачем так было его зашугивать? Зачем писать корявые руб./нед. и руб./мес., когда есть много места, человеческий язык и значок рубля —> ₽.
Для начала я переверстал строку уведомлений:
Индикатор имеет основной цвет компании. Он нужен для привлечения внимания, если он горит, сообщение не прочитано, если не горит — сообщение прочитано. Когда индикатор не горит, то его не видно. А по нажатию на индикатор, сообщение отметится прочитанным, это пригодится, если сообщение краткое, и оно полностью уместилось в строчке.
Текста стало больше. Тут есть место для основного заголовка, подзаголовка и для основного текста. Время и дату отделил от текста, вывел в правый верхний угол. Неподалёку разместилась иконка для перехода к тексту сообщения.
Так выглядит страница со списком уведомлений:
Я поработал над подачей. Сделал восприятие текста проще. Плюс к этому я разнообразил уведомления. Одно нам говорит об акциях, другое о правилах дорожного движения, третье вообще создано для повышения кругозора, вдруг кому интересно почитать на досуге.
А само сообщение открывается в полноценном окне, где можно размещать много текста и картинки:
