Как мы карту фокусов рисовали

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

Перед тем как рассказать, что такое карта фокусов и зачем она нужна, представим две ситуации.

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

Почта. Человек видит список сообщений и небольшой фильтр сбоку. Понятно же, что можно сделать?

Еще проще. Классический пример

Разные сервисы, разные дизайны, но сразу понятно, где вы находитесь и что тут можно сделать.

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

Дизайнер за работой

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

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

Как говорить со всеми этими людьми? Мы тоже не знаем, но пытаемся сгладить углы.

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

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

В первом примере с почтой таким фокусом будет список сообщений, в гугл-поиске — сам поиск.

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

Описание сервиса через фокусы помогает проектировщику перестать мыслить «картинками» и посмотреть на все сверху.

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

Откуда ноги у фокуса растут?

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

Убедиться в легальности и надежности операций, чтобы не волноваться за свои деньги.

Через какие фокусы можно решить этот запрос? Можно сделать дашборд или страницу с правилами работы — или дать ссылку на документы.

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

На старт, внимание, рисуем!

Этот список фокусов уже дает общую картину продукта, хотя четкой структуры здесь пока нет.

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

С безопасностью в этом приложении все серьезно. Процесс верификации пользователя очень долгий (более 20 вопросов) и сопровождается видеоидентификацией. Процесс верификации обязательно должен происходить в вебе (такие вот требования): человек заходит на посадочную страницу приложения, кликает на кнопку «Зарегистрироваться» и проходит долгий процесс верификации и видеоидентификации. В случае успеха ему присылают пароли для входа в мобильное приложение. Да, стать клиентом банка может не каждый.

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

Эти две среды должны быть перелинкованы между собой. Есть и другие бизнес-требования, которые надо учитывать.

1. Настройка пароля — только в телефоне.
2. Процесс верификации — только веб.
3. Точно есть две точки входа: посадочная страница и стартовая в мобильном приложении, которые должны вести на верификацию и на «сопроводительные страницы».

Первый набросок карты. Обозначили самые первые фокусы. В документацию пока не смотрим

Если у вас перед глазами было иерархическое дерево, это нормально. Можно и так рисовать, но иерархическое представление информации — это лишь один из способов. Иерархия сразу задает жесткую структуру, а нам надо пробуждать воображение!

Также продукт должны переводить на немецкий. Глянем в документацию — там описаны крупными мазками интерфейсные элементы (спасибо менеджерам). Добавляем и их.

Второй набросок. Добавили основные фокусы

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

Про поддержку чатом совсем забыла.

Третий набросок. Конкретизировали основные фокусы. Важно отмечать еще и состояние фокусов, чтобы потом было понятнее, что надо отрисовать. Добавлен фокус «Поддержка»

Подшлифовываем внешний вид — розовый никому не нравится. Редактируем связи: дашборд явно важнее, чем история.

Четвертый набросок. Точнее обозначены фокусы, определена приоритетность

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

Показала результат коллегам — и обнаружила, что неправильно понимала продукт. Хе-хе. В вебе только процессы регистрации. Сам продукт — это просто мобильное приложение.

Все переделываем в связи с просветлением. И вот здесь-то карта фокусов оказывается очень кстати.

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

Пятый набросок. Продукт — это мобильное приложение, в вебе только процесс верификации. Добавлена смена языка и уведомления

Карте для ясности не хватает легенды. Добавим сценарии — так разработчикам будет лучше понятна логика.

Финальная версия карты фокусов

Как использовать карту

1. Карта фокусов помогает на старте проектирования, когда еще не описаны все требования. В карту удобно вставлять новые фокусы — или удалять ненужные.
2. Абсолютно точно пригодится проектировщикам, чтобы перестать мыслить картинками и увидеть продукт в целом.
3. Никакой конкретики. Карта будит воображение всей команды разработки. Появляется общее видение продукта. Здорово же, когда все участники говорят на одном языке?
4. Помогает сверить требования. Заказчик мыслит не сценариями и бизнес-требованиями. Начните составлять список его пожеланий. Очень удобно перед презентацией пройтись по нему и предугадать правки.

* * *

Даже если никто потом на карту не посмотрит, ее составитель получит более целостное представление о продукте. Когда я делала банковское приложение, карта фокусов всегда была у меня в Sketch’е перед глазами.

Карта никак вас не ограничивает, она лишь помогает начать проектировать с нуля, описывая картину в целом.