Руководство для начинающих по быстрому прототипованию

1656606498 rukovodstvo dlya nachinayushhih po bystromu prototipovaniyu

автор Анант Джайн

Все, что вам нужно знать о быстром создании прототипов за 7 минут (или меньше)

5qzGNw8C9xwwmdJldM37fw6w75ORpHLoKfNO
Фото Дениз Янс на Unsplash

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

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

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

b6UKvthzAF9CuxMEvKyCWbFrz-1Y4ebUTD9W

Что такое быстрое прототипирование?

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

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

A5VjPPtQAwHuorrrfsNyrUKkIZwGQe5VIvWG

Что вам нужно для прототипа?

Прототип не предназначен как полнофункциональная версия системы, а предназначен только для того, чтобы помочь визуализировать пользовательский опыт конечного продукта. Как говорит партнер по дизайну Google Ventures Даниэль Бурка:

Идеальным прототипом должно быть «качество Златовласки». Если качество слишком низкое, люди не поверят, что прототип является подлинным продуктом. Если качество слишком высоко, вы будете работать всю ночь и не закончите. Вам нужно качество Златовласки. Не слишком высоко, не слишком низко, но именно так.

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

  • Новые функции: Прототип Instagram Stories в приложении Instagram (до их запуска)
  • Изменения в рабочем процессе: Новый издательский поток Prototype Medium после введения платного членства
  • Новая технология: Прототип путешествия на автомобиле!
  • Новый интерфейс: Прототип интерфейса Apple Watch (на момент его первого запуска)
NurFywb8TPPnJmC4RGVvQvAaDnXgySVEinbY

Итак, теперь вы понимаете, для чего нужно быстрое прототипирование. Но как это сделать? Мы рассмотрим это дальше.

Быстрый процесс создания прототипов

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

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

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

Сколько нужно включить в свой макет?

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

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

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

Но подождите, что это за верность?

fCfU17dw1FhQ-o7HRasPE8n4WinDm8uIpGWX

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

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

Визуальный (эскизный или стилизованный)

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

VKHMotJwxYRMeoPLi8MyeRsNYLgAGh1gPNyV
Статические прототипы с двумя разными уровнями точности – эскизными (низкая точность) и стилизованными (высокая точность)

Функциональный (статический или интерактивный)

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

ac1jEB5Ae93MeTGmH0dLxcbDJ3BCf-2xS3wi
Интерактивный макет высокой точности. (источник)

Содержимое (Lorem ipsum против реального содержимого)

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

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

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

Какие существуют уровни верности?

  • Низкая точность: Low-Fi методы, как карандаш и бумага эскизы создают статические прототипы с низкой визуальной и содержательной точностью, что позволяет быстро и легко изменять. Это заставляет пользователя сосредоточиться на функциональности и о том, как они будут использовать систему вместо того, как она выглядит.
  • Средняя точность: Компьютерные инструменты, такие как Visio, создают то, что можно назвать прототипами средней точности в форме каркасы и рабочие процессы. Этот уровень точности используется для демонстрации поведения системы, определения того, удовлетворяются ли потребности пользователей и оценки опыта пользователя.
  • Высокая точность воспроизведения: Прототипы высокой точности иногда могут быть такими. реалистичный которые часто принимают за настоящий продукт. Их тоже гораздо больше трудоемкий производить. Такие инструменты как InVision, Sketch, Figma, Adobe XD, Framer и т.д. позволяют нетехническим пользователям создавать высококачественные прототипы. Хотя они не могут быть превращены в полезный код, они могут быть очень удобными позже для тестирования удобства использования или обучения пользователей.
ACvrWDgzvqdG6BjR3VGbWGMNNFbfiJNhl9EJ
От Low-Fi до Med-Fi до Hi-Fi. (источник)

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

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

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

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

Существует широкий выбор инструментов для создания прототипов в зависимости от потребностей и подхода. Перед выбором инструмента следует задать несколько вопросов:

  • Сколько время понадобится ли, чтобы научиться пользоваться инструментом?
  • Делает это поддержка прототипы для нужд моего продукта (веб, программные приложения, мобильные приложения, новые технологии и т.д.)?
  • Позволяет ли мне инструмент поделитесь мои прототипы с другими и собирать их отзывы?
  • Как легко это внести изменения в прототип?
  • Могу ли я использовать предварительно определенные шаблоны а трафареты с этим инструментом?
K3erYAGxrQQ1NwGrxKlfxhImXszFR0cL1sQf
Бумага и карандаш, Sketch, Figma, Framer, Photoshop, Illustrator, XD, Origami…

Лучшие методы создания прототипов: что можно и нельзя делать

Что делать:

  • Работайте с пользователями и заинтересованными сторонами, чтобы получить максимум обратная связь и привлечь их к праву собственности на конечный продукт
  • Установите ожидания заранее убедившись, что пользователи и заинтересованные стороны знают, что создание прототипов – это способ получить ответы на конкретные вопросы, а не готовый продукт.
  • Сделайте свою высокую точность реалистичный (включая задержки ответа), чтобы пользователи и заинтересованные стороны не были разочарованы при сравнении его с конечным продуктом.
  • Сохранить шаблоны и трафареты для повторного использования в будущих проектах
FNeeP1IvLcp4wFsSifUhsqInn9WpvIvbhDdd

Нельзя:

  • Не создавайте прототип функций, которых не будет в конечном продукте
  • Не будьте перфекционистом. Довольно хорош твой друг. Цель быстрого прототипирования – дать всем общий язык.
  • Не прототипируйте все!

Если вам интересно, как вы должны тестировать свои прототипы, прочтите мой пост Тестирование юзабилити здесь:

Хорошо сохранен секрет прекрасного UX: тестирование юзабилити
Независимо от того, есть ли у вас только прототип или полноценный продукт, действительно хорошая идея проводить ежемесячные тесты юзабилити.medium.freecodecamp.org

wxhnCzxZeil1xl9xbecfmyRG1Haq-vJm4FMG

Спасибо, что прочитали это краткое руководство. Первоначально это было опубликовано как часть курса UX Design на Commonlounge, платформе, на которой есть курсы с небольшими уроками, подобными этим, на темы, начиная от Django и заканчивая машинным обучением, обеспечивающим наибольшую ценность за потраченное время.

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

O-5tUrbEFpQIl99ba4-aoq6F3IoYvpHNRhbz

Добавить комментарий

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