Download - IDealMachine October 2014
![Page 1: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/1.jpg)
iDM 15.oct.2014
![Page 2: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/2.jpg)
Intro / цели
![Page 3: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/3.jpg)
..мало проектировать интерфейсы, мало проектировать взаимодействие, мало делать какой-то продукт, систему, а необходимо проектировать опыт пользователя как единое целое
![Page 4: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/4.jpg)
Виктор Ерофеев
• Разработка софта, с 2000 года• Более 150 систем и проектов• (IT)-директор
CG Projects Group
• uxspb / profsoux• Microsoft MVP 2007-2014
Client Application Dev
![Page 5: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/5.jpg)
Agenda - часть раз (про UX)
про терминологию
• Что такое UX и зачем вам вообще это надо• Про «дизайн» и «дизайнеров»про теорию
• Как делать продукт, чтобы не переделывать• Естественные чит-коды в проектированииПерекур!
![Page 6: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/6.jpg)
Agenda – часть два (бизнес)
про бизнес и value
• Где лежат деньги (и зачем для этого UX)про методики и подходы• Разные уровни проектирования
• За что хвататься первым (engagement)• Как не облажаться в очевидных вещах• Где еще лежат деньги (облажаться дешевле)Перекур!• Дискуссия с выжившими
![Page 7: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/7.jpg)
«UX наоборот»
![Page 8: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/8.jpg)
i. Что такое UX и зачем вам это надо
Сабж?
![Page 9: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/9.jpg)
user experience
взаимодействиепроектирование взаимодействия
![Page 10: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/10.jpg)
user experienceto experience (smth)
![Page 11: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/11.jpg)
user experienceпроектирование
взаимодействия опыта, эмоций, ощущений практической отдачи эффективности в решении задач самих задач пользователя сценариев его работы
![Page 12: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/12.jpg)
Зачем вам это надо:
![Page 13: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/13.jpg)
1. Взаимодействия без experience не бывает
2. Если нельзя предотвратить – надо возглавить
Зачем вам это надо:
![Page 14: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/14.jpg)
Где experience
• User Interface / UX• Customer experience• Customer relations + sales• Issue management
• В эстетике, логике, сценариях
• В голове пользователя (!)
![Page 15: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/15.jpg)
- Что такое UX и зачем вам это надо?
![Page 16: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/16.jpg)
i. Про «дизайн» и «дизайнеров»
Чем занимается дизайнер
![Page 17: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/17.jpg)
- в СНГ дизайнер красит кнопки
Жосская правда:
![Page 18: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/18.jpg)
search: ux
![Page 19: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/19.jpg)
UI: объектUX: процесс
Отличие UX от UI - ?experience / interface
![Page 20: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/20.jpg)
designerdesign (n.)
![Page 21: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/21.jpg)
дизайнер != designer
дизайнер = иллюстраторdesigner = проектировщик
Промышленный дизайн – инженерная дисциплина
![Page 22: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/22.jpg)
![Page 23: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/23.jpg)
appearance
interaction
business logic
use cases
![Page 24: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/24.jpg)
appearance
interaction
business logic
use cases
UI
UX
![Page 25: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/25.jpg)
- какие должны быть возможности- как пользователь пользуется
- что при этом чувствует- какие сценарии реализует- с чем/как взаимодействует
Задачи UX-проектировщика
![Page 26: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/26.jpg)
appearance
interaction
business logic
use cases
interaction
appearance
appearance
appearance
![Page 27: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/27.jpg)
- Чем занимаетсяUX-проектировщик?
![Page 28: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/28.jpg)
iii. Как делать, чтобы не переделывать
Да, это про кейсы
![Page 29: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/29.jpg)
- какая есть у пользователя потребность?
- как мы можем ее закрыть
- что нам от него нужно
- как он будет себя вести
Постановка задачи
![Page 30: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/30.jpg)
кто (ролевая модель)делает что (функция)когда / в какой момент временис каким результатом (value +/-)
use case
![Page 31: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/31.jpg)
![Page 32: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/32.jpg)
то же самое текстом
• Клиент– заказать еду– сьесть– оплатить
• Официант– принять заказ– подать заказ– принять деньги
• Повар– принять заказ– приготовить еду– передать заказ
• Кассир– принять деньги– провести платеж
![Page 33: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/33.jpg)
- пожрать
- заказать билет- обработать фотку- записаться к врачу- посмотреть отзывы
customer needsрешение проблемы человека
Заинтересованные лица, цели, задачи, требования
![Page 34: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/34.jpg)
- пожрать провести вечер- заказать билет подобрать маршрут- обработать фотку иметь что показать- записаться к врачу взять справку- посмотреть отзывы купить и не пожалеть
«чтобы не переделывать»
customer needsрешение проблемы человека
![Page 35: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/35.jpg)
- пожрать провести вечер- заказать билет подобрать маршрут- обработать фотку иметь что показать
что важно, а что неткакой функционал в приоритете
какие у нас ниша и преимуществакак улучшить
![Page 36: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/36.jpg)
- как собрать кейсы:что для этого нужно?
![Page 37: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/37.jpg)
iiii. Как проектировать
Мы вроде знаем задачи и функции,
а получается отстой
![Page 38: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/38.jpg)
let’s get
physical
![Page 39: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/39.jpg)
- быстро- с минимальными затратами- с минимальными силами/вниманием- с положительной эмоцией
- решает реальную потребность
«удобно»
![Page 40: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/40.jpg)
- предсказуемо, знакомо
- просто / непосредственно
- без дополнительных абстракций
- функционально / продумано
«удобно»
![Page 41: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/41.jpg)
а) думать ux engineerб) тестировать ux lab
Как быть?
![Page 42: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/42.jpg)
ЭргономикаHCI
• Антропометрическая совместимость — учёт размеров тела человека (антропометрии), возможности обзора внешнего пространства, положения оператора при работе.
• Сенсомоторная совместимость — учёт скорости моторных операций человека и его сенсорных реакций на различные виды раздражителей.
• Энергетическая совместимость — учёт силовых возможностей человека при определении усилий, прилагаемых к органам управления.
• Психофизиологическая совместимость — учёт реакции человека на цвет, цветовую гамму, частотный диапазон подаваемых сигналов, форму и другие эстетические параметры машины.
![Page 43: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/43.jpg)
задачи по вниманию
• Внимание ограничено– количество элементов– взаимосвязи– связный контекст
• Внимание рассеяно– выделить главное– разделить статус
и действия
• Внимание / время– нотификации– сбор данных заранее– дайджесты
• Нечеткое восприятие– использовать мета-
контролы, схемы
• Локус внимания– выделять суть
![Page 44: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/44.jpg)
![Page 45: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/45.jpg)
![Page 46: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/46.jpg)
![Page 47: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/47.jpg)
- в чем основной cheat?
![Page 48: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/48.jpg)
бизнес:кейсы, потребности и роли
![Page 50: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/50.jpg)
v. Где лежит бабло
И почему UX для этого важен
![Page 51: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/51.jpg)
Откуда берется бабло - ?(и можно ли не думать про UX)
value
![Page 52: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/52.jpg)
Какой бывает value
• Решение проблемы, задачи• Улучшение порядка вещей, QoL• Удовольствие / удовлетворение• Социалка – статус, соцпруф
Value может стоить $$$
![Page 53: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/53.jpg)
Субъективность оценки
Деньги общие, а профит частный
!=
![Page 54: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/54.jpg)
Value +++
• Своевременность (операции)• Полнота, over deliver• Уникальность• Удача (limited time offer)• Ikea Effect• Декларируемая стоимость (D&G)• Владение, loss aversion
когда оценка возрастает
![Page 55: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/55.jpg)
UX, бизнес-кейсы:Игра с ненулевой суммой
Value → (inter)Action → Value+Успех = «получил больше чем вложил»
![Page 56: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/56.jpg)
black magic
тратит времятратит внимание
тратит деньги
получает решениеэкономит времяполучает эмоциюполучает статусполучает ресурс
тратит ресурсполучает деньги
added value
![Page 57: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/57.jpg)
Баланс игры
Затраты• Внимание• Время• Деньги• Память (RAM)• Контекст (T-shift)• Связи / interop• Физика
Приобретения• Время• Эмоция• Соцпруф• Деньги• Уверенность• Награда
![Page 58: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/58.jpg)
0. Реклама / вовлечение / регистрация
1. First time experience2. Первые решенные задачи3. Инструмент
4. Troubleshooting, поддержка
0. Кейсы выхода / возврата (tesla)0. Вовлечение других
∑
![Page 59: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/59.jpg)
- где лежит бабло?взаимодействие создает (персональную) ценность
![Page 60: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/60.jpg)
0. Разные уровни проектирования
![Page 61: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/61.jpg)
Разные уровни UX-проектирования
Ситуационный дизайн
Тактический дизайн
Стратегический дизайн
решить задачу максимально просто
единообразие, консистентность взаимодействия, визуальный язык, расширяемость, кривая обучения
«just works», образ-аналогия, модели, скеоморф, работа с брендом, customer story & lifestyle
![Page 62: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/62.jpg)
vi. За что хвататься первым
Приоритетыи engagement map
![Page 63: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/63.jpg)
80/20↓↓↓
20% улучшения, 80% профита
![Page 64: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/64.jpg)
Что пилить?
а) Частотный подход
то, что чаще всего используется
1000 просмотров списка800 «найти актуальные»100 правок90 правка последних пяти10 созданий нового5 удалений, 15 поисков
![Page 65: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/65.jpg)
Что пилить?
б) Engagement map / user journey
то, что понадобитсяв первую очередь
- выбор направлений, дат- выбор стыковок-маршрутов-цен- оплата и печать данных- комменты? отзывы?- настройка фотки в профиле?
FTE & inline tips
![Page 66: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/66.jpg)
выбрать?
Частотный
• есть типовой набор операций
• есть KPI / метрики эффективности
• нагрузка на внимание неравномерная
скорость операций
Engagement
• есть длинные сценарии
• воронка продаж• предполагается
(само)обучение пользователей
MVP→+→++→FFP
![Page 67: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/67.jpg)
-?
![Page 68: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/68.jpg)
vii. Как не облажаться в очевидных вещах
кейсы и потребности
![Page 69: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/69.jpg)
а) думать ux engineerб) тестировать ux lab
Как быть?
![Page 70: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/70.jpg)
«- застегни ширинку, закрой роти разуй, наконец, глаза»
сицилийская семейная поговорка
![Page 71: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/71.jpg)
Что работает (практика)
• Смотреть на задачи пользователей• Смотреть на конкурентов• Пробовать, на людях и себе (dogfood)• Упрощать («не делать», 80/20)• Быстро исправлять• Собирать истории (от power users)• Задавать неудобные вопросы• Моделить, скетчить, прототипить
![Page 72: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/72.jpg)
Что не работает
• Спрашивать пользователей– хочешь спросить – проверь (gladwell)
• Стоять над душой• Красивые картинки без логики– «нанять крутого рисовальщика» тоже нет
• «Подгонка под ответ»-ы стейкхолдеров– см. про кейсы и customer needs
• ?? A/B (good vs evil), focus groups, аудиты итп
![Page 73: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/73.jpg)
+ спросить профессионала
ugly coyote
![Page 74: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/74.jpg)
viii. Как облажаться дешевле
сабж
![Page 75: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/75.jpg)
time to market
«О, сколько нам открытий чудных»
• minimal value product• без продукта вообще
• первая копейка• первая жалоба• первое пожелание
![Page 76: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/76.jpg)
Прототипы
• Модель дешевле прототипа• Прототип дешевле prod-скетча• Скетч дешевле full feature-а
![Page 77: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/77.jpg)
Фрейминг
Сильное колдунство ↑
• Фишка продукта (beta, ctp, techprev, nightly)• Группа пользователей (power users, devmode)• Другая ниша
Ограничивайте риски + добавляйте value
![Page 78: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/78.jpg)
Underpromise, overdeliver
про обещания и лишние фичи
![Page 79: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/79.jpg)
Проектировать только по кейсам / UJm, кейсы только по собственным исследованиям
![Page 80: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/80.jpg)
“- Чем спрашивать у темноты «кто здесь?»,
лучше выстрелить, перезарядить и еще раз выстрелить.
Ошибайтесь быстрее
![Page 81: IDealMachine October 2014](https://reader035.vdocuments.pub/reader035/viewer/2022062514/55b64270bb61eb21168b461a/html5/thumbnails/81.jpg)
Виктор Ерофеевcgvictor / cg.net.ru