Эксперты советуютДизайнеры советуют, как тестировать приложения

Ольга Быстрова

дизайнер

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

Прототипирование нужно
для нескольких вещей:

  Посмотреть, как экран выглядит на мобильном устройстве. Для этого уже есть много всего, например, Sketch позволяет в процессе работы транслировать макет на экран. Я использую для работы Photoshop, а для вывода на экран — Xscope.

  Проверить общую логику приложения, убедиться, что все запланированные переходы понятны. Экраны можно нарисовать в чём угодно, например, в Photoshop или Sketch, а быстро настраивать переходы мне удобнее всего в Flinto. Он не очень много всего умеет, но для своих задач сделан очень хорошо. В нём есть экраны, в экранах можно указывать неподвижную шапку и низ, обозначать нажимаемые области и назначать переходы между экранами.

  Попробовать сделать необычную анимацию и проверить, насколько она получается понятной и удобной. Недавно для этих целей появился довольно удобный Pixate, но в нём всё построено на слоях, при этом нет таких понятий, как экраны и переход между ними, — это не всегда удобно.

Если Pixate скрестится с Flinto и реализует работу с экранами, будет очень удобно. Но одного суперинструмента, где и иконки можно нарисовать, и анимацию попробовать, и переходы между экранами быстро запрототипировать, пока нет».

Виктор Козырев

дизайнер Badoo

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

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

Самый большой недостаток для меня — это отсутствие в Pixate визуального отображения таймлайна, то есть всех анимаций во времени. При работе над объёмной задачей приходится держать в голове, а иногда даже выписывать все значения в секундах (keyframes), так как они задаются в текстовом виде. Но это не критично, и для большинства реальных задач этот инструмент подходит».

Дмитрий Самаренков

арт-директор
Look At Media

«Я использую Pixate. Об этом инструменте я узнал совсем недавно, приятель скинул ссылку в «Фейсбуке» с рекомендацией его попробовать. Буквально после 30 минут работы с ним мне удалось собрать прототип переходов между тремя экранами, скролом и несколькими взаимодействиями по тапу, и всё это с красивой анимацией, именно такой, какую я себе представлял. Весь прототип был на моём телефоне, и в любой момент я мог его «пощупать» и показать коллегам.

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

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