Когда вы отправляете кому-то ссылку на Tiny Shops — клиенту, который спросил, чем вы пользуетесь, или партнёру, который хочет посмотреть, — эта страница работает от вашего имени. Мы провели полный аудит доступности и дизайна и починили найденное. Все цифры ниже измерены в браузере: до и после.
Текст, который действительно читается#
У оранжевых кнопок действия были белые подписи. Такое сочетание даёт контраст 2,2:1, а стандарт доступности требует от обычного текста 4,5:1. Это касалось всех кнопок конверсии на сайте: главной кнопки, бейджа на тарифах, кнопки выбора плана.
Оранжевый остался прежним. Подпись стала тёмной — это 7,8:1 на том же цвете.
По всему сайту текст, не проходивший по контрасту, сократился с 65 случаев до 10 в тёмной теме и со 119 до 13 в светлой. Оставшееся — декоративное: знак валюты внутри иллюстрации, а не то, что нужно прочитать.
Юридические страницы следуют вашей теме#
«Политика», «Условия» и «Контакты» появились раньше остального сайта и не получили переключатель темы. Если вы выбирали светлую тему и открывали «Политику», страница оставалась тёмной.
Теперь они используют те же цвета, навигацию и подвал, что и все остальные страницы, — в той теме, которую выбрали вы.
По одному понятному действию на карточке демо#
У трёх демо-магазинов кнопки были разного цвета, и было непонятно, какой открывать первым. Теперь провайдер оплаты отмечен на самой карточке, а кнопка одинаковая у всех трёх.
Мелочи, которые складываются#
- Навигация с клавиатуры видна. При переходе по Tab не было видно, где вы находитесь. Теперь у каждой кнопки и ссылки есть индикатор фокуса.
- Скринридеры говорят по-русски на русской версии. Пять элементов управления — переключатель темы, меню языка, мобильное меню — озвучивались по-английски независимо от языка страницы.
- Заголовки набраны правильно на телефоне. Межбуквенное расстояние было задано в пикселях, а размер шрифта менялся, поэтому на узких экранах буквы сжимались всё сильнее. Теперь пропорции одинаковы на любой ширине.
- Страница оживает, когда вы доходите до раздела, а не крутит анимации в фоне постоянно. Это бережнее к батарее телефона: фоновой анимации при загрузке стало примерно на треть меньше.
- Удобные области нажатия. Маленькие иконки сохранили свой размер, но на сенсорных экранах получили область касания побольше.
Почему понадобился этот заход#
Почти всё сводилось к одному пробелу. Наша дизайн-система назвала фирменные цвета в документации задолго до того, как они появились в коде, — поэтому каждая часть сайта вбивала цвет вручную, и тридцать пять из них разошлись. С анимацией вышло так же: в правилах были указаны длительности, но не названы кривые, и четырнадцать переходов молча взяли браузерное значение по умолчанию.
Теперь и то, и другое задано один раз, в одном месте, с записанными правилами. Следующее изменение наследует их, а не угадывает.
От вас ничего не требуется, настройки магазинов не менялись.
Создайте или откройте магазин на tiny-shops.com →
- 🇷🇺 Tiny Shops RU
- 🇬🇧 Tiny Shops EN
Собираете витрину, к которой ведут эти страницы? Как открыть Telegram-магазин.
