Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 1

Мы в 65pixels точно знаем, что запасть в душу пользователям — задача не из легких. Недостаточно создать правильный и продуманный интерфейс. Нужен креатив, красота и... что ещё? Мы обратились к науке и разобрались в том, что лежит в основе действительно хорошего дизайна интерфейса.

Автор — Дарья Астафьева, иллюстратор — Михаил Филимонов.

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

Ценится все, что экономит время и позволяет включаться в процесс без долгой подготовки.

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

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

Интерфейсы с точки зрения науки

Как создаются интерфейсы? Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. Во многом интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Мы ориентируемся на тренды — просто как у Apple, понятно как у Google. Чаще всего в интерфейсах реализуются уже воплощенные кем-то идеи. Но что стоит за ними? И почему одни тренды остаются с нами навсегда, а другие не приживаются и вызывают негатив у пользователей?

В поисках ответа обратимся к науке — психофизиологии.

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

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

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

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

Первое впечатление всегда визуальное

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

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

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

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

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

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

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

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

Аффордансы в дизайне интерфейсов

Аффордансы – это скрытый язык дизайна интерфейсов. С их помощью мы можем буквально «вести» пользователя внутри интерфейса. Но неадекватное использование аффордансов может сильно навредить бренду или продукту.

Принято выделять несколько видов аффордансов.

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

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

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

Метафорические указатели. Упрощенная иконка дома символизирует главную страницу, конверт значит электронную почту, папка означает… папку. Это все примеры метафорических указателей, полагающихся на здравый смысл пользователя (и знакомство с повседневными предметами), чтобы установить соответствие.

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

Аффорданс можно использовать не просто как инструмент, а как метод, логику.

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

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

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

  • Интерактивные (кликабельные) элементы — кнопки, ссылки, иллюстрации — не выделяются на фоне остального контента. Маленькие, блеклые, необъемные, непривлекательные — они не будут заметны, их упустят из виду. А вместе с ними и полезные фичи, реализованные в приложении.

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

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

Ставьте лайки и подписывайтесь на нас тут и в Instagram :)

0
29 комментариев
Написать комментарий...
Эдуард Файзуллин

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

Например, указание в статье "Человек получает бОльшую часть информации через зрительный канал — по разным данным от 60 до 90%" не доказано, а цифры в разных источниках разнятся (скриншот ниже). 

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

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Эдуард, спасибо за ваше замечание!

Мы думали над этой идеей с самого начала и решили, что если будем погружать читателя в контекст исследований, 99% которых опубликованы в зарубежных изданиях, то наша статья будет не в двух частях, а в пяти.
А еще очень сильно утяжелит чтение, а это не формат vc.

Если вам будет интересно обсудить эти данные и исследования, то мы будем рады пообщаться с вами лично )

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

Ответить
Развернуть ветку
Динислам Кутлумбетов

Фрейд бы заценил, но упомянул бы эдипов комплекс какой-нибудь))

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

:)

Ответить
Развернуть ветку
Дмитрий Горюшин

В общем в основе всего - экономия времени)

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

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

Мы всегда думаем об их удобстве и комфорте. Даже когда такие запросы требуют трудозатрат и времени. И в таких ситуациях экономия времени — это побег от сложностей) 

Ответить
Развернуть ветку
Олег Спеш

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

Заголовок не соответсвует статье :(

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

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

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

Да, для большинства профи, возможно, эти правила уже давно находятся на интуитивном уровне. Но мы решили рассказать о них простым языком для всех остальных )

Ответить
Развернуть ветку
Юрий

Полезно!)

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо )

Ответить
Развернуть ветку
Анна Рубцова

но авторы... вы сказали "красивое кажется удобным" и тут же рассказываете, почему наоборот, удобное кажется красивым. а нестандартные дизайны пролетают. 
зы: аффордансы это прекрасно. спасибо, что напомнили.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

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

Ответить
Развернуть ветку
Юлия Бабенко

Как же все-таки удивительно устроено человеческое восприятие..

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

И как интересно в этом разбираться! :)

Ответить
Развернуть ветку
Анастасия Войцешко

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

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо, Анастасия!
Мы точно на одной волне! :)

Ответить
Развернуть ветку
Евгений Мирошниченко

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

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

Эта мысль понятна, но на самом деле всё сложнее ;-)

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

P.S. Не являюсь дизайнером, просто в свое время эти рассуждения о красоте мне заинтересовали, что ли, и довольно много об этом думал.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Евгений, спасибо за ваше внимание к нашей статье!
Но, как вы, наверное, и сами понимаете, мы не занимаемся профессиональной литературой. Да и формат vc не предполагает разворачивать материал в таких подробностях )

Если у вас есть желание обсудить эту тему подробнее, то велкам к нам в лс )

Ответить
Развернуть ветку
Троицкий Филипп

Компактно и конкретно! Спасибо! 

Приглашаем вашу команду рассмотреть возможность апгредить нашу Платформу DataMotor. 

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Приняли ваше приглашение )

Ответить
Развернуть ветку
Dmitry Lyamin

Интересно, но кажется описание больше «про навигацию».

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Больше внимания этому уделим во второй части статьи ;)

Ответить
Развернуть ветку
yulia kazakova

Нетворкинг в коворкинге 
 

Ответить
Развернуть ветку
Oleg

Занимаюсь сайтостроением 10 лет и понимаю, что для меня это и тогда были очевидные вещи. Видимо я интуитивно понимал, как нужно правильно. А теперь это уже делаешь на опыте.
Ваш так сказать мануал бы всем клиентам почитать. Тогда не было бы вопросов почему это так. Спасибо за статью.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Олег, очень рады, что для вас статья стала полезной! 
Можете показать своим клиентам наши карточки по этой статье )
https://vk.com/wall-197846710_68

Ответить
Развернуть ветку
Oleg

Только если через VPN. ВКонтакте в Украине не работает. Лучше заведите страницы на международных ресурсах. Например, Фейсбук.

Ответить
Развернуть ветку
Where Areyou

Олег, в конце заметки ребята указали свой инстаграм.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

В фейсбуке мы тоже есть :)
https://m.facebook.com/65pixels

Ответить
Развернуть ветку
Oleg

Ну и зачем минусовать комментарий? Вам делать нечего?

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