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

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

ПРОТОТИПИРОВАНИЕ

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

A прототип это ранняя модель чего-либо.

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

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

бумажный прототип экранов приложений

ПОЧЕМУ ПРОТОТИП?

Узнайте, как другие команды Technovation Girls создавали бумажные и цифровые прототипы в этом видео!

Лучшие практики: Знакомя студентов с бумажными и картонными прототипами, подчеркните, что для проверки идей важно начинать с простых и недорогих моделей. Например, "Бумажные и картонные прототипы - это как черновые наброски вашего проекта. Они помогают вам увидеть, как выглядит и работает ваша идея, прежде чем вы сделаете окончательный вариант. Эти простые модели позволяют быстро внести изменения и понять, что работает лучше всего".

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

В следующих видеороликах показан пример прототипирования проекта с сопутствующим оборудованием (слева) и процесс тестирования бумажного прототипа (справа).

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

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

Как изготовление модели из бумаги или картона может помочь вам улучшить дизайн?

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

Советы для менторов предоставлены при поддержке AmeriCorps.

стилизованная буква A, логотип AmeriCorps в морском цвете

ЭЛЕМЕНТЫ ПРОТОТИПА

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

Пользователи

Пользователи

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

Типы устройств

Типы устройств

Как будет выглядеть ваше приложение на iPhone и Android?
Телефон против планшета?

Последовательность

Последовательность

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

ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС

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

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

Пользовательский интерфейс

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

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

Опыт пользователя

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

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

ОСОБЕННОСТИ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

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

НАВИГАЦИЯ

Навигация - это то, как пользователи находят то, что ищут в приложении. Вот несколько примеров вариантов навигации.

КОНТЕЙНЕР

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

ВХОД

Компоненты ввода позволяют пользователю вводить информацию в приложение. Ниже приведено несколько примеров.

ИНФОРМАЦИЯ

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

ИСПОЛЬЗУЙТЕ СТАНДАРТНЫЕ ЭЛЕМЕНТЫ

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

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

ОСТАНОВИСЬ И ПОПРОБУЙ

  1. Загрузите новое приложение из магазина приложений прямо сейчас. 
  2. Если вам нужно вдохновение, попробуйте AllTrails (iOS или Android) или Blinkist (iOS или Android)
  3. Какие компоненты в нем используются? 
  4. Попробуйте использовать приложение около 5 минут. 
  5. Сколько времени вам потребовалось, чтобы понять, как им пользоваться?

Посмотрите это короткое видео с Мелиссой Пауэл и Мариам Шайх из Google о создании эскизов и бумажных прототипов.

ДЕЯТЕЛЬНОСТЬ 1: БУМАЖНЫЙ ПРОТОТИП

Расчетное время: 60 минут

Сделайте эскиз экрана для вашего приложения

Разработайте функции из рабочего листа MVP из Главы 4. Не забудьте учесть:
  • Как пользователи будут переходить от экрана к экрану?
  • Как они будут вводить информацию, необходимую для приложения?
  • Как будет отображаться информация?
  • Как она будет эстетично оформлена?
  • Продумайте цветовую гамму, шрифт, логотип
Обратите внимание, что вы можете сделать копию рабочего листа и отредактировать его по мере необходимости.
Открыть рабочий лист

ПОЛУЧИТЬ ОТЗЫВ

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

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

Что вы хотите узнать в результате тестирования с помощью пользователей? 

Один из методов:

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

Помните, что ваши тестировщики находятся здесь, чтобы помочь вам! Не судите и не вмешивайтесь в их взаимодействие (за исключением того, что "компьютер" отвечает/обновляет прототип в зависимости от действий).

Просто принимайте их отзывы с благодарностью.

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

ЗАДАЧА 2: ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ

Расчетное время: 30 минут

Протестируйте свой бумажный прототип с 2-3 пользователями

  1. Покажите прототип пользователям.
  2. Попросите пользователей выполнить задачу с помощью прототипа.
  3. Пусть они попробуют выполнить задание без посторонней помощи.
  4. Член команды может выступать в роли "компьютера" и реагировать на его действия.
  5. Другой член команды (или два) записывает действия пользователей, их комментарии и реакцию.

РЕФЛЕКСИЯ

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

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

ОБЗОР ОСНОВНЫХ ТЕРМИНОВ

  • Прототип - ранняя модель продукта
  • Бумажный прототип - нарисованное от руки представление того, как будет выглядеть ваше приложение
  • Пользовательский интерфейс (UI) - то, как пользователь физически взаимодействует с мобильным приложением
  • Пользовательский опыт (UX) - ощущения пользователя от мобильного приложения до, во время и после его использования

ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

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

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