24 мая в офисе Mail.ru прошел третий Dribbble Meetup, на котором собралось огромное количество дизайнеров со всей России. На нем я рассказал про InVision — инструмент создания интерактивных прототипов, который мы используем в SoftFacade. На основе этого рассказа я написал статью, которую и предлагаю вашему вниманию.

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

Для чего мы используем интерактивные прототипы?

Для начала, хочу уточнить для чего мы используем интерактивные прототипы. Чтобы у вас было четкое представление какие цели мы преследуем в первую очередь.

1. Презентация и обсуждения с клиентом

Первое, и наверное самое важное — презентация клиенту.

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

То есть одна из главных целей — это продажа. Я думаю, для вас не секрет, что хорошая подача это 50% успеха. Так вот, такая подача это 80% успеха.

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

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

2. Наглядное пособие разработчикам

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

3. Прототипы ради прототипов

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

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

4. Пользовательские тестирования

Меня часто спрашивают, используем ли мы прототипы для тестирования. Мой ответ — нет. Не используем. Почему? Это отдельный вопрос, который можно обсуждать очень долго. Если в кратце, то я считаю, что тестировать нужно финальный продукт, с реальными данными, в реальных условиях и на реальных пользователях. Иначе это не имеет никакого смысла. Я с удовольствием могу с кем-нибудь на эту тему поспорить ☺

Что мы искали?

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

В итоге, мы остановились на InVision. Еще один момент — я не хочу ничего никому доказывать или убеждать кого-то, что InVision лучший инструмент всех времен и народов. Просто для нас он оказался лучшим из того, что представлено на рынке на данный момент. Сочетание функциональности с приятным интерфейсом и удобством использования послужило причиной нашего выбора этого инструмента. Вы можете мне долго рассказывать про то, какой замечательный инструмент Axure или что можно делать прототипы в Keynote, но это врятли что-то изменит. Я пробовал практически все. Поэтому сразу хочу предостеречь вас от вопросов в духе «Чем вам не нравится Axure в нем можно сделать то же самое и даже больше». Не нравится. Нельзя.

Почему именно InVision?

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

1. Поддержка устройств

Первое, что меня подкупило — это поддержка устройств. InVision предоставляет возможность работать с вебом, iPad, iPhone и Android телефонами.

Однажды, у меня возникла потребность в создании прототипа для Андройд телефона и я такого инструмента не нашел. Я начал использовать Fluid, у них по-моему у единственных на тот момент была более-менее нормальная поддержка Андройд устройств, но буквально через неделю или две после того, как я начал им пользоваться, InVision выкатил апдейт с поддержкой гугловской оси.

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

2. Поддержка родных анимаций

Эта функция есть практически у всех инструментов на рынке, но я решил все равно ее упомянуть.

InVision предоставляет 8 видов переходов между экранами:

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

Все эти анимации используются и для iOS, и для Andoid. Для последнего парочки не хватает — для более нативного взаимодействия, но это не критично.

3. Поддержка жестов

Тоже интересная фишка, которая позволяет приблизить взаимодействие к реальному приложению. В InVision поддерживается 6 жестов:

• обычное нажатие;
• двойное нажатие;
• два горизонтальных и два вертикальных свайпа.

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

4. Отсутствие сторонних приложений

Чтобы посмотреть прототип на устройстве не нужно ничего устанавливать на телефон.

Заставлять клиента ставить стороннее програмное обеспечение не всегда удобно. Я просто отправляю клиенту ссылку (есть возможность прямой ссылки, отправки по почте или смс), клиент открывает ее в браузере телефона и сохраняет на рабочий стол. Он нажимает на нее, как если бы запускал обычное приложение и получает прототип. Это работает как на iOS, так и на Android.

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

5. Прокрутка экранов

Еще один шаг приближения прототипа к реальному приложению — поддержка прокрутки. Можно сделать экран любой длинны и в прототипе он будет прокручиваться, как в реальном приложении.

Обратите внимание, что на представленном примере навбар остается на месте. InVision позволяет отметить области сверху и снизу экрана, которые не будут прокручиваться. Это можно использовать как для таббара или навбара, так и для более интересных элементов. Например, аналога кнопки чекина в Foursquare, которая весит над контентом на прозрачном фоне внизу экрана.

6. Поддержка GIF и переход между экранами по таймауту

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

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

Но делать все индикации загрузки довольно затратно по времени и поэтому не совсем целесообразно. Я пока ограничиваюсь просто переходом по таймауту.

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

7. Liveshare

Это самая крутая фича в InVision. Она является одной из основных причин почему мы используем именно этот инструмент.

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

Теперь наш процесс выглядит так — мы созваниваемся с клиентом по скайпу (хотя в этом нет прямой необходимости, потому что прямо в Liveshare встроена функция голосовой связи, просто по скайпу у меня есть возможность записать разговор), я скидываю ему ссылку на Liveshare и у него открывается прототип. Мы видим одно и то же в отличном качестве, мы можем курсором указывать на те элементы, о которых идет речь. Мы можем рисовать прямо по макетам, обсуждая какие-то изменения или идеи. Это очень круто и очень удобно. Плюс можно переключиться на whiteboard и порисовать там, чтобы донести какую-то мысль. Единственный минус это то, что взаимодействовать с прототипом может только инициатор Liveshare, что довольно странно. Но я писал в службу поддержки, они сказали, что работают над этим.

8. Шаблоны

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

9. Возврат на предыдущий экран

В любом приложении есть экраны, на которые можно попасть из разных мест.

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

10. Обновление экранов

В InVision довольно удобная система обновления и загрузки макетов. Чтобы обновить какой-то экран достаточно просто перетащить его в браузер. При этом, есть интеграция с Dropbox, так что в идеале вообще ничего никуда загружать не надо.

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

11. Копирование прототипов

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

12. Функции, которым пока не удалось найти применение

Помимо всего перечисленного, у InVision есть набор функций, которые пока не вписались в наш процесс. Не потому что они плохо сделаны, а потому что у нас пока не возникало необходимости их использования:

• комментарии к экранам;
• статусы каждого экрана — не утвержден, в процессе утверждения или утвержден;
• хранение всех исходников прямо в InVision;
• хранение версий каждого экрана и так далее…

Основные минусы

Ну куда же без них? Идеальных инструментов, к сожалению не существует. Есть ряд вещей, которое мешают в процессе работы. Они не критичны, но неприятны.

1. Есть глюки с хотспотами при просмотре прототипа, когда новый экран уже загрузился, а хотспоты еще со старого. Это случается довольно редко, но случается.
2. Нет никакого способа посмотреть связки между экранами. У нас есть наша схема, которая упрощает процесс, но все равно приходится держать в голове все переходы.
3. В Liveshare управлять прототипом может только презентующий.
4. На Андройде никак не учитывается нижний бар с основными кнопками. В макетах его оставлять нельзя потому что он будет дублироваться на телефоне, но если не делать его в макетах, то при просмотре на десктопе снизу будет дырка. В общем, есть над чем работать ребятам.
5. Нельзя копировать хотспоты между экранами, а шаблоны не всегда справляются с этим.

Из минусов наверное все. Больше меня особо ничего не напрягает.

Стоимость

InVision предлагает несколько планов на выбор:

1. Один проект бесплатно.
2. Три проекта за $15 в месяц.
3. Безлимитное количество проектов, плюс всякие плюшки — $25 в месяц.
4. Командная работа (до 5 дизайнеров) — $100 в месяц.

Чем командная работа отличается от остальных планов, я если честно, до конца сам не понимаю. Мы купили план за $25. В принципе, при небольшом потоке проектов можно обойтись и планом с тремя проектами. Там есть отличная фича — называется Transfer Ownership. Т.е. можно передать прототип клиенту, и он не будет больше считаться, как ваш проект. При этом, вы так же сможете его редактировать и делать все то же, что и раньше. Только удалять нельзя будет, по-моему.

Ничто так не говорит об успешности инструментов, как отзывы довольных клиентов.

«InVision has proven to be a tremendous asset during the design process. Being able to see and feel the app as it comes together is extremely useful for our entire team. It has also helped us get very early feedback from key stakeholders in a way that we couldn’t before we started using it.»
— Steve Gordon, Mobilligy

Это отзыв Стива Гордона, со-основателя компании Mobilligy. Я использовал их приложение в качестве примера и решил, что их же отзыв будет уместен. С помощью InVision нам удалось очень продуктивно поработать над проектом. И я, и Стив остались очень довольны результатом.