Прототипирование программного обеспечения — Википедия

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

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

Процесс создания прототипа обычно состоит из шагов:

1. Определение начальных требований
2. Разработка первого варианта прототипа, который содержит только пользовательский интерфейс системы
3. Изучение прототипа заказчиком и конечными пользователями, получение обратной связи о необходимых изменениях и дополнениях
4. Переработка и улучшение прототипа: с учетом полученных замечаний и предложений изменяются как спецификации так и прототип, после этого шаги 3 и 4 могут повторяться.

Прототипирование имеет множество различных вариантов. Тем не менее, все методы в какой-то степени основаны на двух основных типах.

Быстрое прототипирование[править | править код]

При быстром прототипировании (англ. rapid prototyping или throwaway prototyping) предполагается, что создаётся макет, который на каком-то этапе будет оставлен («выброшен») и не станет частью готовой системы.

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

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

Быстрое прототипирование не обязательно выполняется в рамках той же платформы и тех же технологий, что и разрабатываемая система. Для прототипа графического интерфейса пользователя (GUI) могут использоваться как стандартные HTML-страницы, либо прототип может подготавливаться в программе, специально предназначенной для создания макетов (например: Axure RP, Microsoft Expression Blend и др.).

Эволюционное прототипирование[править | править код]

Эволюционное прототипирование (англ. evolutionary prototyping) ставит своей целью последовательно создавать макеты системы, которые будут все ближе и ближе к реальному продукту.

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

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

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

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

» на ранних стадиях разработки снижает общую стоимость.

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

Тем не менее, использование прототипирования создаёт ряд дополнительных рисков.

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

Вопрос о том, в какой мере оправдано применение прототипирования, в той или иной форме, к конкретному проекту, не имеет однозначного ответа. Хорошие результаты дает прототипирование при проектировании систем, в которых заметная часть трудозатрат связана с реализаций интерфейсов человек-компьютер, а оценка соответствия системы требованиям заказчика в значительной мере субъективна. В таких системах создание детальной спецификации очень сложно, так как заказчик не может учесть все нюансы, а программисты организуют неспецифицированные детали по собственному усмотрению; в результате типичной реакцией на демонстрацию готовой системы является: «Да, всё формально соответствует техническому заданию, но нам было нужно совсем не это!». Создание и оценка прототипа позволяют в таких случаях на ранних стадиях разработки отделить важные для заказчика детали, которые не попали в спецификацию, от неважных, реализация которых может быть произвольной.

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

Создаем быстрый прототип мобильного приложения / Habr

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.

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

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

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

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

Самый популярный инструмент создания быстрых прототипов.

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

Можно рисовать на доске, стене, бумаге. Однако этот способ имеет и ряд недостатков:

• почерк должен быть разборчивым, чтобы его понимала вся рабочая группа, и чтобы самому потом не расшифровывать собственные записи
• при удаленной работе неудобно демонстрировать такой прототип

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

Как ускорить и упростить «бумажное» прототипирование

Скетчпад (SketchPad, Скетчбук, sketchbook)

это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране».
Вы можете распечатать аналог скетчпада самостоятельно по шаблонам: habrahabr.ru/post/152075

UI – блокнот

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

Лекала.

Удобная, должно быть, вещь, но в России в продаже их найти не удалось.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Штампы

В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:

Программные решения для создания быстрых прототипов

Keynotopia
keynotopia.com
Позволяет быстро создавать макеты с помощью базы шаблонов, добавлять ссылки на кнопки, комментировать и делиться с коллегами для тестирования результатов прототипирования. Приложение платное, стоимость зависит от ваших запросов.

POP
popapp.in
Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819
Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.

Proto.io
proto.io
SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.

Codiqa
codiqa.com
Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.

Mockingbird
gomockingbird.com
Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.

Lumzy
www.lumzy.com
Прошлый век. Под смартфоны тоже не удастся ничего создать.

iPhone Mockup Web App
iphonemockup.lkmc.ch
Отличительной особенностью является имитация рисунка приложения и самого телефона от руки, но это не оправдывает отсутствия возможности создавать связи между макетами.

Axure RP
www.axure.com
habrahabr.ru/post/101938
Программа достаточно функциональная, считается одним из лидеров на рынке. Подходит для прототипирования сайтов и приложений под iPhone и iPad.

AppGyver
www.appgyver.com
На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.

Fluid Ui
www.fluidui.com
Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!

MockFlow
www.mockflow.com
Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.

Mockingbot
www.mockingbot.com
Еще один очень неплохой инструмент, содержащий все необходимые функции, но, к сожалению, поддерживает только iPhone.

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

Balsamiq Mockups for Desktop
www.balsamiq.com
Можно создать как простой схематичный прототип, так и очень детальный с точностью до пикселя. Рисованая стилистика делает серьезный инструмент веселой игрушкой.

iMockups for iPad
www.endloop.ca/imockups
Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.

Interface 2
interface2.lesscode.co.nz
Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.
Демонстрация дизайна на устройстве без программирования

Justinmind Prototyper
www.justinmind.com
Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockko
www.mockko.com
Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx
Используя Blend + SketchFlow, вы можете создавать интерактивные прототипы приложений под любые платформы.
Подробнее:
Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории
Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

За подсказку спасибо Ivnika

App Cooker
www.appcooker.com
Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент помощи при ценообразовании.

За подсказку спасибо Glebcha

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

Mockabilly
www.mockabilly.com
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invision
www.invisionapp.com
Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.

LiveView
zambetti.com/projects/liveview
Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод

Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо

Как выбрать инструмент для прототипирования в 2018 году? / Сбербанк corporate blog / Habr

Здравствуй, Хабр! Меня зовут Саша Отважный, я работаю команде Digital Business Platform Сбербанка и Сбертеха, и занимаюсь дизайном мобильных приложений и веб-проектов. Большая часть моей работы состоит из сборки прототипов разной степени детализации для разных целей. Новые инструменты и сервисы для дизайна и прототипирования выходят и обновляются каждый день. Я провёл полное и глубокое исследование инструментов, представленных сегодня на рынке, и помогу в них разобраться.

Я разбил список на три большие группы по функциональности и разберу каждую по отдельности:

На самом деле инструментов намного больше. Здесь собраны сильные и интересные решения, которые можно относительно надёжно использовать в работе. Все они имеют средства для просмотра созданных прототипов и одинаково подходят как для веб-сайтов, так и для мобильной разработки.

Спойлер

Ещё не подвезли идеальный инструмент, который закроет все задачи и содержит весь функционал. До сих пор приходится идти на компромиссы, использовать костыли и смекалочку. Axure в 2018-м году не нужен.

1-я группа — структура, лоу-сценарии

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

С их помощью можно за несколько минут проверить гипотезы, собрать сценарий для первичного анализа. Но из-за большой степени условности прототипы ведут себя совсем не так, как мобильное приложение, что может запутать респондентов и снизить качество тестирования.
На сегодняшний день самые заметные инструменты — Marvel, Invision, и нативные средства Adobe XD, Figma, и Sketch (с 49-й версии).

Marvel —  есть бесплатная версия
Простейший онлайн-сервис для создания прототипов. Работает как в виде дополнения к дизайн-редакторам, так и самостоятельно в виде веб-сервиса. Недавно обзавелся собственным простым редактором. Мобильное приложение позволяет не только просматривать, но и создавать и редактировать прототипы. Бесплатная версия имеет ограничение на количество проектов, но в приложении оно выключено и можно вполне легально создавать любое количество проектов.

Плюсы
+ Простота и удобство
+ Автономность (можно работать без редакторов)
+ Условная бесплатность
+ Инструменты для совместной работы и тестирования
Минусы
− Не замечено

Invision App — от 13$ в месяц
Invision (не Studio) — тоже дополнение для редакторов, но, в отличие от Marvel, позволяет связывать экраны напрямую в скетче и эскпортировать уже готовый прототип без настройки переходов и связей. Также отличается большим количеством вспомогательных функций и развитой инфраструктурой. Вместе с инструментом прототипирования идёт широкий набор сервисов для совместной работы, хранения библиотек, собственного стока и много другого.

Плюсы
+ Развитая экосистема дополнительных сервисов
+ Возможность настраивать связи прямо в скетче
Минусы
− Не замечено

Adobe XD — 644 ₽ в месяц (есть бесплатный стартовый план, который даёт пошарить всего 1 проект)
Sketch — 99 $ в год
Figma — есть бесплатная версия

Встроенные в дизайн-редакторы инструменты прототипирования полностью закрывают функционал отдельных веб-сервисов. Имеются небольшие отличия, связанные с развитием редакторов. Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в скетче (50) пока еще нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.

Плюсы
+ All-in-one платформа — один инструмент для всего рабочего процесса
+ Не стоит дополнительных денег.
Минусы
− Наследуются от инструмента. Например, Скетч запускается только на маках, а Фигма не работает без интернета.

2-я группа — переходы между экранами, послойная анимация

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

Пример экрана настройки анимации в Invison Studio

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

Principle — 129 $ за лицензию
Один из первых и самых популярных инструментов для анимации интерфейсов. Подходит для небольших сценариев в 2–3 экрана и детальной настройки сложных взаимодействий. Содержит ограниченный дизайн-редактор с базовыми функциями. Не подходит для сборки сложных разветвлённых прототипов из-за неудачного способа организации экранов, невозможности переиспользовать элементы и сложного редактирования анимации. Нет экспорта в код.

Плюсы
+ Хороший инструмент для несложной анимации и коротких сценариев
+ Много учебных материалов, развитое сообщество
Минусы
− Работа с сложными сценариями превращается в кошмар
− Нет экспорта в код
− Работает только на Mac
− Нет онлайн-шеринга

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

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

Flinto for Mac — 99 $ за лицензию
Flinto использует тот же принцип создания и анимации прототипов, что и Invision Studio, чем выгодно отличается от Principle. Подход, при котором сложная детальная анимация настраивается в отдельном от общего экрана интерфейсе, позволяет легко управлять процессами, редактировать и переиспользовать компоненты в следующих прототипах.

Плюсы
+ Удобно организованный рабочий процесс позволят работать со сложными сценариями и анимацией
Минусы
− Нет онлайн-шеринга
− Работает только на Mac

Kite Composer — 99 $ за лицензию
Kite Composer станет отличной заменой перечисленным инструментам для тех, кто привык анимировать интерфейсы в After Effects. Принцип работы, при котором основным инструментом становится таймлайн, а параметры и события навешиваются на объекты, как фильтры, позволяет сфокусироваться на качестве анимации. Также имеются экспорт кода в macOS\iOS и встроенный инспектор.

Плюсы
+ Рабочий процесс, похожий на АЕ на минималках
+ Экспорт в код
Минусы
− Я так в нём и не разобрался

3-я группа — программируемое поведение

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

Настройка поведения прототипа в Framer

Каждый инструмент отличается своим подходом к процессу, и своим способом программирования — от упрощенного JavaScript в Framer до визуального Quartz Composer в Origami Studio.

Прототип, собранный в Origami Studio. По ссылке исходный файл, который можно открыть на телефоне в приложении Origami Live.

Haiku — бесплатная бета-версия

Уже сейчас, в бете, Haiku предлагает широкий набор возможностей для анимации и интерактивности. Вкратце, инструмент подключается к скетч- или фигма-файлу и позволяет редактировать параметры объектов на общем таймлайне. Больше подходит для анимации, но, благодаря редактору Actions, работающем на JavaSript, можно прописать сложную логику прототипа.

Полученный результат эскпортируется с помощью библиотеки Lottie.js на все возможные платформы и форматы.

Плюсы
+ Универсальность
Минусы
− Нужно знать яваскрипт для обработки событий и состояний
− В бета-версии только Mac

Proto.io— от 24 $ в месяц
Atomic.io— есть бесплатная версия
Многофункциональные веб-сервисы, которые позволяют прописывать сложную логику прямо в браузере. Не имеют принципиальных различий в функционале. Переменные и тонкая настройка состояний и событий дополняет привычную логику инструментов для анимации. К сожалению, в таком формате собирать и редактировать связи сложнее, чем специальными средствами. Плюс необходимость работы в браузере накладывает свои ограничения на процесс.

Плюсы
+ Не нужно знать языки программирования
Минусы
− Веб-версия

Framer — от 12 $ в месяц
Один из самых популярных на сегодня инструментов со своим дизайн-редактором и средой программирования на CoffeeScript — упрощенной версии яваскрипта.

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

Плюсы
+ Удобная среда для программирования логики прототипа и шеринга результата
Минусы
− Нужно знать CoffeeScript
− Дизайнер тратит много времени на отладку кода

Origami Studio— бесплатно
Бесплатный инструмент от Facebook использует визуальную среду программирования Quartz Composer.

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

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

Плюсы
+ Бесплатно
+ Неограниченный функционал — можно использовать и JSON и данные гироскопа
+ Простой процесс для сложной логики
Минусы
− Проблемы с оптимизацией
− Мало учебных материалов

Phase — ждём
Многообещающий инструмент, который должен выйти в июне 2018 года. Разработчики заявляют революционный процесс, объединяющий визуальное программирование и таймлайн. Звучит очень хорошо, обязательно нужно попробовать.

как сделать прототип сайта или моб.приложения

Для чего нужны прототипы и как их делать? Разберем прототипирование в деталях.

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

После первой же итерации, получаем не то, что хотели. Техническое задание прописали, но все равно как-то не клеилось. Вроде бы говорили на одном языке, а по факту, мимо. Благо через 2-3 встречи, когда обстановка нормально так накалилась, ребята подрядчики предложили подумать в сторону прототипа. То есть, сделать некую упрощенную версию конечного продукта и уже на ее основе доделать проект. Мы согласились, ребята сделали, проект допилили. Для меня инсайт, которым хочу поделиться.

Прототипирование это

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

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

Зачем нужно прототипирование

Собрал чек-лист по основным задачам, который решает создание прототипа:

• Обзор конечного продукта/системы в целом.
• Выявление слабых мест в системе.
• Тестирование и проверка гипотез.
• Отладка процессов.
• Постановка задач на уровне тех.задания
• …(можно добавить свой вариант в комментариях)

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

Прототип танка времен Второй Мировой Войны

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

Требования к прототипам

• Высокая скорость создания.
• Определенный уровень детализации от задач.
• Легкость для внесения изменений.
• Интерактивность в случае взаимодействия с реальным пользователем.
• Доступность для участников процесса.

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

Кто обычно занимается прототипированием

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

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

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

Как сделать прототип сайта или мобильного приложения

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

Различаются они по точности: low fidelity – низкая точность прототипа, medium – средняя и high – высокая, соответственно. Давайте разберем каждый из них подробнее.

–

Простите, что прерываю чтение. Присоединяйтесь к моему telegram канал. Свежие анонсы статей, развитие digital продуктов и growth hack, там все. Жду вас! Продолжаем…

–

Low fidelity или бумажный прототип

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

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

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

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

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

Medium fidelity или интерактивный прототип

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

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

Пример, который я сделал в программе Marvel для мобильного приложения: ссылка

Все кнопочки и элементы можно брать из библиотеки софта, доступны разные варианты по видам устройств (Android, IOS, Desktop). Или же, просто нарисовать, сфотографировать и загрузить в программу. Ссылки от экрана к экрану можно цеплять, просто выделив какой-то объект в “View”.

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

Попробуйте немного покопаться в софте, он не очень сложный, но зато катастрофически полезный. Как всегда есть бесплатный доступ с ограничением по кол-ву проектов вроде бы. Но что мешает зарегистрироваться под разными почтами, если уж нужно много проектов? Или же купить подписку 12$ в месяц, тоже небольшие деньги, если много работать будете с подобными задачами.

Софтины для создания интерактивных прототипов:

Меня лично устраивает вариант такой: нарисовал что-то в графическом редакторе под прототипы (типа Figma) и закинул картинки в Marvel. Или же с помощью карандаша и ручки набросал эскиз и через фото бросил опять же все в Marvel. Быстро, бесплатно, эффективно.

High fidelity или интерактивный прототип с кусками кода

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

Как видите на рисунке выше, high fidelity прототип, это уже практически готовый продукт. Создать такой образец собственными усилиями будет проблематично, если у вас нет продвинутых навыков владения графическими программами. Поэтому, привлекайте дизайнера интерфейсов (UX/UI). С вас логика продукта/системы, с него визуализация и интерактивность.

Софты, которые понадобятся для создания высокоточного прототипа все те же:

Важный момент при прототипировании высокой точности (high fidelity) заключается в том, что вы можете передавать части кода разработчикам или верстальщикам. Например, в Fligma, когда вы рисуете экраны, то можете выгрузить кусок кода прямо из программы.

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

Если обобщить все способы прототипирования, то у меня сложилась следующая картина мира:

• Бумажный прототип подойдет для быстрого наброска системы. В большей степени он используется на старте создания продукта.
• Интерактивный прототип требует немного больше времени, но позволяет удаленно тестировать систему. Можно использовать также на этапе старта продукта и отладки.
• Продвинутый прототип с кусками кода позволит выйти на финишную прямую и дошлифовать продукт перед релизом.

Заканчиваем

Прототипирование, это мощная практика, которая позволяет закрывать целый ряд задач. Теперь вы знаете, как создавать прототипы сайтов и мобильных приложений, используйте эти знания и если когда-нибудь вас спросят: “Будете ли вы делать прототип?”, – смело отвечайте: “Буду!”.

Алексей А.

---

Читайте также:

---

Короткий сериал от Ростелекома. Посмотрим один из эпизодов.

 

Вконтакте

Facebook

Twitter

Google+

Загрузка…

от идеи до рабочего экрана / Mobile Dimension corporate blog / Habr

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

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

Начнем с определения:

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

1. Концептуальные
2. Интерактивные
3. Анимированные

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

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

Концептуальные прототипы

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

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

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

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

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

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

Практические решения:

Онлайн. Есть прекрасное приложение Post-it Plus, которое с помощью камеры «переносит» стикеры на виртуальную доску.

Так Post-it Plus конвертирует физические записки с фотографии в виртуальные (источник: Post-it Plus)

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

Интерактивные прототипы

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

Когда нужно делать интерактивный прототип:

• Когда нужно смоделировать какой-либо пользовательский сценарий (например, регистрацию в приложении).
• Когда необходимо протестировать часть сценария на пользователях, а готового приложения еще нет. В этом случае интерактивный прототип является прекрасным способом решить задачу в короткие сроки
• Чтобы показать своей команде, на каком этапе работы вы находитесь. Объяснить разработчикам логику работы интерфейса.
• Когда нужно коротко и наглядно показать руководству, над чем вы работаете. Такой способ может приятно удивить менеджеров, что будет плюсом вам и команде.
• Если нужно произвести впечатление на потенциального инвестора. Или продвинуть какую-то идею приложения в своей компании. Здесь работает правило «Лучше один раз увидеть, чем сто раз услышать». Ни один рассказ и ни одна презентация не заменят прототип готового приложения.

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

Практические решения:

Для создания интерактивного прототипа необходимы специальные инструменты для постраничного прототипирования. Например, Marvel или InVision (оба работают в web). Эти инструменты позволяют быстро загрузить экспортированный дизайн и установить связи между определенными областями экранов. Они просты и очень интуитивны, потому навык работы приобретается после пары раз использования. Простота инструментов позволяет сконцентрироваться на логике работы вашего прототипа и сценариях тестирования.

Страницы прототипа в Marvel (источник marvelapp.com)

Создание интерактивных областей и связей в Marvel (источник marvelapp.com)

Анимированные прототипы

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

Источник principleformac.com

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

Источник principleformac.com

Мы ожидаем, что элементы интерфейса откликнутся на наши действия, и расстраиваемся, когда это не происходит. Нам необходимо знать, что наши действия не пропадают втуне. Представьте, что вы говорите что-то человеку, а он никоим образом не реагирует на ваши слова. Это способно вывести из себя. Однажды тестировали приложение-помощник продавца-консультанта для магазинов крупной торговой сети. Приложение было в достаточно сыром состоянии, но готовое для тестирования определенного функционала. Анимация элементов на этом этапе не была продумана. У продавцов вызвало определенное раздражение то, что кнопка «Положить в корзину» визуально не отзывалась на нажатие. Несмотря на то, что основная функция выполняется – товар попадает в корзину – пользователь не понимает, произошло целевое действие или нет. Это неприятно, согласитесь?

Неотзывчивая кнопка

Практические решения:

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

Работа с прототипом в ProtoPie (источник protopie.io)

Для создания анимированных прототипов подходят такие инструменты как Principle, Flinto, Proto.io, Origami, ProtoPie, Framer и др. Некоторые инструменты (например, ProtoPie, Framer) поддерживают работу встроенных датчиков мобильных устройств – акселерометра, гироскопа, микрофона, камеры, 3D Touch, что позволяет сделать прототип еще более реалистичным. О том, какие датчики и сенсоры есть в нашем распоряжении и как работать с ними в ProtoPie прочитать можно тут.

Пошаговая инструкция по работе в Principle.

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

Когда нужно делать анимированный прототип:

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

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

Инструменты прототипирования и создания wireframes / Habr

Навеяно долгими поисками различных систем прототипирования и желанием поделиться этим опытом. В данном посте отсутсвуют сложные системы типа iRise или IBM Rational Rose, ввиду того что они являются не столько и далеко не только системами простого прототипирования, да и стоимость этих решений подходит предприятиям немалого маштаба. Этот пост о чем-то более земном.

Немного теории. Данные проверенные опытным путем:

Каждый проект имеет своего заказчика. Это может быть директор крупной кампании, разработчик, менеджер digital агенства, дизайнер… да много кто. В каждом конкретном случае это накладывает определенные ограничения на то, насколько должен быть проработан протип.
Я имею ввиду следующие вещи:

• Количество прототипов и очевидность ( по клику, визуально-схематично ) переходов между ними
• Наличие состояний одного протипа ( пример: блок контактов, который выглядит по разному в зависимости от того, владелец этого списка на него смотрит или гость )
• Наличие комментариев к элементам
• Банальные «красивости» в прототипе — красивые формы, иконочки, картинки и прочее. По опыту — одна из самых полезных вещей, чтобы убедить заказчика, что идея будет работать

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

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

Online-инструменты

Cacoo

Тип: Online
Цена: есть бесплатный аккаунт
Link: http://www.cacoo.com/

iPlotz

Тип: Online
Цена: есть бесплатная версия
Link: http://iplotz.com

MockFlow

Тип: Online
Цена: есть бесплатные аккаунты
Link: http://www.mockflow.com/

Mockup Builder (beta)

Тип: Online / Silverlight
Цена: на текущий момент — бесплатная
Link: http://mockupbuilder.com

Creately

Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Lucidchart

Тип: Online
Цена: 5$
Link: http://www.lucidchart.com/

Mockingbird

Тип: Online
Цена: 9$/месяц
Link: https://gomockingbird.com

Pidoco

Тип: Online
Цена: от 9$/месяц
Link: https://pidoco.com

HotGloo

Тип: Online
Цена: 14$/месяц
Link: http://www.hotgloo.com

ProtoShare

Тип: Online
Цена: от 49$/месяц
Link: http://www.protoshare.com

Desktop-инструменты

Pencil

Тип: Firefox Addon
Цена: Free
Link: http://pencil.evolus.vn

Serena Prototype Composer

Тип: Desktop
Цена: Free
Link: http://www.serena.com

Creately

Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Balsamiq Mockups

Тип: Desktop, Adobe AIR
Цена: 79$
Link: http://www.balsamiq.com

FlairBuilder

Тип: Desktop, Adobe AIR
Цена: 99$
Link: http://www.flairbuilder.com

Omnigraffle

Тип: Mac OSX App
Цена: 99$
Link: http://www.omnigroup.com

Antetype

Тип: Desktop
Цена: 289$
Link: http://www.antetype.com/

Adobe Fireworks

Тип: Desktop
Цена: 299$
Link: http://www.adobe.com/products/fireworks.html

Axure

Тип: Desktop
Цена: 589$
Link: http://www.axure.com/

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

3 шага к интерактивному прототипу / Pixli corporate blog / Habr

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

Когда возникла идея создания сайта – формулируются его цели. В этот момент становится понятно направление разработки. И начинается процесс, включающий три этапа:

1. Каркас
2. Прототип
3. Mock-up

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

Mock-up – это статичное изображение страниц сайта. Более всего он нужен для демонстрации заказчику, чтобы убедить его купить ваши услуги. Далее он отправляется к верстальщику для реализации.

Прототи́п от др.-греч. πρῶτος — первый и τύπος — отпечаток, оттиск; прообраз, образец. Создание прототипа является необходимым этапом разработки сайта. Прототипы позволяют выстроить логику интерфейса сайта.

Они не должны включать в себя всю анимацию и мелкие взаимодействия, но должны демонстрировать юзабилити вашего сайта.

2 правила создания прототипов

1. Убедитесь, что ваш прототип имеет те особенности, которые имеют отношение к вашей аудитории. Предусмотрите демонстрационные возможности для всех заинтересованных сторон. Копирайтера интересует, как текст впишется в блок, маркетолога – как расположение блоков соответствует выбранной модели продаж и т.д.
2. Ориентируйтесь на конечную аудиторию сайта. Одно дело демонстрировать прототип людям, которые участвовали в генерации идей для сайта и знают все цели. Нужно получить взгляд со стороны от кого-то, кто будет использовать сайт. Необходимо знать целевую аудиторию, понимать их ожидания и пользовательский опыт. В идеале, следует выполнить юзабилити тестирование на прототипе.

Ответьте на вопросы:

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

Как только вы получили ответы, спросите их:

1. Что же они надеются узнать?
2. Какие задачи они хотят достичь?
3. Каких функций ожидают?

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

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

Что содержит прототип?

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

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

Как создать прототип?

Прототипы можно нарисовать любым способом – на бумаге или используя программное обеспечение. Кто-то использует Axure и т.п., кто-то рисует в Visio, не суть важно.

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

Какие прототипы предпочитают использовать?

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

Nielsen Norman Group в 2015 году проводили исследование по использованию различных видов материалов для разработки юзабилити и представления его на согласование.

Как видно из диаграммы, статичные каркасы и интерактивные прототипы уверенно занимают первое место. Их используют в своей работе 88% и 83% разработчиков UX соответственно.

Исследование проводилось для разных целевых аудиторий. Было предложено выбрать наиболее эффективные инструменты.

1. Управляющий персонал. Более 60% предпочитают интерактивные прототипы. Статичные каркасы занимают только пятое место.

2. Клиенты. 67% отдают предпочтения интерактивным прототипам. На втором месте визуальные мокапы.

3. Разработчики и инженеры. Для совместной работы и представления спецификаций 62% выбирают интерактивные прототипы. Статичные каркасы опять же на пятом месте.

   
   

Эти данные демонстрируют тенденции проектирования UX: интерактивные прототипы являются самыми популярными в разных целевых аудиториях. Большинство специалистов юзабилити считают их эффективным инструментом коммуникации для убеждения представителей целевой аудитории. В этом же исследовании было проведено различие между статическими и интерактивными прототипами и авторы указывают на один факт: статический каркасы называются как наиболее часто используемые (71% опрошенных часто создают их), но они не были отобраны в ТОП-4 самых эффективных материалов для любой аудитории. Это значит, что чаще их делают «для себя».

Интерактивные прототипы на PIXLI

Удобство использования платформы обусловлено созданием прототипа как сайта – он автоматически получает домен второго уровня. Вы можете передать адрес заказчику, и он тестирует прототип самостоятельно, с привлечением ЦА или без.

Если у вас уже готов mock-up, вы можете включить в прототип элементы дизайна. Или же можете сделать акцент только на функционале.

Покажем шаги создания прототипа сайта партнерской программы partner.pixli.ru. Общее представление о структуре и контент у нас уже к тому времени был.

Шаг 1. Создаем каркас

Каркас будет состоять из блоков. Он позволит прикинуть расположение элементов на странице. За основу берем пустой лист.

Основным элементом страницы — контейнером для остальных блоков, является область. В область вкладываются меню (navbar) или блоки. Начнем с меню.

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

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

Шаг 2. Настраиваем адаптивность

На мобильном устройстве нам необходимо отобразить меню, текст и CTA-кнопку подключения в партнерской программе, перечень преимуществ и CTA-кнопку «Задать вопрос». Большая часть блоков –слайдер, колонки и т.д. не нуждаются в настройке и сами принимают необходимый вид. Нам лишь остаётся решить, какую часть информации мы оставляем, а какую уберём, как неосновную. Вот как выглядит мобильная версия прототипа без всяких изменений, так сказать «на автомате».

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

Таким образом, настроим имеющиеся элементы и удалим лишние.

Шаг 3. Интерактив

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

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

Далее следует лишь указать действие для кнопки и окно готово.

Ссылки указываются в редакторе текста для гиперссылок и в окне настройки окна для кнопок.

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

Итак, наш интерактивный прототип создан и имеет свое доменное имя. Его можно передать заказчику для тестирования и согласования.

Заключение

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