Станислав Хрусталёв прошёлся по ошибкам в отображении рейтинга товаров. Я переформулировал их в рекомендации.

— Показывайте рейтинг товаров, если собираете оценки. Это поможет покупателям с выбором;
— Если оценок ещё нет, напишите об этом, чтобы человек не гадал, почему у товара нет рейтинга;
— Не ставьте в этом случае рейтинг 0, а на странице товара не отображайте блок с нулевыми саммари;
— Если оценок мало (например, всего одна), можно повременить с расчётом рейтинга, чтобы число лучше отражало реальность;
— Не округляйте рейтинг до целого числа. Между 4,4 и 4,5 разница не такая, как между 4 и 5;
— Показывая рейтинг закрашенными звёздами, в случае дробных значений крайнюю звезду закрашивайте частично — особенно если рядом рейтинг продублирован цифрами;
— Странно, если товар с низким рейтингом отображается в подборке «Хиты» или «Популярное»;
— На странице товара рейтинг должен вести в секцию с отзывами;
— Звёздочка и цифра — общепринятое обозначение рейтинга товара, можно не подписывать, что это такое;
— Сортировка отзывов нужна, но не стоит по умолчанию сортировать «от позитивных к негативным»;
— Дайте возможность сортировать как «от позитивных к негативным», так и наоборот, а вот варианты «сначала старые» или «сначала менее полезные» довольно бесполезны;
— А вариант «по умолчанию» непонятен — пишите конкретно, по какому критерию работает сортировка.

#rating #ecommerce

Бо Кибза и Лёха Макаренко (дизайнеры дизайн-систем Альфа-Банка, Самоката и Почтатеха) рассказали о развитии системы цветов в ДС Туту.

— Легаси-ДС не дорабатывали, чтобы нигде ничего не отвалилось. Команды с большой автономностью локально допиливали компоненты под свои нужды;
— Хотели консистентности, единых стандартов и при этом пространства для свободы;
— Одним из требований к системе цветов была отзывчивость к изменениям, так как компания ребрендилась;
— В этом случае, если минимизировать возможность кастома, бардак накопится не в продукте, а в ДС, где его проще прибрать;
— Обычно делают слои токенов: палитра → семантика (подложки, обводки, текст) → компоненты (текст на кнопке);
— Ради скорости дизайна и разработки компонентов отказались от семантического слоя. Условие: не использовать цвета палитры напрямую, не оверрайдить цвета в покрашенных компонентах;
— Подход даёт очень много компонентных переменных, а также много мелких разночтений (вроде немного отличающихся подложек в чипе и лейбле);
— Зато дизайнеры успели попробовать компоненты в макетах и понять, что нужно единое решение для контрастных элементов и компоновки On white / On gray;
— On white больше подходит для коммуникационных экранов, On gray — для более интерфейсных, с формами и карточками;
— On gray экраны нельзя просто перевести в тёмную тему — бекграунд светится ярче, чем форграунд, и в интерфейсе появляются дыры;
— Можно завести в светлой теме 2 background и 2 panel цвета, которые в тёмной теме станут 1 background и 1 panel. Но как объяснить дизайнерам, какой из 2 цветов использовать?
— В итоге завели мод для переключения On white / On gray, и в светлой теме оставили 1 background и 1 panel;
— Мод On gray кроме цвета подложки может устанавливать, например, более тёмный цвет текста, чтобы сохранять контраст на более тёмном фоне;
— Также через мод Contrast (low, high) реализовали возможность делать отдельные элементы более контрастными;
— Таким образом, семантика построена на основе конкретных продуктовых запросов;
— Палитру всегда можно доделать потом;
— Удобно, когда семантические цвета в палитре находятся на одном уровне: можно сразу увидеть ошибку и в целом запомнить, что цвет текста — это 500;
— Также удобно иметь отдельную палитру для тёмной темы с интерпретированными цветами (можно оставить только те, что точно используются).

#color #design_system