Usability lecture prepared by Gleb Uvarov, Sam-Solutions developer, inspired by our summer UX training.

1. Human-Centered Design
Глеб Уваров
1

2. Знакомство
ГЛЕБ УВАРОВ
 Разработчик программного обеспечения в
Sam Solutions
 Инженер-системотехник (БГУИР)
 Интересуюсь вопросами User Experience,
Usability, Human-Centered Design
g.uvarov
g.uvarov@gmail.com
2

3. Работа над ошибками
Человек, по настоящему мыслящий, черпает из своих ошибок не
меньше познания, чем из своих успехов
Джон Дьюи
3

4. Итоги
 Технологии развиты настолько, чтобы покрыть нужды
целевой аудитории.
 Большинство существующих решений не является
простыми в использовании.
 Причина сложности продуктов – в отличии целей тех,
кто создает продукты, и тех, кто их использует.
4

5. Итоги: Usability
 Широкий набор функций в продукте усложняет его с
точки зрения пользователя.
Бизнес не знает свою целевую аудиторию
Страх непринятия рынком
 Usability – ключ к созданию востребованных и
простых в использовании продуктов.
5

6. Итоги: Мифы
 Usability – не (только) визуальный дизайн
Это:
• Пользователь, его потребности, контекст
• Цели бизнеса
• Проектирование взаимодействия, информационная
архитектура
• Навигация
 Usability – не один шаг в процессе разработки
Это процесс:
• Непрерывного изучения пользователей
• Создания и тестирования прототипов раньше разработки
• Обязательной оценки на всех этапах проекта
6

7. Итоги: Мифы
 Usability – не UX
Pleasurable
UX
Usability Usable, Useful
Functional
7

8. Итоги: Значимость Usability
 Для разработчика
 Для тестировщика
 Для аналитика
 Для менеджера проекта
8

9. План
1. Human-Centered Design
2. Контекст использования
3. Пользовательские требования
4. Проектирование
5. Оценка
6. Этапы развития Юзабилити в компании
9

10. Human-Centered Design
10

11. HCD – что это?
 HCD – методология, которая ставит человека
в центр проектирования
• Потребности пользователя
• Цели бизнеса (+ stakeholders)
 Цель HCD – оптимизировать Usability
системы, продукта или услуги
 Usability – это результат применения НCD
11

12. Human-Centered Design (ISO 9241-210)
1
4 2
3
12

13. Принципы HCD
 Fail Fast
 Пользователи. Задачи. Среда.
 Вовлекать пользователей
 Критическая важность оценки
 Мультидисциплинарность команды
13

14. Контекст использования
14

15. Общие принципы
 Определить
• потребности
• цели
• ценности
• ограничения
 Описать физические и социальные условия
 Определить технические требования
 Определить характеристики задач, на которые влияет
юзабилити
15

16. Наблюдение
 Наблюдать за пользователями
• Что они делают?
• Как они делают?
• Чего они не делают?
• Контекст
• Понять их больные места
 О чем помнить:
• Обратить внимания на те задачи, которые пользователи
выполняют разными путями
16

17. Интервью
 Сбор информации о том, что пользователи думают о
существующем продукте и каково их мнение об
определенной функции.
 Культурные особенности, ожидания
 О чем помнить:
• интервью должно быть коротким,
• разные техники опроса,
• не выражать свое собственное мнение,
• делать заметки
• пользователи часто говорят не то, что делают
17

18. Персона
Люди. Как они работают. Как мыслят. Как живут.
18

19. Что такое Персоны?
 Персона – гипотетический
архетип реального
пользователя.

20. Чем должна обладать Персона?
 Тип  Уровень подготовки
 Имя, возраст  Ожидания
 Фотография  Потребности
 Место проживания  Цели
(география и язык)
 Место работы и
должность
 Биография
20

21. Основные принципы
 Проектировать для одной (ключевой)
персоны
 Персона должна быть конкретной
 Персона должны быть воображаемой
 Включить описание персон в
документацию
21

22. Почему Персоны важны?
 Закрывают споры о функциях
 Позволяют ранжировать функции
 Позволяют принимать взвешенные и
осмысленные решения в процессе
проектирования
22

23. Подбор Персон
23

24. Ключевая Персона
Persona 4: Alumni
“I keep an eye on upcoming events and research my old friends at the
University are doing. News feeds are important as I’m a busy man”
Dr Alan Mackintosh, GP, 40
Key tasks
Web usage • Alan is a busy man with little free time between work and
family life. He subscribes to updates from alumni relations
Access to other information platforms and the events section of the site to keep up to date with
new information
Use of your website • He keeps an eye on upcoming events and lectures, trying to
find time to attend one or two a year
Strength of relationship with you • He finds and keeps in touch with other alumni though the
website and especially enjoys reunions when they are
arranged
Alan is a GP, living in Hertford, Herts, with his wife Alana and • Research is another important area , keeping him up to
their two small children; Isla 9, and Hamish 7. Alana is date in his own area of expertise. Some old friends from his
pregnant, so there will soon be yet another addition to the student days are now work at the University, and he is
family. After Alan graduated his first job was in Scotland, always interested in reading work they publish
after which he moved to Cambridge for his GP training. His
main interests are art history and photography, but he also You would like to promote
enjoys bird watching, playing golf, art galleries, theatre, music • Alumni benefits and networking events/opportunities
and the pub - Alan is a big fan of real ale. He is not politically
• Upcoming events and seminars particularly alumni events
active, but he supports the coalition government.
and those related to medicine
He accesses the internet both from his PC at work and at
home using his laptop and his new iPad. Websites he visits are • New research that’s being carried out
Flickr, the Independent, Amazon, eBay, Waitrose, Expedia, • News feeds, so that Alan can subscribe
Wikipedia and Art. His parents live in Edinburgh so he is still • How, when and where alumni can donate to the University
in touch with the area and the local community. He has an
interest in distance learning.
24

25. Пользовательские требования
25

26. 26

27. Общие принципы
 Описывать действия пользователя, а не системы
 Согласованность требований с потребностями пользователя и
целями бизнеса
 Измеряемость, непротиворечивость, достаточность
 Спецификация требований:
• Контекст
• Стандарты пользовательских интерфейсов
• Измеряемые критерии юзабилити
 Разрешить и задокументировать конфликты
 Согласование с заказчиком
27

28. Сценарий
28

29. Что такое сценарий?
 Сценарий – это сжатое
описание способов
применения программного
продукта Персоной для
достижения цели.

30. Сценарии
 Это всегда реалистичные описания
жизненных ситуаций, в которых
пользователю может быть полезен
продукт
 Направляют разработку прототипов
 Используются для тестирования
30

31. Виды сценариев
 Повседневные
 Обязательные
 Исключительные ситуации
31

32. Литература
Karl E. Wiegers IIBA
Software Requirements, 2nd Business Analysis Body of
edition Knowledge
32

33. Проектирование интерфейсов
Проблемы происходят не от сложности создания хороших вещей,
а от готовности принимать некачественные вещи, как неизбежное
33

34. Прототипы: для чего?
 Ранняя оценка
 Показать заказчику
 Контакт с разработчиками
 Тестирование

35. О чем помнить
 Опираемся на Персоны и Сценарии
 Оценка
• Быстро разработали – быстро получили обратную связь
 Стандарты
• Платформы
• Отраслевые
• Корпоративные
• UI Patterns
 Степень детализации
• It depends 
35

36. Прототипы: детализация
Детализация
HTML
Wireframes
Бумажные
прототипы
Storyboards
Время
36

37. 37

38. Storyboarding
 Акцент на том, как продукт решает задачу
 Нет привязки к конкретному интерфейсу
 Вовлечение всех заинтересованных лиц
38

39. Wireframe
 Компоновка элементов
 Назначение:
• Какие элементы (контролы)
• Какая информация
 О чем помнить:
• Не показывают
интерактивность/flow
• Бывают разной степени
детализации
39

40. Макеты для спецификаций
 Макет с подробными описанием всех элементов управления
 Назначение:
• Для разработки
 О чем помнить:
• Описать:
• Все состояния
• Источники данных
• Действия
• Валидации
• Выслушать разработчиков
• Не показывать заказчикам и пользователям
40

41. Инструменты
 Карандаш, бумага 
 Balsamiq Mockups (www.balsamiq.com/products/mockups)
 Axure (www.axure.com)
 SketchFlow (www.microsoft.com/expression)
 HTML,CSS,JS
41

42. Литература
Carolyn Snyder
Bill Buxton
Paper Prototyping: The Fast and Easy
Sketching User Experiences: Getting
Way to Design and Refine User
the Design Right and the Right Design
Interfaces
42

43. Оценка
Мы не разрабатываем ничего того, что не будет тестироваться.
Мы не тестируем то, что не будет использоваться.
43

44. Общие принципы
 Обязательный этап
 Чем раньше, тем лучше
 Непрерывный процесс
 Использовать результаты оценки в
последующих итерациях
 Выделять ресурсы на тестирование и
исправление ошибок на всех этапах
44

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

46. Этапы
1. Найти репрезентативных пользователей (Персоны)
• 5-10 человек
2. Выявить критические задачи (Сценарии)
3. Создать протокол юзабилити-тестирования
4. Провести тестирование
5. Проанализировать результаты
6. Внести исправления в дизайн
7. Повторить со следующей группой

47. Принципы
 Чем раньше, тем лучше:
• Начинать с бумажных прототипов
• Степень детализации
• На всех этапах
• Итеративно
• На ранних этапах – качественная оценка
• На поздних этапах - Метрики
 Модератор
 Один и тот же набор задач
 Не более 1 часа
47

48. Сколько пользователей вовлекать?
48

49. Юзабилити-тестирование (Схема)
Пользователь
Помощники
модератора
Модератор

50. Сценарии
 Плохая задача
• Найти и купить книжную полку
 Хорошая задача
• У вас есть 200 книг по научной фантастике, сейчас они лежат в ящиках в
вашей гостиной. Как бы вы их организовали?
 Плохая задача
• Заказать межбиблиотечный абонемент
 Хорошая задача
• Как бы вы получили книги, которые недоступны в нашей библиотеке?
50

51. Как стоит делать
 Придерживаться графика или сценария
 Пройти этот сценарий заранее (знать что я это сам могу сделать)
 Дать стимул (подарок, сладости)
 Поощрять пользователей думать вслух (Think aloud)
 Тестируется система, а не пользователь!
 Не вмешиваться в процесс
 Поговорить с пользователем после тестирования (посмотреть на запись
тестирования, дать ему прокомментировать свои действия)
 Пересмотреть записи и заметки и сделать выводы как можно раньше после
тестирования
51

52. Как НЕ стоит делать
 Допускать нерепрезентативных пользователей к
тестированию
 Учить пользователя
 Помогать тестируемому при малейших затруднениях
 Вмешиваться в процесс
 Сходить с ума если пользователь не может сделать
то, что вы считаете очевидным 
52

53. Метрики
Если мы не можем что-то измерить, то как мы сможем
это улучшить?

54. Метрики – Продуктивность.
Эффективность.
 Выполнимость задачи
• Да/Нет
• Градации (полностью, частично, с помощью или без)
 Время на задачу
• Для выполненных задач
 Ошибки
 Эффективность
54

55. Метрики: Дефекты
- все, что препятствует выполнению задачи
- что не относится к выполнению задачи
- пользователь не увидел то, что ожидал
увидеть
- выполнение неверного действия
- неправильная интерпретация чего-либо
55

56. 10 юзабилити эвристик
Якоб Нильсен
56

57. 1. Видимость состояния системы
(обратная связь)
 Система должна всегда информировать
пользователя о своем состоянии с помощью
соответствующих средств, в разумное время

58. 2. Соответствие системы
реальному миру (метафоры)
 Система должна разговаривать с пользователем на
его языке и использовать понятия, образы и концепции,
которые уже знакомы пользователю по реальному
миру.
58

59. 59

60. 3. Свобода действий и контроль
над ситуацией (навигация)
 Пользователь может совершить действие по
ошибке. У него должен быть «аварийный
выход» из этой ситуации, четко обозначенный
в программе
60

61. 61

62. 4. Последовательность и следование
стандартам (единообразие)
 Пользователи не должны гадать, означают ли
различные слова, ситуации, действия,
объекты одно и то же
62

63. 63

64. 5. Предупреждение ошибок
 Дизайн, который предупреждает
возникновение проблем, лучше, чем самое
хорошее сообщение об ошибке
64

65. 65

66. 6. Узнавание вместо воспоминания
(память)
 Делайте все объекты, функции, действия видимыми и
легко доступными пользователю. Минимизируйте
запоминание – пользователь не должен постоянно
стараться удержать в памяти информацию из одной
части программы, чтобы применить ее в другой
66

67. 7. Гибкость и эффективность
использования
 Функции, которые ускоряют работу, нужно оформлять
так, чтобы они не мешали начинающим, но были
легко доступны продвинутым пользователям
67

68. 8. Эстетичный и минималистичный
дизайн
 Страницы, формы и диалоги не должны содержать
лишней и нерелевантной информации. Каждый
дополнительный элемент конкурирует с важным
содержимым и снижает его заметность
68

69. 69

70. 9. Восстановление после ошибок
 Хорошие сообщения об ошибках должны
объяснять на понятном языке, в чем состоит
проблема и как ее исправить
70

71. 71

72. 72

73. 10. Помощь и документация
 Вся документация должна быть легко обнаружима,
сосредоточенной на задачах пользователя и
описывать конкретные шаги. Однако лучше, если
система может использоваться без документации
73

74. 74

75. 75

76. Human-Centered Design - резюме
 Исследование раньше прототипа
• Использовать разные техники исследований
 Прототипы раньше разработки
• Это очень дешево
• Проводим проверку
• Вовлекаем всю команду
 Тестирование прототипов до разработки
• Дешевые исправления
 Оценка
• Обязательная
• Непрерывная
• Итеративная
• Долгосрочная
76

77. 8 этапов развития юзабилити в
компании
Якоб Нильсен
77

78. Этап 1: Враждебность к юзабилити
 Хороший пользователь — мертвый
пользователь
 Цель – писать программы, и чтобы они
запускались на компьютере

79. Этап 2: Юзабилити,
поддерживаемая разработчиками
 Задумались об удобстве
использования
 Интуитивный подход
 Удобство использования с точки
зрения разработчиков
79

80. Этап 3: Юзабилити
децентрализованных групп
 Произвольные инициативные
группы
 Юзабилити-процессы не
систематизированы
 Нет выделенного бюджета
80

81. Этап 4: Выделенный бюджет под
юзабилити
 Есть выделенный бюджет
 Юзабилити – волшебство
 Специалисты
децентрализованы
 Юзабилити-тестирование
проводится слишком
поздно
81

82. Этап 5: Управляемая юзабилити
 Выделенный отдел юзабилити
 Архивы исследований
 Юзабилити-менеджер
82

83. Этап 6: Систематический
юзабилити-процесс
 Итеративные юзабилити-
процессы
 Тестирование на каждом
этапе цикла разработки
 Ранние исследования
83

84. Этап 7: Интегрированный Human-
Centered Design
 Численные метрики
юзабилити
 Использование данных
юзабилити для
определения того, ЧТО
следует производить
 Построение продукта «от
потребностей»
84

85. Этап 8: Компания,
ориентированная на пользователей
 Полная интеграция User
Experience и Human-
Centered Design на все
сферы взаимодействия
клиента и компании,
стратегию и бизнес-
процессы
85

86. Успешных вам
продуктов!
86

87. Спасибо за внимание!
Вопросы?
Глеб Уваров g.uvarov
g.uvarov@gmail.com
87

88. Полезные книги
Donald A. Norman Jacob Nielsen, Hoa Loranger Jesse James Garrett
The Design of Everyday Things Prioritizing Web Usability The Elements of User
Experience
88

89. Полезные книги
Дж. Гарретт Алан Купер Алан Купер
Веб-дизайн: Элементы Об Интерфейсе. Основы Психбольница в руках
опыта взаимодействия проектирования пациентов
взаимодействия
89

90. Полезные книги
Стив Круг Билл Скотт, Тереза Нейл Луис Розенфельд, Питер
Веб-дизайн или «не Проектирование веб- Морвиль
заставляйте меня думать!». интерфейсов Информационная
архитектура в интернете
90