Прототип: разные задачи — разные инструменты

Важный навык проектировщика — владение несколькими инструментами и умение их применить в нужной ситуации. Расскажу о тех инструментах, которые я применяю для прототипирования и ситуациях, при которых инструменты актуальны.

1. Бумага и ручка (доска и маркер)

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

Вот такие «муляки» ежедневно помогают в работе.
Вот такие «муляки» ежедневно помогают в работе.

Когда применять:

  • Обсуждение с заказчиком.
  • Обсуждение с командой (доска и маркер) .
  • Предварительное проектирование (прототипирование).

Как применять:

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

«Как это должно работать?» — с таким вопросом ко мне часто заходят программисты. Я достаю ручку и бумагу, прорисовываю, прописываю всё на бумаге, рассказывая при этом вслух требования, и отдаю листок программисту. Человек такую подачу пояснений запоминает гораздо лучше, чем длинное техническое задание или рассказ без рисунка.

Плюсы:

  • Скорость.
  • Наглядность, ведущая к лучшему запоминанию.
  • Отсутствие зависимости от связи и электричества.

Минусы (много):

  • Не накапливаются электронные знания по проекту (но можно сканить/фоткать).
  • Понятно только тому, кому объяснял. Кто отсутствовал при объяснении, тот может не понять зарисовку на бумаге.
  • Малый цикл жизни — через месяц не все детали вспомнятся.
  • Через год не вспомнишь сходу, о чём речь в зарисовке. Вносить изменения сложно.
  • Одноразовый прототип.

2. wireframe.cc

Часто достаточно лишь концептуального макета, в котором не проработаны мелкие детали (wireframe — каркас). Для каркасов я использую инструмент wireframe.сс — это веб-сервис, в котором без регистрации и оплаты можно быстро набросать каркас. Каркас при этом можно сохранить: присваивается уникальная ссылка, по которой он доступен.

Довольно симпатичные каркасы получаются. Этот доступен по ссылке: https://wireframe.cc/vmPRrc

Когда применять:

  • Макеты для спецификаций и официальных заданий/отчётов.
  • Концепт для обсуждения с заказчиком, командой.
  • Пояснение для задачи.

Плюсы:

  • Скорость.
  • Простота использования.
  • Минимализм.

Минусы:

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

3. draw.io

Интерактивный прототип требуется гораздо реже, чем проектировщики пытаются это показать. Чаще можно обойтись «плоским» прототипом и пояснениями к нему. Когда мне нужен проработанный прототип (с акцентами на мелочах) для 1-2 страниц, тогда я использую сервис draw.io (через Гугл.Диск). Сервис позволяет сделать прототип интерфейса, сохранить его в виде картинки, pdf или html. Есть даже элементы интерактива (на отдельные элементы можно ставить ссылки). Всё бесплатно.

Это шаблон прототипа, который «вшит» в редактор в качестве примера.

Когда применять:

  • Когда страниц (фрагментов страниц) немного. Если много, то лучше Axure.
  • Когда важны детали и мелочи при постановке задачи.
  • Когда заказчик лучше понимает не каркасы, а почти итоговый вид.

Плюсы:

  • Готовые библиотеки элементов (есть bootstrap, материал дизайн).
  • Возможность управлять внешним видом интерфейсов — при желании можно сделать прототип финального вида.
  • Интеграция с Гугл.Диск.
  • Сохранение изменений в фоновом режиме.
  • Многопользовательская работа.

Минусы:

  • Нет возможности добавить комментарий к элементу.
  • Порой отрубается, но при этом восстанавливается до финального состояния (или почти финального).
  • Если выделить много элементов, то их перетаскивание работает с тормозами.

4. Axure

Axure позволяет делать интерактивные адаптивные прототипы, анимацию, показывать логику и зависимость внешнего вида, от ранее выполненных действий. Я делал прототипы, в которых интерфейс зависел от того, какие данные пользователь вводил на форме входа в личный кабинет. Возможности очень широкие, использую Axure с 2009 года (обновляясь, конечно).

Axure позволяет сделать в том числе всё то, что можно сделать в wireframe.cc и draw.io, но порой быстрее и удобнее закрутить шуруп отвёрткой, чем доставать для этого шуруповёрт. Axure платный.

www.axure.com — там можно уже более детально познакомиться с инструментом.

Когда применять:

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

Плюсы (самые тяжёлые):

  • Библиотеки элементов.
  • Возможность встроить средства сбора статистики (Яндекс.Метрика, например) — после этого можно анализировать поведение фокус-группы.
  • Можно выгрузить итог в виде проекта, загрузить на сервер и дать ссылку.
  • Автогенерация спецификации: если верно именовать элементы, заполнять комментарии к элементам.
  • Возможность сделать прототип, который не требует больше никакой дизайн-проработки.

Минусы:

  • Порог вхождения: чтобы освоить все функции, придётся поучиться.
  • Инсталлируемое приложение.

Резюме

Для каждого представленного инструмента есть аналог или даже несколько — используйте те, которые удобны вам. Смысл не в инструментах, а в умении использовать тот инструмент, который максимально быстро способен качественно решить возникшую задачу. Быстрое решение задачи — быстрое движение проекта вперёд. Копошение и оттачивание деталей не всегда оправдано.

Материалы по теме:

  1. Axure-прототип у Собаки Павлова, который имеет дизайнерский вид
  2. Другие инструменты МГ