100АП | Блог | Психофізіологічні аспекти створення сайтів

1. Закон збереження енергії в основі побудови інтерфейсу Близько 25-30% енергії організм витрачає на...
2. Когнітивна карта пам'яті
3. Навчіть любити читати - фокус на типографіку
4. Модель сприйняття контенту
5. Мовою графіки
6. Виділяйте важливе серед іншого
7. Call-to-action
8. інтерактив

Закон збереження енергії в основі побудови інтерфейсу

Близько 25-30% енергії організм витрачає на утримання нервової системи. Чим менше часу мозок працює в інтенсивному режимі, тим економічніше його зміст. ( Наука і життя, Енергетичний підхід до еволюції мозку )

З метою зменшення часу інтенсивної роботи, організм йде по шляху найменшого опору або зовсім уникає вирішення проблеми.

Спрощуйте і структуруйте

Виявлена ​​американським вченим-психологом Джорджем Міллером закономірність, названа « гаманець Міллера »Або« Магічне число сім плюс-мінус два », полягає в тому, що короткочасна людська пам'ять не може запам'ятати і повторити більше 7 ± 2 елементів.

Розбивайте, компонуйте, упорядковуйте інформацію і елементи інтерфейсу. Ідеально, коли в рамках одного екрану 5-7 блоків, а в меню 5-7 розділів. Далі ці розділи можуть містити підрозділи, перехід до яких є вже наступним кроком і комфортно сприймається.

Когнітивна карта пам'яті

Орієнтуватися в просторі, покладаючись нема на органи чуття, а на внутрішнє уявлення про простір, допомагає «когнітивна карта» або «внутрішній GPS». Внутрішню систему координат формують відкриті в результаті дослідження головного мозку grid-нейрони ( «координатні нейрони», «нейрони координатної сітки»).

Теорія «внутрішнього GPS» працює як в просторі міста, так і на поверхні екрану. Підпорядкування інтерфейсу будь-якого геометричного закону робить взаємодію з сайтом більш ефективним, адже в такому випадку мозок користується знайомими схемами.

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

Уявіть, що в вашому смартфоні поміняли місцями розташування іконок додатків. В результаті цієї дії ви якийсь час будете запам'ятовувати нову навігацію і за інерцією шукати потрібне на колишніх місцях. Так само справи йдуть і з інтерфейсом сайтів. Розміщуючи меню в незвичному місці, а не зліва або вгорі сторінки, ви створюєте користувачеві незручності.

Навчіть любити читати - фокус на типографіку

Довгі рядки в описі змушують нас водити по екрану не тільки поглядом, а й здійснювати рух головою. Як ми з'ясували вище, наш організм захищається від додаткового витрачання енергії, а значить шанс, що такий текст буде прочитаний, мізерно малий. Результати дослідження Якоба Нільсена підтверджує це: всього 28% користувачів читають текст на сайті компаній, а довгі тексти і зовсім прокрутити.

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

Модель сприйняття контенту

Чи помічали ви, як найчастіше ми вивчаємо новини в ЗМІ: спочатку дивимося картинку, потім читаємо заголовок, якщо не зрозуміло - підзаголовок, потім перший рядок абзацу, аналогічним чином оцінюємо наступні і в разі інтересу повертаємося і дочитувати новина цілком. Схема пересування погляду - зліва направо, вниз, знову зліва на право, знову вниз і т.д.

Зазначені вище доводить теорію «банерної сліпоти». Вона грунтується на дії звичної когнітивної схеми, яка формує модель сприйняття контенту по F кривої - праву сторону сайтів користувачі асоціюють з рекламним полем і не звертають на нього уваги, а от ліву частину переглядають детально.

Мовою графіки

Наш мозок сприймає спочатку візуальні об'єкти, а якщо процес ідентифікації не відбувається, читаємо текст. Найбільш комфортне розташування - картинка зліва, текст - справа.

Використання піктограм (іконок) в тексті допомагає сприймати і фільтрувати інформацію. Багато з них ідентифікуються в частки секунди подібно автомобільним знакам на дорогах. Для нових піктограм використовуйте пояснення.

Виділяйте важливе серед іншого

У 1997 році Jakob Nielsen в ході свого дослідження встановив, що користувачі побіжно переглядають і сприймають контент, ігноруючи інформацію, яка не вирішує їх завдання з метою захисту від інформаційного перевантаження. Результати цього дослідження актуальні й досі.

Чи використовуєте принцип контрасту об'єктів - складні на тлі більш простих. Застосовуйте розмиття, затемнення фону. Контраст кольору або розміру є найбільш сильним подразником для нейронів нашого мозку і допомагає зосередити на заклик до дії.

Для акцентування уваги використовуйте фото людей. Положення тіла, напрям погляду або вказує жест рукою фіксує увагу на певному об'єкті і підвищує його конверсію.

Call-to-action

Вам вдалося захопити увагу користувача? Підведіть його до вчинення цільового дії за допомогою call-to-action - елементів призову до дії. Їх ефективність залежить від форми, змісту, кольору. Людина чітко повинен розуміти, куди треба клікнути і з якою метою.

інтерактив

Помірне використання графіки та інтерактиву подібно до хорошого смаку в підборі і поєднанні прикрас або тюнінгу автомобіля. Виняток можна зробити для сайтів з історією в сюжеті.

За допомогою приємною анімації можна привернути увагу користувачів. Робіть акцент на русі - управління фокусом уваги, направляйте його. У відповідь на дію користувача повинно відбуватися зміна стану елементів. Пам'ятайте, що плавне перестроювання блоків найбільш комфортно для сприйняття.