Курс
Дизайн у цифровому середовищі

15. Психофізіологія інтерфейсів

Лекції

Вступ

1

Основні етапи роботи над веб-проектом

Завдання та ідея

2

Дизайн-мислення

3

Емпатія

4

Майндмеп

5

Скетчбук

Дизайн-дослідження та фокусування

6

Види досліджень

7

Тренди веб-дизайну

8

Розвиток візуального смаку та отримання нового досвіду

9

Флэт-иллюстрация

Оcновы графического дизайна

10

Композиция

11

Цвет

12

Шрифт

13

Типографика

14

Модульные сетки

Прототипирование

15

Психофизиология интерфейсов

16

Прототипирование

Контент

17

Цифровой сторителлинг

Дизайн

18

Веб-друкарка та функціональні елементи статті

19

Функціональні елементи Landing Page

20

Як оформити портфоліо

Закладки

designspiration.net

booooooom.com

Курс

Профіль

Вийти

Психофізіологія графічних інтерфейсів

Як управляти увагою користувача, використовуючи базові знання психофізіології.

Автор: Ярослав Шуваєв

Ярослав Шуваєв
Product owner Альфа-Мобайл, підрозділи Альфа-Банку.

Ярослав працював креативним директором digital-підрозділу DDVB, керував digital-проектами для найбільших вітчизняних та зарубіжних компаній, серед яких: видобувні компанії «Газпром», «Татнафта», «Башнафта», Зовнішекономбанк, Адміністрація Президента, Уряд Москви, QIWI, фармацевт , холдинг Алютех, девелоперська компанія "Висота".

Куратор зимового інтенсиву "Інтерактивний дизайн: UX & UI Design" Британської вищої школи дизайну.

shuvaev.com

Чому стаття називається "Психофізіологія графічних інтерфейсів"

Психофізіологія - наука, що вивчає нейрофізіологічні механізми психічних процесів, станів та поведінки.

З погляду теорії систем, людина — це інформаційна система, як і і комп'ютер. Є різні канали введення та виведення цієї інформації. У комп'ютер інформація вводиться за допомогою клавіатури, мишки, голосу, жестів. Користувач отримує інформацію по зоровому каналу: через екран, а також через аудіальний канал і тактильний (наприклад, годинник Apple Watch, який здригається, коли надходить повідомлення). Але основний канал – візуальний. Тому ми розглянемо фізіологічні аспекти поведінки людини при взаємодії із графічним (візуальним) інтерфейсом.

частина 1

Групи

Магічне правило 7+1 / Геометрична пам'ять /Сильні та слабкі угруповання

Магічне правило 7±2

Людині на вирішення завдання зручно приймати певну кількість об'єктів. Їхнє число дорівнює 7±2.

Такого висновку дійшов Джордж Міллер , американський вчений-психолог, після того, як провів серію експериментів у лабораторії Белла (великий дослідницький центр у галузі телекомунікацій, електронних та комп'ютерних систем).

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

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

Найкраще ми запам'ятовуємо цифри. Є можливість, що ми просто натренувалися це робити. Колись не було калькуляторів і люди багато рахували в умі, запам'ятовували номери телефонів тощо. Можливо, поступово це змінюватиметься.

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

Літери на третьому місці. У дитинстві ми запам'ятали 33 літери і далі легко з ними взаємодіяти.

Час сприйняття елемента в залежності від типу. Джерело: knosof.co.uk

Чому користувачі завжди намагаються вирішувати завдання найекономічнішим способом?

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

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

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

Приклад використання принципу 7±2

Дизайнер залишив у меню лише п'ять елементів, а решту прибрав до «бургера».

Приклад недотримання принципу 7±2

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

Скріншот сайту mbm.ru

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

Геометрична пам'ять

Орієнтуватися у просторі людині допомагає «внутрішній GPS».

У 2014 році Нобелівський комітет присудив премію в галузі медицини за відкриття клітин, які дозволяють точно визначати місце розташування, запам'ятовувати та прокладати маршрути.
Докладніше

У людей в мозку є сітка, яка дозволяє нам навігувати всередині простору і ця масштабована сітка. Є масштаб вулиці, а масштаб планшета. Все одно простір покривається сіткою, і ми згадуємо певне місце. Це наша геометрична пам'ять.

Зображення із сайту bbc.com/news/health-29504761

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

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

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

Приклад залучення геометричної пам'яті під час роботи з інтерфейсами

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

Робота з Dock. Коли ми хочемо відкрити Photoshop, спочатку ми згадуємо, що він знаходиться, наприклад, десь зліва. Потім увага фокусується і починається ідентифікація за кольором та символом.

У iPhone використовується сітка: 5 об'єктів по вертикалі та 4 по горизонталі. У Windows Phone є додаткова ідентифікація за розміром. Коли з'явився iPad, розробники не стали збільшувати кількість іконок, а просто збільшили відстань між ними. Перемикання між екранами – це також спосіб геометричної навігації. Людина запам'ятовує приблизно якісь програми на якому екрані.

Геометрична пам'ять у алфавітних списках

Якщо для впорядкування сутностей використовується алфавітне сортування, ми легко орієнтуємося, що якщо те, що ми шукаємо, починається на літеру «О» або літеру «П», це десь у середині списку.

Скріншот сайту arzamas.academy

Закон пам'яті: ефект краю

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

Угруповання об'єктів

Чому важливі угруповання. Приклади сильних та слабких угруповань.

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

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

Приклад слабкого угруповання.

Сильне угруповання

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

Слабке угруповання

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

Працюючи з текстом закон угруповання теж діє. Рядки - це теж об'єкти. Параграф – це група об'єктів рядків. Рядок - це група об'єктів слів, а слово - група літер. Тому елементи тексту потрібно компонувати так, щоб користувач не міг розпізнавати групи.

Скріншот сайту lamb.cc/typograph/

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

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

частина 2

Контраст

Контраст форми / Обличчя та погляд / Контраст кольору / Контраст розміру / Контраст руху

Контраст форми

Складні об'єкти викликають сильніше обурення у візуальному просторі.

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

Ми миттєво фокусуємося на людині як складному об'єкті, незважаючи на те, що за кольором вона майже зливається з фоном.

Як контраст форми використовується практично?

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

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

Зворотний контраст форми працює не дуже добре. Дуже складно знайти простий об'єкт серед складних - це як виділитися на Хелловін в костюмі звичайної людини.

Приклад ігнорування принципу розмаїття форми

Важко повірити, але на скріншоті нижче сторінка інформаційного агентства. Знайти на ній змістовну частину неймовірно складно.

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

«Банерна сліпота»

Це особливість сприйняття веб-сторінок, коли користувач поступово перестає помічати банери.

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

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

Праву колонку з рекламою взагалі ігнорується і її можна назвати «цвинтарем банерів» - ніхто на неї не дивиться.

Обличчя та погляд

Особи людей — це те, що гарантовано приверне увагу глядача. Напрямок погляду сфокусує цю увагу на потрібному об'єкті.

Обличчя людини – те, що люди чітко пам'ятають багато років. Цю особливість людського сприйняття часто використовують у рекламі. Наприклад, на фільмах завжди використовують особи акторів. Ми не пам'ятаємо ім'я актора, забуваємо назву фільму, але якщо ми бачимо обличчя, для нас це як набір тегів, ми розуміємо, чи варто нам дивитися цей фільм чи ні.

Обличчя – природна «пастка для очей».

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

Якщо в макеті поставити дівчину поруч із кнопкою «купити», буде одна конверсія. Дівчина дивиться на кнопку купити - конверсія зростає. Жінка дивиться і вказує рукою - конверсія зростає ще сильніше. У дівчини рука зігнута в лікті — частина поглядів витікає вниз через уявну стрілку, яку лікоть утворює. Поставили чоловіка — конверсія поменшала. Поставили жінку поряд із чоловіком — взагалі впала майже до нуля: нікому не цікаво, що вони там роблять.

Контраст кольору

Контраст кольору – дуже сильний видільник.

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

Приклад акцентування дії кольором.

Кольори мають додаткове соціально-психологічне значення: червоний колір небезпеки, зелений щось позитивне.

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

Використовуючи колір як видільник, потрібно не забувати, що деякі люди розрізняють не всі кольори. Ми маємо три види рецепторів: один тип чутливий до червоного кольору, другий до зеленого, третій до синього. Буває, що один із них не працює і тоді людина не розрізняє якогось кольору.

Зображення, що використовується в тестуванні на дальтонізм - особливості зору, коли люди не розрізняють деякі кольори.

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

Контраст розміру

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

Контраст розміру дизайнери інтерфейсів використовують для того, щоб наголосити на важливості об'єкта, звернути на нього увагу в першу чергу. Ми таким чином керуємо фокусом: робимо велику кнопку "купити" і невелику "ні, дякую".

Приклад використання контрасту розміру

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

Кнопку Submit виділили розміром та кольором. Але дуже складно знайти кнопку No, thanks: хрестик прибрали, неможливо нічого натиснути, сама кнопка заховалася серед тексту, який нам не хочеться читати, щоб активувати центр читання задля вирішення такого простого завдання. Це працює. Але використовувати такі прийоми чи ні – моральний вибір дизайнера, бо очевидно, що такий підхід не орієнтований на користувача.

Як контраст розміру допомагає під час використання «плитки»

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

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

Приклад використання контрасту розміру під час створення таблиць стилю

Різний розмір шрифту - добрий спосіб створити ієрархію.

На лівій картинці заголовки першого та другого рівня ідентифікувати легко завдяки гарному контрасту розміру. На прикладі праворуч ми здогадуємося про ієрархію лише за непрямими ознаками.

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

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

Контраст руху

Об'єкти, що рухаються, ігнорувати майже неможливо.

Миттєва реакція і фокусування на об'єкті, що рухається, дісталася нам від далеких предків. Рухається? Це або їжа, або небезпека. Тому відразу, коли у візуальному полі з'являється якийсь рух, око до нього автоматично приковується.

Для керування фокусом користувача, анімація – незамінна річ.

Google Material Design

Концепція матеріального дизайну Google – це спроба переосмислити дизайн фізичного світу та інтерпретувати його в дизайні інтерфейсу. У червні 2014 року було випущено гайд із застосування принципів матеріального дизайну в інтерфейсах.

Анімації в гайді приділено багато уваги, вона навіть стоїть на першому місці.
Повна версія гайду.

Деякі принципи анімації, відображені в гайді:

Природне прискорення та уповільнення

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

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

Реакція на дії користувача

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

Маршрут фокусу

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

Плавні переходи

Безперервна анімація зручна для погляду, коли всі об'єкти перебудовуються плавно.

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

Тимчасова ієрархія

При побудові переходу необхідно врахувати порядок і час появи елемента. Рух має підтримувати інформаційну ієрархію.

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

Анімація піктограм

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

Всі зображення цього розділу взяті з Google design guidelines і використовуються як демонстрація.

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

частина 3

Читання

Позитивна динаміка / Зображення та текст / Контраст фону/ Засічки / Довжина рядка / Інтерліньяж / Оформлення тексту / «Зворотна піраміда»

Позитивна динаміка

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

Зворотний напрямок неприродний для сприйняття, так само як ходіння задом наперед.

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

Радянська артпідготовка у районі Зеєловських висот, 16–19 квітня 1945 року. Джерело фото: wikipedia.org

Вперед і назад напрямки, які легко зчитуються в інтерфейсах. "Назад" знаходиться ліворуч, "вперед" - правіше.

Зображення та текст

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

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

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

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

Приклад добре побудованої подачі матеріалу

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

Піктограми

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

Якщо подивитися на піктограми вище, то багато хто з них якийсь час тому був невідомий взагалі. Наприклад, піктограма "хмара". Вона виникла з появою відповідної технології, яка зараз дуже розвинена. Завдяки хмарній технології з'явилася піктограма «Зберегти», довгий час вона виглядала як дискета, але тепер це хмара. Аналогічна ситуація із голосовим введенням. Піктограму у вигляді мікрофона ще років 7 тому ніхто не зрозумів би.

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

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

Контраст фону

Найлегше читається максимально контрастний текст – чорний на білому.

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

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

Засічки

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

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

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

У сучасному Інтернеті текст, набраний без засічок шрифтом — звичайна історія.

Довжина рядка

Дуже докладно про те, якою має бути ідеальна довжина рядка написано у книзі Роберта Брінгхерста «Основи стилю в друкарні» .

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

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

Інтерліньяж

Більше розріджений текст читати комфортніше, ніж щільно збитий.

Коли міжрядкова відстань не надто вузька, легше утримувати фокус, не читаєш один і той же рядок двічі, тому що вони далеко один від одного стоять.

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

Приклад хорошого поєднання розміру кеглю та інтерліньяжу. У ліді воно дорівнює співвідношенню 30px/42px, переважно тексті 20px/30px.

Оформлення тексту

Щоб текст прочитали, у нього обов'язково має бути структура: заголовки, підзаголовки, розбивка на абзаци.

Вище ми розглядали як користувач сканує текст, тому зрозуміло, що «котлету» без розбивки на заголовки, підзаголовки та параграфи ніхто не читатиме. Потрібно обов'язково групувати інформацію, робити списки, виокремлювати акценти.

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

З пошуковою видачею взагалі все сумно. Нижче за п'ятий пункт ніхто навіть не сканує.

Зворотна піраміда тексту

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

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

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

Ієрархія у тексті допомагає легко сприймати інформацію.

Автор тексту та ілюстрацій: Ярослав Шуваєв
fb.com/shuvaev

Дизайн та верстка: Іра Смирнова

Також у цьому курсі

14

Модульні сітки

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

Попередня

16

Прототипування

Що таке макет. Які вони бувають. Як малювати прототипи та робити це добре. Роль прототипу у спілкуванні із замовником.

Наступна

Поділитися з друзями:

0

0

0

Нова закладка

Назва закладки

© Обухів Н.В., 2015 Всі права захищені. Передрук та цитування матеріалів — лише з дозволу автора.

З усіх питань пишіть на [email-masked]

[ ] -

Оригінальний текст

Запропонувати кращий переклад