Четыре ручки в ряд: ментальные модели

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

Задача та же, руки те же. Не хватает картинки в голове: куда горячее, сколько идёт вода, чем вообще управляет этот рычаг. Дома картинка полная. Здесь её приходится собирать экспериментом, а эксперименты болезненные.

Три модели и один канал

Дон Норман нарисовал схему, которую стоит носить с собой всю карьеру. В ней три части.

Модель дизайнера — полная и верная картина того, как устроена система. Живёт в твоей голове, в коде и в документации.

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

Образ системы — всё, что продукт реально показывает: экран, подписи, иконки, звуки, поведение.

Неприятное — в том, что их связывает. Дизайнер и пользователь не встречаются никогда. Модель пользователя строится только из образа системы. Каждое объяснение, которое ты не положил в интерфейс, — каждое «это же очевидно», каждое «напишем в документации» — просто не доезжает.

Пользователь разговаривает не с тобой. Он разговаривает с экраном.

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

Аффордансы и сигнификаторы

Вернёмся на минуту к двери — на ней Норман разводит два понятия, которые постоянно сливают в одно.

Аффорданс — то, что объект делает возможным: плоская панель позволяет толкать, ручка позволяет схватить и потянуть, щель позволяет вставить. Это отношение между вещью и способностями человека, и существует оно независимо от того, заметил его кто-нибудь или нет.

Сигнификатор — знак, который сообщает, что аффорданс есть. Ручка не просто позволяет тянуть — она объявляет тягу. Норман добавил этот термин в издании 2013 года как раз потому, что «аффорданс» годами употребляли неверно, в значении «визуальная подсказка».

Различие окупается на экранах, где ничто не является ничем физически. Кнопку нельзя нажать буквально; карточку нельзя буквально потащить. Всё здесь — сигнификаторы: тень, которая говорит «приподнято», подчёркивание, которое говорит «ссылка», скруглённый прямоугольник, который говорит «нажми», курсор, который меняет форму. Убери сигнификаторы — плоская эпоха в дизайне интерфейсов это попробовала — и аффорданс становится невидимым. Вещь по-прежнему кликается. Просто никто не кликает.

Отсюда два вида провала, и они противоположны:

Сигнификатор без аффорданса — выглядит нажимаемым, ничего не происходит. Этот бесит сильнее: интерфейс соврал.
Аффорданс без сигнификатора — работает, но никто не находит. Здесь живут все скрытые жесты и все «смахните, чтобы что-то сделать» без единого видимого намёка.

Соответствие и обратная связь

Ещё две механики решают, сможет ли модель вообще сложиться.

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

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

Обратная связь — система сообщает, что произошло. Пороги установил Роберт Миллер ещё в 1968 году, и они не сдвинулись, потому что не сдвинулось человеческое восприятие:

0,1 с — воспринимается как мгновенно, как прямое манипулирование. Ниже этого индикатор не нужен.
1 с — нить мысли не рвётся, хотя задержка ощущается. Спиннер здесь ещё вреден: с ним кажется медленнее.
10 с — предел внимания. Дальше нужен заметно движущийся прогресс, а лучше ещё и текст.

Уолтер Дохерти из IBM добавил в 1982 году коммерческий угол — порог Дохерти: когда система отвечает быстрее примерно 400 мс, человек не просто меньше ждёт, он работает качественно иначе — быстрее, экспериментальнее, с вниманием на задаче, а не на машине.

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

Две пропасти

Норман делит любую проблему юзабилити на одну из двух, и деление реально помогает, когда смотришь на экран и не понимаешь, что с ним не так.

Пропасть исполнения — расстояние между тем, что человек хочет сделать, и знанием, как это сделать здесь. Что я могу? Как это делается? Где это? Скрытые функции, неподписанные иконки, неясные точки входа.

Пропасть оценки — расстояние между тем, что произошло, и пониманием, что произошло. Сработало? В каком я теперь состоянии? Что оно сделало? Отсутствующие подтверждения, молчаливые сбои, изменения без видимого результата.

Примерь это на свой продукт. Возьми одну задачу, пройди её и запиши каждый вопрос, который новичок задаст себе молча. Разложи по двум столбцам. Столбец повыше подскажет, каким дизайнером тебе быть на этой неделе.

Закон Якоба: модель собрана не у тебя

Дальше — часть, которая ранит амбициозных дизайнеров.

Формулировка Якоба Нильсена: пользователи проводят большую часть времени на других сайтах. Их модель «как устроен сайт», «как работает корзина», «что значит эта иконка» собрана из сотен других продуктов — а твоему даётся несколько минут, чтобы в неё поместиться.

Это не довод против оригинальности, а довод о том, куда её тратить. За каждое нарушенное соглашение платят переучиванием: логотип слева вверху ведёт на главную, корзина справа вверху, лупа означает поиск, подчёркнутый текст — ссылка, жест «назад», главная кнопка справа в одной экосистеме и слева в другой. Ломаешь — покупай на это что-то стоящее.

Ловушка в том, что для тебя эта цена невидима специально. Ты видел свой интерфейс тысячу раз; твоя модель безупречна. Впереди целая статья о том, почему собственная беглость — самый ненадёжный прибор в здании.

Когда модели расходятся

Худшие провалы продуктов — это просто две модели, которые расползались, пока не лопнули.

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

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

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

На практике

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

Читай свой экран как чужой. Ткни в каждый элемент и произнеси вслух, что он обещает. Потом проверь, выдаёт ли он ровно это. Всё, что обещает больше, чем делает, — ложь, которую ты выкатил.

Закрой подписи. Спрячь текст под иконками и проверь, сможешь ли ты их назвать. Почти никто не может, кроме пяти-шести по-настоящему всеобщих. Вывод не «нарисовать иконки получше», а «оставить подпись».

Ставь причину рядом со следствием. Для каждого элемента управления спроси, где виден его результат. Если ответ «на другом экране» — либо переноси элемент, либо показывай результат там, где он живёт.

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

Если модель обязана быть новой — научи один раз. Иногда у твоей концепции действительно нет прецедента. Тогда ей нужно явное разовое объяснение в момент первого столкновения — не тур по всему приложению, а одно предложение там, где понятие впервые появляется.

Проверь себя

Закрой статью и ответь своими словами:

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

Коротко

Три модели: твоя, пользователя и образ системы между ними. Свою модель человек строит только из того, что продукт показывает.
Аффорданс — возможное действие, сигнификатор — знак, что оно возможно. На экране всё является сигнификатором: убери их, и функции станут невидимыми.
Соответствие — совпадение расположения элементов управления с расположением эффектов. Расстояние между причиной и следствием ломает понимание.
Пороги обратной связи: 0,1 с — мгновенно, 1 с — мысль не рвётся, 10 с — внимание кончилось; быстрее ~400 мс человек работает в другом режиме.
Пропасть исполнения: «как мне это сделать?» Пропасть оценки: «что сейчас произошло?» Любая проблема юзабилити — одна из двух.
Закон Якоба: модели людей собраны на других продуктах, поэтому за каждое нарушенное соглашение платят переучиванием.
Если пользователь «подумал не то», спроси, что показал интерфейс такого, из-за чего его вывод стал разумным.