Счастливый путь — пятая часть работы

Дизайнер показывает сценарий: четыре экрана, всё чисто, всё работает. Комната одобряет. Уходит в релиз.

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

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

Проектируй путь, а не страницы

Первый сдвиг — перестать думать экранами и начать думать сценариями: упорядоченной последовательностью шагов, которыми человек что-то доводит до конца, включая то, откуда он пришёл и куда пойдёт потом.

Три вещи, которые сценарий делает видимыми, а экран — никогда:

Точки входа. Люди не всегда начинают с твоего начала. Они приходят по ссылке из письма, из поисковой выдачи, из расшаренного объекта, из уведомления, из закладки четырёхмесячной давности. Каждая из них для кого-то является первым экраном и обязана работать без всего того, что настроил бы предыдущий шаг.

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

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

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

Каждый экран — это пять экранов

«Стек интерфейса» Скотта Хёрффа — самый полезный чек-лист в дизайне интерфейсов, и применяется он за девяносто секунд.

Идеальное состояние. Всё есть, всё загружено. То самое, которое ты спроектировал и показал.

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

Состояние загрузки. Данные едут. Скелетоны (форма контента в сером) лучше спиннеров для всего с предсказуемой раскладкой, потому что сообщают, что именно приедет. А до примерно секунды не показывай ничего: мигнувший спиннер заставляет быструю вещь выглядеть сломанной.

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

Состояние ошибки. Что-то не получилось. Что именно из множества, что человек может с этим сделать и потерял ли он что-нибудь.

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

Три вида пустоты

Им нужны совершенно разные решения, и путать их — частая ошибка.

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

Очищено пользователем — ты закончил. Признай. Пустой ящик входящих — это достижение, а не отсутствие. И предложи выход: что теперь?

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

Сначала предотврати, потом прости

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

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

Полезно ещё понимать, какой именно сбой ты чинишь. Различение Джеймса Ризона, принятое Норманом:

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

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

Спрашивай меньше. Отменяй больше.

Время — часть дизайна

Всё выше предполагает, что экран уже здесь. Часто его ещё нет.

Пороги из предыдущих статей продолжают действовать: мгновенно до 0,1 с, мысль держится до 1 с, внимание кончается на 10 с. Дальше нужно видимое движение и, желательно, слова о происходящем — «Загружаем 3 из 12» бесконечно лучше полоски, потому что это проверяемо.

Два приёма для многошаговых сценариев:

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

Подаренный прогресс. Ран Кивец с коллегами (2006) раздавали кофейные карточки: одной требовалось 10 штампов, другой 12, но она приходила с двумя уже проставленными. Оставшаяся работа одинакова — но группа с подаренными штампами доходила до конца заметно чаще. Начать многошаговый сценарий с «шаг 1 из 4 выполнен» — не уловка, если первый шаг действительно сделан; это честное использование того, как работает мотивация.

Крайние случаи не на краю

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

Список, который стоит проходить каждый раз:

Ноль, один, много и 10 000. Списки, рассчитанные на шесть элементов и получившие две тысячи. Или один.
Длинный контент. Имя в сорок символов, название товара, переносящееся на четыре строки, язык, где слова на 60% длиннее английских.
Медленно и офлайн. Тоннель метро, гостиничный вайфай, пригород с 3G.
Прерывание. Звонок посреди сценария, закрытая вкладка, севшая батарея.
Время. Часовые пояса, границы суток, «вчера» для того, кто на одиннадцать часов дальше.
Второе устройство. Начал с телефона, заканчивает на ноутбуке.
Не владелец. Общий аккаунт, экран коллеги, администратор, действующий за кого-то.
Права. Видеть можно, редактировать нельзя. Что заблокированная кнопка говорит о причине?

На практике

Рисуй сценарий раньше экранов. Квадратики для решений, стрелки для переходов, и отметь каждую точку, где человек может уйти.

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

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

Замени одно подтверждение отменой. Возьми одно «вы уверены?» и преврати его в действие с пятисекундной плашкой отмены. Посмотри, насколько всё ускорится.

Проверь сообщения об ошибках на три части. Что случилось, почему, что делать дальше. У большинства есть только первая, да и та на языке базы данных.

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

Проверь себя

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

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

Коротко

Проектируй сценарии, а не экраны: точки входа, прерывания и возвраты, и то, что происходит после успеха.
У каждого экрана пять состояний — идеальное, пустое, загрузка, частичное, ошибка. Большинство команд проектирует одно, а остальные угадывает.
Пустые состояния бывают трёх видов: первый запуск (учи), очищено (признай), ничего не найдено (спасай). Никогда не тупик.
Предотвращение сильнее сообщений об ошибках; пока-ёкэ делает неверное действие невозможным, а не наказуемым.
Промахам нужны ограничения и отмена; заблуждениям — лучшая модель. Подтверждающие окна не чинят ни того, ни другого и прокликиваются вслепую.
Отмена сильнее «вы уверены?»: бесплатна для правого и полностью спасает ошибшегося.
Оптимистичные обновления делают медленную сеть быстрой на ощупь; подаренный прогресс чаще доводит многошаговые сценарии до конца.
Крайние случаи не на краю: ноль и 10 000, длинные имена, офлайн, прерывание, часовые пояса, второе устройство, чужой аккаунт.