Реверс-дизайн
Реверс-дизайн

Реверс-дизайн

Автор: Саша Окунев 13 ноября 2021 #первые_шаги

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

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

Название это я придумал по аналогии с реверс-инжинирингом в программировании. Цель — исследовать готовый скомпилированный код в Ассемблере, а затем воссоздать его на более высокоуровневых языках. После этого его можно перерабатывать по своему усмотрению и подружить с железом.

📎
Вот интересный пример реверс-инжиниринга, в котором пользователь TJ Дмитрий Новиков воссоздаёт нужный ему софт и микросхему для лифта.

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

Чтобы приступить к редизайну, мы можем идти двумя путями:

  • Путь 1. По-пионерски проектировать всё с нуля, подсматривая в прод и получая данные от нашего аналитика/PM. Так мы рискуем столкнуться с творческим тупиком и страхом белого листа, от чего получим неуверенные результаты.
  • Путь 2. Мы можем сделать полный слепок доступных функций существующей старой системы при помощи скриншотов. После этого мы раздербаним её на список сценариев в зависимости от того, что она позволяет делать пользователю.

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

Порядок действий

  1. Выбираем флоу, который мы будем анализировать и улучшать редизайном. Например, процесс снятия наличных в банкомате. Важно, чтобы он был линейным и от точки А приводил нас в точку Б: мы на стартовом экране → мы сняли деньги.
  2. Наша задача — снимать скриншот перед каждым действием, которое делаем в интерфейсе, а также снимать его реакцию на дейтвия.

  3. Если делаем редизайн банкомата и в нём недоступна клавиатура, не ленимся достать из кармана телефон и снимаем процесс движения по флоу. Качество картинки вообще не имеет значения. Главное — чтобы можно было отличить состояния друг от друга и выстроить логику взаимодействия.
  4. Доходим до подтверждающего экрана «Заберите деньги». Снимаем последний скриншот.
  5. Если делали фото, скидываем их с телефона через Telegram или Airdrop перекидываем на рабочий стол.
  6. Нумеруем файлы, чтобы было легче их выстроить в правильной последовтаельности в Фигме. Обычно флоу укладывается в 20 снимков.
  7. Переносим их в Фигму перетаскиванием и жмём до удобного размера по ширине.
  8. Из скриншотов или фото собираем линейный флоу, оборачивая их фреймами. В качестве хотспотов используем прямоугольники без заливки и обводки, вешаем на них переходы между экранами.

Плюсы подхода

  • Это довольно быстро даёт прозрачную картину того, как работает продукт. Это гораздо быстрее, чем воссоздавать старый дизайн руками в Фигме или зарисовывать схематичные экраны на доске или бумаге.
  • Реверс-дизайн полезен в качестве фундамента и в демонстрационных проектах для портфолио. Если ты умеешь выстроить флоу и улучшить его, это даёт тебе гораздо больше контекста для принятия решений. Так легче показать, что ты круто умеешь проектировать. Это точно более убедительно, чем запилить цветастый макет с сиротливым кроссовком на Дрибле.
  • Так мы получаем полный контроль над этим флоу и можем на его основе собирать новый дизайн, если у нас уже есть UI-кит. Можем переосмысливать каждый из переходов и применяемые паттерны.
  • Разработчики рады, что продукт может плавно эволюционировать, а не начинается с чистого листа. Реверс-дизайн бережно консервирует уже существующую логику. Если нужно, он позволяет внедрять изменения мелкими итерациями. Но иногда Господь, жги всё настолько плохо, что скриншот-прототип служит лишь подсказкой и для основы непригоден.
  • Команда получает доступ к прототипу текущей версии продукта в Фигме, не обязательно даже получать доступы на прод.
  • Реверс-дизайн можно использовать как инструмент обучения какому-либо продукту. В этом случае можно разместить последовательные экраны не в Фигме, а в Ноушне и подписать последовательность действий, получится инструкция.
  • 📎
    Кстати, когда составлял справочник всех команд и клавиш Фигмы, я тоже воспользовался этой техникой и снял скриншоты всех развёрнутых меню Фигмы.

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

Я веду /designer — телеграм-канал о продуктовом дизайне и проектировании.