Прототипирование что это: Прототипирование: что это такое и зачем оно нужно

Прототипирование: что это такое и зачем оно нужно

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

В ходе прототипирования создается макет, который имитирует взаимодействие пользователя с интерфейсом проекта. Нередко прототипы делают интерактивными (кликабельными).

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

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

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

Зачем делают прототипы

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

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

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

Ирина Хафизова

Дизайн-директор Mailfit

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

Прототипирование решает несколько важных задач:

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

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

Типы прототипов

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

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

Этапы прототипирования

1. Постановка цели. Происходит на встрече всех участников, среди которых клиент, дизайнер, маркетолог, копирайтер, программист, то есть все те, кто заинтересован в успешности проекта. Чем четче и точнее сформулированы цели, тем легче выдвигать и проверять гипотезы для детализации прототипа.
   Цели нужно ставить максимально конкретные: например, разработать продающий лендинг для презентации новой услуги, продумать корпоративный сайт для повышения охвата и узнаваемости бренда.
2. Проведение исследования. Чтобы создать качественный прототип, важно изучить бизнес клиента, особенности его продукта и целевой аудитории.
3. Формулирование гипотез. Важно понять, что именно вы хотите проверить с помощью прототипов. Не «посмотреть, получится ли разместить все блоки на сайте», а «оценить, насколько пользователю удобно будет выбрать товар и сделать заказ таким способом». Это поможет сделать прототипирование максимально эффективным.
4. Создание прототипа. С учетом результатов исследования и сформулированных гипотез создается макет будущего сайта или приложения.

Проектирование прототипа сайта состоит из нескольких основных шагов:

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

Прототипирование помогает разработать структуру сайта и наметить блоки контента

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

Инструменты для разработки макетов

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

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

Figma — графический редактор для командной работы над прототипами сайтов и приложений. Подходит для обсуждения правок в режиме реального времени.

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

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

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

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

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

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

Главные мысли

Прототипирование: что это такое и зачем оно нужно

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

В ходе прототипирования создается макет, который имитирует взаимодействие пользователя с интерфейсом проекта. Нередко прототипы делают интерактивными (кликабельными).

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

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

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

Зачем делают прототипы

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

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

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

Ирина Хафизова

Дизайн-директор Mailfit

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

Прототипирование решает несколько важных задач:

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

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

Типы прототипов

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

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

Этапы прототипирования

1. Постановка цели. Происходит на встрече всех участников, среди которых клиент, дизайнер, маркетолог, копирайтер, программист, то есть все те, кто заинтересован в успешности проекта. Чем четче и точнее сформулированы цели, тем легче выдвигать и проверять гипотезы для детализации прототипа.
   Цели нужно ставить максимально конкретные: например, разработать продающий лендинг для презентации новой услуги, продумать корпоративный сайт для повышения охвата и узнаваемости бренда.
2. Проведение исследования. Чтобы создать качественный прототип, важно изучить бизнес клиента, особенности его продукта и целевой аудитории.
3. Формулирование гипотез. Важно понять, что именно вы хотите проверить с помощью прототипов. Не «посмотреть, получится ли разместить все блоки на сайте», а «оценить, насколько пользователю удобно будет выбрать товар и сделать заказ таким способом». Это поможет сделать прототипирование максимально эффективным.
4. Создание прототипа. С учетом результатов исследования и сформулированных гипотез создается макет будущего сайта или приложения.

Проектирование прототипа сайта состоит из нескольких основных шагов:

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

Прототипирование помогает разработать структуру сайта и наметить блоки контента

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

Инструменты для разработки макетов

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

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

Figma — графический редактор для командной работы над прототипами сайтов и приложений. Подходит для обсуждения правок в режиме реального времени.

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

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

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

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

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

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

Главные мысли

Что такое прототипирование? | Adobe XD Ideas

Иллюстрация Симоны Тоадер

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

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

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

Причины создания прототипа

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

Вот некоторые причины для создания прототипа:

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

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

Члены команды сидят за столом и вместе создают бумажный прототип. Изображение предоставлено Adobe.

Какие существуют виды прототипирования?

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

Мобильный каркас с низкой, средней и высокой точностью. Изображение предоставлено Justinmind.

Прототипы низкой точности

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

Профи

• Быстрый. Бумажные прототипы легко и быстро создаются, и они отлично подходят для мозгового штурма различных идей и концепций. Кроме того, вы можете вносить изменения и обновления на лету.
• Недорогой . Прототипы с низкой точностью дешевы как с точки зрения рабочей силы, так и с точки зрения материалов. Ручка и бумага являются обычными канцелярскими принадлежностями, и, поскольку они быстро создаются, затраты на рабочую силу значительно низки.
• Здание Эмпатии. Бумажные прототипы — отличное упражнение для сплочения команды, которое приводит к повышению вовлеченности, сопричастности и сопереживания по отношению к пользователям и продукту.
• Честный отзыв пользователя. Во время юзабилити-тестирования пользователь более склонен давать честный отзыв, если считает, что вы не потратили на это много времени. Пользователи, как правило, более открыто отзываются о бумажных прототипах, а не о прототипах с более высокой точностью .

Минусы

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

Два человека вместе работают над бумажным прототипом. Изображение предоставлено Adobe.

Прототипы средней точности

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

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

Существуют отличные ресурсы по каркасам, включая примеры и шаблоны каркасов в Интернете. Но сначала давайте обсудим плюсы и минусы вайрфрейминга.

Pros

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

Минусы

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

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

Высокоточные прототипы

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

Профи

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

Минусы

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

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

Что такое процесс прототипирования веб-сайта?

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

Вот шаги эффективного процесса создания прототипа веб-сайта.

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

Теперь ваша очередь

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

Words by
Джастин Моралес

Джастин Моралес — старший UX-дизайнер, в настоящее время работает в Signify Health, компании B2B Healthtech, расположенной в Лос-Анджелесе. Он вырос в Техасе, повзрослел в Колорадо и провел свои последние 20 лет, живя в Австралии, Новой Зеландии и Азии. Его любимая среда — фотография, и он любит UX, потому что это означает постоянную помощь людям.

Что такое прототипирование и почему это важно?

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

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

Итак, как же вы можете избежать этих неопределенностей и проверить свои идеи и дизайн?

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

• Что такое прототип
• Что означает прототипирование?
• Типы прототипов
• Почему прототипирование важно?
• Инструменты для прототипирования
• Прототипирование с помощью Indigo Design

Что такое прототип?

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

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

Прототипы имеют 4 основных качества:

Представление — Реальная форма прототипа, например бумажный и мобильный, или HTML и рабочий стол.

Точность — Верность прототипа, то есть уровень детализации, полировки и реализма.

Интерактивность — Функциональность, открытая для пользователя — полностью функциональная, частично функциональная или только для просмотра.

Эволюция — Жизненный цикл прототипа. Некоторые создаются быстро, тестируются, выбрасываются, а затем заменяются улучшенной версией (это называется «быстрое прототипирование»). Другие могут быть построены и улучшены, в конечном итоге превращаясь в конечный продукт.

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

Одно из самых распространенных заблуждений относительно прототипирования состоит в том, что его нужно сделать всего один или два раза в конце процесса проектирования. Это неправда. Один из наших девизов в Infragistics — «тестируйте рано и тестируйте часто».

Как видите, прототипирование — это процесс. Давайте углубимся в детали.

Что означает прототипирование?

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

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

Как правило, всякий раз, когда мы что-то проектируем, предыдущие итерации могут быть не очень хорошими. Дизайн редко (или, на самом деле, «хороший дизайн» — это 90 248, а не 90 249) мгновенный успех, поэтому нам нужно прототипирование. И поскольку многие более ранние версии прототипов оказались неудачными, стоит помнить о мыслях Дэвида Келли, основателя IDEO — дизайнерской фирмы, которая продвигала концепцию дизайна, ориентированного на человека, и была известна тем, что запускала инновационные лаборатории и создавала поп-музыку. инкубаторов:

 «Ошибайтесь быстрее, чтобы быстрее добиться успеха» —

Дэвид Келли, основатель IDEO

Типы прототипирования

Вот два широких взгляда на прототипирование:

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

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

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

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

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

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

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

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

Инструменты для прототипирования

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

Прототипирование с помощью Indigo.Design

Indigo.Design — это один из полностью интегрированных инструментов, комплексная система от проектирования до кода, объединяющая прототипирование, системы проектирования, пользовательское тестирование и генерацию кода. Вы можете создавать лучшие в своем классе дизайны UX и UI, используя компоненты и шаблоны проектирования Indigo.Design в Indigo Design System с комплектами пользовательского интерфейса Sketch. Он также включает в себя готовые шаблоны проектирования или возможность создания собственной пользовательской библиотеки пользовательского интерфейса.

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

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