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

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

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

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

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

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

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

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

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

Один из наших девизов на UXPin: «Тестируй рано и тестируй часто».

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

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

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

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

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

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

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

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

Плохой визуальный / функциональный бумажный прототип.

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

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

Недостатки

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

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

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

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

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

Есть два типа цифровых прототипов:

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

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

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

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

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

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

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

Высококачественный прототип, созданный в ходе модернизации Yelp. (Просмотр большой версии)

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

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

Разработчики без навыков дизайна могут использовать метод paper => lo-fi digital => code, потому что он быстрее набирает код, чем учится использовать инструмент дизайна.

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

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

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

HTML-прототип => Код

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

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

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

Paper => UXPin Merge — Hi-Fi Prototyping => Code

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

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

Дополнительная литература

Мы составили эту статью из нашей бесплатной электронной книги: The Ultimate Guide to Prototyping. Если вы нашли это введение в создание прототипов полезным, мы настоятельно рекомендуем загрузить полную электронную книгу по прототипам!

Окончательное руководство по созданию прототипов включает:

• Как прототипирование вписывается в общий процесс проектирования
• Дополнительные описания отдельных прототипов
• 10 лучших практик создания прототипов
• Рекомендации по тестированию удобства использования
• Тонны инструментов и ресурсов

Загрузите бесплатную копию The Ultimate Guide to Prototyping, чтобы повысить свои навыки прототипирования!

Хотите узнать больше об инструментах для создания прототипов? См. Наши сравнения: