Material Design для

проектирования продуктов β

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

приложения?

Agenda

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

Кто такие

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

Цель

● Научиться проектировать интерфейсы вне зависимости от навыков

● Увидеть, как быстро можно скорректировать требования к продукту через визуальные языки

● Познакомиться с Material

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

Быстрое проектирование

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

Роли в игре

Правила игры

● Уговор о визуальном языке● Игрок: Режим “Что я вижу?” ● Мастер:

o создает экран за 5 минут o отвечает только визуально o исправления только, если Игрок зашел в тупик и

не смог найти чего-то за ход ● Игрок мыслит вслух, подаёт команды, спрашивает

o “...Я нажимаю на кнопку…”o “...Я ввожу текст… Что происходит?...”

Визуальный язык Material Design от Google ( http://www.google.com/design )

● не графический стиль, а визуальный язык

● философия минимализма

● глубина – инструмент визуализации

● осмысленная анимация как средство

улучшения UX

● фокус на контенте

Принципы

● одноцветные плоские элементы

● основное решение задачи всегда под рукой

● элементы формируют слои, которые располагаются

друг над другом. Чем важнее элемент, тем он выше

● анимация создаёт сценарий без разрывов и даёт

понимание о том, что происходит

● контент упаковывается в контейнеры: однообразный

в списки, разнообразный – в карточки

● самое большое внимание – к типографике и

действительно красивому контенту

Панель инструментов

Карточка

Главное действие

Карточка

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

Основное действие приложения (или инициация выбора действия) находится на экране в виде кнопки, которая тоже выше контента и отбрасывает тень.

OctoPaperKit

Стадия 1 : Генерация прототипа

4 4

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

Оба работают над кейсом, но отвечают за разное

● Выберите кто игрок(и), а кто мастер(а).

● Используйте таймер, чтобы четко отслеживать время.

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

минут● Потом Мастера проектируют интерфейс

4 4

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

прототип

Инструменты для быстрого создания прототипов

POPФотографируемУстанавливаем связиТестируем!

Плюсы

● интерактивная среда● простота и скорость

Прототип в POP и Обратный ход

● Команда выделяет группы тестирования o Наблюдательo Модератор

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

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

Мы делаем классные продукты! OctoPaperKithttp://octoberry.ru

team

@oc

tobe

rry.

ru