Общая судьба: движение, которое читается как одно

Урок 9.6 · Интерфейсы и сайты с нуля · Модуль 9. Законы восприятия: почему это работает · По подписке

Цель урока: Понять, что элементы, которые движутся вместе, воспринимаются как группа, и научиться анимировать группу, а не каждый элемент по отдельности.

Нужно знать заранее: Урок 9.1 «Гештальт»

Объяснение

Зачем это нужно: Анимация — не украшение. Она сообщает, что связано, а что нет, раньше, чем человек прочитает текст. Если три карточки выезжают одним движением, они читаются как одна группа; если одна дёргается отдельно, она становится главной — даже если задумана второстепенной. Это закон общей судьбы, и он самый громкий из законов гештальта.

Как это работает: Общая судьба: объекты, которые движутся или меняются вместе, воспринимаются как одно целое. Продолжение: глаз достраивает линию и направление, поэтому элементы на одной траектории читаются как последовательность. Симметрия: симметричные элементы читаются как пара. Прошлый опыт: знакомые формы узнаются быстрее. В интерфейсе это значит: — группу анимируют целиком, а не каждый элемент по отдельности; — несвязанные элементы не должны появляться одним движением; — движение должно иметь направление и причину: «пришло снизу» — «появилось», «уехало вправо» — «закрылось»; — длительность 150–300 мс: быстрее — не видно, медленнее — кажется тормозом.

Уроки модуля 9

• 9.1 Гештальт: глаз сам собирает группы (бесплатно)
• 9.2 Закон Фиттса: до кнопки должно быть легко дотянуться (по подписке)
• 9.3 Закон Хика: меньше выбора — быстрее решение (по подписке)
• 9.4 Закон Якоба: человек ищет там, где привык (по подписке)
• 9.5 Закон Миллера: почему «семь пунктов» — миф (по подписке)
• 9.6 Общая судьба: движение, которое читается как одно — вы здесь (по подписке)
• 9.7 Проект: экран, который ведёт за руку (по подписке)
• 9.8 Разбор экрана по законам восприятия (по подписке)