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

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

Масштабное исследование, проведенное Google, выявило два ключевых вывода:

• Пользователи оценивают сайты за полсекунды. 
• «Визуально сложные» сайты неизменно оцениваются как менее красивые, чем их простые аналоги.

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

Что такое «прототип» сайта?

Если вам назовут слово «мебель», какой образ появится у вас в голове? 95% людей думают о стуле. А если спросят, какой цвет — для мальчиков, а какой — для девочек? С большой вероятностью вы ответите, что для первых — синий, а для вторых — розовый. Потому что это паттерн, который укрепился в обществе. 

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

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

Если вам скажут «сайт модной женской одежды», вы можете представить что-то вроде этого:

Прототип «интернет-магазина одежды» выглядит так: 

Сходство не означает, что сайтам не хватает оригинальности или что они «украли» идеи друг у друга. Они просто соответствуют наиболее популярным представлениям о том, как должен выглядеть сайт интернет-магазина. 

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

Когнитивной беглость — это особенность мозга думать о тех вещах, о которых легко думать. Мозг сам по себе — ленивый орган, который по определению делает всё, чтобы как можно меньше «напрягаться». Любой средний пользователь любит посещать сайты, где инстинктивно понятно, какие действия нужно совершать. 

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

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

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

Что происходит, когда вы оправдываете ожидания?

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

Сравните две версии сайта онлайн-магазина галстуков Skinny Ties.

До:

После: 


Несколько ключевых изменений привели к огромным результатам:

• Вторая версия следует прототипу по оформлению. Он сделан так, как «должен» выглядеть интернет-магазин; 
• Вторая версия более «свободная», много пустого пространства, которое не перегружает восприятие;  
• Каждый продукт помещён на отдельное изображение. 

Всего через две с половиной недели результаты были ошеломляющими:

Приведённый дизайн выглядит симпатично, но не содержит ничего революционного. Он просто соответствует ожиданиям о том, как должен выглядеть интернет-магазин.

Почему простой сайт легче обрабатывать? Логично, потому, что он простой! Чем больше цветовых и световых вариаций на странице (т. е. чем больше визуальная сложность), тем больше работы приходится выполнять глазу для передачи информации в мозг.

Как создать простой сайт?

• Исследуйте свою аудиторию и сайты, которые они посещают больше всего. 
• Посмотрите тематические исследования об изменениях дизайна в вашей категории.
• Создайте коллаж для своего сайта со всеми «рабочими» компонентами, которые вы обнаружите.
• Соблюдайте правила когнитивной беглости.
• Расположите элементы там, где посетители ожидают их найти.
• Не добавляйте лишние элементы, если они не сообщают о том, что волнует вашего посетителя.
• Меньше значит больше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбец вместо трех; больше пробелов вместо большего количества «элементов».
• Убедитесь, что ваш сайт соответствует ожиданиям по ценам, эстетике, скорости и т. д.
• Сохраняйте оригинальность. «Прототип» сайта не означает, что каждый аспект вашего сайта должен соответствовать этой форме.

По мотивам статьи: conversionxl.com