100АП | Блог | Психофізіологічні аспекти створення сайтів
- Закон збереження енергії в основі побудови інтерфейсу Близько 25-30% енергії організм витрачає на...
- Когнітивна карта пам'яті
- Навчіть любити читати - фокус на типографіку
- Модель сприйняття контенту
- Мовою графіки
- Виділяйте важливе серед іншого
- Call-to-action
- інтерактив
Закон збереження енергії в основі побудови інтерфейсу
Близько 25-30% енергії організм витрачає на утримання нервової системи. Чим менше часу мозок працює в інтенсивному режимі, тим економічніше його зміст. ( Наука і життя, Енергетичний підхід до еволюції мозку )
З метою зменшення часу інтенсивної роботи, організм йде по шляху найменшого опору або зовсім уникає вирішення проблеми.
Спрощуйте і структуруйте
Виявлена американським вченим-психологом Джорджем Міллером закономірність, названа « гаманець Міллера »Або« Магічне число сім плюс-мінус два », полягає в тому, що короткочасна людська пам'ять не може запам'ятати і повторити більше 7 ± 2 елементів.
Розбивайте, компонуйте, упорядковуйте інформацію і елементи інтерфейсу. Ідеально, коли в рамках одного екрану 5-7 блоків, а в меню 5-7 розділів. Далі ці розділи можуть містити підрозділи, перехід до яких є вже наступним кроком і комфортно сприймається.
Когнітивна карта пам'яті
Орієнтуватися в просторі, покладаючись нема на органи чуття, а на внутрішнє уявлення про простір, допомагає «когнітивна карта» або «внутрішній GPS». Внутрішню систему координат формують відкриті в результаті дослідження головного мозку grid-нейрони ( «координатні нейрони», «нейрони координатної сітки»).
Теорія «внутрішнього GPS» працює як в просторі міста, так і на поверхні екрану. Підпорядкування інтерфейсу будь-якого геометричного закону робить взаємодію з сайтом більш ефективним, адже в такому випадку мозок користується знайомими схемами.
Користувачі зазвичай потрапляють на сайт з певною потребою і користуються свого роду шаблоном, згідно з яким відбувається осмислення інформації. Опинившись на вашому сайті, користувач буде звертати увагу на ті області, які за його досвіду надавали необхідну інформацію і ігнорувати ті, які не несли для нього важливості в схожих ситуаціях.
Уявіть, що в вашому смартфоні поміняли місцями розташування іконок додатків. В результаті цієї дії ви якийсь час будете запам'ятовувати нову навігацію і за інерцією шукати потрібне на колишніх місцях. Так само справи йдуть і з інтерфейсом сайтів. Розміщуючи меню в незвичному місці, а не зліва або вгорі сторінки, ви створюєте користувачеві незручності.
Навчіть любити читати - фокус на типографіку
Довгі рядки в описі змушують нас водити по екрану не тільки поглядом, а й здійснювати рух головою. Як ми з'ясували вище, наш організм захищається від додаткового витрачання енергії, а значить шанс, що такий текст буде прочитаний, мізерно малий. Результати дослідження Якоба Нільсена підтверджує це: всього 28% користувачів читають текст на сайті компаній, а довгі тексти і зовсім прокрутити.
Чим структурувати і гармонійніше подача матеріалу, тим більше шансів, що людина дочитає до кінця. Використовуйте зручну ширину рядка, заголовки, інфорграфіку, розділяйте текст на абзаци, робіть міжрядковий інтервал комфортним для сприйняття. Давайте більше повітря в місцях розташування контенту. Краще перенести текст на наступний екран при скролінгу, ніж намагатися вмістити все в рамках одного екрану. Користувачі давно не бояться довгих сторінок, що підтверджує дослідження аналітичної компанії Clicktale
Модель сприйняття контенту
Чи помічали ви, як найчастіше ми вивчаємо новини в ЗМІ: спочатку дивимося картинку, потім читаємо заголовок, якщо не зрозуміло - підзаголовок, потім перший рядок абзацу, аналогічним чином оцінюємо наступні і в разі інтересу повертаємося і дочитувати новина цілком. Схема пересування погляду - зліва направо, вниз, знову зліва на право, знову вниз і т.д.
Зазначені вище доводить теорію «банерної сліпоти». Вона грунтується на дії звичної когнітивної схеми, яка формує модель сприйняття контенту по F кривої - праву сторону сайтів користувачі асоціюють з рекламним полем і не звертають на нього уваги, а от ліву частину переглядають детально.
Мовою графіки
Наш мозок сприймає спочатку візуальні об'єкти, а якщо процес ідентифікації не відбувається, читаємо текст. Найбільш комфортне розташування - картинка зліва, текст - справа.
Використання піктограм (іконок) в тексті допомагає сприймати і фільтрувати інформацію. Багато з них ідентифікуються в частки секунди подібно автомобільним знакам на дорогах. Для нових піктограм використовуйте пояснення.
Виділяйте важливе серед іншого
У 1997 році Jakob Nielsen в ході свого дослідження встановив, що користувачі побіжно переглядають і сприймають контент, ігноруючи інформацію, яка не вирішує їх завдання з метою захисту від інформаційного перевантаження. Результати цього дослідження актуальні й досі.
Чи використовуєте принцип контрасту об'єктів - складні на тлі більш простих. Застосовуйте розмиття, затемнення фону. Контраст кольору або розміру є найбільш сильним подразником для нейронів нашого мозку і допомагає зосередити на заклик до дії.
Для акцентування уваги використовуйте фото людей. Положення тіла, напрям погляду або вказує жест рукою фіксує увагу на певному об'єкті і підвищує його конверсію.
Call-to-action
Вам вдалося захопити увагу користувача? Підведіть його до вчинення цільового дії за допомогою call-to-action - елементів призову до дії. Їх ефективність залежить від форми, змісту, кольору. Людина чітко повинен розуміти, куди треба клікнути і з якою метою.
інтерактив
Помірне використання графіки та інтерактиву подібно до хорошого смаку в підборі і поєднанні прикрас або тюнінгу автомобіля. Виняток можна зробити для сайтів з історією в сюжеті.
За допомогою приємною анімації можна привернути увагу користувачів. Робіть акцент на русі - управління фокусом уваги, направляйте його. У відповідь на дію користувача повинно відбуватися зміна стану елементів. Пам'ятайте, що плавне перестроювання блоків найбільш комфортно для сприйняття.