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

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

В этой статье мы рассмотрим создание кликабельных (щелчок посетителя веб-страницы по ссылке; в интренет-рекламе термин относится к щелчку пользователя по баннеру или другой рекламной ссылке) прототипов на iPhone с использованием приложения для прототипирования на бумаге (или POP). Я также расскажу вам о том, как прототипы вписываются в дизайн и почему создание эскизов является первоочередной необходимостью. Моя цель заключается в том, чтобы познакомить вас с необходимыми инструментами, поделиться своим опытом в создании прототипов и обсудить возможных конкурентов. Чтобы проиллюстрировать функциональность приложения, я разработал простой мобильный интерфейс для гипотетического веб-сайта новостей (ссылку на него вы можете найти в конце этой статьи). Давайте рассмотрим POP!

Важность создания прототипов.

Структурные схемы страниц (wireframes) не являются достаточно эффективными при отображении таких динамических элементов, как например поток, взаимодействие и анимация, и участники в этом случае вынуждены перелистывать десятки, если не сотни, PDF страниц. Тодд Варфель (Todd Warfel) в своей работе Создание прототипов: руководство по практике говорит о том, что прототипы позволяют установить связь с проектом. Я хотел бы добавить, что прототипы вдыхают жизнь в дизайн, задавая ему направление. Его повторяющийся характер позволяет нам ускорить тестирование идей. Таким образом, в процессе мозгового штурма останутся актуальными только наиболее подходящие идеи развития проекта.

Прототипы могут быть созданы с помощью различных методов и инструментов, некоторые из которых были созданы специально для этой цели, а другие приспособлены по мере необходимости. В своей книге под названием Эскизирование опыта взаимодействия: рабочая тетрадь, Билл Бакстон (Bill Buxton) отобразил результаты большой аналитической работы по изучению прототипов. Он объясняет методы создания прототипов в контексте эскизирования, как на бумаге, так и в цифровом виде. Создание прототипов осуществляется на различных уровнях интерактивной точности: эскизы и бумажные макеты со временем будут преобразованы в кликабельные прототипы, которые в свою очередь будут преобразованы в высокоточные прототипы со сложными моделями событий. Для ознакомления с углубленной классификацией инструментов по созданию прототипов, прочитайте статью Рича Макефилда (Ritch Macefield) под названием “Вы все еще используете предыдущее поколение инструментов для создания прототипов?”

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

Высококачественные Прототипы-это не всегда хорошо.

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

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

Кликабельные прототипы помогут найти ответ.

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

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

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

Сначала Идеи для эскиза.

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

Ранее, я уже рассматривал три основных подхода к созданию эскизов, и каждый из этих подходов заслуживает места в UX арсенале:

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

Подходы, связанные с объединенным эскизированием проекта.

Использование доски для эскизов.

Умные доски для создания эскизов, такие как eno, способствуют улучшению качества сотрудничества между местными членами команды и территориально распределенными ресурсами. Активы могут быть сохранены в виде цифровых изображений и перераспределяться после встречи. Не цифровые доски являются довольно доступным инструментом; инструмент для сухого стирания GOwrite позволяет превратить любую поверхность в доску. И хотя подобное оборудование и является относительно недорогим, оно требует много места и, таким образом, лучше всего подходит для групповых встреч.

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

Бумажные шаблоны.

Использование индивидуальных бумажных шаблонов является наиболее подходящим вариантом для тех случаев, когда во время генерации идей следует избегать группового мышления. Бумажные шаблоны позволяют получить требуемый уровень мобильности, который может помочь в организации структуры экранов и для определения приоритета действий. Эти бумажные проекты легко воспроизводимы через ксерокс, что облегчает повторное использование и аннотации. Такой подход практически не требует денежных затрат, потому что большинство шаблонов представляют собой бесплатные PDF файлы (читайте о создании эскизов для iPhone 5 в разделе «Полезные ресурсы» в конце этой статьи), а принадлежности для рисования стоят достаточно недорого. Проекты могут быть переведены в цифровую форму с помощью камеры или сканера. Но нужно сразу же отметить, что этот процесс занимает достаточно много времени.

Бумажные шаблоны доступны для каждой платформы. Показанное на этом рисунке изображение-это шаблон для iPhone 5, созданный UI Stencils. Увеличенная версия изображения.

Создание эскизов на телефоне.

Менее распространенный подход заключается в создании эскизов прямо на телефоне. Ввод информации самим человеком не является идеальным вариантом для цифрового рисования, учитывая большую площадь поверхности пальца. Таким образом, для повышения точности обязательным является использование емкостного сенсорного стилуса, например, Jot Pro (30 $). Перед тем, как приступить к созданию цифрового эскиза, необходимо рассмотреть несколько вещей. Как будут экспортироваться эскизы? Во-вторых, будете ли вы ориентироваться на определенное разрешение? В-третьих, какой уровень сотрудничества вам будет необходим? При использовании данного подхода вам не нужно будет преобразовывать эскизы в цифровой формат, однако с другой стороны вы столкнетесь с определенными затратами: все участники должны иметь смартфон и стилус. Кроме того, на устройства должно быть загружено специализированное приложение, например, SketchBook Pro ($ 1).

Стилус используется для большей точности. Для улучшения результатов снимите защитную крышку. Увеличенная версия изображения.

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

Кликабельные Прототипы, созданные на основе эскизов.

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

POP представляет собой iOS и Android приложение, которое позволяет связывать воедино бумажные проекты в интерактивные кликабельные прототипы. В настоящее время это приложение является бесплатным, и пользователи получают возможность создания от 5 до 20 проектов на бесплатной основе. По словам разработчиков приложения из Woomoo, существуют планы по взиманию платы за пользование этим продуктом, однако какой-либо конкретной информации пока еще нет.

Обмен ссылками на POP в социальных сетях увеличивает ваши шансы создать большее количество проектов.

Для того, чтобы начать пользоваться POP, необходимо зарегистрироваться, используя адрес электронной почты. Учетная запись требуется для хранения прототипов на серверах Woomoo и добавления других пользователей POP в проект (об этом позже).

Создание проекта.

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

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

Этот экран показывает список существующих проектов.

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

По умолчанию, все новые проекты относятся к категории публичные.

Загрузка эскизов.

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

Пока еще в проект не было загружено ни одного эскиза.

Как только изображение займет необходи� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров