81
iDM 15.oct.2014

IDealMachine October 2014

Embed Size (px)

Citation preview

Page 1: IDealMachine October 2014

iDM 15.oct.2014

Page 2: IDealMachine October 2014

Intro / цели

Page 3: IDealMachine October 2014

..мало проектировать интерфейсы, мало проектировать взаимодействие, мало делать какой-то продукт, систему, а необходимо проектировать опыт пользователя как единое целое

Page 4: IDealMachine October 2014

Виктор Ерофеев

• Разработка софта, с 2000 года• Более 150 систем и проектов• (IT)-директор

CG Projects Group

• uxspb / profsoux• Microsoft MVP 2007-2014

Client Application Dev

Page 5: IDealMachine October 2014

Agenda - часть раз (про UX)

про терминологию

• Что такое UX и зачем вам вообще это надо• Про «дизайн» и «дизайнеров»про теорию

• Как делать продукт, чтобы не переделывать• Естественные чит-коды в проектированииПерекур!

Page 6: IDealMachine October 2014

Agenda – часть два (бизнес)

про бизнес и value

• Где лежат деньги (и зачем для этого UX)про методики и подходы• Разные уровни проектирования

• За что хвататься первым (engagement)• Как не облажаться в очевидных вещах• Где еще лежат деньги (облажаться дешевле)Перекур!• Дискуссия с выжившими

Page 7: IDealMachine October 2014

«UX наоборот»

Page 8: IDealMachine October 2014

i. Что такое UX и зачем вам это надо

Сабж?

Page 9: IDealMachine October 2014

user experience

взаимодействиепроектирование взаимодействия

Page 10: IDealMachine October 2014

user experienceto experience (smth)

Page 11: IDealMachine October 2014

user experienceпроектирование

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

Page 12: IDealMachine October 2014

Зачем вам это надо:

Page 13: IDealMachine October 2014

1. Взаимодействия без experience не бывает

2. Если нельзя предотвратить – надо возглавить

Зачем вам это надо:

Page 14: IDealMachine October 2014

Где experience

• User Interface / UX• Customer experience• Customer relations + sales• Issue management

• В эстетике, логике, сценариях

• В голове пользователя (!)

Page 15: IDealMachine October 2014

- Что такое UX и зачем вам это надо?

Page 16: IDealMachine October 2014

i. Про «дизайн» и «дизайнеров»

Чем занимается дизайнер

Page 17: IDealMachine October 2014

- в СНГ дизайнер красит кнопки

Жосская правда:

Page 18: IDealMachine October 2014

search: ux

Page 19: IDealMachine October 2014

UI: объектUX: процесс

Отличие UX от UI - ?experience / interface

Page 20: IDealMachine October 2014

designerdesign (n.)

Page 21: IDealMachine October 2014

дизайнер != designer

дизайнер = иллюстраторdesigner = проектировщик

Промышленный дизайн – инженерная дисциплина

Page 22: IDealMachine October 2014
Page 23: IDealMachine October 2014

appearance

interaction

business logic

use cases

Page 24: IDealMachine October 2014

appearance

interaction

business logic

use cases

UI

UX

Page 25: IDealMachine October 2014

- какие должны быть возможности- как пользователь пользуется

- что при этом чувствует- какие сценарии реализует- с чем/как взаимодействует

Задачи UX-проектировщика

Page 26: IDealMachine October 2014

appearance

interaction

business logic

use cases

interaction

appearance

appearance

appearance

Page 27: IDealMachine October 2014

- Чем занимаетсяUX-проектировщик?

Page 28: IDealMachine October 2014

iii. Как делать, чтобы не переделывать

Да, это про кейсы

Page 29: IDealMachine October 2014

- какая есть у пользователя потребность?

- как мы можем ее закрыть

- что нам от него нужно

- как он будет себя вести

Постановка задачи

Page 30: IDealMachine October 2014

кто (ролевая модель)делает что (функция)когда / в какой момент временис каким результатом (value +/-)

use case

Page 31: IDealMachine October 2014
Page 32: IDealMachine October 2014

то же самое текстом

• Клиент– заказать еду– сьесть– оплатить

• Официант– принять заказ– подать заказ– принять деньги

• Повар– принять заказ– приготовить еду– передать заказ

• Кассир– принять деньги– провести платеж

Page 33: IDealMachine October 2014

- пожрать

- заказать билет- обработать фотку- записаться к врачу- посмотреть отзывы

customer needsрешение проблемы человека

Заинтересованные лица, цели, задачи, требования

Page 34: IDealMachine October 2014

- пожрать провести вечер- заказать билет подобрать маршрут- обработать фотку иметь что показать- записаться к врачу взять справку- посмотреть отзывы купить и не пожалеть

«чтобы не переделывать»

customer needsрешение проблемы человека

Page 35: IDealMachine October 2014

- пожрать провести вечер- заказать билет подобрать маршрут- обработать фотку иметь что показать

что важно, а что неткакой функционал в приоритете

какие у нас ниша и преимуществакак улучшить

Page 36: IDealMachine October 2014

- как собрать кейсы:что для этого нужно?

Page 37: IDealMachine October 2014

iiii. Как проектировать

Мы вроде знаем задачи и функции,

а получается отстой

Page 38: IDealMachine October 2014

let’s get

physical

Page 39: IDealMachine October 2014

- быстро- с минимальными затратами- с минимальными силами/вниманием- с положительной эмоцией

- решает реальную потребность

«удобно»

Page 40: IDealMachine October 2014

- предсказуемо, знакомо

- просто / непосредственно

- без дополнительных абстракций

- функционально / продумано

«удобно»

Page 41: IDealMachine October 2014

а) думать ux engineerб) тестировать ux lab

Как быть?

Page 42: IDealMachine October 2014

ЭргономикаHCI

• Антропометрическая совместимость — учёт размеров тела человека (антропометрии), возможности обзора внешнего пространства, положения оператора при работе.

• Сенсомоторная совместимость — учёт скорости моторных операций человека и его сенсорных реакций на различные виды раздражителей.

• Энергетическая совместимость — учёт силовых возможностей человека при определении усилий, прилагаемых к органам управления.

• Психофизиологическая совместимость — учёт реакции человека на цвет, цветовую гамму, частотный диапазон подаваемых сигналов, форму и другие эстетические параметры машины.

Page 43: IDealMachine October 2014

задачи по вниманию

• Внимание ограничено– количество элементов– взаимосвязи– связный контекст

• Внимание рассеяно– выделить главное– разделить статус

и действия

• Внимание / время– нотификации– сбор данных заранее– дайджесты

• Нечеткое восприятие– использовать мета-

контролы, схемы

• Локус внимания– выделять суть

Page 44: IDealMachine October 2014
Page 45: IDealMachine October 2014
Page 46: IDealMachine October 2014
Page 47: IDealMachine October 2014

- в чем основной cheat?

Page 48: IDealMachine October 2014

бизнес:кейсы, потребности и роли

Page 49: IDealMachine October 2014

курите на здоровье!

cgvictor / [email protected]

Page 50: IDealMachine October 2014

v. Где лежит бабло

И почему UX для этого важен

Page 51: IDealMachine October 2014

Откуда берется бабло - ?(и можно ли не думать про UX)

value

Page 52: IDealMachine October 2014

Какой бывает value

• Решение проблемы, задачи• Улучшение порядка вещей, QoL• Удовольствие / удовлетворение• Социалка – статус, соцпруф

Value может стоить $$$

Page 53: IDealMachine October 2014

Субъективность оценки

Деньги общие, а профит частный

!=

Page 54: IDealMachine October 2014

Value +++

• Своевременность (операции)• Полнота, over deliver• Уникальность• Удача (limited time offer)• Ikea Effect• Декларируемая стоимость (D&G)• Владение, loss aversion

когда оценка возрастает

Page 55: IDealMachine October 2014

UX, бизнес-кейсы:Игра с ненулевой суммой

Value → (inter)Action → Value+Успех = «получил больше чем вложил»

Page 56: IDealMachine October 2014

black magic

тратит времятратит внимание

тратит деньги

получает решениеэкономит времяполучает эмоциюполучает статусполучает ресурс

тратит ресурсполучает деньги

added value

Page 57: IDealMachine October 2014

Баланс игры

Затраты• Внимание• Время• Деньги• Память (RAM)• Контекст (T-shift)• Связи / interop• Физика

Приобретения• Время• Эмоция• Соцпруф• Деньги• Уверенность• Награда

Page 58: IDealMachine October 2014

0. Реклама / вовлечение / регистрация

1. First time experience2. Первые решенные задачи3. Инструмент

4. Troubleshooting, поддержка

0. Кейсы выхода / возврата (tesla)0. Вовлечение других

Page 59: IDealMachine October 2014

- где лежит бабло?взаимодействие создает (персональную) ценность

Page 60: IDealMachine October 2014

0. Разные уровни проектирования

Page 61: IDealMachine October 2014

Разные уровни UX-проектирования

Ситуационный дизайн

Тактический дизайн

Стратегический дизайн

решить задачу максимально просто

единообразие, консистентность взаимодействия, визуальный язык, расширяемость, кривая обучения

«just works», образ-аналогия, модели, скеоморф, работа с брендом, customer story & lifestyle

Page 62: IDealMachine October 2014

vi. За что хвататься первым

Приоритетыи engagement map

Page 63: IDealMachine October 2014

80/20↓↓↓

20% улучшения, 80% профита

Page 64: IDealMachine October 2014

Что пилить?

а) Частотный подход

то, что чаще всего используется

1000 просмотров списка800 «найти актуальные»100 правок90 правка последних пяти10 созданий нового5 удалений, 15 поисков

Page 65: IDealMachine October 2014

Что пилить?

б) Engagement map / user journey

то, что понадобитсяв первую очередь

- выбор направлений, дат- выбор стыковок-маршрутов-цен- оплата и печать данных- комменты? отзывы?- настройка фотки в профиле?

FTE & inline tips

Page 66: IDealMachine October 2014

выбрать?

Частотный

• есть типовой набор операций

• есть KPI / метрики эффективности

• нагрузка на внимание неравномерная

скорость операций

Engagement

• есть длинные сценарии

• воронка продаж• предполагается

(само)обучение пользователей

MVP→+→++→FFP

Page 67: IDealMachine October 2014

-?

Page 68: IDealMachine October 2014

vii. Как не облажаться в очевидных вещах

кейсы и потребности

Page 69: IDealMachine October 2014

а) думать ux engineerб) тестировать ux lab

Как быть?

Page 70: IDealMachine October 2014

«- застегни ширинку, закрой роти разуй, наконец, глаза»

сицилийская семейная поговорка

Page 71: IDealMachine October 2014

Что работает (практика)

• Смотреть на задачи пользователей• Смотреть на конкурентов• Пробовать, на людях и себе (dogfood)• Упрощать («не делать», 80/20)• Быстро исправлять• Собирать истории (от power users)• Задавать неудобные вопросы• Моделить, скетчить, прототипить

Page 72: IDealMachine October 2014

Что не работает

• Спрашивать пользователей– хочешь спросить – проверь (gladwell)

• Стоять над душой• Красивые картинки без логики– «нанять крутого рисовальщика» тоже нет

• «Подгонка под ответ»-ы стейкхолдеров– см. про кейсы и customer needs

• ?? A/B (good vs evil), focus groups, аудиты итп

Page 73: IDealMachine October 2014

+ спросить профессионала

ugly coyote

Page 74: IDealMachine October 2014

viii. Как облажаться дешевле

сабж

Page 75: IDealMachine October 2014

time to market

«О, сколько нам открытий чудных»

• minimal value product• без продукта вообще

• первая копейка• первая жалоба• первое пожелание

Page 76: IDealMachine October 2014

Прототипы

• Модель дешевле прототипа• Прототип дешевле prod-скетча• Скетч дешевле full feature-а

Page 77: IDealMachine October 2014

Фрейминг

Сильное колдунство ↑

• Фишка продукта (beta, ctp, techprev, nightly)• Группа пользователей (power users, devmode)• Другая ниша

Ограничивайте риски + добавляйте value

Page 78: IDealMachine October 2014

Underpromise, overdeliver

про обещания и лишние фичи

Page 79: IDealMachine October 2014

Проектировать только по кейсам / UJm, кейсы только по собственным исследованиям

Page 80: IDealMachine October 2014

“- Чем спрашивать у темноты «кто здесь?»,

лучше выстрелить, перезарядить и еще раз выстрелить.

Ошибайтесь быстрее

Page 81: IDealMachine October 2014

Виктор Ерофеевcgvictor / cg.net.ru