Улучшаем оформление картинок для вашего сайта

Публикуя на сайте или в блоге иллюстрацию с текстом поверх изображения, следует особое внимание уделять читабельности всех слов. Важную роль играет правильно выбранная контрастность элементов. Небольшие хитрости в оформлении иллюстрации помогут улучшить восприятие текста без ущерба для общего дизайна веб-страницы.

Хорошо подобранная иллюстрация не только дополняет смысл опубликованного текста, но и создаёт общее приятное впечатление о веб-ресурсе. В Nielsen Norman Group провели исследования и выяснили, что пользователь надолго задерживает взгляд на иллюстрации текущей страницы, если фото содержит текст. Картинка, которая дополняет контент, но не имеет своего текста, почти всегда остаётся без внимания. Изображение может не только мгновенно привлечь внимание, но и конвертировать его в действие на сайте, потому многие дизайнеры стараются визуализировать интерфейс с текстом на фоне больших изображений или даже видео.

Стремление завлечь посетителя картинкой привело к тому, что текст часто стали помещать поверх изображения, не заботясь о читабельности всех слов. Согласно принятым нормам, текст поверх картинки, который не является частью изображения или логотипом должен соответствовать контрасту не менее 4,5:1 (или 3:1 для крупного шрифта). Есть несколько простых правил, соблюдая которые вы повысите контрастность текста, а вместе с ней — юзабилити своего ресурса.

Позаботьтесь о том, чтобы пользователям не приходилось выбирать между попыткой прочесть каждое отдельное слово и понять общий смысл послания. На примере с действующего сайта показано, как фоновое изображение снижает читабельность текста. Картинка имеет слишком много деталей, которые отвлекают внимание от текста. Специалисты из Nielsen Norman Group использовали специальное приложение чтобы продемонстрировать контрастность текста на заданном фоне. Места, где контрастность составляет меньше необходимых 4,5:1 затемнены:

spirecom-slide3

Достаточно затемнить тот же фон несколькими слоями и белый текст тут же приобретает нужную контрастность. При этом невооружённым глазом заметить изменение в дизайне веб-страницы не так-то просто. Плагин для отслеживания контрастности текста подтверждает, что затемнение фона помогло достичь необходимого уровня контрастности 4,5:1:

spirecom-slide3-60_15blackradialoverlay

Следует обращать внимание на соответствие оттенков текста и фонового изображения. Белый текст вполне ожидаемо потеряется на светлом фоне или разноцветной картинке, намеренно «запыленной» фильтрами. В такой ситуации фон следует затемнить, а чтобы понимать, насколько сильно надо форматировать картинку используйте соответствующие инструменты, наподобие расширения для браузера Color Contrast Analyzer Chrome.

Ещё один пример — онлайн-каталог предметов интерьера с белым текстом поверх цветных картинок. Анализ контрастности текста чётко демонстрирует, какие из названий читабельны, а что пользователь скорее проигнорирует, так как контрастность не достигает необходимого для крупного шрифта соотношения 3:1:

complimentsdk_compliments-making-home-home-2015-09-18-original

Простой выход для иллюстраторов данного каталога — поместить надписи на однотонный фон для повышения читабельности. Текст лучше сделать чёрным и перенести его в нижнюю часть изображения, чтобы однотонным фоном не закрывать весь предмет на фото. Анализ контрастности подтверждает эффективность этих нехитрых приёмов:

complimentsdk_compliments-making-home-home-2015-09-18-blurred

Фильтр размытого фона в определённом сектора изображения может испортить общее впечатление от дизайна страницы, но является удобной альтернативой, когда затемнение картинки никак нельзя применить, а контрастность надо повысить. К тому же, если вы применяете этот фильтр, у фонового изображения не появятся новые оттенки, как при затемнении, а значит уже выбранный вид текста не сольётся с новым фоном. В некоторых случаях подойдёт размещение текста поверх цветного изображения с полупрозрачной рамкой, которая создаст дополнительную контрастность. Следует помнить, что даже тёмная фоновая зона не добавит контрастности, если будет чересчур прозрачной:

rei-original30blacktextboxes

Уменьшив прозрачность чёрных блоков всего на 20%, удалось повысить контраст текста на цветном фоне — плагин подтверждает контраст на необходимом для крупного текста уровне 3:1:

rei-50blacktextboxes

Нельзя говорить о том, что есть универсальные инструменты для повышения контрастности текста. Затемнение подойдёт к одной фотографии, но может оказаться абсолютно бесполезным на другом сайте. Если плагин показывает низкую контрастность текста придётся опробовать несколько вариантов изменения дизайна, чтобы найти самый оптимальный вариант. Каждую вариацию следует повторно проверять через плагин — может оказаться, что фон вы затемнили или «замылили», но читабельность текста не только не улучшилась, а даже стала хуже.

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

Источник: Nielsen Norman Group