Книга: Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов

Цвет и юзабилити

Цвет и юзабилити

Как минимум у 10 % вашей аудитории есть определенные проблемы со зрением, и поэтому они не видят ваш сайт таким, как видите его вы. Иногда у человека частично нарушено цветовосприятие, то есть он не различает некоторые цвета (чаще всего красный и зеленый). (Если вы хотите понять, как именно эти люди видят цвет, посетите сайт vischeck.com) Крайне редко, но все же встречается и полная неспособность различать цвета. Многие люди не воспринимают отдельные оттенки цветов (для этого явления пока нет медицинского названия). А для людей с более серьезной формой дальтонизма существуют специальные технологии, позволяющие отображать цвета в браузере наиболее приемлемым для них образом.

Сейчас мы обсуждаем методы дизайна, который учитывает интересы большинства пользователей. Главное его преимущество в том, что никто не проигрывает.

Марта Элениак, консультант по юзабилити, разработала свой список правил применения цвета, «которые помогут сделать сайт пригодным для самых разных посетителей». Вот основные положения, позволяющие улучшить юзабилити сайта.

– Цвет текста должен резко контрастировать с цветом фона.

– Фон желательно сделать ровным и однотонным – никаких узоров на заднем плане.

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

– Очень осторожно используйте цвета в дизайне – на странице должно быть не более четырех оттенков. Сохраняйте цветовое оформление от страницы к странице.

– Самый читаемый текст – черный на белом фоне.

– Если страница нуждается в долгом просмотре, а также если ваша аудитория – люди почтенного возраста, используйте более яркие цвета.

– Чтобы цвета было легко различимы, применяйте синие, красные и фиолетовые оттенки для темных тонов; зеленые, желтые и оранжевые – для светлых.

– Если нужно расположить рядом очень контрастные цвета, не помещайте красный вместе с зеленым, а желтый вместе с синим.

– Не используйте серый цвет в тексте или схемах, которые несут важную информацию.

– Поскольку в глазах меньше всего рецепторов для восприятия синего цвета, то мелкий текст или схемы, выполненные тонкими линиями, лучше окрашивать в другой цвет.

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

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

Цвет – важное условие привлекательности сайта. Но при разработке дизайна на него нельзя полностью полагаться, раз столько людей по-разному его воспринимают. Запомните слова известного художника и преподавателя Джозефа Альберса:

Алекс Уокер, еще один гуру веб-дизайна, предлагает начинать процесс создания макета в цвете следующим образом:

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

Цвета создают определенную атмосферу на сайте, вызывают разные чувства и вообще о многом говорят посетителю. Чтобы учесть эти моменты, попробуйте вызвать в воображении пять лучших слов, выбранных вами ранее. Какие цвета возникли перед вашим мысленным взором? Насыщенный зеленый? Желтовато-коричневый? Мягкие голубые тона? Волнующий красный? Выберите два или три, максимум четыре оттенка. Мы встречали бесподобные сайты, выполненные в одном цвете! Если вы оставите минимальное количество оттенков, то клиенты будут лучше воспринимать информацию и меньше уставать. В интернет-бизнесе всегда действует правило: чем меньше цвета, тем лучше.

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

1) линия;

2) форма;

3) тон (светлый, темный, тени);

4) пустое пространство;

5) текстура/узор;

6) цвет.

Цвет может играть разную роль. Он помогает визуально организовать сайт, притягивая взгляд клиента к самой важной информации и делая менее заметным остальное содержимое страницы. Иногда стоит окрасить в разные цвета элементы меню первого, второго и прочих уровней. С их помощью можно привлечь внимание к различным характеристикам продаваемых продуктов, подсветить скидки на товар и выделить специальные предложения.

Прежде чем сделать первый шаг на пути к процветающему интернет– бизнесу, необходимо:

– определить, какой настрой несет в себе ваш бизнес;

– выбрать палитру из небольшого количества запоминающихся цветов;

– сделать цвет неотъемлемой частью дизайна;

– продумать, как использовать цвета для организации информации на сайте.

Главное – использовать цвет с умом. Ведь это очень мощный инструмент влияния на покупателя.

5. Макет на HTML

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

– время загрузки;

– совместимость с разными браузерами;

– использование CSS для упрощения кода;

– включение в сайт таблиц с учетом порядка индексации ячеек поисковыми роботами;

– выбор шрифтов, позволяющих с легкостью читать текст с экрана.

Оглавление книги