Чтобы лучше понимать любой интерфейсный процесс, раскладываем его на скриншоты в Фигме и анализируем по шагам.
Эта статья может дать тебе прорыв в понимании того, как анализировать интерфейсные системы и с чего начинать проектирование. Сегодня расскажу пару слов о подходе, который я назвал «реверс-дизайном» и который считаю очень мощной техникой сбора данных перед редизайном любого сложного интерфейса.
Реверс-дизайн — это создание прототипа какого-либо продукта из существующего дизайна при помощи скриншотов всех его ключевых состояний. Это даёт возможность получить интерактивную раскадровку экранов, чтобы найти места для улучшения дизайна.
Название это я придумал по аналогии с реверс-инжинирингом в программировании. Цель — исследовать готовый скомпилированный код в Ассемблере, а затем воссоздать его на более высокоуровневых языках. После этого его можно перерабатывать по своему усмотрению и подружить с железом.
Тот же подход можно легко переложить на продуктовый дизайн. Представим, что мы берём в работу новый интерфейсный проект. Возможно, это приложение для такси, старая админка или интерфейс банкомата. Тип интерфейса не имеет значения. Мы начинаем с чистого листа, потому что исходников конечно же ни у кого нет. Зато есть работающий продукт (прод).
Чтобы приступить к редизайну, мы можем идти двумя путями:
- Путь 1. По-пионерски проектировать всё с нуля, подсматривая в прод и получая данные от нашего аналитика/PM. Так мы рискуем столкнуться с творческим тупиком и страхом белого листа, от чего получим неуверенные результаты.
- Путь 2. Мы можем сделать полный слепок доступных функций существующей старой системы при помощи скриншотов. После этого мы раздербаним её на список сценариев в зависимости от того, что она позволяет делать пользователю.
Даже самый неудобный и уродливый интерфейс несёт нам ценные данные о том, что у него происходит под капотом: какие данные он у нас запрашивает и какие выдаёт обратно. Если он в принципе способен выполнять какую-то функцию, он уже несёт ценность в качестве артефакта для дальнейшего проектирования.
Порядок действий
- Выбираем флоу, который мы будем анализировать и улучшать редизайном. Например, процесс снятия наличных в банкомате. Важно, чтобы он был линейным и от точки А приводил нас в точку Б: мы на стартовом экране → мы сняли деньги.
- Если делаем редизайн банкомата и в нём недоступна клавиатура, не ленимся достать из кармана телефон и снимаем процесс движения по флоу. Качество картинки вообще не имеет значения. Главное — чтобы можно было отличить состояния друг от друга и выстроить логику взаимодействия.
- Доходим до подтверждающего экрана «Заберите деньги». Снимаем последний скриншот.
- Если делали фото, скидываем их с телефона через Telegram или Airdrop перекидываем на рабочий стол.
- Нумеруем файлы, чтобы было легче их выстроить в правильной последовтаельности в Фигме. Обычно флоу укладывается в 20 снимков.
- Переносим их в Фигму перетаскиванием и жмём до удобного размера по ширине.
- Из скриншотов или фото собираем линейный флоу, оборачивая их фреймами. В качестве хотспотов используем прямоугольники без заливки и обводки, вешаем на них переходы между экранами.
Наша задача — снимать скриншот перед каждым действием, которое делаем в интерфейсе, а также снимать его реакцию на дейтвия.
Плюсы подхода
- Это довольно быстро даёт прозрачную картину того, как работает продукт. Это гораздо быстрее, чем воссоздавать старый дизайн руками в Фигме или зарисовывать схематичные экраны на доске или бумаге.
- Реверс-дизайн полезен в качестве фундамента и в демонстрационных проектах для портфолио. Если ты умеешь выстроить флоу и улучшить его, это даёт тебе гораздо больше контекста для принятия решений. Так легче показать, что ты круто умеешь проектировать. Это точно более убедительно, чем запилить цветастый макет с сиротливым кроссовком на Дрибле.
- Так мы получаем полный контроль над этим флоу и можем на его основе собирать новый дизайн, если у нас уже есть UI-кит. Можем переосмысливать каждый из переходов и применяемые паттерны.
- Разработчики рады, что продукт может плавно эволюционировать, а не начинается с чистого листа. Реверс-дизайн бережно консервирует уже существующую логику. Если нужно, он позволяет внедрять изменения мелкими итерациями. Но иногда
Господь, жгивсё настолько плохо, что скриншот-прототип служит лишь подсказкой и для основы непригоден. - Команда получает доступ к прототипу текущей версии продукта в Фигме, не обязательно даже получать доступы на прод.
- Реверс-дизайн можно использовать как инструмент обучения какому-либо продукту. В этом случае можно разместить последовательные экраны не в Фигме, а в Ноушне и подписать последовательность действий, получится инструкция.
Если тема реверс-дизайна вызовет отклик, я запишу пошаговое видео о том, как собрать флоу на скриншотах.
Я веду /designer — телеграм-канал о продуктовом дизайне и проектировании.