- Узнайте о стандартных методах работы с пользовательским интерфейсом
- Создайте бумажный прототип вашего приложения
- Получите отзывы пользователей, используя свой прототип
Вот задания для этого урока:
ПРОТОТИПИРОВАНИЕ
Теперь, когда у вас есть идея минимально жизнеспособного продукта, самое время подумать о том, как будет выглядеть ваш проект, и набросать несколько идей.
A прототип это ранняя модель чего-либо.
Разработчики приложений обычно делают бумажный прототип своего приложения, прежде чем приступить к его написанию.
Бумажный прототип - это нарисованное от руки представление того, как будет выглядеть пользовательский интерфейс вашего приложения. Обычно он включает в себя рисунки каждого экрана вашего приложения, изображающие различные состояния.
ПОЧЕМУ ПРОТОТИП?
- Вы можете быстро передать свои идеи визуально.
- Это совместная работа!
- Когда вы работаете на бумаге, все происходит более непринужденно, и разговоры возникают в результате экспериментов.
- Это недорого!
- Вам не придется тратить много времени и денег.
- Вам не нужен доступ к компьютеру или Интернету.
- Для этой части процесса вам не нужно быть техническим экспертом.
- Вы можете увидеть, как пользователи реагируют на ваш прототип, чтобы быстро понять, что в вашем дизайне может работать, а что нет.
- Решения по дизайну могут быть подтверждены до того, как вы потратите время на разработку и кодирование приложения.
Узнайте, как другие команды Technovation Girls создавали бумажные и цифровые прототипы в этом видео!
Совет для менторов
Лучшие практики: Знакомя студентов с бумажными и картонными прототипами, подчеркните, что для проверки идей важно начинать с простых и недорогих моделей. Например, "Бумажные и картонные прототипы - это как черновые наброски вашего проекта. Они помогают вам увидеть, как выглядит и работает ваша идея, прежде чем вы сделаете окончательный вариант. Эти простые модели позволяют быстро внести изменения и понять, что работает лучше всего".
Бумажный прототип можно использовать для получения отзывов от потенциальных пользователей (т.е. членов семьи, других Наставников, друзей, членов сообщества и т.д.). Эти отзывы могут стать частью обратной связи, включенной в окончательный вариант материалов.
В следующих видеороликах показан пример прототипирования проекта с сопутствующим оборудованием (слева) и процесс тестирования бумажного прототипа (справа).
Направляющие вопросы, которые можно задать студентам:
Почему полезно создать простой прототип из бумаги или картона, прежде чем делать конечный продукт?
Как изготовление модели из бумаги или картона может помочь вам улучшить дизайн?
Какие вещи вы можете узнать, тестируя бумажный прототип, о которых не узнали бы в противном случае?
Советы для менторов предоставлены при поддержке AmeriCorps.
ЭЛЕМЕНТЫ ПРОТОТИПА
Продолжайте эти вещи Помните об этом, когда будете создавать свой бумажный прототип. Наведите курсор на каждую карточку, чтобы узнать больше.
Пользователи
Пользователи
Типы устройств
Типы устройств
Телефон против планшета?
Доступность
Доступность
Последовательность
Последовательность
ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
Создание прототипа - это все о том, как пользователь взаимодействует с вашим приложением. Для этого используется термин пользовательский интерфейс или UI. Он включает в себя все элементы, такие как кнопки, текстовые поля и слайдеры, которые позволяют пользователю использовать ваше приложение.
Другой термин для проектирования цифровых продуктов - пользовательский опытили UX. Каждый из них объясняется ниже.
Пользовательский интерфейс
Как пользователи взаимодействуют с вашим приложением. Он включает в себя все элементы, такие как кнопки, текстовые поля и слайдеры, которые позволяют пользователю использовать ваше приложение.
Дизайн пользовательского интерфейса нацелен на то, чтобы сделать ваше приложение визуально привлекательным, интуитивно понятным и простым в использовании.
Опыт пользователя
Как пользователи воспринимают ваше приложение. Он включает в себя пользовательский интерфейс, но в большей степени связан с эмоциями, отношением и поведением пользователей.
UX-дизайн - это все о потребностях и целях пользователей, а также об улучшении их общего опыта.
ОСОБЕННОСТИ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА
Ниже перечислены некоторые ключевые части пользовательского интерфейса мобильного приложения
НАВИГАЦИЯ
Навигация - это то, как пользователи находят то, что ищут в приложении. Вот несколько примеров вариантов навигации.
КОНТЕЙНЕР
Эти компоненты позволяют группировать содержимое вместе. Это помогает при компоновке частей экрана, а также при скрытии и отображении частей.
ВХОД
Компоненты ввода позволяют пользователю вводить информацию в приложение. Ниже приведено несколько примеров.
ИНФОРМАЦИЯ
Эти компоненты позволяют приложению обмениваться информацией с пользователями.
ИСПОЛЬЗУЙТЕ СТАНДАРТНЫЕ ЭЛЕМЕНТЫ
Возможно, вы хотите, чтобы ваше приложение выглядело по-другому, чтобы выделиться на фоне конкурентов. Однако использование стандартных элементов может помочь пользователям быстрее понять, как пользоваться вашим приложением.
Например, большинство пользователей знакомы с выпадающим меню. Вы можете разработать новый тип меню, но это может сбить пользователей с толку. Придерживайтесь привычных компонентов, чтобы облегчить работу пользователям.
ОСТАНОВИСЬ И ПОПРОБУЙ
- Загрузите новое приложение из магазина приложений прямо сейчас.
- Если вам нужно вдохновение, попробуйте AllTrails (iOS или Android) или Blinkist (iOS или Android)
- Какие компоненты в нем используются?
- Попробуйте использовать приложение около 5 минут.
- Сколько времени вам потребовалось, чтобы понять, как им пользоваться?
Посмотрите это короткое видео с Мелиссой Пауэл и Мариам Шайх из Google о создании эскизов и бумажных прототипов.
ДЕЯТЕЛЬНОСТЬ 1: БУМАЖНЫЙ ПРОТОТИП
Сделайте эскиз экрана для вашего приложения
- Как пользователи будут переходить от экрана к экрану?
- Как они будут вводить информацию, необходимую для приложения?
- Как будет отображаться информация?
- Как она будет эстетично оформлена?
- Продумайте цветовую гамму, шрифт, логотип
ПОЛУЧИТЬ ОТЗЫВ
Теперь, когда у вас есть что-то физическое для представления вашего решения, пришло время получить отзывы пользователей!
Потенциальные пользователи должны опробовать его и дать вам несколько честный отзывы.
Что вы хотите узнать в результате тестирования с помощью пользователей?
Один из методов:
- Дайте пользователям набор задач, которые они должны выполнить с помощью вашего приложения, и посмотрите, смогут ли они справиться с ними без вашего вмешательства.
- Один из членов команды может выступать в роли "компьютера".
- изменение экранов или их частей на основе взаимодействия с пользователем
- Другой член команды ведет записи .
- записывает действия пользователя, его комментарии и реакции.
- С разрешения вы также можете записать сеанс тестирования.
Помните, что ваши тестировщики находятся здесь, чтобы помочь вам! Не судите и не вмешивайтесь в их взаимодействие (за исключением того, что "компьютер" отвечает/обновляет прототип в зависимости от действий).
Просто принимайте их отзывы с благодарностью.
Вот отличный пример пользовательского тестирования приложения для мастерской по ремонту велосипедов.
ЗАДАЧА 2: ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ
Протестируйте свой бумажный прототип с 2-3 пользователями
- Покажите прототип пользователям.
- Попросите пользователей выполнить задачу с помощью прототипа.
- Пусть они попробуют выполнить задание без посторонней помощи.
- Член команды может выступать в роли "компьютера" и реагировать на его действия.
- Другой член команды (или два) записывает действия пользователей, их комментарии и реакцию.
РЕФЛЕКСИЯ
Мы рекомендуем сохранить ваш бумажный прототип. Вам нужно будет возвращаться к нему по мере создания проекта. Вам также следует сфотографировать свой прототип.
ОБЗОР ОСНОВНЫХ ТЕРМИНОВ
- Прототип - ранняя модель продукта
- Бумажный прототип - нарисованное от руки представление того, как будет выглядеть ваше приложение
- Пользовательский интерфейс (UI) - то, как пользователь физически взаимодействует с мобильным приложением
- Пользовательский опыт (UX) - ощущения пользователя от мобильного приложения до, во время и после его использования
ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ
Несмотря на то, что бумажные прототипы являются наиболее предпочтительными, особенно в качестве первого шага, вы также можете использовать цифровые инструменты для создания прототипа вашего приложения.
Многие инструменты стоят недешево, но обычно есть и бесплатная версия, которую можно использовать с ограниченными возможностями или проектами. Вот несколько вариантов.
- Слайды Google (легко и бесплатно!)
- InvisionApp
- Figma
- POP от Marvel