Как проявляется эстетика в интерфейсе

Рассматриваем 9 гипотез. Часть 2

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

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

Этика

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

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

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

  • Забота о разумном потреблении энергии выражается в стремлении сделать интерфейсы более «легкими», а также в возможности использовать темную тему или упрощенное отображение экранов.

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

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

Техника

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

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

Эстетика техники — это то, что отличает интерфейс, созданный профи, от работ начинающего дизайнера.

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

Система

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

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

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

Часть простого UI-кита
Интерфейс, созданный по принципу золотого сечения

Семантика

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

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

Формы и шрифты тоже имеют значение. Например, странно представить сайт детского сада с рублеными шрифтами, оформленный в стиле брутализм. И, напротив, онлайн-ресурс финансовой компании совсем не будет смотреться с мягкими очертаниями кнопок, креативной анимацией и «веселыми» шрифтами.

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

Темная палитра сайта Bork (черный, темно-коричневый, серый) говорит о серьезности и технологичности. При этом яркая оранжевая кнопка “Купить» пробуждает положительные эмоции и побуждает к целевым действиям.

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

Взаимосвязь

Считается, что истинная красота и эстетика – это гармония. Эстетика взаимосвязи – это то, насколько гармонично интерфейс вписывается в контекст использования.

Например, почему ридеры Kindle так популярны? Если оценивать их интерфейс в отрыве от контекста, то он значительно проигрывает интерфейсу того же iPad: здесь используется только серый цвет в 16 различных оттенках, нет анимированной прокрутки и т.д. Но если принять во внимание условия использования, то все встает на свои места.

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

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

Эстетика взаимосвязи также может проявляться как соответствие интерфейса привычным нормам. Например, популярные производители фаст-фуда – Макдональд’с, Бургер Кинг – задали стандарт интерфейсам киосков для заказа продукции. Мы привыкли к определенному виду экрана киоска, где слева расположены категории меню, на основной части экрана – сама продукция, а внизу – корзина. Если в каком-то заведении фаст-фуда мы увидим другой интерфейс, то посчитаем его неудобным и неэстетичным, так как он не будет отвечать нашим представлениям.

Заключение

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

  • Соответствии трендам и тенденциям общества (совет – тренируйте насмотренность);

  • Качественно подобранном визуале, звуковом и тактильном сопровождении (совет – работайте над контентом, плохой контент убьет самый лучший дизайн);

  • Соответствии контексту применения;

  • Эмоциональной составляющей – уместном употреблении юмора и заботе о пользователях.

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

0
1 комментарий
Anna Kozhevina

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

Ответить
Развернуть ветку
-2 комментариев
Раскрывать всегда