GUI Psychology. Наше сприйняття інформації і зображень

Цільова аудиторія: тестувальники, дизайнери, аналітики, frontend dev, #простодлярозвитку

Про себе:
Всім привіт. Мене звуть Олена, я працюю QA трохи більше 3х років, у тестуванні стикалася з різними проектами, від банківського ПЗ і мобільних додатків до комерційних і корпоративних сайтів.

На моєму поточному минулому проекті вимоги для GUI перебували на другому місці, після корисності впроваджуваних для користувача фіч, відповідно, фіксити часом навіть тривіальні дефекти #перфекціонвщматикою. Звичайно ж, раціонально оцінюючи проект, не можу сказати що він був написаний за всіма канонами usability, та й мало хто може цим похвалитися, так як найчастіше, тут все впирається в фінансову сторону питання на редизайн та перепив функціоналу… Але! Позитивні відгуки користувачів свідчили що все таки ми на вірному шляху.

Відповідно, накопичився певний багаж знань, яким захотілося поділитися. Почнемо.

Якщо зробити узагальнену класифікацію веб сайтів, отримаємо наступне:

Навіть якщо ваш сайт не спрямований на отримання прибутку, ви ж однаково зацікавлені в аудиторії, вірно?

А якщо у вас свій бізнес, то для підтримки ділової репутації вас буде цікавити підйом обсягу аудиторії вашого ресурсу, збільшення конверсії, SMM, та інші модні штуки, але для досягнення всіх цих цілей для початку потрібно мати класний зручний користувачеві контент).

Я б сказала що для сайтів, що спеціалізуються на нижчеперелічених нішах:

  • комерція (товари, послуги, дошки оголошень – то що приносить прибуток),
  • сайти – візитки компаній (промо),
  • корпоративні сайти (особа компанії).

Такі поняття як usability та хороший пророблений дизайн відіграють ключову роль.

Нижче будуть зібрані загальні рекомендації щодо того, як написати інтерфейс вашого сайту якісно, щоб користувач підсвідомо сприймав його так, як нам це необхідно #магія

Читайте також  Дизайн-процес: 7 кроків до ідеального проекту

Зробіть сторінки зручними для “сканування”

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

Так влаштований наш мозок, що сприйняття інформації побудовано за годинниковою стрілкою. Без залежностей за життя людина лівша чи правша. Приблизно це виглядає так:

Тобто, в центрі ми розміщуємо основний контент, це ізі, і без пояснень зрозуміло. Розміщуючи меню (або каталог товарів) в лівій частині сайту, ми закликаємо користувача до дій, він би і перемкнув свій погляд далі, але тут ми затримуємо його увагу.
Також можна задіяти і сліпу зону — наприклад вивести туди результати пошуку по сайту, які юзер шукав.

Суть полягає в тому, що інформація, яку ми хочемо донести до користувача першочергово, щоб вона йому запам’яталася — це 12, 3 і 4 години.

Інформацію, яка спонукає до дій, краще розміщувати на 6 і 9 годин.

Не перевантажуйте веб форми

Закон Хіка => експериментально встановлена залежність часу реакції вибору від числа альтернативних сигналів. Психолог вивів навіть логарифмічну функцію часу реакції #Дужескладно

Простими словами: чим менше елементів меню, тим менше часу займає вибір одного з них. А також що одне меню краще ніж два. Надання користувачеві відразу декількох варіантів одночасно зазвичай є більш ефективним, ніж організація тих же варіантів в ієрархічні групи. Вибір з одного меню, що складається з 8 елементів, відбувається швидше, ніж з двох меню, що складаються з 4 елементів кожне.

Здібності нашого мозку не безмежні, а людина може тримати в короткочасної пам’яті 5-9 сутностей. Тому не слід розміщувати на сторінці більше 8-ми форм.

Читайте також  Що таке UX/UI дизайн насправді?

Видаляючи непотрібні варіанти, ви підвищуєте ефективність використання продукту (в нашому випадку — сайту).

Дайте більше простору

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

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

Зміни не повинні викликати помітну різницю (або закон Вебера)

Чи Використовуєте Facebook?

За останні 5 років як я там зареєстрована, я не бачила відчутних змін. Чому Facebook зберігає кожен ключовий елемент свого дизайну? Відповідь на це питання пояснює, чому кожен великий веб-сайт, включаючи Google, Twitter і Amazon, незважаючи на їх великі бюджети, не робить радикальних редизайнів.

Дослідження показують, що нам не подобається масова зміна існуючих структур і систем, навіть якщо ці зміни принесуть нам користь.

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

А що з поведінкою?

Середній час, який новий юзер проводить на сайті перший раз, у пошуках потрібної йому інфо — близько 27 секунд. При цьому, з усієї аудиторії тільки 20% проскролить сторінку (80% цього робити не будуть). Також є правило 3-х кліків, яке говорить, що: користувач повинен знайти всю потрібну для нього інформацію 3 ма кліками миші. Не завжди звичайно, сайти за своєю специфікою мають просту структуру. Якщо ваш веб-ресурс має безліч категорій і підкатегорій, слід забути про це правило «трьох кліків» і краще переключити свою увагу на забезпечення інтуїтивності і логічної впорядкованості системи.

Читайте також  Як написати текст для лендінга

Отже, рекомендації вище можна вмістити в наступні тези:

  • Помістіть найбільш важливий контент або елементи там, де це користувачі бачать, уникаючи “сліпих зон”
  • Зробіть очевидними дії, які користувачі повинні робити на кожній сторінці, не змушуйте думати (с)
  • Приймайте рішення про те, які елементи сторінки є найбільш пріоритетними. Створіть візуальну ієрархію, яка для початку скеровує до них
  • Позбавтеся від усього, що не приносить реального вкладу
  • Відформатуйте текст для підтримки простоти сприйняття: використовуйте велику кількість заголовків, скоротіть абзаци і використовуйте марковані списки, і пам’ятайте — що графічні шрифти читаються користувачем значно повільніше.
  • Надавайте клієнтам тільки ту інформацію, яка їм необхідна в даний момент на кожній сторінці і дозвольте їм самим вибирати, чи бажають вони більше деталей.

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

to be continued …

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *