1. Material Design для
проектирования продуктов β
или как бумажные прототипы могут
стать реальным дизайном вашего
приложения?

2. Agenda
● Вы кто такие?
● Цель упражнения
● Wizard of Oz
● Material Design
● Проектирование
● Тестирование
● Профит :)

3. Кто такие
Лёха Серега Никитос

4. Цель
● Научиться проектировать интерфейсы
вне зависимости от навыков
● Увидеть, как быстро можно
скорректировать требования к продукту
через визуальные языки
● Познакомиться с Material

5. Почему это важно?

6. Быстрое проектирование
Wizzard of OZ - игровой подход к юзабилити
тестированию и проектированию ,
позволяющий спроектировать и
симулировать работу приложения, до
создания реального продукта.

7. Роли в игре

8. Правила игры
● Уговор о визуальном языке
● Игрок: Режим “Что я вижу?”
● Мастер:
o создает экран за 5 минут
o отвечает только визуально
o исправления только, если Игрок зашел в тупик и
не смог найти чего-то за ход
● Игрок мыслит вслух, подаёт команды, спрашивает
o “...Я нажимаю на кнопку…”
o “...Я ввожу текст… Что происходит?...”

9. Визуальный язык
Material Design
от Google ( http://www.google.com/design )
● не графический стиль, а визуальный язык
● философия минимализма
● глубина – инструмент визуализации
● осмысленная анимация как средство
улучшения UX
● фокус на контенте

10. Принципы
● одноцветные плоские элементы
● основное решение задачи всегда под рукой
● элементы формируют слои, которые располагаются
друг над другом. Чем важнее элемент, тем он выше
● анимация создаёт сценарий без разрывов и даёт
понимание о том, что происходит
● контент упаковывается в контейнеры: однообразный
в списки, разнообразный – в карточки
● самое большое внимание – к типографике и
действительно красивому контенту

11. Панель инструментов
Карточка
Главное действие
Карточка
Топ занимает панель с
заголовком, навигацией и
глобальными действиями
над контентом. Иногда
слева добавляется
боковое меню. Панель
всегда выше контента и
отбрасывает на него тень.
Основное действие
приложения (или
инициация выбора
действия) находится на
экране в виде кнопки,
которая тоже выше
контента и отбрасывает
тень.

14. OctoPaperKit

15. Стадия 1 : Генерация прототипа
4 4
Кейс проектирования: Пользователь хочет быстро переводить
деньги своим друзьям через мобильное приложение
(всевозможными способами)

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

17. Нет времени объяснять -
прототипируй
Первый раунд проходим вместе
● Игроки рассказывают и фантазируют первые 2-5
минут
● Потом Мастера проектируют интерфейс
4 4

18. Повторить еще 3 раза
4 минут - проход, 4 минут создаем
прототип

19. Инструменты для быстрого создания
прототипов
POP
Фотографируем
Устанавливаем связи
Тестируем!
Плюсы
● интерактивная среда
● простота и скорость

20. Прототип в POP и Обратный ход
● Команда выделяет группы
тестирования
o Наблюдатель
o Модератор

21. Ревью процесса

22. Язык, а не догма. NONAMEBANK Case

23. Мы делаем классные продукты!
OctoPaperKit
http://octoberry.ru
team@octoberry.ru