Правила юзабилити

Как применять контрасты в графическом дизайне

Команда AskUsers

Команда AskUsers

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

Ваши пользователи:

  • Мало кликают по кнопке?
  • Не видят важную информацию?
  • Не понимают, куда нажимать?
  • Уходят, не совершив целевые действия?

А может быть дело в контрасте? Просто они не обращают внимания на важные элементы?

Изучите простые принципы и правила контрастов и посмотрите на свой сайт. Уверен, вы сможете найти варианты улучшения своих интерфейсов.

Итак, контрастные элементы на сайте способны привлечь внимание пользователей. Рассмотрим основные виды контрастов.

Виды контрастов

виды-контрастов (1).gif

Контраст размера в композиции

Более крупные объекты на сайте воспринимаются пользователями лучше. Они контрастируют и привлекают больше внимания, чем маленькие.

контраст размера.png

Примером использования контраста размера являются разные шрифты. Более важная информация выделяется большим шрифтом.

img1size.png

На примере – заголовок большего шрифта. Он более заметен и читаем, чем остальной текст. Здесь можно увидеть еще один пример контраста размера. Целевое действие реализовано кнопкой «да» более крупного размера. Это усиливает желание нажать на неё. Варианты отказа правильнее делать менее контрастными, в том числе и за счет меньшего размера.

Контраст цвета

Контрастирование или контраст цвета — это разница между яркостью цветов. Разительный контраст показывает, насколько цвет светлый или темный.

контраст цвета.png

Контрастный цвет на сайтах используют для выделения основного действия в композиции.

img2size.png

На картинке – первый экран главной страницы сайта AskUsers. Кнопка «зарегистрироваться» выделена красным цветом. Она контрастирует с основными цветами первого экрана – зеленым, черным, белым.

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

Контраст формы геометрических фигур

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

Если нужно сконцентрировать внимание на объекте, можно сделать его сложнее других. Его обязательно заметят!

img3size.png

Пример использования контрастов цвета и формы:

img4size.png

Контраст движения

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

контраст-движения (1).gif

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

Если вам понравилась эта статья, подписывайтесь, и мы будем присылать вам свежие материалы.

Проще поделиться, чем спорить в комментариях.

С помощью этих 4-х простых приемов вы сможете управлять вниманием посетителя сайта и добиваться выполнения нужных вам действий.

konvers.png

А теперь можно и к себе на сайт заглянуть!

… и свежим взглядом оценить контрастность важных элементов на страницах.

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

Сделаем вместе наш интернет лучше !

Закажи юзабилити-тестирование прямо сейчас
Заказать
17532
Читать также