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

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

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

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

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

</aside>

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

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

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

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

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

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

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

2. Если делаем редизайн банкомата и в нём недоступна клавиатура, не ленимся достать из кармана телефон и снимаем процесс движения по флоу. Качество картинки вообще не имеет значения. Главное — чтобы можно было отличить состояния друг от друга и выстроить логику взаимодействия.

3. Доходим до подтверждающего экрана «Заберите деньги». Снимаем последний скриншот.

4. Если делали фото, скидываем их с телефона через Telegram или Airdrop перекидываем на рабочий стол.