Хороший інтерфейс ніколи не вийде без знань психології. Це аксіома, підтверджена тисячами незручних програм і непродуманих сайтів. Але ось які знання дозволять нам робити відмінні інтерфейси, максимально зручні для користувачів?
Ми б рекомендували ознайомитися з основами психофізіології. Чому? А тому, що у більшості користувачів основний канал отримання інформації – зоровий. І усі графічні інтерфейси оцінюються в першу чергу візуально.
Ми розглянемо фізіологічні аспекти поведінки користувачів при взаємодії з ними.
Розпочнемо з того, усім нам для вирішення завдань візуально комфортно сприймати певне число об’єктів.
На думку вченого-психолога Джорджа Міллера, людська короткочасна пам’ять просто не може запам’ятати і повторити більше 7 +/- 2 об’єктів. Якщо їх більше – все, ви прагнитимете уникнути рішення такої задачі. Або зведете її до простіших дій.
ПКористувачі намагаються вирішити питання найекономічнішим способом, тому що мозок завжди прагне до економії енергії. Тому, якщо існує легше рішення – наш мозок шукатиме його
Подивіться, як потрібно. Елементів меню всього 5 на першому сайті і 7 – на другому. Правила дотримані, все чітко, зрозуміло і лаконічно.
А тепер порівняйте з цим варіантом – чисельність об’єктів навіть порахувати складно. Так робити не треба.
До речі, краще всього ми запам’ятовуємо:
- Цифри
- Кольори
- Текст
- Геометричні форми
- Абстрактні форми
Саме в такій ієрархії.
Цікавий факт. Усі ми маємо так звану геометричну пам’ять. При взаємодії з об’єктами в реальній і віртуальній області в нашому мозку спалахують одні і ті ж нейрони. І при взаємодії з інтерфейсами, у нас спрацьовує наша геометрична пам’ять(здатність визначати і запам’ятовувати місцезнаходження і орієнтуватися в ньому), також, як коли ми взаємодіємо з фізичними об’єктами.
Тобто, вибудовувавши в інтерфейсах об’єкти згідно з певними геометричними законами, ми спрощуємо користувачам завдання. У них немає необхідності активувати інші зони мозку для розпізнавання об’єктів за кольором або формою.
До речі, перемикання між екранами – теж спосіб геометричної навігації, адже ми запам’ятовуємо, які застосування на якому екрані(може, тому розробники iPad залишили ту ж кількість іконок на екрані, що і в iPhone, лише збільшивши відстань між ними).
Ще трохи даних
Користувач візуально легко групує геометричні об’єкти з сильним угрупуванням. Наприклад, ми завжди сприймаємо картинку і підпис до неї як єдине ціле, якщо відстань між ними невелика.
При слабкому угрупуванні ми групуємо об’єкти за непрямими ознаками, при цьому відмічаючи, що, ймовірно, з’їхалf верстrf або дизайнер зхалтурив.
При роботі з текстами діють ті ж принципи – елементи тексту (рядки, слова і букви) потрібно формувати так, щоб користувач легко розпізнавав групи.
Складні об’єкти
Це ті об’єкти, які виділяються, займають багато простору. На них ми фокусуємося в першу чергу. Наш мозок автоматично відрізняє об’єкт від фону і фокусування неусвідомлено. Наприклад, дивлячись на це фото, наш мозок автоматично фокусується на людині, хоча за кольором він особливо не виділяється.
Як це використати?
Направте увагу користувача на складнішу форму, прибравши менш складні об’єкти на задній план. Тобто ваш користувач спочатку сфокусується на складному об’єкті, а потім, якщо йому знадобляться уточнення – перемкнеться на “підказки”
Ефективні способи виділити складний об’єкт – розфокус заднього плану, а також затемнення – з його допомогою далекі об’єкти виглядають туманнішими, надаючи контрасту передньому об’єкту.
І ще, намагайтеся дотримуватися правила: один екран – одна основна дія. Не розпиляйте увагу користувача і не збивайте його з пантелику. Ви завжди можете додати другорядні дії – але вони повинні мати меншу візуальну вагу або показуватися після досягнення основної дії.
Обличчя людини завжди привертає увагу
Погляньте на постери фільмів/серіалів – там майже завжди зроблений акцент на осіб акторів. Ви можете не пам’ятати їх імена-прізвища і навіть назву картини, але особу – це як знак, що сигналізує нам, – варто дивитися або ні.
Маленька хитрість – якщо в дизайні ви хочете зробити акцент на якомусь блоці або пропозиції, “поверніть” вашого героя так, щоб він дивився на цей блок/пропозицію. Напрям погляду вирішує багато що. Розмістіть фото дівчини біля кнопки “Купити” – буде одна конверсія, погляд дівчини спрямований на кнопку – конверсія вища. Вона дивиться і вказує рукою – ефективність ще вища.
Колірні контрасти
Контраст кольору дуже добре притягає увагу, оскільки “дратує” сітківку.
Використайте контрастний колір в інтерфейсі, коли хочете виділити основну дію.
Але! Не грайте із зворотним контрастом (коли серед контрастних елементів використовується один “блідий”, не контрастний). Яскраві кольори – сильний подразник для очей, довго дивитися на них просто неприємно.
Контрастний розмір
Контраст розміру зазвичай використовують, щоб звернути на об’єкт увагу або підкреслити його важливість. Ми як би управляємо увагою користувача – робимо велику кнопку “Замовити” і поменше – “хочу отримати консультацію”.
Але! Не застосовуйте закони психофізіології на шкоду користувачеві. Наприклад, пропозиція підписатися на розсилку в спливаючому вікні. Кнопка “Підписатися” велика і яскрава, а ось кнопочку “Ні, спасибі” ще потрібно пошукати. Сіра і невиділена, вона непомітна користувачеві і йому доводиться напружитися для її пошуку. Звичайно, метод робочий, але він спрямований на комерційну вигоду, а не на зручність користувача. І використати його або ні – моральний вибір дизайнера.
Трохи про типографику
Також контраст розміру використовується в типографіці для створення ієрархії.
СЗа допомогою контрастних розмірів шрифту ви дозволяєте користувачеві легко ідентифікувати заголовки різних рівнів і орієнтуватися в тексті у будь-якій точці екрану. Тому не бійтеся виділяти заголовки, роблячи їх максимально контрастними.
До речі, з приводу оптимальної довжини рядка і інтерліньяжа ми вже писали, і це теж відноситься до психології сприйняття різних графічних елементів.
Як правильно подати матеріал?
- використайте зображення з обличчям – воно працює як ідентифікатор;
- виділяйте заголовок за допомогою шрифту і розміру;
- робіть зрозумілий опис.
Якщо ви хочете 100% донести інформацію до користувачів, використайте журналістський прийом – найважливішу інформацію подавайте спочатку – в заголовку і в ліді, а вже деталі описуйте в тілі тексту.
І головне, пам’ятайте, хороший інтерфейс непомітний, і в першу чергу він існує для того, щоб ним користувалися, а вже потім – захоплювалися креативною реалізацією.
Loading...
