Презентация с лекции Владимира Зимина "Проектирование пользовательских интерфейсов" (13.12.2013).

1. Проектирование
интерфейсов
Владимир Зимин

2. НАРЦИССИЗМ
• Проектировщик, аналитик, менеджер
проектов, менеджер по продажам,
тренер
• 3 года
• ~ 40 проектов
• Конференция в МИЭМ
• UXMasterclass
• Выступления на всяких конференциях

3. ПЕРВЫМ ДЕЛОМ САМОЛЁТЫ
Основано на реальных событиях

5. ШЕРЕМЕТЬЕВО — НИЖНЕКАМСК
версия 1.0
Вылет
Прибытие
22:05 12 августа
23:45 12 августа

6. ШЕРЕМЕТЬЕВО — НИЖНЕКАМСК
версия 2.0
Вылет
Прибытие
23:59 12 августа
06:40 13 августа

10. КОРОЧЕ…
Работу систем и сервисов, с которыми
работают люди, нужно проектировать,
чтобы такой херни не случалось.

11. ФИНАНСОВЫЕ ПОТЕРИ
В декабре 2005 года рекордную ошибку
допустил трейлер одной японской
компании. Брокер получил заказ на
продажу одной акции по цене 610 тысяч
иен. Но по ошибке ввѐл в компьютер
заказ на продажу 610 тысяч акций по
одной йене каждая.

12. И КАК ЖЕ ЭТО
ДЕЛАТЬ?

13. ГЛОССАРИЙ
Дизайн ≠ красивая картинка
Дизайн — творческий метод, процесс и
результат художественнотехнического проектирования <…>,
ориентированного на достижение
наиболее полного соответствия <…>
возможностям и потребностям человека
<…>.
Wikipedia

16. НУ ПОЧТИ…
Красивая картинка – это тоже важно, но
дизайн решает более масштабные
проблемы

17. ДЖОЗАЙЯ
ВЕДЖВУД

19. ГЛОССАРИЙ
Юзабилити - степень, с которой продукт
может быть использован определѐнными
пользователями при определѐнном
контексте использования для достижения
определѐнных целей с должной
эффективностью, продуктивностью и
удовлетворѐнностью.
Международный стандарт ISO 9241-11

20. КОРОЧЕ
Юзабилити определяет эффективность
продукта для пользователя в рамках его
повседневных сценариев.
Качество работы пользователя в
интерактивной среде.
А в ГОСТе «Юзабилити» – это
пригодность использования :)

21. ДА, У НАС ЕСТЬ ГОСТ

22. ГЛОССАРИЙ
Интерфейс – система правил и средств,
регламентирующая и обеспечивающая
взаимодействие нескольких процессов и
объектов.
В нашем случае – программы и
пользователя.

23. ГЛОССАРИЙ
Интерфейс объединяет в себе все
элементы и компоненты программы,
которые способны оказывать влияние на
взаимодействие пользователя с ПО.

24. ГЛОССАРИЙ
Опыт взаимодействия представляет
собой совокупность аспектов восприятия,
которые формируются в мозге человека в
результате актов взаимодействия с
другими людьми, устройствами или
событиями, а также любой комбинацией
этих понятий.
Eric Reiss

25. ГЛОССАРИЙ

26. И КАК ЖЕ ЭТО
ДЕЛАТЬ?

27. ЗНАЙ СВОЁ МЕСТО
Бизнес
Проектировщик
Художник
Верстальщик
Программист

28. СОТРУДНИЧЕСТВО

29. ЗНАЙ СВОЁ МЕСТО
Бизнес
Проектировщик
Художник
Верстальщик
Программист
Пользователи

30. ПРОЕКТИРОВЩИК = ПЕРЕВОДЧИК
Ему нужно перевести то, что говорят
пользователи, на язык заказчика. А то, что
требует заказчик, транслировать
в интерфейс, который говорил бы
на языке пользователей. Однако, вот
парадокс, в результате своей работы,
проектировщик должен выработать
третий, визуальный, язык, который
был бы понятен обеим заинтересованным
сторонам.

33. ЗНАЙ СВОЁ МЕСТО
Бизнес
Проектировщик
Пользователи
Художник
Верстальщик
Программист
Юзабилити-тесты

34. ЗНАЙ СВОЁ МЕСТО
Бизнес
Маркетолог
Проектировщик
Пользователи
Художник
Верстальщик
Программист

36. НА ЧТО ВЛИЯЕМ
•
•
•
•
•
Скорость работы
Количество человеческих ошибок
Скорость обучения
Удовлетворенность пользователя
Запоминаемость
Ben Shneiderman

37. ПРИЧЕМ
Некоторые характеристики интерфейса
могут и обязательно будут конфликтовать
друг с другом.

38. ВЫСОКАЯ СКОРОСТЬ ОБУЧЕНИЯ

39. ВЫСОКАЯ СКОРОСТЬ РАБОТЫ

40. КОРОЧЕ…
«Интуитивная понятность» не является
максимально критичной характеристикой
интерфейса во всех без исключения
случаях.
И вообще, забудьте это словосочетание.

41. ЗАЧЕМ ЭТО ВСЁ?
Качественные интерфейсы:
• Приводят к успеху продукта
• Снижают затраты на разработку
• Удешевляют поддержку
• Повышают конкурентоспособность
• Увеличивают лояльность клиентов
• Повышают эффект автоматизации
• Избавляют от критических ситуаций

42. УСПЕХ ПРОДУКТА

43. УДЕШЕВЛЕНИЕ ПОДДЕРЖКИ
Количество обращений уменьшилось на
90%

44. ЛОЯЛЬНОСТЬ КЛИЕНТОВ

45. ЭФФЕКТИВНОСТЬ
Скорость работы увеличилась в 2,8 раза
Количество ошибок сократилось

46. НЕМНОГО ЦИФР
В целом по отраслям
• Затраты на производство
- 33-50%
• Затраты на обслуживание - 60-90%
• Увеличение продаж 40-80% (до 225%)
• Рост аудитории 40-80%
• Повышение эффективности 25-65%
• Повышение доверия ?
Aaron Marcus and Associates, Inc.

47. НЕМНОГО ЦИФР
Веб-проекты
• Продажи/конверсия 100%
• Траффик 150%
• Продуктивность действий 161%
• Использование ключевых
возможностей 202%
NNGroup, 42 проекта

48. ТЫ ВРОДЕ ПРО
ПРОЕКТИРОВАНИЕ ХОТЕЛ
РАССКАЗАТЬ, ЙОПТ

50. ЭТАП 1 – СБОР
ДАННЫХ

51. ЗАЧЕМ
•
•
•
•
Понимаем предметную область
Понимаем бизнес
Понимаем пользователей
Узнаем об ограничениях
• Учимся за счѐт заказчика

54. КАК
•
•
•
•
•
•
•
Интервью с экспертами
Изучение материалов
Интервью с пользователями
Полевые наблюдения
Анализ тенденций
Изучение статистики
Изучение обращений в службу
поддержки
• Юзабилити-тестирования

55. ЭТАП 2 – АНАЛИЗ ДАННЫХ

56. ПЕРСОНАЖИ
Это не:
• Реальные люди
• Среднестатистическое описание
целевой аудитории
• Сегменты рынка
• Бизнес-роли

59. КАКАЯ ВЫГОДА
•
•
•
•
Четкое позиционирование
Удобный контейнер
Коммуникации
Планирование и приоритезация
функций

60. КАК ПРИДУМАТЬ ПЕРСОНАЖ?

61. ПЕРВИЧНЫЙ АНАЛИЗ
Вопросы
Кто наши пользователи? Сколько
их? Что они делают с системой?
Методики
Анализ рынка, интервью,
наблюдения, ФГ
Результат
Отчет с общими характеристиками
ЦА

62. ПОСТРОЕНИЕ ГИПОТЕЗЫ
Вопросы
В чѐм разница между
пользователями? На какие группы
они разбиваются?
Методики
Выделение целевых групп
Результат
Черновое описание целевых групп

63. ОПРЕДЕЛЕНИЕ ТРЕБОВАНИЙ
Вопросы
Цели? Демографические
характеристики? Сценарии? Контекст?
Методики
Выделение поведенческих переменных
(10-30)
Результат
Схемы соответствия ЦГ и требований
(3-6)

64. ПЕРЕГРУППИРОВКА (УТОЧНЕНИЕ)
Вопросы
Какие требования совпадают у разных
групп? Какие – значительно различны у
одной?
Методики
Перегруппировка и оптимизация
Результат
Перечень заготовок персонажей

65. ФИКСАЦИЯ
Вопросы
Каковы общие характеристики у каждой
группы? Как совокупно описать ее
представителей?
Методики
Описание характеристик персонажей
Результат
Описание персонажей

66. ПРОВЕРКА
Вопросы
Кто знает таких (реальных) людей?
Нужны ли косвенные персонажи? Есть
ли лишние?
Методики
Уточняющие интервью и наблюдения,
оптимизация
Результат
Финальный перечень персонажей

67. РАНЖИРОВАНИЕ
Вопросы
Каков размер ЦГ, покрываемой
персонажем? Эффект, приносимый им?
Его влияние?
Методики
Создание шкалы ценности,
присваивание веса
Результат
Весовые коэффициенты

68. ФИКСАЦИЯ ТРЕБОВАНИЙ
Вопросы
Что требуется пользователям? Насколько
важно конкретному персонажу? Все
равно? Мешает?
Методики
Уточнение требований, присваивание
весов
Результат
Таблица требований

69. ВЫЯВЛЕНИЕ КЛЮЧЕВЫХ
ПЕРСОНАЖЕЙ
Вопросы
Чьи требования наиболее объемны? Чьи
можно реализовать в рамках другого?
Методики
Фильтрация персонажей
Результат
Ключевые персонажи (1-3), другие
группы

70. ОПИСАНИЕ СЦЕНАРИЕВ
Вопросы
Какие задачи решает персонаж? Как? В
каких условиях? Как часто?
Методики
Оптимизация и проектирование
сценариев
Результат
Перечень сценариев с характеристиками

71. ПАРАМЕТРЫ ДЛЯ ВЫДЕЛЕНИЯ ГРУПП
•
•
•
•
•
•
•
Роли
Соцдем
Активность
Цели/мотивы
Контекст
Опыт
Стереотипы поведения

72. ОПИСЫВАЕМ ПЕРСОНАЖ
• Ключевая характеристика
• Имя, фото, краткий соцдем
• Крик души
• Краткое словесное описание
• Важность персонажа
• Цели
• Опыт и знания
• Контекст использования
• Представление о продукте и способах
работы
• Сценарии

73. СЦЕНАРИИ
• Цель
• Критичность
• Критерий успеха
• Оптимизируемые параметры
• Последовательность шагов
• Контекст
• Сложности и проблемы
• Частота, продолжительность,
насыщенность,
• ограничения по времени, прерывания
• Социальные связи

74. ТРЕБОВАНИЯ К ИНТЕРФЕЙСУ
• Формулировка
• Весовые коэффициенты для каждого
персонажа (выделяем критичные и
отрицательные)
• Концептуальность требования
• Идеи и соображения по реализации

75. «Мы почти заканчивали ремонт, нужны были срочно деньги, и не хотелось у
кого-то занимать. В то же время мы понимали, что они у нас будут в
ближайшее время. Поэтому оформили кредитку.»
Ключевая характеристика: Берет кредит под конкретные цели. Старается разобраться в тонкостях выбора
предложения.
Оформление кредитной карты – вынужденное решение: на завершение ремонта срочно потребовались
дополнительные средства. Семья Ольги будет располагать нужными средствами, но несколько позже. Муж
Ольги уже оформлял кредитную карту, поэтому решили оформить карту на Ольгу. Ориентируется на
определенную сумму, но понимает, что расходы на завершение ремонта могут измениться. Чтобы избежать
лишних трат, Ольга старается выбрать оптимальное решение, советуется с семьей, друзьями и коллегами, а
также изучает профильные сайты, например, banki.ru. Ориентируется на процентную ставку и
беспроцентный срок погашения. Также для нее важны стабильность банка, его рейтинг. Читает отзывы.
Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов *март, 2013+
75

76. «Мы почти заканчивали ремонт, нужны были срочно деньги, и не хотелось у
кого-то занимать. В то же время мы понимали, что они у нас будут в
ближайшее время. Поэтому оформили кредитку.»
Выбрать предложение по важным параметрам
Быть уверенной в полноте и ясности информации
•
Узнать рейтинг банка – банк должен быть надежный и стабильный
•
Обеспечить уверенность Ольги в оптимальном выборе. У Ольги не должно возникнуть желания
перепроверить информацию на других сервисах сравнения или на сайтах банка
•
Сформировать доверие к материалам и возможностям сервиса.
•
Изучение информации “How to” («как выбрать лучшую для себя кредитную карту»)
•
Подбор предложения и изучение карточки
•
Изучение рейтинга банков, отзывов, экспертного мнения
•
Обращение к эксперту за ответом на ее персональный вопрос
•
Ключевые
сценарии Ольги:
Понять, на что требуется обратить внимание при выборе карты в ее конкретной ситуации
•
Наши цели:
•
•
Ольге необходимо:
Переход к оформлению онлайн-заявки с сайта сервиса
Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов *март, 2013+
76

77. Сценарий 1: Изучение информации “How to”
Цель: Понять, с чего начать и каким образом выбрать оптимальное
предложение
Описание: Итак, Ольге требуется срочно выбрать оптимальное предложение. На сайтах банков информация предлагается в
разном объеме. Для начала она вводит в поисковике запрос «как выбрать кредитную карту» и по первым же ссылкам
переходит в данный сервис. Здесь она получает исчерпывающуюся информацию о том, какие параметры ей будут важны в
первую очередь. Любопытства ради она читает также информацию о картах для других случаев – кобрендиновые, карты Gold и
Platinum, и удостоверяется, что данные варианты ей не подходят. Посылает ссылку мужу, чтобы посоветоваться с ним, нет ли у
него другого мнения относительно значимых параметров.
Успех: Ольга располагает всей необходимой, по ее мнению, информацией и готова воспользоваться инструментом подбора
предложения
Частота: Разовый сценарий – по возникновению потребности в новом виде продукта (карт)
Критичность: Высокая. Ольга скорее воспользуется инструментом подбора данного сервиса, если получит необходимые
инструкции перед этим прямо на этом же сайте.
Продолжительность: 15-20 минут, важна глубина просмотра.
Наличие прерываний: Возможно
Оптимизируемые параметры: структура материалов – «от простого к сложному», логические переходы между статьями.
Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов *март, 2013+
77

78. Сценарий 2: Подбор предложения и изучение карточки
предложения
Цель: Выбрать оптимальное предложение по кредитным картам
Описание: Вооружившись необходимыми знаниями о важных параметрах кредитных предложений и необходимой сумме,
Ольга задает в поиске нужные значения и изучает результаты поиска. Она отсортировывает значения по процентной ставке и
отбирает три предложения, которые находятся в начале списка. Ольга сравнивает эти три предложения, изучает их более
подробно, пересылает ссылки мужу для совета. При этом Ольга уверена в актуальности и полноте информации по всем
предложениям.
Успех: Ольга остановила свой выбор на предложении и готова отправить заявку.
Частота: Разовый сценарий – по возникновению потребности в новом виде продукта (карт)
Критичность: Высокая.
Продолжительность: 10-15 минут.
Наличие прерываний: Возможно. Есть вероятность, что окончательное решение произойдет не сразу, и Ольге потребуется еще
раз воспользоваться инструментом подбора.
Оптимизируемые параметры: оптимальное количество параметров, сортировка выдачи, возврат к результатам выдачи со
страницы предложения
Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов *март, 2013+
78

79. Ольга
Анастасия
Общий
балл
поиск
2
2
4
сравнить выбранные предложения между собой
поиск
2
2
4
сохранять интересные предложения
поиск
2
2
4
получить полную инструкцию о том, как подобрать себе оптимальное
предложение
контент
2
2
4
не "потерять" выбранное предложение при переходе на страницу заявки
банка
переход к
банку
2
2
4
быть уверенным в актуальности информации
контент
2
2
4
простой понятный стиль изложения материалов
контент
2
2
4
при первом посещении быстро перейти к инструкции как подобрать себе
оптимальное решение
контент
2
2
4
изучить отзывы владельцев карт
общение
1
2
3
быть уверенным в полноте информации
контент
2
1
3
рассчитать размер выплат по кредитной карте
поиск
2
1
3
изучить экспертные мнения, аналитику, статьи, рейтинги
контент
1
0
1
задать вопрос эксперту
общение
1
0
1
Требование
Категория
эффективно отсортировать все предложения по нужным параметрам
Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов *март, 2013+
79

80. ЭТАП 3 –
СЦЕНАРИИ

82. ЭТАП 4 – ИНФОРМАЦИОННАЯ
АРХИТЕКТУРА

83. ГЛОССАРИЙ
Информационная архитектура
занимается принципами
систематизации информации и
навигации по ней с целью помочь
людям более успешно находить и
обрабатывать нужные им данные
Louis Rosenfeld

87. ЭТАП 5 –
ПРОТОТИПИРОВАНИЕ

94. ЭТАП N – ЮТ

98. О ЧЁМ ЕЩЁ НЕ
СКАЗАЛ

103. 103

104. 104

105. 105

106. 106

107. 107

108. 108

109. 109

110. 110

111. 111

112. 112

113. СПАСИБО!
Владимир Зимин
zimin.vlad@gmail.com
fb.com/darkspi
twitter.com/darkspi
vk.com/darkspi
darkspi.ru