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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

Что такое Прототипирование?

Аудио перевод статьи

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

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

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

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

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

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

Рассмотрим несколько причин для создания прототипа:

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

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

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

Какие бывают типы прототипирования?

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

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

Прототипы с низкой детализацией 

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

Преимущества

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

Недостатки

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

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

Прототипы средней детализации

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

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

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

Преимущества

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

Недостатки

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

Макет средней детализации, который представляет цифровые интерфейсы в серых оттенках. Изображение предоставлено O’Reilly.

Прототипы высокой детализации

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

Преимущества

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

Недостатки

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

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

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

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

Ниже мы рассмотрим этапы эффективного процесса создания прототипа веб-сайта.

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

404: Страница не найдена

ИТ-директор

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

Что я могу сделать сейчас?

Если вы впервые посещаете TechTarget, добро пожаловать! Извините за обстоятельства, при которых мы встречаемся. Вот куда вы можете пойти отсюда:

Поиск

• Узнайте последние новости.
• Наша домашняя страница содержит самую свежую информацию о CIO.
• Наша страница о нас содержит дополнительную информацию о сайте, на котором вы находитесь, ИТ-директор.
• Если вам нужно, свяжитесь с нами, мы будем рады услышать от вас.

Просмотр по категории

Облачные вычисления

• Усовершенствование HPE GreenLake, нацеленное на все
  Брайан Томпсон из HPE рассказывает о том, как HPE GreenLake стала синонимом бренда, смотрит в будущее и о том, как …

• Подходят ли локальные зоны AWS для моего приложения с малой задержкой?

  AWS предлагает своим клиентам несколько вариантов минимизации задержки приложений. Давайте посмотрим, какую роль локальные зоны AWS могут сыграть в …

• IBM стремится снизить затраты на облачные вычисления, приобретя Apptio за 4,6 млрд долларов

  Apptio заполняет пробелы FinOps в IBM Turbonomic, предоставляя инструмент, помогающий организациям принимать решения по ИТ-бюджету на основе своих .

  ..

Мобильные вычисления

• Свежий взгляд на бизнес-примеры использования AR и VR

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

• Как обеспечить соответствие мобильным требованиям в бизнес-среде

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

• Как устранить неполадки, когда точка доступа не работает на Android
  Для устранения неполадок с мобильными точками доступа на устройствах Android требуется, чтобы ИТ-специалисты предоставили документацию, обучение и практические рекомендации, чтобы наилучшим образом помочь …

Дата-центр

• Обновление образов, инновации и защита облачных технологий на SUSECON 2023

  На SUSECON 2023 компания SUSE объявила об облачной технологии наблюдения на основе искусственного интеллекта с помощью Opni и упомянула о других анонсах в этом году. …

• Уровни ЦОД и почему они важны для безотказной работы
  Организациям следует рассматривать уровни центров обработки данных провайдеров колокации или собственные центры обработки данных в зависимости от их потребностей в безотказной работе…

• Изучите модель Red Hat с собственной подпиской на RHEL

  Многие организации используют модели оплаты по мере использования с поставщиками общедоступных облаков для запуска своих продуктов Red Hat в облаке. Узнайте, как …

Что такое прототип? Руководство по функциональному UX

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

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

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

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

Выйдите на новый уровень прототипирования

Создавайте интерактивные компоненты из системы проектирования вашей команды.

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

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

 

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

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

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

Прототипы обладают четырьмя основными качествами:

• Представление — Сам прототип, т.е. бумажный и мобильный, или HTML и рабочий стол.
• Точность — Точность прототипа, то есть уровень детализации — низкая точность или высокая точность.
• Интерактивность — Функциональность, доступная пользователю на этапе тестирования, например, полностью функциональная, частично функциональная или только для просмотра.
• Эволюция — Жизненный цикл прототипа. Некоторые создаются быстро, тестируются, выбрасываются, а затем заменяются улучшенной версией (известной как «быстрое прототипирование»). Другие могут быть созданы и улучшены, в конечном итоге превратившись в конечный продукт.

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

Одним из наших девизов, которым мы верим в UXPin, является «тестируйте рано и тестируйте часто».

По словам директора по UX Elementor, дизайнеры платформы для создания веб-сайтов — в среднем от четырех до пяти сеансов прототипирования, в зависимости от сложности данного дизайна.

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

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

Наиболее полезная методология прототипирования

Мы собираемся исследовать прототипы в трех типах прототипов: бумажном, цифровом и HTML.

Бумажные прототипы

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

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

Бумажный прототип с низкой визуализацией и низкой функциональностью.

Преимущества бумажных прототипов

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

Недостатки

• Нереалистичность — Каким бы искусным ни было искусство или мастерство, бумажные прототипы никогда не будут чем-то большим, чем нарисованные от руки изображения цифрового продукта. Таким образом, несмотря на то, что бумажные прототипы быстро рисуются, они практически не дают результатов при пользовательском тестировании.
• Ложные срабатывания — Иногда бумажные прототипы не подтверждают правильность идей. То, что кажется хорошей идеей на бумаге, может не сработать в цифровом каркасе.
• Отсутствие внутренних реакций — Бумажные прототипы полагаются на воображение пользователя, добавляя перерыв между видением стимула и реакцией на него. Эта «интуитивная» реакция имеет решающее значение для успешного UX.

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

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

• Бумажные прототипы как метод тестирования удобства использования Джастин Мифсуд
• Лучшее использование бумаги в UX дизайне от Marcin Treder
• Дизайн пользовательского интерфейса iPhone, дизайн бумажного прототипа (видео)
• Шаблоны бумажных прототипов для печати предоставлены журналом Tripwire Magazine

Цифровое прототипирование

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

Существует два типа цифровых прототипов:

• Прототипы с низкой точностью: поток пользователей с использованием каркасов
• Прототипы высокой точности: пользовательский процесс с использованием мокапов

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

Дизайнеры создают прототипы, используя такие инструменты проектирования, как Figma, Adobe XD и другие. Иногда не дизайнеры из продуктовых команд используют Powerpoint или Google Slides для моделирования пользовательских потоков.

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

Преимущества цифрового прототипирования

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

Недостатки

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

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

Вот несколько полезных ресурсов для создания цифровых прототипов:

• 10-минутный урок быстрого прототипирования Марека Бауэрса

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

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

Но с UXPin Merge это не так!

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

Например, с помощью технологии слияния UXPin команды могут использовать компоненты React, извлеченные из репозитория Git, или компоненты Storybook для создания полнофункциональных высокоточных прототипов. С UXPin Merge участникам никогда не придется «представлять», что будет делать кнопка или раскрывающийся список, потому что прототип работает так же, как конечный продукт!

Низкий визуальный/высокий функциональный прототип встроенного HTML. (Изображение предоставлено Майком Хиллом)

Преимущества

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

Недостатки

• Зависит от уровня навыков дизайнера — Ваш HTML-прототип хорош настолько, насколько хороша ваша способность кодировать. Плохо закодированные прототипы могут вызвать проблемы с удобством использования, которые не имеют ничего общего с UX-дизайном!
• Препятствует творчеству — Кодирование требует времени и внимания для создания пригодного для использования прототипа. Дизайнеры могут не достичь такого же уровня инноваций или творчества, как при использовании знакомого инструмента дизайна.

Вот несколько полезных ресурсов по HTML-прототипированию:

• Проектирование с помощью кода , Энди Фитцджеральд
• Преимущество быстрого прототипирования от ZURB
• UXPin Merge для интерактивного прототипирования Роберт Киркман

Процесс прототипирования

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

(Примечание: мы советуем ВСЕГДА тестировать прототип при переходе от низкочастотного к высокочастотному.)

Бумага => Низкочастотный цифровой => Высококачественный цифровой => Код

Большинство дизайнеров следуют бумаге => лоу-фай цифра => хай-фай цифра => процесс кодирования для прототипирования — так мы разработали UXPin :).

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

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

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

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

Бумага => Lo-fi Digital => Код

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

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

Процесс точно такой же, как в примере выше, за исключением того, что команды пропускают этап Hi-Fi Digital.

Низкоточный прототип, созданный во время редизайна Yelp.

Высокоточный прототип, созданный во время редизайна Yelp.

HTML-прототипирование => Код

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

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

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

Бумага => UXPin Merge — Hi-Fi прототипирование => Код

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

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

Результат: больше никаких «воображений!» Ваш прототип будет работать так же, как конечный продукт. Прототипирование в инструменте проектирования на основе кода, таком как UXPin Merge, означает, что инженеры могут создавать конечный продукт значительно быстрее, чем работая с векторными проектами. Откройте для себя UXPin Merge.

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

Нашли это полезным? Поделиться с

от UXPin 14 апреля 2023 г.

No related posts.