Что произошло
В начале 1950-х годов два метода, рождённые в совершенно разных мирах — типографии и военной аналитике, — начали своё движение к будущему UX-дизайну. Один описывал, как человеческий глаз сканирует страницу. Другой — как извлекать надёжные суждения из голов экспертов. Оба стали инструментами, без которых невозможно представить современное проектирование интерфейсов.
Эдмунд Арнольд и диаграмма Гутенберга. Эдмунд Клифтон Арнольд (1913–2007) — человек, которого типографы называли «отцом современного газетного дизайна». Профессор журналистики Сиракузского университета, консультант более двухсот газет и журналов, автор десятка книг о типографике и макетировании. В начале 1950-х Арнольд описал модель, которая стала известна как диаграмма Гутенберга — схему движения глаз по странице с равномерно распределённой информацией.
Модель проста и элегантна. Представьте прямоугольную страницу, разделённую на четыре зоны:
-
Верхний левый угол — «первичная оптическая область» (primary optical area). Здесь взгляд начинает путь. Для носителей языков с письмом слева направо это естественная точка входа: мы с детства приучены начинать чтение отсюда.
-
Верхний правый угол — «сильная область бесполезного хода» (strong fallow area). Взгляд проходит через неё горизонтально, но задерживается здесь меньше. Информация в этой зоне замечается, но без акцента — проскальзывает.
-
Нижний левый угол — «слабая область бесполезного хода» (weak fallow area). Самая «мёртвая» зона. Взгляд редко задерживается здесь — он скользит по диагонали из верхнего правого к нижнему правому, минуя этот угол.
-
Нижний правый угол — «терминальная область» (terminal area). Здесь взгляд завершает путь. Финальная точка — точка действия.
Если соединить точки — получится Z: верхний левый → верхний правый → нижний левый → нижний правый. Отсюда второе название — Z-паттерн.
Арнольд назвал модель в честь Иоганна Гутенберга — изобретателя печатного станка, — хотя сам Гутенберг, разумеется, никаких исследований движения глаз не проводил. Имя было данью уважения: Гутенберг создал печатную страницу, Арнольд описал, как человек её читает.
Важная оговорка, которую сам Арнольд подчёркивал: диаграмма Гутенберга описывает сканирование однородной страницы — без ярких заголовков, без контрастных изображений, без акцентных элементов. Это модель «по умолчанию»: как глаз движется, когда ничто не привлекает его принудительно. Любой визуальный акцент — крупный заголовок, яркая фотография, цветная кнопка — ломает паттерн и перетягивает взгляд на себя.
Экспертное оценивание — знание из голов. В те же 1950-е годы, в совершенно другом мире — мире военной аналитики и исследования операций — оформился метод, который назовут экспертным оцениванием (expert judgment, expert elicitation).
Корни метода — во Второй мировой войне. Военные столкнулись с задачами, для которых не существовало формальных моделей: какова вероятность, что противник применит новое оружие? Сколько потерь ожидать при высадке десанта? Какой маршрут конвоя безопаснее? Статистических данных не было — война создавала ситуации, не имевшие прецедентов. Единственным источником оценки были головы экспертов: генералов, инженеров, разведчиков.
После войны эти методы были систематизированы. В 1948 году корпорация RAND — мозговой центр ВВС США — начала разработку формализованных процедур получения экспертных оценок. В 1950–1953 годах Олаф Хелмер и Норман Далки создали метод Дельфи — процедуру, при которой группа экспертов независимо друг от друга оценивает вероятности событий, затем знакомится с анонимными ответами коллег и корректирует свои оценки. Несколько итераций — и мнения сходятся к консенсусу, очищенному от влияния авторитетов и группового давления.
Параллельно развивались и другие формы экспертного оценивания: метод мозгового штурма Алекса Осборна (1953), метод номинальных групп, метод парных сравнений. Все они решали одну задачу: как извлечь из группы экспертов суждение, которое будет надёжнее, чем мнение любого отдельного эксперта?
Ключевая идея: один эксперт может ошибиться. Но если пять независимых экспертов, не знающих ответов друг друга, приходят к одному выводу — вероятность ошибки падает драматически. Не до нуля, но достаточно, чтобы принимать решения.
Контекст эпохи
1950-е годы — эпоха массовых коммуникаций. Телевидение врывалось в каждый американский дом: в 1950 году телевизор имели 9% домохозяйств, к 1960 году — уже 87%. Газеты и журналы конкурировали за внимание читателя с новым медиа — и проигрывали.
Арнольд работал именно в этом контексте. Он консультировал газеты, которые теряли читателей, и его диагноз был одинаковым: газетный дизайн застрял в XIX веке. Плотные колонки текста, одинаковые заголовки, никакой визуальной иерархии. Глаз читателя блуждал по странице, не находя точки входа. Арнольд учил редакторов думать о странице как о маршруте для глаза: первичная область — сюда поместите главный заголовок. Терминальная область — сюда поместите призыв к действию. Слабая область бесполезного хода — не кладите сюда ничего важного, глаз всё равно проскочит мимо.
Это была революция для газетной индустрии. До Арнольда макетировщики размещали материалы по традиции: самая важная новость — верхний правый угол первой полосы (потому что «так всегда делали»). Арнольд спросил: а вы проверяли, что читатель смотрит туда первым? И показал, что нет — первый взгляд падает на верхний левый угол. Традиция ошибалась.
Экспертное оценивание развивалось в контексте холодной войны. RAND Corporation, созданная в 1948 году как аналитический центр для ВВС, решала задачи стратегического планирования: ядерное сдерживание, прогнозирование развития технологий, оценка военных сценариев. Метод Дельфи был засекречен до 1963 года — его считали стратегическим преимуществом. Когда он стал публичным, выяснилось, что он применим далеко за пределами военного планирования: в бизнесе, медицине, образовании — везде, где нужно принять решение в условиях неопределённости, опираясь на экспертное знание.
Любопытно, что оба метода — и диаграмма Гутенберга, и экспертное оценивание — выросли из одной и той же проблемы: информационной перегрузки. Читатель газеты перегружен текстом — ему нужна визуальная навигация. Командир перегружен данными — ему нужна экспертная фильтрация. В обоих случаях решение одно: создать структуру, которая направляет внимание к главному.
Значение для UX
Диаграмма Гутенберга и экспертное оценивание прошли разные пути, но встретились в одной точке — в практике современного UX-дизайна.
Z-паттерн и проектирование лендингов. Каждый лендинг — одностраничный сайт с призывом к действию — по сути является реализацией диаграммы Гутенберга. Верхний левый угол: логотип и название компании (первичная оптическая область — пользователь должен сразу понять, где он). Верхний правый угол: навигация или контактный телефон (сильная область — замечается, но не перетягивает фокус). Центр: основное сообщение и ключевые преимущества (диагональ взгляда проходит через центр). Нижний правый угол: кнопка «Записаться», «Купить», «Попробовать бесплатно» (терминальная область — точка действия).
Это не совпадение. Это прямое применение модели Арнольда к цифровому экрану. Логика та же, что в газете: направить взгляд от точки входа к точке действия по естественному маршруту.
Конечно, реальность сложнее модели. Якоб Нильсен в 2006 году описал F-паттерн — модель чтения текстовых веб-страниц, где пользователь читает первую строку целиком, затем сканирует начала следующих строк, формируя букву F. F-паттерн и Z-паттерн не противоречат друг другу — они описывают разные ситуации. Z-паттерн — для визуальных страниц с минимумом текста (лендинги, плакаты, слайды презентаций). F-паттерн — для текстовых страниц (статьи, результаты поиска, каталоги). А исследования Ярбуса напоминают, что оба паттерна — лишь тенденции: конкретный маршрут взгляда определяется задачей пользователя.
Терминальная область и CTA. Одно из самых практичных следствий диаграммы Гутенберга: кнопка призыва к действию (Call to Action) должна располагаться в терминальной области — нижнем правом углу видимой части экрана. Это не догма — яркая кнопка в центре тоже работает, потому что визуальный акцент ломает паттерн по умолчанию. Но на страницах с равномерным распределением информации размещение CTA в терминальной области увеличивает конверсию, потому что совпадает с естественным завершением маршрута взгляда.
Экспертное оценивание и UX-аудит. В 1990 году Якоб Нильсен и Рольф Молич опубликовали метод эвристической оценки — процедуру, при которой 3–5 UX-экспертов независимо проверяют интерфейс на соответствие набору эвристик (принципов юзабилити). Каждый эксперт находит свой набор проблем. Результаты объединяются. Три эксперта находят примерно 60% проблем, пять — около 75%.
Узнаёте структуру? Это и есть экспертное оценивание, адаптированное для UX. Независимость экспертов, агрегирование результатов, статистическая надёжность за счёт множественности оценок — всё это из методологии 1950-х. Нильсен, разумеется, не изобретал экспертное оценивание — он применил его к конкретной задаче. Но метод Дельфи, мозговой штурм Осборна, парные сравнения — все эти инструменты 1950-х годов продолжают жить в UX-практике.
От экспертной оценки к юзабилити-тестированию — и обратно. Между экспертной оценкой и тестированием с пользователями нет противоречия — есть дополнение. Экспертная оценка быстрее и дешевле: три эксперта за день находят большинство серьёзных проблем. Тестирование с пользователями точнее: оно показывает проблемы, которые эксперт не может предугадать, потому что эксперт — не пользователь. Лучшие UX-процессы используют оба метода: экспертная оценка на ранних стадиях (когда прототип ещё сырой), тестирование с пользователями — на поздних (когда нужна валидация).
Арнольд учил смотреть на страницу глазами читателя. Хелмер и Далки учили извлекать знание из голов экспертов. Два урока, два инструмента — и оба работают в каждом UX-проекте. Когда дизайнер размещает кнопку в нижнем правом углу лендинга — он следует Арнольду. Когда три эксперта независимо оценивают интерфейс по списку эвристик — они следуют методологии RAND. 1950-е годы продолжают проектировать наши интерфейсы.
Связанные статьи
Диаграмма Гутенберга и экспертное оценивание связаны с ключевыми концепциями UX:
- Эвристики Нильсена — метод эвристической оценки (1990) — это экспертное оценивание, адаптированное для UX. Нильсен формализовал процедуру, определил оптимальное число экспертов (3–5) и создал набор принципов для проверки.
- Принципы гештальта — законы восприятия, описанные гештальтпсихологами, объясняют, почему работает диаграмма Гутенберга: закон близости, закон непрерывности и закон замкнутости определяют, как глаз группирует и сканирует элементы на странице.
- Закон Фиттса — размещение CTA в терминальной области учитывает не только паттерн взгляда, но и моторику: кнопка должна быть достаточно крупной и расположенной так, чтобы до неё было легко «дотянуться» курсором.
- Что такое юзабилити — экспертная оценка и тестирование с пользователями — два комплементарных метода оценки юзабилити, описанные в стандарте ISO 9241.
- Что такое UX — диаграмма Гутенберга напоминает: UX начинается с понимания того, как человек физически воспринимает интерфейс — куда смотрит, что замечает, что пропускает.
Из других статей серии «История UX»:
- Советская наука 1950-х — Ярбус, системный подход, МЭСМ — Ярбус экспериментально доказал, что паттерн взгляда зависит от задачи, дополнив модель Арнольда: Z-паттерн работает «по умолчанию», но задача его перестраивает.
- Рождение эргономики как науки (1950–1954) — экспертное оценивание и эргономический анализ рабочих мест развивались параллельно в одном десятилетии.
- Открытия 1930-х: Халл, Мэйо, фон Ресторфф, Гэллап (1932–1936) — опросы Гэллапа — ещё один метод сбора данных, дополняющий экспертную оценку: не спрашивать экспертов, а спрашивать аудиторию.