Принципи дизайну (як утримати увагу) Презентація
Шевченко Вікторії для студентів Інституту журналістики Київського національного університету імені Тараса Шевченка
© Шевченко Вікторія, 2019
Візуальне сприйняття Зір – основний канал сприйняття. Візуальні образи •привертають увагу, •інтерпретуються, •пригадуються, •запам’ятовуються, •інтригують, •наводять на роздуми, •дають поштовх, •асоціюються, •відкладаються у пам’ять.
© Шевченко Вікторія, 2019
Обличчя, очі
напрямок погляду, людина-манекен © Шевченко Вікторія, 2019
Візуальні знаки
Знайомі образи
Геометричні форми. Ірвін Бідерман – 24 базові форми (геони) для розпізнавання об’єктів
© Шевченко Вікторія, 2019
Візуальні знаки
Спрощення, групування
Групи, потім окремі елементи © Шевченко Вікторія, 2019
Візуальні знаки
Знайомі образи
спрощений вигляд, легко впізнаються © Шевченко Вікторія, 2019
Візуальні знаки
Застосування стереотипів Навчання
Робота
Навчання
Робота
Успіх
Гроші
Успіх
Гроші
Робота Навчання
Успіх
Гроші
колір, форма, графічні елементи групують та роз’єднують © Шевченко Вікторія, 2019
Візуальні знаки
Конкретні поняття
прості предмети запам’ятовуються легше, ніж абстрактні поняття (демократія, здобутки…) © Шевченко Вікторія, 2019
Стереот ипи
Щоб інформація не забувалась, її потрібно повторювати, застосовувати схеми, стереотипи
© Шевченко Вікторія, 2019
Групування
пам’ять. Джорж Міллер (1956) 7+-2 елемента Алан Беделі, Нельсон Кован (1986, 2001) 4+-2 елемента © Шевченко Вікторія, 2019
•розташовані поряд зорово зв’язуються •простір для відокремлення •рамки
Наближення
© Шевченко Вікторія, 2019
Візуальні знаки
Обсяги інформації, поступовість
поступово надавати інформацію, лише ту, яка людина здатна сприйняти прямо зараз і одномоментно © Шевченко Вікторія, 2019
Обсяги інформаціїї, поступовість
Важливо знати, що людина хоче знайти на кожній наступній сходинці © Шевченко Вікторія, 2019
Обсяги інформації, групування
© Шевченко Вікторія, 2019
Обсяги інформації, наближення
© Шевченко Вікторія, 2019
Повторення Щоб інформація не забувалась, її потрібно повторювати, застосовувати схеми, стереотипи
© Шевченко Вікторія, 2019
Вирівнювання
© Шевченко Вікторія, 2019
поштовх до дії
Символи дають сигнали: взяти за ручку, відкрити двері, погладити кицьку. Тінь на кнопці вкзує на те, що треба натиснути Візуальні знаки © Шевченко Вікторія, 2019
поштовх до дії
при наведенні на об’єкт він змінює колір чи рухається © Шевченко Вікторія, 2019
Візуальні знаки
Ілюзія: фігури Каніжа
1995 р. Мозок доповнює реальність. Бачене відрізняється фактичного.
© Шевченко Вікторія, 2019
Візуальні знаки
Реципієнт розуміння Сприйняття залежить від •особливостей зорового сприйняття, • рівня підготовки людини, її знань, стереотипів, •ступеню знайомства з матеріалом, •ментальної моделі людини •бажання сприймати інформацію
© Шевченко Вікторія, 2019
Візуальні знаки
Оптичні ілюзії
ефект Франца-Лайера © Шевченко Вікторія, 2019
Візуальні знаки
Оптичні ілюзії
пласкі-об’ємні зображення
© Шевченко Вікторія, 2019
Візуальні знаки
Зони уваги, послідовність перегляду, важливість об’єктів для глядача
•інформація по боках ігнорується •верхня третина чи центр– важлива інформація •послідовність переміщення погляду
© Шевченко Вікторія, 2019
Візуальні знаки
Центральний і периферічний зір Центральний – деталі Периферичне – загальне тло, оточення; фіксує рух, напрямок, анімацію
© Шевченко Вікторія, 2019
Візуальні знаки
• • •
Глядач приймає рішення відповідно до побаченного в перші хвилини периферичним зором Інформація в кутах може відволікати увагу чи суперечити основному контенту посередині акцент всередині, якщо на тлі щось блимає чи заважає © Шевченко Вікторія, 2019
Візуальні знаки
Ракурс
завдання: зобразити тварину, чашку © Шевченко Вікторія, 2019
Візуальні знаки
Кольорові сполучення
стереохроматизм, дальтонізм © Шевченко Вікторія, 2019
Візуальні знаки
перевірка кольорів для дальтоників
– www.vischeck.com – colorfilter.wickline.org
© Шевченко Вікторія, 2019
Візуальні знаки
культурні традиції
© Шевченко Вікторія, 2019
Візуальні знаки
Сприйняття тексту
текст, надрукований великими літерами, погано сприймається © Шевченко Вікторія, 2019
Вербальні знаки
Сприйняття тексту
курсив © Шевченко Вікторія, 2019
Вербальні знаки
Сприйняття тексту
© Шевченко Вікторія, 2019
Вербальні знаки
Сприйняття тексту
око сприймає 7-9 букв – саккада, ще наперед на 15 букв сприймає періферічний зір Формула зручності читання Флеша (чим більше значення, тим легше прочитати): 206,835 - 1,015*(кількість слів / кількість речень) – 84,6*(кількість складів / кількість слів) Оцінювання зручності читання в інтернеті:
© Шевченко Вікторія, 2019
Вербальні знаки
Сприйняття тексту
Заголовки, абзаци, членування тексту: прості слова, значимі об’єкти, логіка Вербальні знаки © Шевченко Вікторія, 2019
Сприйняття тексту Вибір шрифту. Образ літери, форма, настрій, асоціації, історична епоха від сприйняття малюнка шрифту залежить розуміння і швидкість сприйняття від розміру букви та обсягу внутрішнього простору залежить зручність читання
© Шевченко Вікторія, 2019
Сприйняття тексту
контраст тексту та тла електронне та друковане медіа: більше кегль, менші фрагменти, контраст © Шевченко Вікторія, 2019
Сприйняття тексту довгий рядок легше читається, оскільки рідше перериваються, але люди віддають перевагу коротким колонкам
© Шевченко Вікторія, 2019
Вербальні знаки
Література Krug, Steve. 2005. Don`t Make Me Think! Berkele Riders https://ru.scribd.com/document/358636816/Steve-Krug-Dont-Make-MeThink-Second-Edition Сьюзан Уэйншенк 100 главных принципов дизайна
© Шевченко Вікторія, 2019