В цій темі ми, Роби бізнес, хотіли би розповісти вам, чому простий дизайн сайту краще складного. І це не просто наша думка! Це факт, якому є наукове підтвердження!
Отже, дослідження, проведене Google, мало два ключові висновки:
- Користувачеві потрібно всього 1/50 до 1/20 секунди, щоб оцінити, гарний сайт чи ні.
- «Візуально складні» сайти оцінюються як менш красиві, ніж їх прості аналоги.
Іншими словами, дослідження показало, що чим простіше дизайн, тим краще.
Але чому?
У цій статті ми на прикладах розглянемо роль когнітивної швидкості і теорії обробки візуальної інформації, які відіграють важливу роль у спрощенні вашого веб-дизайну і допоможуть збільшити конверсію.
Що ж таке «прототип» сайту?
Якщо я скажу «меблі», який образ з’явиться у вас в голові?
Як показує дослідження, то 95% людей подумає саме про стільці.
Якщо я запитую, який колір асоціюється зі словом «хлопчик», ви думаєте «синій» (а дівчинка — «рожевий» і т.д.)
Прототип — це основний ментальний образ, який ваш мозок створює для класифікації всього, з чим ви взаємодієте. Від меблів до сайтів у вашого мозку є шаблон того, як все має виглядати і відчуватися.
У мережі прототипи розпадаються на більш дрібні категорії. У вас є різні, але конкретні психологічні образи для соціальних мереж, сайтів, електронної комерції та блогів. Якщо на якомусь з цих сайтів щось відсутнє у вашому ментальному образі, ви закриваєте сайт на свідомому і підсвідомому рівнях.
Якби я сказав «сайт модного жіночого одягу», ви могли б уявити щось на зразок цього:
А тепер подивимося на прототип сайтів «інтернет-магазину одягу», помітили, що вони всі дуже схожі і мають схожу структуру сайту? (навіть якщо цей сайт з іншої країни).
Схожість зовсім не означає, що сайтам не вистачає оригінальності або що вони «вкрали» дизайн один у одного. Такою структурою вони виправдовують ваші очікування щодо того, як має виглядати сайт електронної комерції.
Що таке когнітивна швидкість?
Основна ідея, що лежить в основі когнітивної швидкості, полягає в тому, що мозок воліє думати про речі, про які легко думати. Ось чому ви віддаєте перевагу тому, щоб відвідувати сайти, дизайн і структура яких вам інстинктивно зрозумілі.
Когнітивна швидкість виникає з іншої області поведінки, відомої як «Ефект простого впливу», яка свідчить, що люди бажають бачити знайомі та зрозумілі їм речі.
Це правило діє і в онлайні. Ми звикли, що форма підписки на сайті розміщена в правому кутку, а логотип компанії у верхньому лівому кутку.
Якщо ваші відвідувачі обумовлені певним дизайном сайтів у вашій категорії, відхилення від них може підсвідомо поставити вас в категорію «менш красивих».
Це зовсім не означає, що ви повинні просто «робити те, що роблять всі інші». Ви повинні знати, які варіанти дизайну сайту є прототипами для вашої категорії. Обов’язково перевірте і знайдіть докази, що саме цей дизайн є прототипом у вашій категорії.
Не проводячи дослідження, багато дизайнерів роблять поганий вибір. Наприклад, багато сайтів електронної комерції використовують автоматичний слайдер прокрутки зображень продуктів, але дослідження за дослідженням показує, що автоматичний слайдер губить конверсію.
Що відбувається, коли ви виправдовуєте очікування?
Сайт з високим рівнем швидкості буде відчуватися досить знайомим, так що відвідувачам не потрібно витрачати розумові зусилля на пошук потрібного продукту або кнопки, і замість цього вони можуть зосередитися на тому, навіщо прийшли на ваш сайт.
Однак, коли рівень швидкості низький, ви відразу це відчуєте. Візьміть онлайн-магазин краваток Skinny Ties, який до редизайну не виглядав як сайт електронної комерції:
До:
Після:
Кілька ключових змін призвели до величезних результатів:
- Простий і зрозумілий дизайн і структура сайту;
- Набагато більш «відкритий» дизайн з грамотним використанням прогалин;
- Зображення містять один продукт з високим розширенням і контрастними кольорами.
Давайте ознайомимося зі статистикою цього редизайну.
Всього через два з половиною тижні результати були приголомшливими:
Сам по собі редизайн, хоча і симпатичний, не є революційним. Сайт точно відповідає очікуванням того, яким повинен бути сучасний інтернет-магазин одягу. Він «відкритий» і має єдину стилістику на всіх сторінках.
Візуальна обробка інформації та складність сайту
У цьому спільному дослідженні Гарвардського університету, Університету Меріленда і Університету Колорадо, дослідники виявили сильну кореляцію «естетично привабливих» сайтів серед різних демографічних груп.
Наприклад, учасникам з докторським ступенем не сподобалися дуже барвисті веб-сайти.
В результаті дослідження не було розроблено жодних конкретних універсальних принципів проектування. Єдине, що було універсальним — це візуально складний веб-сайт мав меншу візуальну привабливість.
Чому простий дизайн з наукової точки зору легше обробляти
Причина, по якій «візуально легкі» веб-сайти вважаються більш красивими, почасти пояснюється тим, що при низькій складності не потрібно, щоб наші очі і мозок працювали так само старанно, щоб декодувати, зберігати й обробляти інформацію.
Подивіться це коротке відео про те, як око посилає інформацію в мозок, щоб зрозуміти, що я маю на увазі:
По суті, ваша сітківка перетворює візуальну інформацію з реального світу в електричні імпульси. Потім ці імпульси прямують через відповідні фоторецепторні клітини для передачі інформації про колір і світло в мозок.
Чим більше колірних і світлових варіацій на сторінці (тобто чим більше візуальна складність), тим більше роботи доводиться виконувати оку для передачі інформації в мозок.
Передача інформації
При розробці сайту знайте, що кожен елемент — текст, логотип і вибір кольору — передає тонку інформацію про бренд.
Коли ці елементи не виконують свою роботу, веб-майстер часто компенсує це додаванням непотрібних елементів або зображень, що збільшує візуальну складність веб-сайту і ламає загальну естетику.
Оптимізація сторінки для обробки візуальної інформації, зокрема, спрощення проходження інформації від ока до мозку, — це передача як можна більшої кількості інформації мінімальною кількістю елементів.
Розглянемо на прикладі редизайн логотипу MailChimp.
Коли вони хотіли, щоб бренд «виріс», вони не додали звичайне «Ми працюємо з електронною поштою з 2001 року! Три мільйони людей довіряють нам! Ось чому ми класні! Бла бла бла…»
Було:
Стало:
Замість цього вони спростили написання, спростили веб-сайт (верхній заголовок просто читається як «Відправте кращий E-mail») і додали ще більш просту анімацію для основного продукту.
Які були головні принципи для великого редизайну?
Простота була першорядною:
Значок Фредді вже давно є основною маркою нашого бренду. Ми трохи спростили його, внесли зміни в його форму і пропрацювали дрібні деталі, щоб він виглядав чудово при будь-якому розмірі. В процесі ітерації та уточнення ми розробили шрифт, який гармонує зі значком Фредді.
«Робоча пам’ять» і Святий Грааль звернення
Згідно дослідження психолога з Прінстона Джорджа А. Міллера, мозок дорослої людини здатний зберігати від п’яти до дев’яти «шматочків» інформації у своїй короткостроковій або «робочій» пам’яті.
Робоча пам’ять — це частина вашого мозку, яка тимчасово зберігає й обробляє інформацію протягом декількох секунд. Це те, що дозволяє зосередити увагу, протистояти відволікаючим чинникам і, найголовніше, спрямовувати процес прийняття рішень.
На веб-сайті з низькою складністю і прототипами п’ять-дев’ять «шматочків» робочої пам’яті можуть обробляти такі речі, як гарантії, опис продуктів, ціни або пропозиції, замість того, щоб витрачати час на з’ясування, куди натиснути.
Коли ви відхиляєтеся від очікувань — ціна виявилася вищою, ніж очікувалося, не гармонічна колірна схема і немає симетрії, сайт завантажувався довго, фотографії були поганої якості — робоча пам’ять обробляє ці непотрібні «шматки» замість того, щоб займатися важливими речами.
Це тому, що робоча пам’ять викликає довготривалу пам’ять, щоб використовувати те, що вона вже знає, для виконання завдання. Коли довготривала пам’ять не може допомогти в обробці інформації, потік переривається, а робоча пам’ять відключається і рухається далі.
Ось чому дуже важливо знати ваших відвідувачів, якщо ви хочете не «зламати» їх робочу пам’ять з допомогою дизайну.
Блоги, які вони читають, сайти, на яких вони роблять покупки, їх браузер, вік, стать і фізичне місце розташування — все це допоможе вам зробити дизайн «знайомим» і створити правильне перше враження.
7 способів створити простий сайт
- Дослідіть свою аудиторію і сайти, які вони відвідують найбільше. Подивіться тематичні дослідження про зміни дизайну у вашій категорії.
- Створіть колаж для свого сайту з усіма «робочими» компонентами, які ви тільки зможете знайти.
- Дотримуйтесь правил когнітивної швидкості. Розташуйте елементи там, де відвідувачі очікують їх знайти.
- Не додавайте зайві елементи, якщо вони не повідомляють про те, що хвилює вашого відвідувача.
- Менше означає більше. Одне велике зображення зазвичай краще, ніж кілька маленьких; один стовпець замість трьох; більше прогалин замість більшої кількості елементів.
- Переконайтеся, що ваш сайт відповідає очікуванням за цінами, естетиці, швидкості і т.д.
- Зберігайте оригінальність. «Прототип» сайту не означає, що кожен аспект вашого сайту повинен відповідати цій формі.
Не думайте про свій сайт, як про унікальний витвір мистецтва. Зробіть простий дизайн сайту, щоб він був максимально знайомий і зрозумілий для користувачів.
Висновок
Якщо відвідувач при взаємодії з вашим сайтом не може покладатися на свій попередній досвід, він не замислюється, наскільки інноваційним є ваш сайт. Він просто задається питанням, чому речі не там, де вони «повинні бути».
Створюючи дизайн з когнітивною швидкістю, ви дозволяєте відвідувачам обробляти більш важливі речі своєю робочої пам’яттю, щоб їм було легше сказати «так».
Сподіваємося, що нам вдалося вас переконати у тому, що зробити простий дизайн сайту – це зробити краще для всіх! Успіхів!
Гарна стаття. Сам я є прихильником мінімалізму та надаю перевагу сайтам з простим та функціональним дизайном.