Шевченко Вікторія Принципи дизайну (як утримати увагу)

Принципи дизайну (як утримати увагу) Презентація

Шевченко Вікторії для студентів Інституту журналістики Київського національного університету імені Тараса Шевченка

© Шевченко Вікторія, 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