Создаем востребованные продуктыС чего начать и к чему стремиться

Азбука дизайн-мышления

UX и UI

UI — средство взаимодействия с объектом (инструментом, digital-продуктом, everyday thing)

Средствами посыла и возврата информации

ввод/вывод, управление/обратная связь

UI — средство взаимодействия с объектом (инструментом, digital-продуктом, everyday thing)

Характеризуется

UX — опыт человека, предшествующий, сопровождающий и оставшийся после взаимодействия с продуктом.

UX — опыт человека, предшествующий, сопровождающий и оставшийся после взаимодействия с продуктом.

UX — опыт человека, предшествующий, сопровождающий и оставшийся после взаимодействия с продуктом.

Эмоции, знания, навыки…

жизнь, короче:)

Дизайн-мышление — это методика создания нового UX…

Дзен

Дизайн-мышление — это методика создания нового UX…

… который лучше, чем старый UX.

ДзенUX UX

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

Опыт

1

Следующие 3 буквы

М

Ж

П

МЖП

MVP

MVPMinimal Viable Product

Принцип создания MVP

Продукт

2

Знакомьтесь, пользователи!

Факты о пользователях

• Они разные!

Факты о пользователях

• Они разные!

• Они не такие как я!

Факты о пользователях

• Они разные!

• Они не такие как я!

• Они могут хотеть ненужные вещи.

Факты о пользователях

• Они разные!

• Они не такие как я!

• Они могут хотеть ненужные вещи.

• Они могут не догадываться, что им нужно на самом деле.

Факты о пользователях

• Кто будет пользоваться продуктом?

Важно определить

• Кто будет пользоваться продуктом?

• Кто точно не будет им пользоваться?

Важно определить

• Кто будет пользоваться продуктом?

• Кто точно не будет им пользоваться?

• Что сделает их жизнь хотя бы чуточку легче и светлее?

Важно определить

Аудитория

3

ОПА

321

Аудитория

Опыт Продукт

Методика дизайн-мышления

А нужен ли продукт?

1. Изучайте аудиторию и текущий UX

Дизайн-исследования

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

Карта эмпатии

UX: дорога до работы

Дизайн-исследование

• Как вы сейчас добираетесь до работы?

• Зачем вы это делаете? (5-10 зачем и почему)

• Что вы слышите и видите по пути на работу?

• Как себя ощущаете? Тело выдерживает дорогу?

• Нравится проводить время в дороге? Страшно? Бесит? Какой был ваш самый лучший путь на работу?

Карта эмпатии

Исследуйте сами• Наблюдайте

• Общайтесь

• Проживите сами опыт пользователей

• Изучите вторичные исследования

Исследуйте сами• Наблюдайте

• Общайтесь

• Проживите сами опыт пользователей

• Изучите вторичные исследования

Конспектируйте!

Соберите результаты• Выделите 1-3 характерных персонажа вашей целевой аудитории (меньше — лучше)

• Заполните карту эмпатии для каждого

• Оформите записи с исследований

Что делать с собранной информацией?

Анализировать!

Соберите всю информацию вместестикеры и большая доска/стена в помощь!

Соберите всю команду вместеобсуждайте, делитесь находками, ловите озарения

Кстати, о команде

Кстати, о команде• Командой работать продуктивнее;

Кстати, о команде• Командой работать продуктивнее;

• 3-5 человек — оптимальный размер команды для дизайн-мышления;

Кстати, о команде• Командой работать продуктивнее;

• 3-5 человек — оптимальный размер команды для дизайн-мышления;

• Разнопрофильная команда — хорошо!

Кстати, о команде• Командой работать продуктивнее;

• 3-5 человек — оптимальный размер команды для дизайн-мышления;

• Разнопрофильная команда — хорошо!

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

Роли в команде

1. Продюсер-руководитель

2. Психолог-фасилитатор

Выслушав меня, мой психолог записался к своему

3. Программист

4. Дизайнер

5. Исследователь-эмпат

Соберите всю команду вместеобсуждайте, делитесь находками, ловите озарения

2. Сфокусируйтесь

Выберите одного персонажаи сделайте его счастливым

Как мы можем помочь [имя персонажа] [решить проблему] так, чтобы (потому что) [озарение!]

Сформулируйте задачу

Решая 1 боль 1 персонажа на основе 1 озарения, можно прийти к решению более широкой проблемы и получить +10 новых озарений!

Решая 1 боль 1 персонажа на основе 1 озарения, можно прийти к решению более широкой проблемы и получить +10 новых озарений!

а ещё в короткие сроки создать рабочий сервис (MVP)

Формулировка задачи — 50% решения!

3. Генерируйте идеи

Главный принцип

Принципы работы с идеями

• Мозгоштурм отдельно, критика отдельно!

• Всегда говори «Да, и…!»

• Записывайте идеи на стикеры и выбирайте командой

• Выберите идеи для MVP и…

4. Проектируйте

Первые итерации можно рисовать/лепитьчто угодно!

Проектируйте, чтобы• Быстро проверить гипотезы

• Недорого ошибиться и начать сначала

• Донести свои идеи до команды

• Сгенерировать вместе новые идеи

Инструменты UI

• Бумага и карандаш/доска и фломастеры

• Balsamiq Mockups

• Axure

• proto.io

5. Тестируйте…

… и дорабатывайте!

Резюме

Дизайн-мышление

ЭмпатияФокусировка

Генерация идей

Выбор идеи

Прототипирование

Тест

Q&A time!

Почитать• Стив Круг «Не заставляйте меня думать» (переиздание)

• Jeff Gothelf «Lean UX»

• http://tilda.education/courses/web-design/designthinking/

• UX гайдлайны iOS и Android

• 10 must read UX books

• Как писать заголовки (Максим Ильяхов)

Ещё осталось время?

Психофизиологияособенности человеческого восприятия

Правило 7 +/- 2Меньше — лучше!

Геометрическая памятьБессознательные действия

Группировка объектовПодобное притягивает подобное

Контраст объектаОбратите внимание на меня!

Читаемость текстаКартинки быстрее проникают в мозг

Пример UI