UXPUB 🇺🇦 Дизайн-спільнота: Роман Барановський

Когнітивістика: як працює наш мозок і як це впливає на дизайн. (частина 1)

Роман Барановський — Wed, 29 Oct 2025 14:35:00 +0000

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

Що це таке?

Ми часто чуємо слово "когнітивний", когнітивне мислення, когнітивні помилки, когнітивні процеси. Але що воно насправді означає?
Когнітивний - це той, що пізнає, обробляє інформацію, мислить.
З цього поняття виникла ціла наука - когнітивістика, яка досліджує, як працює наш розум: як ми думаємо, приймаємо рішення, навчаємось, помиляємось.
Люди - це істоти, які в процесі еволюції вклали всі свої одиниці розвитку в інтелект. Ми замінили інстинкти на мислення, що зробило нас більш гнучкими, але й більш складними.
Когнітивістика якраз і займається тим щоб зрозуміти, як ми мислимо і чому іноді мислимо не так як слід. Сам термін когнітивної науки зʼявився у 70х роках і він був спрямований на дослідження тогочасного штучного інтелекту (тому можна сказати що розвиток теперішнього ШІ беруть свій початок з того часу).
Процес мислення та навчання тісно повʼязаний з памʼяттю, тому давайте хайлевельно проговоримо як працює памʼять.

Як працює пам'ять

Розглянемо схему запамʼятовування.

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

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

Когнітивне навантаження

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

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

Основні компоненти когнітивного навантаження

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

кількості нових елементів, які потрібно засвоїти;
того, як ці елементи пов’язані між собою;
рівня попередніх знань людини. Чим більше нової та складної інформації - тим більше внутрішнє навантаження.

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

заплутаний інтерфейс;
надмірна або нерелевантна інформація;
погано структуровані пояснення.

Це навантаження не сприяє навчанню і його слід мінімізувати.

Окрім типів навантаження, важливо враховувати:

Ментальні характеристики - це рівень знань, досвіду, пам’яті та здатності до концентрації. Вони визначають, наскільки складним або легким здається завдання.
Розумові зусилля - це суб’єктивне відчуття того, скільки енергії потрібно для виконання завдання. Вони залежать від складності матеріалу, контексту та мотивації.

Когнітивне перенавантаження

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

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

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

Як знизити когнітивне навантаження
Тут зібрані деякі поради по зниженню навантаження (більш побутові варіанти).

Замість висновку

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

створювати інтерфейси, які не перевантажують;
подавати інформацію логічно і послідовно;
підтримувати користувача в процесі навчання чи прийняття рішень.

Як дизайн впливає на когнітивне навантаження?

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

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

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

Бережіть себе 🫶.

Короткий гайд по різним графікам та рекомендації по їх вибору

Роман Барановський — Thu, 18 Apr 2024 17:28:21 +0000

Численні дослідження в галузі когнітивної нейронауки показують, що мозок любить візуальний контент більше, ніж простий текст.
Науковці в сфері медицини встановили: якщо в інструкції до ліків знаходиться тільки текст, людина засвоює з неї лише 70% інформації. А якщо в ту ж інструкцію додати малюнки, то цей відсоток (або показник) зросте до 95%.

Людина схильна обробляти саме візуальну інформацію. Крім того, візуалізація даних має кілька переваг:

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

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

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

Діаграми розсіювання (точки)

Якщо точку помістити на площину, то ми отримаємо наш перший графік – діаграму розсіювання:

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

Як це виправити?
Щоб виправити це необхідно необхідна заміна на інший вид графіка (розглянемо далі) або ж інший підтип точкового графіка.

1. Бульбашкова (Bubble chart) - це тип діаграми, який відображає три виміри даних. Додається розмір точки (віднині диск). Бульбашкові діаграми можуть полегшити розуміння соціальних, економічних, медичних та інших наукових зв’язків.
2. Смугова діаграма (Strip Plot) — це діаграма розсіювання по одній осі. Значення відображаються точками вздовж однієї унікальної осі, де точки з однаковим значенням можуть накладатися. Для відображення значень, що перекриваються, можна змінити непрозорість або колір точок або замість цього можна використати графік тремтіння чи графік підрахунків. Як правило, кілька смужкових графіків розміщуються поруч, щоб порівняти розподіл точок даних між кількома значеннями, категоріями чи діапазонами.
3. Діаграма тремтіння (Jitter plot) - це варіант смужкової діаграми з кращим переглядом точок даних, що перекриваються. Вона використовується для візуалізації розподілу багатьох окремих одновимірних значень.
Значення відображаються як точки вздовж однієї осі. Потім ці точки випадковим чином зміщуються вздовж іншої осі, що само собою не має значення для даних, дозволяючи точкам не накладатися.
Як правило, кілька графіків тремтіння розміщуються поруч, щоб порівняти розподіл точок даних між кількома значеннями, категоріями чи діапазонами.
4. Карта зв'язків (Network Visualisation) - цей тип візуалізації показує, як речі взаємопов’язані за допомогою вузлів і ліній зв’язків.

Лінійні графіки

Лінійні графіки допомагають орієнтуватися в складних наборах даних і зрозуміти всю історію. Це один з найкращих інструментів візуального аналізу для відстеження та порівняння даних у часі.
Лінійна діаграма або лінійний графік відображає зміну однієї чи кількох числових змінних. Точки даних з'єднані прямими відрізками. Віна подібна до діаграми розсіювання, але тут точки вимірювання впорядковані (зазвичай за значенням на осі Х) і з’єднані прямими відрізками. Лінійна діаграма часто використовується для візуалізації тенденції в даних за проміжки часу, тому лінію часто малюють у хронологічному порядку.

Варіації лінійних графіків

1. Мультилайн - кілька графіків на одній площині.
2. Спарклайн (Sparkline) — це, по суті, невелика лінійна діаграма, створена для розміщення в рядку з текстом або поруч із значеннями в таблиці. Головна мета спарклайну — показати зміни за певний період часу. Його часто можна побачити у фінансовому контексті.
Окрім лінійних графіків спарклайном можуть бути стовпчики або колонки.
3. Діаграма Ridgeline (іноді її називають Joyplot) показує розподіл числового значення для кількох груп. Розподіл можна представити за допомогою гістограм або графіків щільності, вирівняних за однаковою горизонтальною шкалою та представлених із невеликим перекриттям.
4.Діаграма нахилу (Slope chart) є чудовою заміною лінійній діаграмі. Вона підкреслює прогресію між двома значеннями, використовуючи кут нахилу для передачі різниці. Як приклад, за допомогою діаграми нахилу можна візуалізувати зміни рівня зайнятості між різними галузями.
5. Лінійна діаграма кроків і стрибків. Різниця між лінією кроку та лінією стрибка полягає у вертикальних сегментах лінії, що з’єднують «кроки» лінії стрибка. Лінійні діаграми стрибків зазвичай використовуються для демонстрації ставок.

Діаграми площин (area chart)

Це унікальний підвид лінійного графіку. Загалом це той же лінійний чарт, але з залитою областю між лінією та віссю. Головна мета цього графіка - привернути увагу саме до ВЕЛИЧИНИ зміни у певний період часу.

Види діаграм площин

1. Одиночні та множинні. Так само як і в лінійному графіку (одна або декілька графіків на системі координат).
2.Діаграма накопичення та 100% складені графіки (Stacked and 100% stacked). Весь графік представляє загальну суму всіх нанесених даних. Графи з накопиченими площами також використовують площі для передачі цілих чисел, тому вони не працюють для від’ємних значень. Загалом вони корисні для порівняння кількох змінних, що змінюються з часом. Особливість 100% складеного графіка в тому, що всі зміни відображаються у відсотковому еквіваленті і їх сума на кожному відтинку часу не може бути більше або менше 100%.
3. Потоковий (Stream Graph). Ця візуалізація є різновидом діаграми із накопиченням, але замість відображення значень на фіксованій прямій осі потоковий графік має значення, зміщені навколо змінної центральної базової лінії. Графіки потоків відображають зміни даних з часом для різних категорій за допомогою плавних органічних форм, які дещо нагадують річковий потік. Це робить Stream Graphs естетично більш привабливим.
4. Воронкові діаграми (Funnel chart) - це різновид діаграм, які часто використовуються для представлення етапів процесу продажу та відображення суми потенційного доходу на кожному етапі. Цей тип діаграми також може бути корисним для визначення потенційних проблемних областей у процесах продажів.
5. Діаграма Санкея (Sankey diagram). Спосіб візуалізації потоку з одного стану в інший з плином часу. Товщини стрічок пропорційні обʼємам руху в даному напрямку. Діаграми такого типу акцентують увагу на головних напрямках передач в системі. Вони допомагають визначити найбільш важливі внески в потік.

Круговий графік (pie chart)

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

Види кругових діаграм

1. Пончик (Doughnut chart) - по суті той же графік, що і круговий, тільки має пусту область в середині. Крім того, пончики більш інфовмісткі ніж секторні, оскільки порожній простір усередині круглої діаграми можна використовувати для відображення інформації в ній.
2. Напівкільце (Half circle chart) - половинка пончика. Іноді може зекономити місце на вашому дашборді та виглядає оригінально.
3. Полярний (Polar chart) - схожа на кругову діаграму, але кожен сегмент має однаковий кут - радіус сегмента відрізняється залежно від значення.
4. Діаграма сонячних променів (Sunburst Chart). Це схоже на вкладені круглі діаграми, однак з ієрархічною природою, яка означає, що кожен рівень представляє деталізацію попереднього. Іншими словами, дочірні сегменти на кожному рівні складають весь батьківський фрагмент.
5. Радар (radar chart) - щось середнє між круговим графіком та графіком площин. Це графічний спосіб відображення багатовимірних даних у вигляді двовимірної діаграми з трьома або більшою кількістю змінних. Ці змінні представлені на осях, що мають спільний початок. Кожна вісь цієї діаграми це певна характеристика зі своєю градацією.

Стовпчикова діаграма

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

Види стовпчикових діаграм

Через те, що різновидів стовпчикових графіків дуже багато, опишу лише деяку частину з них.

1. Складений (Staked bar chart) - стовпчик складається з декількох окремих стовпчиків, які наче стоять один на одному. В такому випадку показується загальний результат за декількома категоріями.
2. Згрупований (Сlusted bar chart). В цьому випадку стовпчики групуються і ця група розміщується на осі як покази за один вимір чи період. Добре підходить щоб порівнювати різні значення та одному графіку.
3. Перекриття (Overlapping) - щось середнє між складеним та згрупованим графіками. В цьому випадку накладається два стовпчика один на одного (один ширший за інший) і кожен з них зчитується окремо. Такий варіант займає менше місця на графіку.
4. Радіальний (Radial). Цей тип графіка відображає стовпчики в полярній системі координат. Концентричні кола використовуються для шкали значень, тоді як радіальні роздільники (лінії, що відходять від центру) використовуються для позначення кожної категорії. Виглядає цікаво і гарно.
5. Гістограма. В цьому випадку стовпчики знаходяться близько один до одного вздовж осі. Кожен стовпчик на гістограмі представляє табличну частоту для кожного інтервалу. Загальна картина виглядає як звичайний графік площин, але сфокусований на конкретних значеннях, тому дає як і картину в динаміці так і точність.
6. Каскадна діаграма (Waterfall) — це графічний інструмент, який переважно використовується для відображення спільного впливу послідовних позитивних і негативних змінних на початкову точку. По суті, це добре структурований і зрозумілий спосіб зображення поступових переходів, який наголошує на процесі, через який різноманітні фактори складаються в остаточне значення.
7. Діаграма інтервалів (Range column chart) - використовується для відображення діапазонів набору даних між мінімальним і максимальним значенням. Діаграми інтервалів ідеально підходять для порівняння діапазонів, як правило, між категоріями.
Майте на увазі, що діапазонні діаграми зосереджують увагу читача лише на екстремальних значеннях і не дають інформації про точки даних між мінімальними та максимальними значеннями.
8. Свічкова діаграма (Candlestick chart). Цей графік є більш просунутою версією діаграми інтервалів. Стовпчик має форму свічки і теж показує мінімальне та максимальне значення, але разом з тим дає інформацію про розподіл значень всередині.

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

Ще деякі графіки

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

1. Деревоподібна карта (Tree map chart)

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

2. Теплова карта (Heat map)

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

3. Вафельна діаграма (Waffle chart)

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

На останок

Додатково хочу додати табличку, згідно якої можна обрати потрібний графік в залежності від задач.

В цій статті я описав загальні графіки та способи їх використання та підвиди. Сподіваюсь, це була корисна інформація для вас. Дякую за увагу.
Миру всім!!!