Зачем нужно прототипирование мобильных приложений и какие бывают инструменты для создания интерактивных макетов

После того как команда разработчиков и клиент нашли друг друга, перед ними возникает нелегкая задача: научиться говорить на одном языке. И как бы детально ни было написано техническое задание, всегда есть большой риск разойтись в содержании понятия "очевидное" или просто забыть указать какую-то деталь. Как раз для того, чтобы как можно раньше увидеть, как будет построена система взаимодействия мобильного приложения с пользователем, и нужен прототип.

Прототип — это, по сути, нарисованное приложение. Чтобы прототип получился интерактивным, дизайнер прорисовывает все экраны будущего приложения, а специальная программа собирает эти экраны в цельную модель, устанавливая взаимосвязи и ссылки. На выходе получается такая модель приложения, в которой, например, работают кнопки. Интерактивный прототип можно сравнить с 3D-моделью будущего здания, которую разрабатывает архитектор задолго до начала строительных работ.

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

Зачем клиенту нужен прототип мобильного приложения?

Прототип позволяет:

• увидеть приложение в действии и понять, насколько корректно разработчики понимают идею и ТЗ;
• оценить будущее приложение с точки зрения пользователя;
• определить, нужно ли вносить изменения в схему взаимодействия приложения с пользователем;
• избежать дополнительных финансовых и временных затрат, если выявлены несоответствия.

Иметь под рукой готовую модель приложения полезно еще и в том случае, если:

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

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

Какие бывают инструменты для создания прототипа?

Условно все инструменты можно разделить на 3 группы по типу носителя:

1. на бумаге;
2. на экране компьютера;
3. на мобильном устройстве.

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

Использовать же прототип на компьютере разумно, если нужного девайса нет под рукой. Однако на деле могут возникнуть некоторые неточности, и придется совершенствовать уже готовое приложение. Например, на компьютере вряд ли удастся полноценно протестировать все элементы управления. Скорее всего, вам нужно знать, насколько удобно применять жесты и пользоваться приложением, держа телефон в одной руке. А еще вы захотите проверить, достаточно ли велики кнопки, чтобы пользователь мог попасть по ним с первого раза. Придерживаться принципов UX-дизайна получится полностью, если тестировать прототип исключительно на мобильном устройстве, под которое и создается ваше приложение.

Prototyping on Paper — приложение, которое объединяет карандаш, бумагу и iPhone. Можно сфотографировать нарисованные от руки эскизы, и сервис автоматически отрегулирует яркость и размер, позволит сделать симулятор будущего приложения. С помощью POP можно создать интерактивный прототип и проследить, как приложение будет реагировать на нажатие той или иной кнопки. Есть и встроенная система фидбэка. С ее помощью оценить прототип, предложить изменения и отметить сильные стороны в комментариях могут все пользователи, у которых есть доступ. Prototyping on Paper идеально подходит для быстрого прототипирования, не требующего детальной проработки дизайна.

Flinto — это редактор для создания интерактивного прототипа на основе готовых макетов: как детально проработанных мокапов, так и быстрых набросков. Главное отличие от POP заключается в том, что у тех, кто использует Flinto, есть возможность сделать прототип действительно похожим на будущее приложение. Работает Flinto так: агрегирует все существующие экраны и позволяет легко и удобно расставлять ссылки между разными элементами. Если загруженные макеты проработаны дизайнером тщательно, то прототип выглядит очень реалистично. Создатели Flinto стремились максимально приблизить поведение прототипа к привычному для пользователю поведению приложения. Например, Flinto умеет красиво и натурально скроллить. После того как прототип готов, его можно загрузить прямо на рабочий стол устройства для более удобной демонстрации.

Proto.io — профессиональный сервис для прототипирования. Большое количество функций позволяет запускать динамические прототипы на реальных девайсах с поддержкой всех жестов и всех форматов устройств. Помимо возможности реализовать различные элементы управления и максимально приблизить прототип к будущему приложению, у Proto.io предусмотрена хорошая система обратной связи. Чтобы получить обратную связь, не обязательно физически присутствовать рядом с командой. Это дает возможность сотрудничать со специалистами из других городов или даже стран, а также не позволяет затягивать разработку, если заказчик находится в командировке.

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

Сколько денег нужно потратить, чтобы хорошо сэкономить?

Качественный прототип сводит финансовые риски, связанные с разработкой приложений, к минимуму. Но далеко не каждый достойный инструмент для создания прототипа можно заполучить бесплатно (POP). У одних приложений цена зависит от количества проектов (InVision), у других — от количества пользователей, имеющих доступ к проекту (Flinto). Есть и такие, у которых тарифные планы зависят как от количества проектов, так и количества пользователей (Proto.io).

Гибкие цены позволяют выбрать оптимальный инструмент таким образом, чтобы извлечь из затеи с прототипами максимальную выгоду без потери в качестве. Мы, Improve Digital, остановились на InVision, поскольку для наших задач это лучший инструмент по соотношению цена/функциональность.

Далее в этой статье рассмотрим подробнее, чем может быть полезен InVision.

Андрей Чевозёров, технический лидер Improve Digital:

"Сам инструмент InVision нам посоветовали наши клиенты из проекта "Сердитый гражданин". Рекомендательный сервис Имхонет, с которым нас связывают длительные и плодотворные партнерские отношения, тоже использует в своей работе прототип на схожем с InVision инструменте — flinto.com. Прототип в InVision хорош тем, что его можно запустить прямо на смартфоне или планшете, и он будет внешне вести себя так же, как готовое приложение.

В нашей практике было несколько проектов, в которых мы использовали интерактивные прототипы, и каждый раз заказчик был доволен результатом. Это гораздо удобнее, чем показывать схему экранов: без специальной технической подготовки такую схему сложно понять и еще сложнее представить, как все экраны сложатся в единый интерфейс. Поэтому мы отказались от демонстрации UX-схем в пользу интерактивных прототипов. И наших клиентов, и проектную команду такой способ взаимодействия устраивает".

В плане функциональности InVision позволяет:

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

Готовые эскизы и прототипы можно показать заказчику

Для этого нужно загрузить проект и эскиз, поделиться ссылкой с участниками обсуждения, и все, у кого есть доступ, смогут увидеть работающий прототип. Замечания по проекту можно оставлять в комментариях, а также в InVision предусмотрены online-дискуссии и ветки комментариев для конкретных разделов и точек проекта.

Зачем еще нужны интерактивные прототипы?

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

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

Резюме

Прототип способен выявить и ликвидировать все основные недопонимания между заказчиком и разработчиками, которые как минимум в 80% случаев могут привести к серьезным проблемам.

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

Интерактивный прототип можно создать при помощи разных (как платных, так и бесплатных) инструментов. При выборе инструмента стоит руководствоваться не только ценой, но и функциональностью. Если вы хотите создать быстрый прототип по наброску в блокноте, вам будет достаточно бесплатного Prototyping on paper. Когда же речь идет о полноценном прототипе, включающим в себя продуманный дизайн, следует обратиться к более продвинутым приложениям: InVision, Flinto, Proto.io и др.

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

Автор статьи:
Светлана Шарипова,
Интернет-аналитик

Понравилась статья? Поделитесь с коллегами и друзьями: