69
ТРЕНИНГ Как стать несчастным с помощью консультанта по юзабилити? UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Как стать несчастным с помощью консультанта по юзабилити?

Embed Size (px)

DESCRIPTION

Презентация Алексея Копылова.Конференция Training Labs, 27 июня 2009

Citation preview

Page 1: Как стать несчастным с помощью консультанта по юзабилити?

ТРЕНИНГ

Как стать несчастным с помощью

консультанта по юзабилити?

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Page 2: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

2

О докладчике

Алексей Копылов

технический директор UIDesign Group

10 лет проектирует интерфейсы

Основатель специализированной компании

Редактирует переводную литературу

Преподает

Участвует в жизни юзабилити-сообщества

Page 3: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

3

О планах

Мы поговорим

Об отношениях между заказчиками и юзабилити-

консультантами

Когда лучше всего проектировать

пользовательский интерфейс

О выборе оптимального вида проектирования

Как сделать так, чтобы интерфейсные идеи

внедрились в жизнь

Page 4: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

4

После тренинга, вы уже никогда не

будете такими

Page 5: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

5

Давайте общаться с комфортом

Пожалуйста

Не стесняйтесь задавать любые вопросы

Говорите о промахах (скорость речи, громкость

голоса, положение перед экраном)

Переведите телефоны в беззвучный режим

Page 6: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

6

Начали…

Часть I

Место проектирования

когда и как думать об интерфейсах

Page 7: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

7

Что делают юзабилисты • 1

раскрашивают экраны

Page 8: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

8

Что делают юзабилисты • 2

жонглируют кнопками

Page 9: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

9

Что делают юзабилисты • 3

придумывают структуру

Старт Деятельность 1

Деятельность 2

Задача 1(с подзадачами)

Задача 2(с подзадачами)

Задача 3(с подзадачами)

Деятельность N

Внешняя операция 1

Задача N(с подзадачами)

Задача 4(с подзадачами)

Задача 1(с подзадачами)

Задача N(с подзадачами)

Внешняя операция 2

Задача 5(с подзадачами)

Экраны на шаблоне «Стартовая»

Экраны на шаблоне «Деятельность»

Экраны на шаблонах «Задача список» и «Задача ред»

Экраны на различных шаблонах паттернов

Структура пользовательского интерфейса для персонажа

Обозначения

Задача 3

Внешняя операция 2

Шаблон экрана

Шаблон Pop-up экрана для выполнения операции

Односторонний переход на другой экран

Двусторонний переход между двумя экранами

1 32

5

7

4

6

Page 10: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

10

Что делают юзабилисты • 4

проектируют взамодействие

Page 11: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

11

Процесс проектирования

Вектор действий

1. Проектирование (адаптация) цели

2. Разработка сценария (бизнес-процесс)

3. Информационная архитектура

4. Создание структур взаимодействия (экраны)

5. Эстетическая адаптация (визуал)

Page 12: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

12

Адаптация цели

придать личностный смысл

Page 13: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

13

Разработка сценария

учесть потребности

Page 14: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

14

Информационная архитектура

соответствовать ожиданиям

Page 15: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

15

Структура экрана

оптимизировать взаимодействие

Page 16: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

16

Визуальное оформление

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

Page 17: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

17

Дальше…

Часть II

Когда обращаться к юзабилистам?

Page 18: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

18

Кто такие юзабилити-специалисты?

Занимаются аудитом и проектированием

взаимодействия пользователей со сложными

продуктами или системами

Page 19: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

19

Кто такие заказчики?

Внешние, либо внутренние заказчики разработки

интерактивного продукта или системы

Page 20: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

20

Консультант и заказчик

Есть ли общие цели?

Page 21: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

21

Консультант и заказчик

Общая цель – создать успешный продукт

вовремя с использованием запланированных

ресурсов

Page 22: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

22

Консультант и заказчик

Что мешает достижению общих целей?

Page 23: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

23

Консультант и заказчик

Мешают достижению общих целей:

Политические факторы

Эгоцентризм представителей заказчика

Отсутствие общего видения

Page 24: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

24

Когда лучше всего обращаться к

специалистам?

Page 25: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

25

Когда обращаться? • Вариант 1

Проектировщикам здесь не место

продажа

разработка

Page 26: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

26

Когда обращаться? • Вариант 2

Продукт почти закончен

план

план

разработка / тест

продажа

Page 27: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

27

Когда обращаться? • Вариант 2

Продукт почти закончен:

Можно получить много красивых картинок

В случае неуспеха есть на кого свалить вину,

так как интерфейсные решения нечем

обосновать

Деньги, потраченные на юзабилити – хороший

повод для рекламы

Есть возможность прицельно исправить

очевидные специалисту ошибки

Page 28: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

28

Когда обращаться? • Вариант 2

«Если вы не в состоянии сделать хорошую вещь, сделайте

ее хотя бы симпатичной»

Билл Гейтс

«Производители программ стараются сделать свои

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

Лучше бы им просто взять документацию и

проштамповать надписями ”Дружественный к

пользователю”»

И снова, Билл Гейтс

Page 29: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

29

Когда обращаться? • Вариант 2

«lipstick on pig»

Page 30: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

30

Цена изменений в конце проекта

Количество проектных альтернатив

Цена изменений

Page 31: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

31

Когда обращаться? • Вариант 3

В середине проекта:

look&feel

план

план

разработка

продажа

план

тест

Page 32: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

32

Когда обращаться? • Вариант 3

В середине проекта

Можно получить толстенный талмуд – описание

пользовательского интерфейса

Остается возможность свалить ответственность

на консультанта. Ему нечем обеспечивать свои

решения.

Можно найти неочевидные интерфейсные

ошибки и их устранить

Page 33: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

33

Когда обращаться? • Вариант 3

Улучшение интерфейсного решения

Page 34: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

34

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

Количество проектных альтернатив

Цена изменений

Page 35: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

35

Когда обращаться? • Вариант 4

С самого начала проекта:

план

план

разработка

продажа

план

тест

план

проект

тест

надзор

l&f

тест

анализ

Page 36: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

36

Когда обращаться? • Вариант 4

С самого начала проекта

Необходимо разделять ответственность

Заказчик получит наилучшую концепцию

Процесс управляем – можно соблюсти сроки

Все решения обоснованные

Page 37: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

37

Цена изменений в начале проекта

Количество проектных альтернатив

Цена изменений

Page 38: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

38

Место юзабилити

Оптимальным подходом будет смещение работ

над интерфейсом продукта как можно ближе к

началу проекта,…

…а в идеале…

…сделать описание интерфейса частью ТЗ

Page 39: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

39

Далее…

Часть III

Варианты работы

какой вариант подходит вам?

Page 40: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

40

А теперь поговорим о вариантах

работы юзабилити-специалистов

Page 41: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

41

Вариант 1 • Приходи и делай

Требуем немедленных результатов

Page 42: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

42

Вариант 1 • Приходи и делай

Применять, когда: Консультант знает предметную область и

сделал много проектов

Требования к качеству результата низкие или

умеренные

Совсем нет бюджета на интерфейс

Нет доступа к пользователям

Page 43: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

43

Вариант 1 • Приходи и делай

Не применять, когда: Нужна гарантия качества результата

Нет опыта в предметной области

Есть хотя бы немного денег

Нужна гарантия сроков

Page 44: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

44

Вариант 2 • Доверяй но проверяй

Проектирование, основанное на постановленной

задаче, результаты проверены на пользователях

Page 45: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

45

Вариант 2 • Доверяй но проверяй

Применять, когда: Консультант знает предметную область и

сделал много проектов

Нужно оптимизировать имеющийся

интерфейс

Надо быть не хуже конкурентов

Первый результат надо получить быстро

Page 46: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

46

Вариант 2 • Доверяй но проверяй

Не применять, когда: Нужно оптимизировать имеющийся

интерфейс

Нужна гарантия сроков (обуздать итерации)

Нет опыта в предметной области

Нужна стратегия развития продукта

Page 47: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

47

Вариант 3 • Семь раз отмерь

Проектирование, основанное на четком

понимании поставленной задачи, и требований к

интерфейсу со стороны пользователей

Page 48: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

48

Вариант 3 • Семь раз отмерь

Применять, когда: Есть время для полноценного проектирования

Необходима стратегия развития продукта

Нужно опередить конкурентов

Нужно выйти за рамки поставленной задачи

Page 49: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

49

Вариант 3 • Семь раз отмерь

Не применять, когда: Первый результат надо получить максимально

быстро

Нет доступа даже к суррогатным

пользователям

Бюджет отсутствует

Page 50: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

50

Вариант 3 • Семь раз отмерь

Все это похоже на процесс производства кино:

Page 51: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

51

Вариант 3 • Семь раз отмерь

Точнее на это:

©2005 Dmitry Osetrov

Page 52: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

52

Цикл разработки интерфейса

исследование

синтез

внедрение

понять сделать

сопроводить

Page 53: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

53

Цикл разработки интерфейса

ТЗ

исследование

синтез

внедрение

Page 54: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

54

Состав ТЗ ПИ

Требования к пользовательскому интерфейсу

Информационная архитектура проекта

Интерактивная архитектура проекта

Детальные прототипы экранов

ТЗ подается на вход программистам и

графическим дизайнерам

Page 55: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

55

Далее…

Часть IV

А кто на стороне заказчика?

Page 56: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

56

Кто на стороне заказчика?

Программист?

Маркетолог?

Дизайнер?

Менеджер?

Page 57: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

57

Программист?

© http://www.flickr.com/photos/doergn/

Page 58: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

58

Программист

Мотивы программистов

Пожертвуют простотой ради контроля

Концентрируются на процессе

Концентрируются на исключительных

ситуациях

Использовать повторный код

Page 59: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

59

Маркетолог?

Page 60: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

60

Маркетолог

Мотивы маркетологов

Продать продукт (список функций)

Сделать продукт внешне

привлекательным

Концентрируются на мнениях и

предпочтениях

Реализовывать стратегию

продвижения бренда

Page 61: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

61

Дизайнер?

Page 62: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

62

Дизайнер

Мотивы дизайнеров

Создать запоминающийся продукт

Улучшать свою репутацию

Быть как можно меньше стесненным

техническими ограничениями

Реализовывать стратегию

продвижения бренда

Page 63: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

63

Менеджер?

Page 64: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

64

Менеджер

Мотивы менеджеров

Уложиться в срок

Получить запланированный результат

Избежать раздутия проекта

Разрешать вовремя конфликты и

предупреждать их

Видеть проблему с разных сторон

Page 65: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

65

Кто на стороне заказчика?

Page 66: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

66

Идеальный вариант

Идеальным случаем является вариант, когда

работу принимает менеджер продукта, а не

менеджер проекта

Page 67: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

67

Выводы

Обращаться как можно раньше!

Выбирать метод исходя из условий проекта

Со стороны заказчика действует менеджер

проекта, а лучше, если это менеджер

продукта

Page 68: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

68

Выводы

Пользовательский интерфейс является продуктом

взаимодействия заказчика и юзабилити-

специалиста

Page 69: Как стать несчастным с помощью консультанта по юзабилити?

Как стать несчастным с помощью консультанта по юзабилити? www.uidesign.ru

69

Спасибо за внимание С удовольствием отвечу на Ваши вопросы

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru