66
Удмуртская интернет-конференция (UIC 2010) Проектирование пользовательских интерфейсов — от исследования к прототипированию UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Проектирование пользовательских интерфейсов — от исследования к прототипированию

Embed Size (px)

DESCRIPTION

Alexey Kopylov's talk at UIC2010 in Izhevsk - 19 March 2010

Citation preview

Page 1: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Удмуртская интернет-конференция (UIC 2010)

Проектирование пользовательских

интерфейсов — от исследования к

прототипированию

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

Page 2: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

2

Давайте знакомиться

Автор доклада

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

Около 10 лет опыта проектирует

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

В 2003 основал компанию

UIDesign Group по проектированию

интерфейсов.

Ведет общественную деятельность.

Редактирует книги (Алан Купер, Гарретт)

Page 3: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

3

Сначала помечтаем

Как выглядит создание нового

интерактивного продукта в идеале?

Page 4: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

4

Задумали

Счета

Карты

Депозиты

Кредиты

Платежи и заявления

Личный кабинет

Подробно о счетеПодробно о счете

Подробно о счете

Подробно о счетеПодробно о счете

Подробно о карте

Подробно о счетеПодробно о счетеПодробно о

депозите

Подробно о счетеПодробно о счетеПодробно о

кредите

Шаблоны и регулярные платежи

Подробно о счетеПодробно о счетеОпределенный

шаблон

Переписка с банком

Подробно о счетеПодробно о счете

Письмо

Депозитный калькулятор

Определенный платеж или заявление

Адресная книга

Подробно о счетеПодробно о счетеАдреса и реквизиты

Создать перевод между своими

счетами

Создать рублевый платеж

Создать валютный платеж

Оплатить мобильный

Подробно о счетеПодробно о счетеКатегория платежей

Подробно о счетеПодробно о счетеКатегория платежей

Кредитный калькулятор

Оплатить интернет

Оплатить коммунальные

услуги

Заблокировать карту

Настроить уведомления

Остальные действия

Выпустить карту

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

Сгенерировать вирт. карту

Распорядиться процентами депозита

Рассчитать доходность

депозита

Пополнить депозит

Закрыть депозит

Открыть депозит

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

Рассчитать задолженность

по кредиту

Погасить кредит

Получить выписку

Закрыть счет

2.1.1

1.12.1

2.2

2.2.1

2.3

2.3.1

2.3.1.1

2.4

2.4.1

2.4.1.1

3.1

3.1.1

4.1

4.1.1

4.1.1.1

4.2

4.2.1

5.1

5.1.1

3.1.1.1

6.1

6.2

6.4

6.3

6.5

6.7

6.6

6.9

6.8

6.11

6.12

6.10

6.14

6.15

6.13

6.17

6.16

6.21

6.19

6.23

6.24

6.22

Создать кассовую заявку

6.26

Перевести деньги с карты другого банка

6.27

Служебные разделы

Настройка банкоматов

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

Персональная информация

ПомощьНастройки 7.1

7.1.2

8.17.1.1

7.1.3

Настройка Системы

7.1.4

Page 5: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

5

Вообразили

ЛОГО и контактная информация

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

Счета

Карты

Депозиты

Курсы валют

Адресная книга

Переписка с банком

Создать рублевый платеж

Создать валютный платеж

Оплатить мобильный

Оплатить интернет

Создать перевод между своими счетами

Шаблоны и регулярные

платежи

Личный кабинет Иванова И.И.

Платежи и заявления

Завершить сеансИванов Иван Иванович

Печать

Помощь

Список счетов, карт, депозитов, кредитов

(по каждому средству указан доступный остаток)

Настройки

Суммарные данные

(всего на счетах,

зарезервировано,

доступно,

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

выплаты по овердрафтам,...)

Заявления ЧерновикиБонусы

Уведомления

о письмах из банка

Реклама опроса

или новых и редко

используемых

функций

Личный кабинет

Кредиты

Все действия >>

Настроить уведомления

Посмотреть все платежи Запросить выписку

Платежи

Оплатить коммунальные услуги

Заблокировать картуПоследние 20 платежей

(без остатков на начало и конец периода)

Page 6: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

6

Нарисовали

Page 7: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

7

Реализовали!

Page 8: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

8

А в реальности?

получаем такое:

Page 9: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

9

А в реальности • 2? или такое:

Page 10: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

10

Причины неудачи?

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

Результаты не были правильно поняты

участниками разработки…

Многие другие причины, которые оставим за

рамками

Page 11: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

11

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

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

синтез

внедрение

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

сопроводить

Page 12: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

12

Цикл проектирования интерфейса

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

сбор данных

Опросы

Наблюдения

Тестирования

анализ данных

Сценарии

Персонажи

Требования

Page 13: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

13

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

Создать базу для принятия решений, связанных с

интерфейсом

Определить ориентировочный объем проекта

Определить стратегические направления

развития продукта/сервиса

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

Найти инновационные решения

Page 14: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

14

Виды исследований

© 1994 Steve Mulder, Ziv Yaar

Page 15: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

15

Сбор данных

Интервью с владельцами проекта

Интервью с пользователями/полевые наблюдения

Анкетирование

Фокус-группы

Экспертная оценка

Юзабилити-тестирование

Конкурентный анализ / анализ тенденций

Анализ лог-файлов

другие…

Page 16: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

16

Интервью с владельцами • 1

Page 17: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

17

Интервью с владельцами • 2

Общие цели метода

Выявление бизнес-целей и требований

Выявление маркетинговых целей и требований

Выявление технических целей и требований

Осознание политической ситуации

Page 18: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

18

Полевые наблюдения • 1

Page 19: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

19

Полевые наблюдения • 2

Общие цели метода

Выявление целей пользователей

Фиксация задач пользователей

Выявление функциональных и нефункциональных

требований

Изучение предметной области

Page 20: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

20

Полевые наблюдения • 3

Самый точный способ сбора данных

Возможность узнать о контекстах использования

Возможность выявить паттерны коммуникации

Возможность быть в роли ученика

Быстрое погружение в предметную область

Page 21: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

21

Полевые наблюдения • 4

Сложность поиска респондентов

Недостаточная выборка для статистики

Дополнительные расходы на организацию и

проведение

Низкая скорость проведения исследований

Необходимость выезда к респонденту

Page 22: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

22

Интервью • 1

Page 23: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

23

Интервью • 2

Общие цели метода

Выявление целей пользователей

Фиксация задач пользователей

Выявление функциональных и нефункциональных

требований

Изучение предметной области

Page 24: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

24

Интервью • 3

Метод более дешев

Быстрое погружение в предметную область

Можно использовать удаленных респондентов

Возможность узнать что-то за рамками плана

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

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

Page 25: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

25

Интервью • 4

Сложно зафиксировать нефункциональные

требования

Недостаточная выборка для статистики

Сложно зафиксировать рабочий контекст

Не все детали могут быть выявлены

Page 26: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

26

Лучшее решение…

Совмещая интервью с наблюдением,

аннигилируем их недостатки!

Page 27: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

27

Цикл проектирования интерфейса

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

Концептуальное

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

Концепция

Идеи

Предметная область

Детальное

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

Детальные

прототипы

Спецификации

Page 28: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

28

Потребители прототипов

Великолепная пятерка:

UX-

специалист

Менеджер Маркетолог Дизайнер Программист

Page 29: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

29

Потребитель: UX-специалист

Юзабилити-инженер

+

Проектировщик

взаимодействия/

дизайнер интерфейсов

Page 30: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

30

Потребитель: UX-специалист

Мотивы

Получить на выходе то, что

задумывалось

Тратить как можно меньше времени и

усилий

Недвусмысленно передать сложные

интерфейсные решения

Разделять работу между коллегами

Иметь проверенные решения

Page 31: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

31

Получить то, что задумывалось

Зависимость контроля от прилагаемых усилий

усилия

ко

нтр

ол

ь н

ад

ре

зул

ьта

то

м

полный

Page 32: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

32

Минимизация усилий

Зависимость количества коммуникаций от

детальности прототипов

ко

мм

ун

ика

ци

и

детализация

Page 33: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

33

Передача решений

Двухмерная структура детализации

ви

зуа

льн

ая

де

та

ли

за

ци

я

степень

интерактивности

набросок

бумажный прототип

графический

прототип

раскадровка

готовый дизайн

кликабельный

прототип

flash-прототип

продукт

html-прототип

программный

html-прототип

Wizard of Oz

Copyright © Fred Beecher

Page 34: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

34

Разделение работы I

Смешанная (адаптивная) детализация

Баннер 240х400

Результаты поиска резюме (128)

Поиск работы > Детальный поиск резюме > Главный бухгалтер

Страница 1 2 3 … 9 10 11 … 17 18 19 следующая

Вид краткий | полный Сортировка по дате | по зарплате

Кадровое агентство ТризаЭксклюзив

Мы работаем на российском рынке с 1991 года. Подбор

персонала – наша профессия

Сайт ТризаЭксклюзив | Вакансии ТризаЭксклюзив

Спонсор раздела (как стать спонсором?)

ЛОГОТИП

Подобрать:

Ключевые слова: Город:

любой

Раздел для поиска:

Финансы и бухгалтерияНайти!

Системный администратор

Поиск работы Подбор персонала Построение карьеры Обучение ФорумМоя работаГлавная

Добавить вакансию | Детальный поиск | Фоторезюме | Список кадровых агентств | Реклама вакансий на сайте | Реклама вакансий в газете

Статистика

Системный администратор, от 34000 руб (13/06/2005

12:23)

О кандидате: мужчина, возраст 24 года, образование неполное

высшее, опыт работы 3 года, город Москва

Профессиональные навыки:

Монтаж LAN "с нуля",монтаж телефонной сети "с нуля",установка ПО

на рабочие станции,администрирование сети ,обслуживание

оргтехники.Настройка роутера LAN / WAN,Wi-Fi,VPN.

Контактное лицо: Маша Иванова ([email protected])

Тел: 321-0934, факс: 732-7432

Посмотреть подробное резюме | Предложить свою вакансию |

Отправить ссылку другу | Распечатать текст резюме

По дате поступления:

за сегодня (12)

за неделю (78)

все имеющиеся (123)

По рубрикам:

IT и телекоммуникации (25)

финансы и

бухгалтерия (98)

топ-менеджмент (25)

работа без спеециальной

подготовки (98)

По наличию:

фотографиии (25)

развернутого резюме (98)

По опыту работы:

без опыта

до 1 года

до 3-х лет

до 5 лет

свыше 5 лет

все

фильтр

Главное меню

Page 35: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

35

Разделение работы II Использовать онлайн инструменты протопирования

Page 36: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

36

Проверка результата

Проверять можно на каждом этапе – от

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

продукта

Но! – чем абстрактнее прототип, тем абстрактнее

комментарии.

На этапе концепции можно и нужно тестировать

навигацию

Page 37: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

37

Потребитель: Программист

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

Page 38: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

38

Потребитель: Программист

Мотивы

Точно понимать, что именно нужно

реализовать

Знать, что делать в исключительных

ситуациях

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

Иметь контроль над изменениями

Page 39: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

39

Что именно нужно реализовать • I

Любая недоговоренность это снятие с себя

ответственности за часть интерфейсных

решений.

Программист отвечает за код. В конечном итоге,

он несет ответственность за все – наша задача

снять с него ответственность за интерфейсные

решения

Page 40: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

40

Что именно нужно реализовать • II

Документ (приложение) помогает описать

неочевидные моменты в интерфейсе

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

помогают продемонстрировать сложное

взаимодействие

Использовать специальный визуальный язык

описания прототипов

Карта местности помогает понять место

конкретного контекста в интерфейсе

Page 41: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

41

Что именно нужно реализовать • III

Самый дешевый вариант

Page 42: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

42

Что именно нужно реализовать IV

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

полнее контролировать результат

колонка 1 контент колонка 2

шапка

200 120 - 180

720 - 1600

Page 43: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

43

Исключительные ситуации

Не забудьте описать исключительные ситуации в

интерфейсе – богатый источник отсебятины для

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

Page 44: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

44

Повторный код

Программисты применяют повторный код всегда,

когда это только возможно.

Указывайте, что паттерны являются типовыми или

же, наоборот, уникальными.

Page 45: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

45

Потребитель: Маркетолог

Page 46: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

46

Потребитель: Маркетолог

Мотивы

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

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

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

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

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

Page 47: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

47

Список функций • I

Если маркетолог – важная птица, то нужен

документ, показывающий соответствие между

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

интерфейсом

Page 48: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

48

Список функций • II

Персонажи позволяют навести мостики с

маркетологами, и облегчить обоснование

интерфейсных решений

Page 49: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

49

Создание привлекательного продукта

Главную страницу (экран) нужно проектировать в

конце. Для маркетолога делается суррогатная

главная страница для отработки дизайна

Вместо главной страницы лучше использовать

самую навороченную

Page 50: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

50

Продвижение бренда

Специальным образом выделять зоны

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

Указывать точные значения шрифтов и цветов,

соответствующих гайдлайну

Page 51: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

51

Потребитель: Дизайнер

Page 52: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

52

Потребитель: Дизайнер

Мотивы

Точно понять задание

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

Знать границы творчества

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

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

Page 53: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

53

Точное задание

Дать дизайнеру подборку ортогональных

прототипов (для минимизации усилий)

Создать спецификацию на графический

стиль/пиктограммы

Дать подробные требования к дизайну (+язык

описания прототипов)

Решить, кто будет создавать визуальный

пиктографический язык, и кто будет за него

отвечать?

Page 54: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

54

Знать границы

Явным образом озвучить жесткие ограничения

Выстраивать продуктивные отношения

колонка 1 контент колонка 2

шапка

200 120 - 180

720 - 1600

Page 55: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

55

Потребитель: Менеджер

Page 56: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

56

Потребитель: Менеджер

Мотивы

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

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

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

Иметь контроль над изменениями

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

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

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

Page 57: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

57

Как уложиться в срок и получить

результат?

Этап концепции обязателен!

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

«Тяжело в концепции, легко в деталке»

Page 58: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

58

Контроль над изменениями

Выделение изменений в прототипе явным

образом

Мета-информация об изменениях

Уникальные идентификаторы крупных

конструкций для быстрого поиска

Интегрированные средства коммуникации

Page 59: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

59

Контроль над изменениями: ID для

контекстов

Page 60: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

60

Интерфейс с разных

сторон/разрешение конфликтов

Создать

междисциплинарную

команду

Регулярно проводить

мозговые штурмы!

Page 61: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

61

Интерфейс с разных

сторон/разрешение конфликтов II

И самое главное:

– вовлечь

заказчика!

(с) 2009 - www.flickr.com/photos/tambovskiy_volk

Page 62: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

62

Мы сделали это!

Page 63: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

63

Книги для ознакомления • 1

«Observing the User Experience »

Page 64: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

64

Книги для ознакомления • 2

«Designing for the Digital Age »

Page 65: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

65

Книги для ознакомления • 3

«A Project Guide to UX Design»

Page 66: Проектирование пользовательских интерфейсов — от исследования к прототипированию

Проектирование пользовательских интерфейсов www.uidesign.ru

66

Спасибо за внимание!

uidesign.ru

fresh.gui.ru

twitter.com/uidg

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