In this article
Страница с ценами может использовать привлекательные цвета, но при этом вызывать трудности при чтении. В одной карте примечание о продлении размещено над ценой, в другой оно скрыто под длинным списком функций, а третья выводит кнопку за пределы экрана. Посетитель вынужден заниматься археологией макета вместо сравнения тарифов.
Архитектурный ритм — полезная аналогия в этом случае: повторяйте важные отношения, чтобы люди могли ориентироваться. Это аналогия, а не доказательство того, что аккуратная сетка увеличивает продажи. Ниже приведен пример интерфейса с намеренно иллюстративными размерами, который дизайнер или разработчик может адаптировать, не покупая новую библиотеку компонентов.
Начните с отношений, а затем выберите масштаб выравнивания
Пройдитесь по решению, которое поддерживает страница. На странице сравнения хостинга покупатель должен понять рабочую нагрузку, повторяющуюся стоимость, ограничения, поддержку и следующий шаг. Эти отношения должны оставаться ясными на каждой карте. Повторите порядок информации, прежде чем пытаться выровнять декоративные края.
Для этого примера используйте базовый размер 8 пикселей с токенами выравнивания 8, 16, 24 и 32 пикселей. Это выбор дизайна, а не стандарт доступности или универсальный оптимум. Разместите метку на расстоянии 8 пикселей от значения, оставьте 16 пикселей между связанными фактами и используйте 24 пикселей для разделения разных групп. Более сильный разрыв перед действием говорит читателю, что сравнение закончено.
Называйте токены по назначению, например, field-gap, group-gap и card-padding. Разработчик должен иметь возможность изменить card-padding один раз, а не искать через семнадцать почти одинаковых объявлений. Если переводная метка требует еще одной строки, пусть группа вырастет. Согласованность означает предсказуемые отношения, а не принудительное помещение каждой фразы в один и тот же прямоугольник.
Полезный первый тест — удалить изображения и цвета. Можете ли вы все еще определить, какая цена относится к какому плану и где находятся его ограничения? Если иерархия исчезает, макет слишком сильно полагается на декор.
Работающий пример: три карты хостинга в размерах настольного и мобильного компьютера
Представьте вымышленное сравнение трех конфигураций хостинга. Это пример дизайнерского упражнения, а не список цен Enigma или результат клиента. Каждая карта содержит название плана, предполагаемую нагрузку, информацию о оплате, включенные ресурсы, важные исключения и действие.
На ширине содержимого 1200 пикселей три колонки, разделенные двумя промежутками по 24 пикселей, имеют 384 пикселей доступного пространства. С учетом 24 пикселей отступа по обе стороны, каждая карта имеет 336 пикселей для своего содержимого. На экране с шириной 390 пикселей, внешние поля по 16 пикселей оставляют карточку шириной 358 пикселей или 310 пикселей содержимого после того же отступа. Эти вычисления показывают, сколько места на самом деле имеет текст. Они не говорят браузеру игнорировать масштаб или настройки шрифта посетителя.
Сохраняйте тот же порядок информации, когда карты стекаются на мобильных устройствах. Объедините повторяющуюся оплату, период оплаты и любую плату за установку. Разместите условие продления рядом с соответствующей ценой, а не полагайтесь на примечание на нескольких экранах впереди. Сохраняйте исключения рядом с соответствующей функцией.
На настольном компьютере сетка может выровнять основные группы, позволяя тексту переноситься. На мобильных устройствах уберите фиксированную высоту карт и дайте каждой программе занимать пространство, которое ей нужно. Протестируйте самое длинное название плана и самую длинную переведенную надпись действия. Не решайте проблему переполнения, скрывая важный текст. Чистое скриншот не является полезным сравнением, если посетитель не может найти ловушку.
Используйте этот пятишаговый обзор макета перед публикацией
Сначала прочитайте одну карточку, не глядя на соседние. Запишите, что покупатель приобретает, что исключено и что делает действие. Любой ответ, требующий подсказки, другой карточки или звонка в отдел продаж, заслуживает более ясной метки.
Второй, проверьте одно и то же фактическое значение на каждой карточке. Ограничение ресурса или условие поддержки должно появляться в предсказуемом месте и использовать сопоставимые единицы. Если одна конфигурация требует другого вида информации, объясните разницу вместо того, чтобы создавать аккуратную, но вводящую в заблуждение строку.
Третий, протестируйте узкий экран, увеличение браузера и длинный текст. Следите за обрезанными метками, кнопками, находящимися поверх текста, скрытыми ценами и горизонтальной прокруткой на обычном контенте. Реальный текст лучше подходит для тестирования, чем три одинаковых строки текста-заполнителя.
Четвертый, используйте клавиатуру. Следите за индикатором фокуса по ссылкам, выборам и раскрываемым включениям. Раскрытый панель должен оставаться связан с своим элементом управления и не должен закрывать цену плана или запереть следующее действие под ним. Повторите проверку с сенсорным устройством; наведение не может самостоятельно нести важную информацию.
Пятый, проверьте решение после восстановления визуалов. Яркий акцент определяет действие или конкурирует с шестью другими яркими акцентами? Сохраните полезное подчеркивание, уберите декоративный шум и запишите любую проблему с видом, темой, элементом управления и ожидаемым поведением. Это даст разработчику воспроизводимую проблему вместо вечного запроса: «Оно выглядит немного не так».
Проверьте контраст и перенос вместо доверия к матовому скриншоту
Матовая карточка меняется в зависимости от того, что проходит за ней. Белый текст, который хорошо читается на темно-синем, может исчезнуть, когда под ней появляется светлый рисунок. Увеличение размытия может смягчить фон, но не обеспечит достаточного контраста. Используйте достаточно непрозрачную поверхность за важным текстом, затем протестируйте фактические комбинации в обоих темах.
Минимальное требование WCAG по контрасту использует соотношение не менее 4.5:1 для обычного текста и не менее 3:1 для значимого большого текста. Большой текст имеет конкретное определение в руководстве; заголовок не автоматически исключается, потому что он bold. Цветовой проверщик контраста Журнала может сравнивать два сплошных цвета, но не может сертифицировать всю страницу или оценивать движущуюся прозрачную поверхность.
Руководство по переносу также является полезным тестом. Обычный вертикально прокручиваемый контент должен оставаться удобным в использовании при ширине, эквивалентной 320 CSS пикселей, без необходимости прокрутки в двух направлениях. Некоторый действительно двумерный контент имеет исключения, поэтому оцените сравнительную таблицу в соответствии с ее назначением, а не сокращайте столбцы, чтобы избежать полосы прокрутки.
Ритм также имеет свои ограничения. Повторяющиеся карточки не должны скрывать значимые различия, и совпадающие визуальные позиции не должны превосходить разумный порядок чтения документа. Начните с семантических заголовков, помеченных элементов управления и ясного текста. Рассматривайте пространство как поддержку этой структуры. Затем попросите кого-нибудь выполнить реальную задачу сравнения, отметить, где они задумываются, и изменить дизайн. Согласная сетка — это инструмент; решение, которое помогает человеку сделать, — это суть.
Дополнительная литература
- W3C: Понимание минимального текстового контраста
- W3C: Понимание переноса
- Enigma Журнал: проверка контраста однотонных цветов
Ваш следующий шаг
Попробуйте обзор на одном разделе с ценами или услугами, прежде чем перерабатывать весь сайт. Сохраните размер окна просмотра, определите самый длинный контент и зафиксируйте самый светлый фон за важным текстом. Исправьте одно повторяющееся отношение, затем повторите задачу сравнения.
Если те же проблемы появляются на всей вашей странице, Enigma может помочь превратить результаты в совместный компонент и систему отступов. Принесите экраны и решение, которое ваши посетители должны сделать. Полезной отправной точкой является четкое описание, а не обещание, что другой градиент сделает продажу.