Психологічні основи веб-дизайну
У веб-дизайні кожна дрібниця має значення. Досвідчений дизайнер прекрасно знає, чому кнопки повинні бути певного розміру, а всі важливі посилання бажано розмістити у верхній частині сторінки. Або чому необхідно згруповують схожі елементи. В хорошому дизайні немає нічого зайвого. Багато доходять до цієї простої істини досвідченим шляхом, здійснюючи і виправляючи помилки, а також намагаючись копіювати найцікавіші ідеї.
Якихось особливих правил в веб-дизайні немає. Існує якесь негласне угоду, про те, що добре, а що ні. Однак те, що мається на увазі під «поточним стандартом» насправді ним не є. На те, як сьогодні виглядають сайти, найбільше вплинула психологія, а зовсім не естетика, як може здатися на перший погляд.
Кнопки CTA і закон Фіттса
При переміщенні між двома точками будь-яка людина прагне йти по шляху найменшого опору. Цей психологічний феномен добре описаний і навіть має свою назву - «бажаний шлях».
Відео: Основи веб дизайну # 1 - модульні сітки (Grid Systems)
Бажаний шлях представляє собою найкоротший або найлегший шлях, що зв`язує дві точки між собою. Кожна людина бачив «народні стежки», які люди торують в місцях, де пішохідні доріжки були неправильно спроектовані. Прагнучи скоротити відстань, людина схильна «зрізати кути» і йти навпростець там, де це можливо. Точно так же користувачі поводяться на сайті.
Дизайнер може створити дуже ефектний інтерфейс, проте якщо він помилиться, люди будуть керувати курсором зовсім не так, як він задумав. Вони будуть вибирати найкоротший шлях між двома важливими об`єктами і якщо кнопка СТА буде розташована поза цього шляху, її ефективність істотно знизиться.
Відео: Основи веб-дизайну. Урок 1. Формати графіки для публікації в інтернеті
У 1954 Підлога Фиттс сформулював закон, згідно з яким чим далі або точніше виконується рух, тим більше корекції потрібно для його виконання. Але найважливіший урок, який можна зробити з закону Фіттса, полягає в тому, що незважаючи на те, що користувачеві найпростіше натиснути на найбільшу кнопку, це далеко не завжди буде найважливіша кнопка. Прагнучи вберегти користувачів від помилки, багато дизайнерів роблять кнопки СТА дуже великими, такими, що їх просто не можна не помітити. І все одно помилки трапляються, так як дизайнер може не врахувати сенсорно-моторних процесів і користувачі так і будуть клацати по елементу, розташованого в кінці найкоротшого шляху.
Відео: Як створити сайт (Основи веб дизайну) етапи створення сайту
Як використовувати закон Фіттса в веб-дизайні
Для початку потрібно прийняти той факт, що більшість користувачів, які вперше відкривають веб-сторінку, мають у своєму розпорядженні курсор в певному місці. Як правило, в цьому випадку курсор розташовується в районі адресного рядка браузера, це так зване «місце курсора за умовчанням».
Будь-яка кнопка СТА, розташована далеко від адресного рядка, буде порушувати закон Фіттса - відстань до неї буде занадто велика і користувач буде відчувати опір. Отже, для того, щоб збільшити конверсію, кнопки із закликом до дії та інші важливі елементи потрібно розташовувати ближче до адресному рядку або як мінімум на видному місці на першому екрані.
Закон Фіттса також говорить, що великі кнопки отримують більше кліків. Проте, давно відомо, що це співвідношення не є лінійним. Так, великі яскраві кнопки більш помітні, але всьому є межі. Занадто великий розмір кнопки СТА практично не впливає на збільшення коефіцієнта конверсії.
Евристика як спосіб допомоги
Щодня наш мозок приймає безліч рішень. Якщо вірити даним деяких досліджень, число таких рішень може досягати 35000 в добу. Це можуть бути самі різні рішення: у скільки виходити з дому на роботу, чим зайнятися протягом дня, як провести вечір і так далі. Незважаючи на всю свою простоту, ці рішення змушують наш мозок витрачати величезну кількість енергії.
Відео: Web дизайн - Що потрібно знати починаючому дизайнерові | Епізод 3 | кольори
Це призводить до того, що люди часто відчувають труднощі вибору дії - їм важко співвіднести свої потреби з енергією. Психологи називають це явище втомою від прийняття рішень.
Користувач сайту також змушений приймати десятки рішень протягом короткого часу. Щоб не допустити надмірної втоми, дизайнери використовують евристику. В даний момент евристика як наука ще не сформувалася, але деякі евристичні методи вже довели свою ефективність, так як вони допомагають користувачам приймати швидкі рішення.
Деякі з цих методів були відкриті теоретичним шляхом, але більшість з них є результатом практичного досвіду.
Тут краще пояснити на прикладі. Якщо нам чогось не вистачає, ми автоматично припускаємо, що це щось має для нас цінність, так як всі знають, що рідкісні предмети високо цінуються. У психології це називається дефіцитом евристики. Тому веб-дизайнери йдуть іншим шляхом і використовують метод репрезентативної евристики, залишаючи користувачеві численні підказки.
Психологи стверджують, що люди визначають ймовірність чого-небудь на підставі його батьківських подій. Припустимо, користувач бачить довговолосого людини в шкіряній куртці. В руках людина тримає електрогітару. Логічно буде, якщо користувач припустить, що це рок-музикант, а не балерина, так як всі батьківські події (гітара, куртка, волосся) явно вказують саме на цю ймовірність.
А що думає користувач, якщо він бачить, що в тексті на сторінці деякі слова або навіть пропозиції виділені синім кольором? Чи є батьківське подія у синіх символів?
Так є. За весь час існування інтернету синій колір тексту позначав гіперпосилання і користувачі до цього так звикли, що сприймають колірне виділення (не тільки синім кольором) як посилання.
Як використовувати евристику в веб-дизайні
Репрезентативна евристика може надати велика підмога в створенні позитивного користувацького досвіду. Евристичний підхід передбачає включення творчих здібностей користувача, тому дизайн можна вибудувати на основі очікувань. Якщо потрібно, щоб люди кликали по посиланню, краще зробити її синьою, а не світло-сірої. Користувачі очікують, що кнопка СТА буде помітною і яскравою? Такий і потрібно її зробити.
Репрезентативну евристику можна використовувати і для того, щоб виділити який-небудь важливий елемент. Припустимо, в дизайні є ряд схожих кнопок різного призначення. Потрібну кнопку можна виділити, змінивши її колір. Користувачі будуть вважати, що ця кнопка важливіше інших, так як вона не схожа на батьківські елементи, в ролі яких в цьому випадку виступають однотипні кнопки.
Ефект послідовного позиціонування
Люди запам`ятовують деталі інтерфейсу цілком передбачуваним чином. Інформація, представлена на початку і в кінці, незалежно від формату контенту, привертає більше уваги і запам`ятовується краще. Психологи називають це явище «ефект новизни».
Людина краще запам`ятовує перші елементи в списку в основному тому, що наш мозок припускає, що те, що на початку - це «первинні елементи» і, як наслідок, вважає їх більш важливими. А ось останні елементи є найсвіжішою інформацією, що надходить в мозок, і тому запам`ятовуються краще, ніж контент, розташований в середині.
Як використовувати послідовне позиціонування
Багато дизайнерів інтуїтивно використовують послідовне позиціонування, так як ефективність такого підходу цілком зрозуміла. Якщо на веб сторінці є посилання, кнопка або будь-який інший елемент, який потрібно виділити, найкраще розмістити його на самому початку або самому кінці матеріалу.
Хороший приклад - сторінка сайту Smashing Magazine. У навігаційному меню ми бачимо, що найважливіші посилання - «Книги» і «Робота» розміщені на початку і кінці меню. Чому дизайнер вчинив саме так? Все просто: Smashing Magazine не спеціалізується на продажу квитків і продає не так вже й багато власних продуктів, відповідно і посилання на ці розділи розташовані в середині меню. Вони менш важливі, звідси і така позиція.
Позиціонування може бути не таким очевидним, як в прикладі з Smashing Magazine. Ось як Amazon описує функції свого продукту Alexa. Виробник звертає увагу користувача на наступний функціонал: відтворення музики і керування освітленням. Це не випадково. Маркетологам відомо, що більшість людей використовує Alexa для прослуховування музики і регулювання кімнатного освітлення, звідси і таке позиціонування.
Ще одна цікава особливість - Amazon звертає увагу користувачів, що їх продукт постійно поліпшується, і позиціонує цю інформацію слідом за двома найважливішими пунктами.
Щоб збільшити конверсію або поліпшити користувальницький досвід, дизайнерам потрібно використовувати методи послідовного позиціонування. Будь-яка інформація, яку людям необхідно запам`ятати, повинна розташовуватися на самому початку або в самому кінці будь-якого інформаційного блоку.
висновок
Будь-який хороший дизайн заснований на глибокому знанні людської психології. Ефективно працює веб-сторінка це не просто набір красивих елементів і типографіки, гармонійно поєднаних між собою. За красивим фасадом ховається щось більше - продумана конструкція, що враховує всі можливі варіанти дій користувачів, що взаємодіють з сайтом. Тому дизайнерам, як початківцям, так і досвідченим, просто необхідно знати основи психології - це дозволить їм уникнути грубих помилок і істотно підвищити юзабіліті сайтів, над якими вони працюють.
