Сила визуального дизайна продукта


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

Возраст визуальной информации

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

Просто, чтобы получить представление о том, как мы живем в эпоху визуальной информации, более 500 миллионов людей смотрят видео на Facebook, причем 85% из них приглушается. Snapchaters поделиться 9,000 кадров в секунду. В секунду. Более 500 миллионов человек используют Instagram ежедневно, как фотографии, комментарий и рассказы пост.

Это в нашей ДНК

Первая причина исходит из нашей ДНК. Эрик Йенсен в своей книге Мозг ориентированного обучения, показывает, что 40% сердечных нервов подключены к сетчатке; больше нейронов посвящены видение, чем все остальные чувства вместе взятые, и, наверное, 90% всего, что приходит на ум-это вызванные зрительные раздражители. Кроме того, недавние исследования показывают, что около 65% населения являются визуальными учащихся, предпочитая учиться и взаимодействовать с информацией, когда связаны с визуальными элементами.

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

Это в нашей истории

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

Пользовательский интерфейс

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

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

Ну фитнес-приложение по Хешам Мохамед для Fireart студии

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

Чтобы ответить на эти вопросы, я собрал некоторые из моего опыта, опрошенные дизайнеры большие и малые проектные группы; и я посмотрел на некоторые исследования о поведении пользователей. При том, что я перечислил 5 причин, чтобы объяснить, почему дизайн так важен в отношении поведения пользователей и общее впечатление от продукта.

В этой статье мы рассмотрим визуальные элементы:

  1. Скорость восприятия данных
  2. Сохранить данные дольше
  3. Триггер удовольствием
  4. Руководство внимание
  5. Сделать пользовательский интерфейс универсальный

1. Он ускоряет восприятие данных

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

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

Дело в том, что когда мы используем визуальные компоненты, такие как иконки, цвета, изображения и иллюстрации, мы запускаем систему 1 сразу. Результат: мы впитываем информацию гораздо быстрее.

Например, когда мы смотрим на картину ниже мы интуитивно триггера 1, и только если мы должны, мы перейти в Систему 2.

Иллюстрация Ариана Санчес / Ми Амор Эс Эль-Мар

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

Это происходит очень быстро. По данным исследования С. Торпи, Д. Fize и С. «Марлот» назвал скорость обработки в зрительной системе человека, она занимает всего 150 миллисекунд для мозга для того чтобы обработать изображение и еще более 100 миллисекунд, чтобы понять его смысл.

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

Тем не менее, уровень признания-это не то же самое для всех пользователей.

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

Участники старше 60 лет у 60% процент для значок смысл, в то время как участники между 20-30 было признание скоростью почти 90% — существенная разница.

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

Примером этого является 40 ПП изменения в скорости распознавания для простой сигнализации на иконку. В то время как в представлении 1 — используя конкретное представление часов — скорость распознавания составила 100%, в представлении 2 — с помощью календаря — признание ставка была 40%.

2. Она сохраняет данные за гораздо дольше

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

В исследовании Роджера Шепарда под названием обучения 10000 картинок, показано, что аудитория подвержена 612 изображений в течение примерно 6 секунд достиг 98% хит ставки, когда просят запомнить их в двух альтернативных тестов. По сравнению с аналогичными тестами, чтобы запомнить слова и короткие предложения, ставка снижается до 88%.

Воспоминания Густаво Замбелли, приспособились.

Эксперимент также показал, что память картина неизменно превосходит вербальную память. Во-первых, потому что способность запоминания изображения практически неограничен, а во-вторых, потому что изображения в результате лучшие показатели памяти, чем тексты. Кроме того, яркие образы лучше сохраняются в наши мозги, чем обычные.

Сравнивая визуальный контекст и прослушивания контексте, разница все равно остается. Исследование Эдгара Дейла показывает, что когда люди слышат информацию, есть 10% шанс, что они будут помнить его спустя 3 дня.

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

Хотя удержание курса в начале часа (кратковременная память) немного отличается (72% при записи и чтения; 80% при визуально), при анализе долговременной памяти, разница существенная, представляя 10% памяти хранения письму и чтению и 65% для зрительных стимулов.

Так, с помощью графика мы видим информацию быстрее признании (250 миллисекунд , как показано выше), и больше время удерживания в наш мозг (продолжительностью до 65% в течение 3 дней).

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

3. Это вызывает удовольствие

Когда наш ум достигает быстрого понимания подвергаясь небольшим когнитивных усилий, наше тело реагирует положительно, вызывая чувство удовольствия. Вот что показало исследование под названием “разум в покое ставит улыбку на лице” исследователи Петр Winkielman и т. Джон Качиоппо.

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

Утечка, по Ник Штааб

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

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

Несколько лиц на мелкой пятницу, на Себастьяна Аббуд

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

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

4. Он направляет внимание

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

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

В исследовании Nielsen Нормандской группы было установлено, что пользователи тратят на 10% больше времени, глядя на динамик фото, чем читать их биографии, даже если текстовый контент потребляет 316% больше места на экране.

Другой пример был, как Убер оптимизирована целевая страница , изменив визуальные элементы.

Заменив изображение на обложке в первый раз, в заголовке было видно на 100% тестеров в то время как предыдущая версия была просмотрена 90%. Это означает, что 10% из людей не акцентировал внимание на заголовок на мгновение.

Кроме того, в новой версии заголовок рассматривается после 1 секунды, в то время как в старом варианте, пользователям потребовалось 1,5 секунды , чтобы увидеть заголовок. Это огромная разница. Пользователи вернулись к Новый лозунг чаще и потратил 8% своего времени в первый раз, в то время как в предыдущей версии их число составило 3%.

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

Небольшая разница в размещении символов на изображениях сделал огромную разницу в внимания пользователя.

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

5. Это делает его универсальным

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

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

Спасибо

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

  1. Память места поподробней, чем вы думаете: роль категорий в зрительной долговременной памяти, от TALIA Konkle, Тимоти Ф. Брэди, Джордж А. Альварес, и ОД Олива;
  2. Фотографии как веб-контента на Якоб Нильсен;
  3. Значения произведения иллюстрации к Катажине Dziaduś;
  4. Сила визуальные эффекты в eLearning инфографики; обучение без учителя зрительных функций через шип зависит от времени пластичности по Тимоте Masquelier и Саймон Дж. Торп;
  5. В UIS, люди признают икон быстрее, чем слова?, Больших причин для применения иллюстраций в дизайн пользовательского интерфейсаи визуального восприятия. Значки против копирования в пользовательском интерфейсе исполнителя Марина Yalanska;
  6. Роль рабочей памяти, торможение, и скорость обработки в текстовом восприятия у детей Эрикой Борелла, и Аник де Ribaupierre.
  7. Думаешь, быстрых и медленных по Даниэль Канеман
  8. Сапиенс: Краткая история человечества с Юваль Ной Харари,
  9. Культуру карте: расшифровка, как люди думают, ведут, и получить вещи Сделано в разных культурах по Эрин Мейер
  10. Спасибо дизайнерам Матеус Буэно, Кристиан Линн, Виктор Розато за их вклад в эту статью.
  11. Спасибо Ульяна Arthuso за корректуру этой статьи.

Что больше?

А вы, что думаете? Оставить его в комментариях, чтобы мы могли улучшить этот список.

Если вы хотите знать больше о моей работе, голову jonnyczar.com или просто добраться до меня jonnyczar@gmail.com.

Ура! Пожалуйста, не забудьте оставить свои хлопки.

👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼


Сила визуального конструирования изделий была впервые опубликована в коллективной УБ на средних, где люди продолжают разговор, выделение и реагирование на эту историю.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.