Вплив поведінки людини на ваші дизайнерські рішення - Джонас Арлет
Щоб розробити хороший веб-макет, нам потрібно зрозуміти, як люди поводяться. Використання цих знань для максимально комфортного планування наступних кроків - ось що робить дизайн ефективним.
Але що на це впливає? Як люди розуміють веб-сайт? Чи відомі способи поведінки, які ми можемо прийняти з реального життя?
У цій статті я розповім вам:
- Як змусити людей зрозуміти макет, коли вони ніколи раніше не використовували його
- Які кольори конкретно привертають більше уваги і чому ми їх так сприймаємо
- Наскільки широким повинен бути блок тексту і чому
- Які анімації допомагають нам на веб-сайті
- Як ви можете переконатися, що важлива інформація напевно бачиться
- І як ви можете збільшити шанси на те, що кнопку обов’язково натиснуть
Слухайте цю публікацію як подкаст!
Наскільки успішним є продукт чи послуга, залежить від того, наскільки добре ви розумієте свою цільову групу
Для того, щоб досягти високої зручності використання, макет повинен сподобатись насамперед користувачеві, а не вам. Він повинен бути простим у використанні, а відвідувач повинен пройти шлях від А до Б, не надто задумуючись.
Коли ми знаємо, хто такий користувач і чого вони хочуть, нам також легше викликати емоції. Для цього потрібно зрозуміти, як певні речі відчувають люди і чому вони роблять так, як вони це роблять. У найкращому випадку макет розроблений настільки інтуїтивно, що користувач може вирішувати завдання без перерв. Завданням може бути навігація, а також процес замовлення в інтернет-магазині.
Як тільки користувачеві починає думати довше, він також починає не вирішувати завдання інтуїтивно. Потім вони його напружують. Чим більше їх зіткнеться, тим більше розчарує їхній зв’язок із продуктом, а отже, і з веб-сайтом.
Як дизайнери, від нас залежить познайомити відвідувачів із завданнями або свідомо направити їх в одному напрямку. Для цього ви повинні знати, як користувачі поводяться та працюють відповідно зі знайомими речами. Маси знають, як працює веб-сайт або додаток. Тим не менше, все ще існує велика кількість людей, які навіть не уявляють, як виглядає користувальницький інтерфейс або як ним користуватися. Тому знання цільової групи є надзвичайно важливим!
Дуже складно приймати дизайнерські рішення, які стосуються не лише широких мас, але й відчуваються індивідуально для кожного користувача.
Але як змусити користувача зрозуміти сторінку, хоча він ще ніколи не мав досвіду в цьому напрямку?
Графічним інтерфейсом користуються різні люди. Скажімо, це інтернет-магазин. Багато хто вміє робити покупки в Інтернеті, інші, можливо, поки що ні. Але як змусити всіх швидко і легко зрозуміти сайт?
Ви повинні спробувати познайомити їх із найближчим можливим досвідом, який вони знають із свого життя. Навіть якщо вони не знають, як купувати товари в Інтернеті, вони мають уявлення про те, як це працює в реальному житті. Ви повинні використати ці знання. Ось чому добре перенести реальний досвід покупця на веб-сайт.
Наприклад, ми звикли розміщувати покупку в кошику для покупок. Тому ми повинні використовувати щось подібне в Інтернет-магазині. Для користувача це звичне зв’язок, яке він одразу розуміє.
Ось кілька прикладів того, як за допомогою дизайну можна впливати на елементи таким чином, щоб користувач зрозумів їх бажаним чином.
Використовуйте правильні кольори
Кольори допомагають відвідувачеві зорієнтуватися на веб-сайті. Особливо коли ми хочемо спонукати до дії, вони ідеально підходять для привернення уваги. Ми можемо використовувати їх, щоб викликати дії і свідомо спрямовувати свій погляд в одному напрямку.
Наступний приклад показує вам, як свідомо можна спонукати глядача вибрати кнопку.
Яка кнопка вас приваблює? Приклад того, як ми можемо свідомо направляти користувачів до прийняття рішення.
Тільки використовуючи кольорову область, ми можемо вивести одну з двох кнопок на перший план. Безбарвна кнопка із сірою рамкою виглядає непомітною та другорядною. Ми можемо використовувати цей варіант, щоб полегшити користувачам прийняття рішення.
Здебільшого ми хочемо, щоб були відкриті та керовані кнопки, що натискаються. Тільки так ми можемо привести користувача до наступного кроку або викликати функцію. Для того, щоб її взагалі сприймали, кнопка повинна привертати увагу і відрізнятися від інших предметів. Це допомагає збільшити контрастність навколишніх елементів. У наступному випадку це робиться за допомогою червоного кольору.
Червоний колір кидається в очі, є для нас попереджувальним кольором, і тому його важко ігнорувати. Ми можемо використовувати це, щоб свідомо поставити дію на перший план:
Свідомо спрямовуйте орієнтацію користувача на кнопку, як у цьому прикладі з червоним кольором. Він кидається в очі і його важко ігнорувати як попереджувальний колір.
Візьмемо принцип світлофора, коли ми стоїмо, коли червоний, а нам дозволено йти зеленим. Багато людей вже усвідомили цей принцип. У цьому випадку ми знаємо, що коли справа стосується зеленого, люди роблять наступний крок. Ми також можемо перенести це відчуття на кнопку, де ми хочемо, щоб дія була здійснена позитивно.
Як на світлофорі або відповідь на телефонний дзвінок: Зелений сигналізує і супроводжує нас, щоб зробити наступний крок.
Інтерфейс користувача телефонного дзвінка також демонструє подібну поведінку. Покладіть трубку в червоному та зеленому кольорах. Але ця увага стосується кожного?
Цільова аудиторія має вирішальне значення!
Навіть якщо два наведені вище приклади звучать для нас правдоподібно, вони загалом не застосовуються. Функція кольору світлофора може працювати в Німеччині, але все ще є багато людей з інших культур, які сприймають кольори по-різному. У Китаї напр. Веб-сайти Б. абсолютно барвисті. Якби ми обслуговували там інтернет-магазин, це, мабуть, мало б абсолютно негативний вплив на нашу поведінку в серфінгу.
Для того, щоб свідомо контролювати поведінку відвідувачів, макет повинен бути перевірений на цільовій групі. Тільки за допомогою аналізів ви дійсно можете визначити, чи призвело конкретне рішення про колір до більшого успіху.
Оновлення:
Цікаво, що незабаром після написання цієї статті я прочитав публікацію, в якій HubSpot досліджував саме ці два кольори в тесті користувача. Йшлося про те, чи червона чи зелена кнопка спричиняє вищий коефіцієнт конверсії. Весь макет був однаковим, лише одна кнопка відрізняється. Дивно, але червоний отримав на 21% більше кліків. Але мова йшла більше про якусь кнопку "купи мене", яка просто привернула більше уваги завдяки своєму червоному кольору.
Далі стосується кольорів загалом
Тоді стає більше уваги і відповідно більше дії, коли збільшується контрастність навколишніх елементів. Не тільки у людей, які можуть сприймати кольори, але й у тих, хто є дальтоніком.
РЕЄСТРУЙТЕСЯ НА МОЙ БЮЛЕТИН
Нові статті, епізоди подкастів та цінні ресурси для дизайну прямо у вашу поштову скриньку!
На додаток до мого оновлення в блозі, ви будете отримувати цікаві посилання та вміст для веб-дизайнерів раз на тиждень, якими я буду ділитися лише в цьому бюлетені!
Збільште можливості та запропонуйте два шляхи до мети
Чи маєте ви завдання змусити відвідувача виконати певну дію? Тоді подвоюйте свої шанси!
Кожен дивиться на веб-сайт по-різному, саме тому елементи, які видно для вас, можна помітити лише з другого погляду. Переконайтеся, що певні підказки з’являються кілька разів, і таким чином збільшують шанс досягнення бажаного ефекту.
Начитаність текстів
Існує людська поведінка, якій ми вчимося з раннього дитинства, і тому вона вкладається в наше життя. Коли ми почали з’єднувати літери та читати слова як речення, ми робили це зліва направо з самого початку. Зміна такої поведінки на веб-сайті була б фатальною. Ніхто не міг правильно прочитати абзаци, і не можна було б говорити про приємний досвід користувача. Цей аргумент стосується принаймні більшості регіонів (деякі також читають справа наліво).
Але роль відіграє не тільки напрямок читання. Для нас текст легше читати, навіть якщо ширина абзаців не надто широка. Таким чином ми допомагаємо оку не ковзати при зміні рядків, що забезпечує приємний потік читання.
Цей метод добре видно в м’якій обкладинці. Щоб поруч не було занадто багато слів, кожна сторінка має певну ширину і відокремлюється коміром. Це створює дві області, однаково широкі.
Якщо застосувати цей принцип із нашого реального життя до веб-сайту, можна було б сказати, що текстові блоки не повинні бути ширшими за 700px - 800px. Чим ширше текстове поле і чим менше шрифт, тим складніше нам знайти зручний потік читання. Якщо цієї ширини недостатньо, ви можете розмістити текст поруч один з одним меншими текстовими блоками.
Приклад поганого потоку читання: записи Вікіпедії на великих розмірах екрана
Безумовно негативним прикладом цього є Вікіпедія. Якщо ви подивитесь на статтю тут на більшому екрані, перейти до наступного рядка стає майже неможливо. Кожна зміна рядка стає зусиллям.
Правильне розміщення важливої інформації
Якщо ми хочемо бачити важливу інформацію, то розміщення відіграє вирішальну роль. Показ важливих речей в останню чергу не має сенсу. Ми знаємо, що веб-сайт переглядається зверху вниз. Лише коли хтось хоче отримати більше інформації, він заглиблюється глибше на сторінку.
Ось чому інформація вгорі є важливішою, ніж інформація нижче, оскільки вона з’являється спочатку після завантаження сторінки. Цей метод ми також знаходимо в інших сферах:
- Таблиця діаграм показує найпопулярнішого виконавця спочатку, а не посередині чи останнього
- Найрелевантніші результати пошуку завжди стоять на першому місці
- Логотип веб-сайту або ім’я зазвичай розміщується у верхньому лівому куті
Можливо, це не здається комусь новим знанням, але ви все одно повинні усвідомити, що якщо у вас є інформація, яку відвідувач неодмінно повинен побачити, ви також повинні поставити її вище. Тільки так його можна переконати. Залежно від того, який область огляду має пристрій, це видиме поле, звичайно, може бути різним!
Привертайте увагу рухом
Анімація оживляє інтерфейс користувача. Все, що рухається, автоматично привертає нашу увагу. Але будьте обережні! Швидко стає занадто багато!
Якщо вміло використовувати анімацію, вони роблять макет живим і зрозумілим. Тоді ви можете спеціально показати стосунки та визначити ієрархію.
Ефективно використовуйте дизайн
Створити зрозумілий і приємний макет непросто. Потрібен великий досвід, дослідження та знання.
Розуміння та застосування основ є дуже важливим, якщо ви хочете ефективно використовувати дизайн. Наведені вище приклади допоможуть вам у цьому. Якщо ви хочете дізнатись більше про це, ви можете підписатись на мій бюлетень тут. Потім я повідомлю вас про нову публікацію.
Поділитися публікацією:
Дізнайтеся більше про дизайн Інтернету та UI/UX та роботу в якості фрілансера
Мій щотижневий інформаційний бюлетень - найкращий спосіб отримати доступ до останніх дописів у блогах, епізодів подкастів та цінних ресурсів для дизайну.