Hoff NDS: спецификация нейроинклюзивной дизайн-системы Hoff Research

Работа в процессе (WIP): эта спецификация ещё меняется.

Это Hoff NDS, дизайн-система, которую я использую в продуктах Hoff Research и применяю, иногда незаметно, в каждом новом проекте. Доказательная база каждого правила лежит в посте о дизайн-системе для нейроотличных людей. Здесь только норма.

Цель и охват

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

• Постоянные, например слабое зрение, дислексия и аутизм
• Временные, например травма, усталость и действие лекарств
• Ситуативные, например шумное место, плохая связь и стресс

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

Это не визуальная тема. Это набор правил с обоснованием. Каждый раздел называет правило, причину, нейротипы, которым оно служит, и принципы UX, на которых оно стоит. Если в правиле есть число, это число нормативно.

Основы

Когнитивная нагрузка. У людей с СДВГ при высокой нагрузке ниже результативность и сильнее разброс времени реакции. Поэтому видно только то, что служит цели экрана. Если элемент не помогает задаче, он от неё отвлекает.

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

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

Персонализация как требование. Сенсорные предпочтения различаются между нейротипами и внутри них. Система требует минимум три цветовые темы (тёмную, светлую и высококонтрастную), три размера текста и переключатель, отключающий анимацию. Эти настройки на виду, а не спрятаны в параметрах.

Сохранение сложности. Есть минимальная сложность, которую нельзя убрать, не разрушив функцию. Упрощение сверх этого только всё запутывает. Цель в том, чтобы убрать лишнее, а не функцию.

Дизайнер должен разбираться в цвете, да

Выбор цвета определяет контраст, а не эстетика. Для основного текста цель 7:1 и выше (уровень AAA). Абсолютный минимум для любого информативного текста 4,5:1 (уровень AA).

Правило. Вся палитра малонасыщенная: никакого неона, кричащих цветов и предельной яркости. Цвет никогда не бывает единственным носителем информации. Любое состояние, переданное цветом, сопровождается текстом, иконкой или формой.

Причина. Яркий цвет и сильный хроматический контраст вызывают дискомфорт и сенсорную перегрузку у людей с аутизмом, СДВГ и зрительным стрессом. При СДВГ есть данные о сниженном различении цвета, в основном на сине-жёлтой оси, а красно-зелёная цветовая слепота самая распространённая в популяции. И то и другое подкрепляет запрет на цвет как единственный сигнал. Тёмная тема стоит по умолчанию, потому что значительная часть использования приходится на ночь, когда меньше света с экрана меньше мешает.

Эталонная палитра:

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

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

Нейротипы: слабое зрение, цветовая слепота, синдром Ирлен и зрительный стресс, аутизм, СДВГ. Принципы: однородная связность и эффект эстетики-юзабилити, с оговоркой, что красота не должна скрывать проблему.

Типографика, прежде чем потратить целый день на поиск шрифта

Правило. Гуманистический гротеск с хорошо различимыми буквами. Основной текст 1rem–1,25rem при базе 16px, то есть 16–20px. Межстрочный интервал 150–170%. Межбуквенный интервал немного увеличен: 0,005em–0,02em для основного текста и около 0,03em для мелкого, например подписей и меток. Заголовки минимум на 20% крупнее основного текста и отличаются насыщенностью, а не сменой гарнитуры. Длина строки не больше 66 знаков.

Причина. У гуманистических шрифтов шире апертуры и различимее формы букв, что поддерживает чтение на обычных экранах и в разных размерах. Увеличенные интервалы снижают краудинг, который сильно мешает людям с дислексией, и это типографическое изменение с наибольшей доказательной базой. Шрифты, продаваемые как «для дислексии», не показали пользы в контролируемых исследованиях.

Знаки без двойников. Шрифт однозначно различает прописную I, строчную l и цифру 1; зеркальные буквы b, d, p и q; ноль и O. Буквенно-цифровые последовательности, такие как пароли, коды и идентификаторы, выводятся шрифтом, который гарантирует эти различия, с дополнительным интервалом.

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

Нейротипы: дислексия, дискалькулия, слабое зрение, исполнительные функции, синдром Ирлен. Принцип: прегнантность.

Числа универсальны

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

Причина. Дискалькулия представляет собой стойкую трудность с числами, не зависящую от возраста и образования. Оставшееся время, показанное только числом, для некоторых людей ничего не значит. Наполовину заполненная полоса с текстом «50%, 3 из 6» передаёт те же данные по трём каналам. Но есть предел: полностью заменить число абстрактной анимацией уже слишком и только путает. Число остаётся, визуальная опора идёт рядом.

Нейротипы: дискалькулия, дислексия, исполнительные функции, слабое зрение. Принципы: прегнантность, закон Теслера, бритва Оккама.

Интервалы, воздух (пожалуйста) и вёрстка

Правило. Шкала интервалов с шагом 4: 4, 8, 12, 16, 24, 32, 48, 64 и 96 пикселей. Щедрое пустое пространство между группами. Связанное стоит рядом, несвязанное заметно разделено. Одна основная колонка для чтения; контент никогда не соревнуется в параллельных колонках одного уровня. Навигация, контент и действия остаются в одной и той же зоне на каждом экране и при любом размере окна.

Причина. Пустое пространство тоже информация: оно сообщает группировку и иерархию ещё до чтения. Плотная вёрстка повышает цену просмотра, и при СДВГ штраф больше. Фиксированная шкала убирает произвольные решения и сохраняет предсказуемый ритм.

Нейротипы: СДВГ, дислексия, аутизм, исполнительные функции. Принципы: прегнантность, однородная связность, закон Якоба.

Цели касания и клика

Правило. Минимальная цель 48 на 48 пикселей для любого интерактивного элемента. Основное действие 60 на 60. В детских интерфейсах минимум 60, а для критичных действий 80–100 пикселей, особенно до 8 лет. Между соседними целями не меньше 8 пикселей, по возможности 16. Активная зона может быть больше нарисованного элемента и прощать касание чуть мимо.

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

Нейротипы: диспраксия, СДВГ, слабое зрение, дети в процессе моторного развития. Принцип: закон Фиттса.

Движение

Этот раздел про здоровье, а не про эстетику. Ничто не мигает чаще трёх раз в секунду, без исключений, из-за риска фотосенситивного припадка.

Правило. Переходы длятся 200–500 миллисекунд, они медленные, предсказуемые и одного типа во всём продукте; лучше прозрачность и цвет, чем большое смещение. Анимация занимает меньше трети экрана. Никакая анимация не крутится сама по кругу. Системная настройка уменьшения движения соблюдается всегда, анимация заменяется простой сменой прозрачности, и у интерфейса есть ещё собственный переключатель, отключающий всё движение. Запрещены: непрерывное вращение, параллакс, автоматическая карусель, влетающие элементы, конфетти и любое движение, о котором не просили.

Причина. Движение на экране вызывает тошноту, головокружение и дезориентацию у людей с вестибулярными нарушениями. Нерелевантная анимация мешает людям с аутизмом сильнее, чем в среднем. При СДВГ постоянное движение становится непрерывным отвлечением даже на периферии зрения, потому что глаз тянется за ним.

Нейротипы: фотосенситивная эпилепсия, вестибулярное расстройство, аутизм, СДВГ, высокочувствительные люди. Принцип: порог Доэрти.

Кнопки, ссылки и поля

Правило. То, на что можно нажать, выглядит нажимаемым и визуально отличается от любого декоративного элемента. У каждого интерактивного элемента четыре видимых состояния: покой, наведение, фокус и нажатие. Фокус представляет собой кольцо толщиной 3 пикселя с отступом 2–3 пикселя, высококонтрастного цвета, видимое в любой теме, и его никогда не убирают. На экране одно основное действие, с ясной иерархией между основным, второстепенным и неприметным. Иконка усиливает смысл, но не заменяет текст в важном действии.

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

Причина. Кнопки и ссылки являются самыми критичными элементами страницы. Доступность не ограничивается семантическим HTML и подписями для скринридера: визуальный дизайн решает, засомневается человек или будет действовать. Сомнение это нагрузка, а неоднозначность это отложенная ошибка.

Нейротипы: диспраксия, дислексия, СДВГ, исполнительные функции, пользователи клавиатуры и скринридеров. Принципы: закон Фиттса, эффект фон Ресторф, бритва Оккама.

Формы и предотвращение ошибок

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

Сообщение об ошибке не извиняется, не обвиняет и не бывает расплывчатым. Оно говорит, что случилось и как это исправить, одной фразой. Например: «Не хватает двух цифр. В мобильном номере 11 цифр вместе с кодом страны.»

Причина. Перед длинным и непрозрачным сценарием люди с СДВГ или трудностями исполнительных функций склонны бросить или выбрать самый дешёвый путь, даже неверный. Короткий шаг с видимым положением превращает одну большую цену в несколько маленьких и даёт ощущение продвижения.

Нейротипы: СДВГ, исполнительные функции, дискалькулия, тревожность. Принципы: закон Миллера, закон Постела, закон Паркинсона, правило пика и конца.

Сообщения системы

Правило. Предупреждения, проверки, уведомления и сообщения следуют одному визуальному образцу для каждого типа во всём продукте. Успех тёплый и прямой. Ошибка вежливая и нацелена на решение. Название действия сохраняется на протяжении всего сценария: кнопка «опубликовать» даёт подтверждение «опубликовано», а не синоним. Уведомление существует, чтобы служить человеку, а не возвращать его: никакого повторного вовлечения, искусственной срочности или выдуманного дефицита. Человек сам решает, что получать, и по умолчанию это минимум.

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

Нейротипы: СДВГ, дислексия, исполнительные функции, аутизм. Принципы: закон Якоба, закон Миллера, правило пика и конца.

Субтитры, звук и медиа

Правило. У всех медиа с речью есть синхронные субтитры: светлый текст на сплошном тёмном фоне, блоками не длиннее двух строк. Звук никогда не включается сам. В каждом плеере есть пауза, перемотка назад и регулировка скорости. Важный контент никогда не существует только в аудио или только в видео: всегда есть текстовая альтернатива.

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

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

Содержание и тон текста

Правило. Активный залог, короткие предложения, одна мысль на предложение, одна тема на абзац. Название описывает то, что человек контролирует и узнаёт, а не то, как построена система. Кнопка говорит ровно то, что произойдёт: «сохранить изменения», а не «отправить». Простой язык без сюсюканья. Жаргон только тогда, когда это термин, который человеку нужно выучить, и тогда он объясняется при первом упоминании. Каждое слово на экране работает; то, что не помогает понять, убирается.

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

Нейротипы: дислексия, СДВГ, исполнительные функции, люди, для которых язык не родной. Принципы: бритва Оккама, закон Теслера.

Паттерны интерфейса

Правило. Сначала контент: каждый экран исходит из цели человека, и всё, что ей не служит, убирается. Последовательная навигация, одни и те же пункты на одних и тех же местах. Никаких всплывающих окон, прерывающих задачу, кроме случаев реального и немедленного риска. Никакой смены вёрстки без действия человека. Контролируемая плотность: показывать больше по запросу, а не вываливать всё сразу. В длинных сценариях доступен режим фокуса, скрывающий всё, что не относится к текущей задаче.

Причина. Перед множеством конкурирующих вариантов люди с СДВГ склонны застывать или выбирать самую дешёвую задачу. Сохранять сложность означает тратить её там, где она создаёт ценность: в содержании, а не в управлении.

Нейротипы: СДВГ, аутизм, исполнительные функции, тревожность. Принципы: парадокс сложности, закон Хика, закон Якоба, эффект эстетики-юзабилити.

Токены

Учтённые нейротипы

Принципы UX

Чек-лист соответствия

Перед публикацией любого экрана:

• Контраст всего информативного текста не ниже 4,5:1, а основного текста 7:1
• Гуманистический гротеск с различимыми I, l и 1, b, d, p и q, 0 и O
• Межстрочный интервал от 150% и строки до 66 знаков
• Каждая интерактивная цель от 48 пикселей и 8 пикселей воздуха вокруг
• Видимый фокус клавиатуры на каждом интерактивном элементе
• Никаких вспышек чаще трёх в секунду
• Уменьшение движения соблюдается, локальное управление движением есть
• Три темы и три размера текста работают
• Видимая подпись у каждого поля и ошибки, нацеленные на решение
• Длинные числа разбиты, количества с визуальной опорой
• Медиа с речью с субтитрами и без автозапуска
• Одно основное действие на экран
• Название каждого действия одинаково от начала до конца сценария
• Никаких механик навязчивого вовлечения

Процесс

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

Hoff Research. Make it simple, but significant.