Рассматриваем 9 гипотез
Как проявляется эстетика в интерфейсе
Сибирикс

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

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

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

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

По каким параметрам определяется эстетика интерфейса

Основные принципы эстетики визуального восприятия были выделены психологами. Среди этих принципов:
  • Гало-эффект — первое впечатление о дизайне играет главную роль. То есть, если при знакомстве с интерфейсом пользователи оценили его эстетику, они могут закрыть глаза на его некоторые неудобства.
  • Удобство использования.
  • Проста для восприятия, отсутствие лишних деталей.
Эстетику часто воспринимают как совокупность факторов — например, плохо подобранные цвета могут «убить» весь эффект лаконичного и продуманного интерфейса.

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

Мы решили отойти от чувственно-эмпирической оценки и выделить несколько категорий факторов, которые помогут оценить эстетику интерфейсов. На первый план мы вынесли чисто интеллектуальное объяснение. Пробежимся по категориям:
  1. Сенсорика — насколько взаимодействие с интерфейсом возбуждает наши органы чувств.
  2. Восприятие — как мы интеллектуально воспринимаем визуал, звуки и тактильные ощущения.
  3. Общественная эстетика — соответствие нормам, трендам и тенденциям современного мира.
  4. Эмоциональность — способность интерфейса пробудить в нас определенные эмоции.
  5. Этика — как дизайнеры заботятся о нашем удобстве во время взаимодействия с интерфейсом.
  6. Техника — насколько грамотно подобраны цвета, шрифты и формы.
  7. Система — как компоненты интерфейса взаимодействуют между собой.
  8. Семантика — насколько продуманно используется значение цветов и форм в дизайне.
  9. Взаимосвязь — насколько интерфейс соответствует своему предназначению.
В первой части статьи мы рассмотрим первые четыре группы факторов — они в большей степени относятся к восприятию интерфейса пользователем. А в продолжении разберем те факторы, за которые отвечают дизайнеры.

Часть 1

Сенсорика

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

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

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

Восприятие

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

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

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

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

Общественная эстетика

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

Например, iPhone был далеко не первым смартфоном с сенсорным экраном, но именно его интерфейс стал моделью для подражания — и в конце концов, эра кнопочных телефонов канула в Лету. Интерфейс iPhone соединил в себе инновации (сенсорное управление) и качественную визуальную проработку. Если для других моделей сенсорных смартфонов главным было показать уникальное решение, а удобство и эстетика уходили на второй план, то компания Apple разработала не только инновационный, но и максимально продуманный интерфейс. Тренд на сенсорные экраны тогда уже начал зарождаться, но пока не стал обыденностью, поэтому Apple получила заслуженную славу новатора.
Здесь уместно вспомнить другой пример из той же сферы — смартфоны Vertu. Их лаконичные интерфейсы казались одними из самых эстетичных, и немалую роль здесь оказало позиционирование. Vertu стали первыми смартфонами, стоимость которых приравнивалась к цене премиального ювелирного украшения. Рингтоны, материалы корпуса, оформление передней панели — все было продумано так, чтобы олицетворять роскошь. А обладание Vertu хоть и формально, но причисляло вас к немногочисленной элите — это тот самый общественный фактор.

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

Лаконичный интерфейс Vertu стал показателем высокой эстетики благодаря отождествлению с элитой.
Лаконичный интерфейс Vertu стал показателем высокой эстетики благодаря отождествлению с элитой

Эмоциональность

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

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

Наши чувства затрагивает более человечный подход к разработке дизайна, мы замечаем это, например, когда видим более продуманные этапы взаимодействия с приложением или сайтом. Такие интерфейсы мы подсознательно ценим больше.
Если в Slack что-то пошло не так, интерфейс не просто сообщает об этом, а дает варианты решения проблемы. Такая забота о пользователе вызовет у нас положительный отклик.
Приложение Gemini Photo с юмором подходит к сообщению об отсутствии похожих фото в ваших альбомах
Приложение RememBear использует маскота-медведя, чтобы поощрить пользователя за успешно выполненные действия
Рассмотренные факторы объясняют особенности восприятия интерфейсов пользователем. Их необходимо принимать во внимание, они помогут предугадывать реакцию аудитории. Но гарантировать 100% успех, учитывая только эти факторы, невозможно. Есть ряд критериев, которые могут оказать большее влияние на пользователя — именно за них отвечает дизайнер. Об этих группа факторов — во второй части статьи.

Часть 2

Этика

К этичным решениям в области интерфейсов можно отнести доступность восприятия для каждого пользователя, учет мнений и забота о разумном потреблении энергии.
  • Доступность восприятия по-другому можно назвать инклюзивным дизайном. Сейчас тенденция — не создавать отдельные форматы интерфейсов для людей с ограниченными возможностями, а максимально адаптировать существующие ресурсы для любого восприятия. При этом учитываются размеры и четкость важной информации, наиболее нейтральные сочетания цветов, встроенные инструменты интерфейса, которые позволяют настроить цветовую гамму и масштаб. Полные правила для создания инклюзивного интерфейса описаны здесь.
  • Учет мнений пользователей может проявляться в виде краткого опроса, просьбы об оценке или формы обратной связи. Видя эти элементы, пользователи отмечают, что их мнение тоже учитывается — даже если они не участвуют в сборе мнений.
  • Забота о разумном потреблении энергии выражается в стремлении сделать интерфейсы более «легкими», а также в возможности использовать темную тему или упрощенное отображение экранов.
Этичные решения вызывают положительные эмоции и показывают пользователям, что разработчики интерфейса задумываются не только о получении прибыли, но и о людях и окружающей среде.
Бледные иконки в верхнем меню будут хорошо заметны только людям с отличным зрением. Пожилым или пользователи с особенностями зрительного восприятия может быть сложно их считать. Нижний вариант с крупными и яркими надписями смотрится проще, но учитывает особенности восприятия.

Техника

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

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

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

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

Система

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

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

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

Семантика

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

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

Конечно, такое определение семантики достаточно примитивно — опытные дизайнеры и маркетологи «копают» глубже. Но принимая во внимание даже такие простые правила, вы больше приблизитесь к созданию эстетически прекрасного интерфейса.
Темная палитра сайта Bork (черный, темно-коричневый, серый) говорит о серьезности и технологичности. При этом яркая оранжевая кнопка «Купить» пробуждает положительные эмоции и побуждает к целевым действиям.
Здесь, даже если не брать во внимание другие проблемы UX, сразу бросается в глаза несоответствие тематики сайта и семантики цвета. Для сайта питомника больше подошли бы светлые, радостные цвета, а не мрачный черный.

Взаимосвязь

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

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

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

Заключение

Конечно, понятие эстетики для каждого останется своим, все-таки это эмпирическое понятие. Но если суммировать рациональные гипотезы, получается что эстетика интерфейса заключается в:
  • Соответствии трендам и тенденциям общества (совет — тренируйте насмотренность);
  • Качественно подобранном визуале, звуковом и тактильном сопровождении (совет — работайте над контентом, плохой контент убьет самый лучший дизайн);
  • Соответствии контексту применения;
  • Эмоциональной составляющей — уместном употреблении юмора и заботе о пользователях.
Уместить все эти гипотезы в одном дизайне сложно, да и не всегда нужно. Главное — соответствие целевой аудитории и функциям, которые выполняет интерфейс.