Теория прототипирования

Урок 1
Что такое UX/UI?
Урок 2
Навыки прототипирования
Урок 4
Навыки формирования дизайна
Урок 5
Дизайн для MVP
Урок 3
Прототип для MVP
Прототипирование и дизайн
1
Урок 5
Обзор нестандартных интерфейсов
2
3
4
5
6
2
1

Что обсудим?
Повторим, что такое UX/UI
Прототип
Сбор данных
Юзкейсы
Юзабилити тест
Приоритезация
Постулаты хорошего дизайна
Модуль, курс или раздел урока

Повторяем UX
Пользовательский опыт - то, какие впечатления пользователь получает от использования продукта
UX-дизайн - это проектирование структуры интерфейса на основе исследований пользовательского опыта и поведения
Модуль, курс или раздел урока

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

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

Не начинаем работу над прототипом продукта без данных
Прототипирование и дизайн

Прототип
Может создаваться на разных этапах жизни продукта
новый продукт
существующий продукт (для нового функционала)
Модуль, курс или раздел урока

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

Сбор данных вне компании
“Данные бывают разными: сильными и слабыми”
Сильные данные - поведение
Что делает человек
Слабые данные - мнение
Что говорит человек
Модуль, курс или раздел урока

Какие исследования могут нам помочь?
Прототипирование и дизайн

Исследования
Качественные
Почему люди делают то, что они делают (наблюдение, общение)
Количественные
Можно измерить численно (метрики)
Модуль, курс или раздел урока

Качественные исследования
Глубинные интервью
Общение один на один с пользователем по заранее подготовленному сценарию
Фокус группы
Общение с группой пользователей по определенному сценарию
Модуль, курс или раздел урока

Количественные исследования
- Опрос/анкета Список закрытых вопросов на большую группу пользователей
А/Б тесты, метрики
Сравнение метрик двух версий реализации функциональности
Статистика
Общедоступные данные статистики
Модуль, курс или раздел урока

Юзкейсы
Сценарии использования
продукта
Прототипирование и дизайн

Юзкейс
Сценарий использования (англ. use case) — в разработке программного обеспечения это описание поведения системы, когда она взаимодействует с кем-то из внешней среды
Модуль, курс или раздел урока

Уровень детализации
Низкий - кейс применения
Высокий - ТЗ, спецификация
Модуль, курс или раздел урока

Создание
прототипа
Прототипирование и дизайн

Модуль, курс или раздел урока

Модуль, курс или раздел урока

Модуль, курс или раздел урока

Модуль, курс или раздел урока

Юзабилити
тестирование
Прототипирование и дизайн

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

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

Виды юзабилити тестов
По сценарию
По сценарию
Без сценария
По месту
Кабинетные
Полевые
Модуль, курс или раздел урока

Какие документы нужны
Модуль, курс или раздел урока
Описание ЦА
Сценарий
Опросник
NDA (договор о неразглашении, если нужно)

Какое оборудование нужно
Модуль, курс или раздел урока
Тихая комната
Ноутбук модератора
Монитор, на котором будет дублироваться экран респондента
Девайс респондента
Микрофон и веб-камера

Где найти и как выбирать респондентов
Модуль, курс или раздел урока
Окружение
Соцсети
Рекрутинговое агентство

Дизайн
Базовые постулаты
Прототипирование и дизайн

Эффективность
Модуль, курс или раздел урока
Какая самая обыденная задача, которую решает пользователь ежедневно?
- Запись контента, редактирование или просмотр?
Выполнение сложной последовательности действий?
Максимально облегчите эту задачу

Модуль, курс или раздел урока

Ясность
Модуль, курс или раздел урока
Где я нахожусь?
Что я могу сделать
Что произойдет, когда я сделаю это?
Что только что произошло?

Модуль, курс или раздел урока

Согласованность и структура
Модуль, курс или раздел урока
Введите четкую визуальную иерархию, самые важные элементы больше и заметнее
Согласованность навигации
Повторяющиеся элементы (одно и то же действие отображаем одинаково)

Модуль, курс или раздел урока

Узнаваемость
Модуль, курс или раздел урока
В различный продуктах есть базовые сценарии, которые реализованы похожим образом, такие паттерны можно перенимать и в своих продуктах, чтобы упростить пользовательский опыт.
- Иконки (Сообщения, поиск)
Навигация (Таб бар)
Цветовые ассоциации

Модуль, курс или раздел урока

Гибкость
Модуль, курс или раздел урока
Учитывайте различные устройства и разрешения
Как минимум проверяйте основные платформы и разрешения
Продумайте все возможные случаи (стейты) с контентом
Разные локализации, много или мало текста, нет текста

Модуль, курс или раздел урока

Общий алгоритм
Прототипирование и дизайн

Алгоритм
Модуль, курс или раздел урока
Сбор данных (цели, аудитория и тд)
Выделение основного пользовательского сценария (юзкейс)
Визуализация сценария в мокапах (wireframes)
Юзабилити тест
Дизайн интерфейса

Домашнее
задание
Создайте карандашный драфт (от руки и загрузите фото в Google Drive или через онлайн редактор Loneti.ru) или мокап (Moqups.com) вашего продукта
Добавьте описание продукта (обязательно!)
Отправьте ссылку (не забудьте расшарить доступ!)
Прототипирование и дизайн