Научно доказано: простые сайты лучше сложных

Источник изображения

В августе 2012 года специалисты корпорации Google провели исследование, в ходе которого было выявлено, что пользователь, впервые попавший на сайт в течение 20-50 миллисекунд оценивает его внешний вид, и сайты с простым дизайном получают более высокую оценку, нежели их сложные аналоги. Более того, сайты с характерной для своей тематики структурой (сделанные по прототипу), вызывают большую симпатию, чем“нестандартные”. Иными словами - чем сайт проще, тем он лучше. Но почему?

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

Что такое “прототипический” сайт?


Давайте поиграем в ассоциации. Если я попрошу вас представить цвет для костюмчика новорожденного мальчика, скорее всего, вы представите себе голубой, девочки - розовый. Попрошу дать ассоциацию мебели - назовете какой-нибудь предмет (стул, стол, шкаф и т. п.). То есть у нас есть набор ассоциаций, которые “воспитывались” в нас с детства. В лингвокультурологии это называется фрейм-структурой сознания: мы “показываем” мозгу объект или явление, он реагирует на “раздражитель” ассоциацией.

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

Прототипичность является основным способом мышления - человеческий мозг создает классификацию всего, с чем происходит взаимодействие в реальном мире. Это касается не только предметов обихода и явлений, но и восприятия веб-сайтов. Если пользователь привык к структуре интернет-магазина, то вы вряд ли придумаете что-то лучше - возьмите и сделайте его на базе классического прототипа: фото, описание товара, стоимость, кнопка “Купить”, корзина и оплата (Checkout).

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

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

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

Источник изображения

Вот такой дом понравиться далеко не каждому. Можно восхищаться идеей автора, но едва ли у многих возникнет мысль: “Я хочу в нем жить”. Здание будет восприниматься как произведение искусства, а не уютное жилье. Совсем другое дело, если домик будет таким:

Еще один простой пример в доказательство. Вспомните картины художников: морские пейзажи Айвазовского и “Мона Лиза” Леонардо да Винчи нравятся большему числу, чем “Черный квадрат” Малевича. В музыке: произведения Чайковского нравятся практически всем, а Штокхаузен - ценителям авангарда.

Что такое когнитивная беглость?

Суть когнитивной беглости заключается в том, что мозг “предпочитает” думать о том, о чем думать проще. Причем это заложено непосредственно в самом мозге. Если вы будете напрягать волю, чтобы “заставить” мозг думать, то у вас просто ничего не получится. Это касается абсолютно любого действия и переживания, в том числе и посещения сайта. Мозгу приятнее попасть в ту обстановку, которая ему знакома, и где не придется плутать для получения искомого результата.

Да-да, такой вот неуправляемый “ленивец” человеческий мозг. Он управляет нами, стараясь сделать это максимально простым путем. Поэтому создавайте сайты, не задумываясь, в нашем конструкторе. ;)

Источник изображения

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

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

Можно привести банальный пример: очень часто все наши возлюбленные похожи друг на друга (а изначально на нашу “первую симпатию” ;)), даже если мы абсолютно не отдаем себе в этом отчета.

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

Элементарно - вспомните ситуацию с выключателем. Если у вас был ремонт, и выключатель перенесли, подняли или опустили, то вы очень долго будете испытывать дискомфорт, “промахиваясь” мимо него. :)

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


Задумайтесь: действительно ли навигация стала “удобнее” и для кого? Вы не пользуетесь своим сервисом, и, внося такие изменения, теряете доверие клиентов. Не ждите, что на их место придут новые пользователи, которым будет абсолютно все равно, к какому интерфейсу привыкать. Наверняка, первоначально вы разрабатывали панель своего ресурса по некоему “образу и подобию”, который был привычен (и не только для вас, поверьте ;)). Не играйте в бога - все уже придумали до вас.

Какая связь между обработкой визуальной информации и сложностью восприятия сайта

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

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

Почему простой визуальный ряд воспринимается лучше с научной точки зрения


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

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

Вот почему очень важно при проектировании сайта помнить, что каждый элемент - типографика, логотип и цвета - создают нагрузку на восприятие. И если нагрузка велика, то как бы ни был красив сайт, мозг будет сообщать, что ему некомфортно воспринимать его. Поэтому, страдает либо дизайн, либо бренд. Хотя о каких “страданиях” дизайна можно говорить, если он губит самое главное. ;)

"Рабочая память" и Святой Грааль преобразования

Известное в узких кругах исследование психолога Джорджа А. Миллера (George A. Miller) из Принстона, сообщает: мозг “среднестатистического” взрослого человека способен хранить от 5 до 9 “блоков” информации в краткосрочной памяти, по-другому называемой “рабочей памятью”.

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

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

Причины разочарования

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

Вывод

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

Полезные советы

1 . Исследуйте свою целевую аудиторию, узнайте, какие сайты они посещают чаще всего всего и внимательно изучите их особенности. Знакомьтесь с новыми исследованиями, посвященными юзабилити сайтов.
Или читайте наш блог. Темы для постов вы можете предлагать сами в комментариях, мы обязательно их все раскроем. ;)
2 . Разработайте прототип для вашего собственного сайта и строго следуйте ему. Не нужно фантазировать и регулярно проводить редизайн. Работайте с “коллажами” до того, как выкатывать новый интерфейс на основной сайт.
3 . Соблюдайте правила когнитивной беглости при разработке дизайна. Размещайте все важные элементы в тех местах, где их принято размещать, где привыкли их видеть пользователи.
4 . Не делайте кардинальных изменений фирменных цветов, логотипа и особенностей дизайна - чем больше новый дизайн будет похож на “старый”, тем узнаваемее он будет для нейронных сетей ваших клиентов, они будут чувствовать себя как дома (вспомните пример с фотографиями домиков). ;)
5 . Сделайте дизайн максимально простым. Помните, что одно большое изображение лучше десятка маленьких, один столбец - лучше трех. Используйте пробелы везде, где это возможно - это значительно облегчит восприятие информации. Глазам и мозгу будет комфортно на вашем сайте - он будет нравиться посетителю.

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

Лучше, если вы будете привлекать к тестированию посторонних людей, т. к. ваш мозг уже “адаптировался” под все неудобства сайта - и вам он даже может казаться милым и простым. Помните - это самообман!

7 . Не воспринимайте термин “прототип” буквально. Ваши сайты не должны соответствовать стандарту web 1.0, совсем наоборот - используйте современные тренды дизайна, которые активно используют ресурсы с десятками тысяч посещений в сутки.

Не переворачивайте все с ног на голову, но и не создавайте сайтов, пахнущих нафталином! ;)

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

Лучшие сайты с простым и сбалансированным дизайном, конечно же, вы можете сделать в нашем конструкторе (куда же без PR? ;))! А если возникнут сложности, пишите на support@swedishsite.ru или звоните в Skype: clientsonline с 11.00 до 15.00 по Москве.

Мы постараемся избавить ваш мозг от лишней нагрузки! :-)

По мотивам: medium.com