Консистентность в дизайне

При создании дизайнов сайта одним из важных принципов является консистентность. В этой статье мы — команда DIGIMATIX — расскажем о том:

• что такое консистентность;
• какие ее типы бывают;
• как обеспечить консистентность дизайна.

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

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

Задачи, которые решает консистентность:

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

Существуют несколько типов консистентности. Однако в общем понимании она разделяется на визуальную и функциональную.

1. Визуальная

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

2. Функциональная

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

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

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

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

Модульная сетка определяет общую структуру, делает макеты более гармоничными, эстетичными и в целом ускоряет работу дизайнеров. С помощью сетки выстраиваются все элементы интерфейса — их размеры и отступы между ними, а также задается вертикальный и горизонтальный ритм. Использование модуля делает дизайн более предсказуемым и вычисляемым. Наша команда использует в своей работе «8-пунктовую» (8pt grid) систему. Это базовый шаг, на основе которого определяются возможные расстояния между элементами, строятся типографика и размеры элементов взаимодействия с системой, выбираются размеры для иконок и других элементов. Это значительно упрощает работу и приводит все элементы интерфейса к единообразию.

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

Для всех элементов сайта, с которыми взаимодействует пользователь: помним обо всех состояниях, с которыми может контактировать пользователь:

• Initial — элемент интерактивен и включен.
• Focus — пользователь выделил элемент, используя клавиатуру или другой метод ввода.
• Hover — пользователь навел курсор на интерактивный элемент.
• Active — пользователь совершил определенное действие (нажал на кнопку/поставил галочку в чекбоксе, сменил выбор в селекторе и т. д.)
• Progress/Loading — используется, когда действие не выполняется немедленно, и сообщает, что компонент находится в процессе завершения действия.
• Disabled — элемент в настоящее время не является интерактивным, но может быть включен в будущем.

Таким образом, мы создаем как визуальную, так и функциональную консистентность для всех элементов интерфейса.

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

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

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

Смотрите также по этой теме:

• Микротексты в интерфейсе;
• Микроанимации в интерфейсе;
• Как создаются прототипы сайтов.

Подписывайтесь на наш блог и ставьте лайки:)