В 1956 году психолог Джордж Миллер в статье описал, что человек способен одновременно запоминать и хранить в кратковременной памяти до 7 (± 2) единиц информации. Он предложил для эффективного запоминания разделять её на небольшие фрагменты, которые можно организовать по неким критериям. Такая фрагментация получила название чанкинг (англ. chunking — разбиение, измельчение) — разбиение большого объема информации на мелкие легко запоминаемые блоки.

На практике это правило 7 (± 2) часто используется неверно.

Сам Миллер говорил, что: «существует предельное количество элементов, которые человек может мгновенно запомнить и повторить. Это не имеет никакого отношения к способности воспринимать печатный текст».

Смысл принципа – в разбивке информации на фрагменты для лучшего восприятия.

Например, ориентироваться в каталоге интернет-магазина для пользователя будет проще, если все разделы будут доступны взгляду. Ему не нужно хранить все в кратковременной памяти, а ограничение разделов по принципу 7(± 2), только усложнит пользовательский опыт. Главная задача интерфейса – понятность, поэтому включайте все необходимые разделы и убирайте лишнее.

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

В мобильных приложениях чанкинг применяется для последовательного отображения информации. Информация на сплеш-скрине разбивается на несколько блоков и отображается поочередно. Это помогает пользователю лучше ориентироваться в приложении и быстрее освоить его функции.

Чанкинг позволяет создавать удобные, интуитивно понятные интерфейсы и снижать когнитивную нагрузку на пользователя

Главные выводы:
🔹Не привязывайтесь к числу 7 для ненужных ограничений в дизайне.
🔹Разбивайте и группируйте массивы контента на более мелкие части, чтобы пользователям было легче обрабатывать, понимать и запоминать информацию.
🔹 Давайте пользователю выбор, но не слишком много вариантов, за исключением навигации.

Источники:
— Джордж Миллер, «Магическое число семь плюс-минус два», 1956
— Siddharth Gulati. The Principle of Chunking: What Airbnb taught me about good design
— Better UX: Chunking
— Myth #23: Choices should always be limited to 7+/-2
— Магические 7 плюс-минус 2 ошибки UX Дизайнера
— The average person can only keep 7 (plus or minus 2) items in their working memory

Диаграмма Гутенберга

Избыточное количество контента мешает пользователю сделать нужное действие на странице и снижает конверсию сайта. Знание поведенческих паттернов помогает расположить контент так, чтобы человек выполнил целевое действие.

Диаграмма Гутенберга — один из наиболее распространенных паттернов. Она показывает, как люди просматривают информацию на сайте. Условно диаграмма разделяет страницу на 4 равные части.

👉🏻1. Зона приоритетного просмотра – левая верхняя часть экрана. Подходит для важных элементов интерфейса: логотип, заголовок, лид-абзац.

👉🏻2. Хорошо исследуемая зона – правая верхняя часть. Здесь можно разместить дополнительную информацию: контакты, форму регистрации, поисковую строку.

👉🏻3. Наименее исследуемая зона – левая нижняя часть экрана. Подходит для менее важного контента.

👉🏻4. Зона выхода – правая нижняя часть. Здесь уместно размещать элементы, направленные на совершение целевых действий.

Принцип расположения элементов на сайте согласно диаграмме Гутенберга применим в интерфейсах с разными видами контента, например, личные кабинеты, карточки товаров, сайты услуг.

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

Источники:
— Edmund Arnold
— Создание эффективных веб-страниц
— Проектирование экранов сайта по диаграмме Гутенберга
— Gutenberg Diagram — Why you should know it and use it
— 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern