Современный подход к проектированию
TRANSCRIPT
1
С О В Р Е М Е Н Н Ы Е М Е Т О Д И К И
П Р О Е К Т И Р О В А Н И Я
2
П Л А Н В С Т Р Е Ч И
Проектирование: задачи, современные подходы, ограничения
Юзабилити: какие задачи в рамках проектирования выполняет «юзабилити»
Чему хотите научиться/можете научиться
Познакомимся
3
М Е Н Я З О В У Т Д И М А
8 лет опыт работы по юзабилити-проектам
Банки, E-com, ГОС, Телеком, Страхование , платежные сервисы, СМИ
Сайты, интернет-банки, личные кабинеты, АТМ, мобильные приложения, внутренние системы, IVR, терминалы, поисковые проекты
4
А В А С ?
Кто руководил юзабилити-проектами, которые включали проектирование?
Кто разрабатывал прототипы самостоятельно?
Профиль сервисов: сайты, интернет-банки, личные кабинеты, АТМ, мобильные приложения, внутренние системы, IVR, терминалы, поисковые проекты
5
Ч Т О Х О Т И Т Е ?
ищу идеи для своего сервиса
ищу идеи для своего сервиса повышаю компетенции
работаю над собственным проектом
думаю, что курс структурирует информацию
узнаю как управлять различными аспектами проект: в частности, пользовательскими качествами
узнаю, как принимать бизнес-решения
хочу преподавать
6
7
«Нам стыдно показывать
интерфейсы наших
терминалов.»
«Мы видим, как стоит два терминала, у одного два человека, у другого – никого. Мы хотим быть лучше конкурентов.»
8
«Новая версия 8.1. системы
слишком похожа на старую.
Мы боимся, что и ей не будут
пользоваться»
9
10
№ 1 . П Р О Е К Т И Р О В А Н И Е И Б И З Н Е С
Какие предпосылки к проекту встречали?
11
F B 2
12
B A B Y A P P
13
Я Н Д Е К С . Т Р А Н С П О Р Т
14
15
№ 2 . П Р О Е К Т И Р О В А Н И Е И П Р И В Ы Ч К И
Какие примеры знаете, когда проектирование меняет привычки?
16
Г О С У С Л У Г И
17
М О Б И Л Ь Н Ы Й Б А Н К
18
Ч А С Ы
«Analysts estimate that 50
percent of business applications
will be accessed via mobile
devices over the next couple of
years. »
19
№ 3 . П Р О Е К Т И Р О В А Н И Е И Т Е Х Н О Л О Г И И
Какие примеры знаете, когда технологии делают дорогое доступным массово?
20
21
Ч Е Л О В Е Ч Е С К О Е П Р О Е К Т И Р О В А Н И Е
Потребности бизнеса, пользователей и разработчиков
Потребности или идея
Внедрение
Оценка дизайна с привлечение пользователей
Разработка дизайна
3
4Определение требований
2
1
22
Ц Е Л Е С О О Б Р А З Н О С Т Ь
viability
feasibility
desirability Innovation
23
Ф О К У С
Technology First
User Needs
Mobile First
«Do one thing and do
it well» Paul Graham
24
«Necessity is often not the
mother of invention. In many
cases, it surely has been just
the opposite. When humans
possess a tool, they excel at
finding new uses for it. The tool
often exists before the problem
to be solved»
О Ц Е Н И Т Е ?
26
О Ц Е Н И Т Е ?
27
З А Д А Ч И И У С Л О В И Я
Какие задачи решаются?
В каких условиях?
Какое количество?
Кто этим пользуется?
28
И З У Ч А Е М Д Е Я Т Е Л Ь Н О С Т Ь
29
«Проектирование — это
всегда личное. В этом его
сила и слабость».
30
М И С С И И
«Simplify your life»
«…создаёт сервисы и продукты, повышая при этом качество жизни в целом.»
Повысить уровень жизни за счет доступности ИТ технологий
31
К А К А Я М И С С И Я В В А Ш Е Й К О М П А Н И И ?
32
П О Л Ь З О В А Т Е Л Ь С К И Й И Н Т Е Р Ф Е Й С
Приоритет в сценариях взаимодействия
Элементы управления и их поведение
Представление (визуализация для GUI) данных
Разбиение на экраны / страницы / окна и спецификация переходов между ними
Интерфейсные тексты
Графический дизайн, Анимация
Режимы и состояния интерфейса
Опыт пользователей меняется
33
Applied Psychology
Product design
UX design
Visual design
Copywriting Information Science
Service design
Business Analysis
Computer Science
Human Computer Interaction
Interaction design
34
Ч Т О П О Ч И Т А Т Ь ?
35
[Глава 11] Beyer H., Holtzblatt K. Contextual design: defining customer-centered systems. – Elsevier, 1997 — http://goo.gl/uamLDu
[Глава 6] Cooper A., Reimann R., Cronin D. About face 3: the essentials of interaction design. – John Wiley & Sons, 2007 — http://goo.gl/iQETK4
Hackos J.T., Reddish J.C. User and Task Analysis for Interface Design. – Toronto: John Wiley & Sons, 1998 — http://www.amazon.com/User-Task-Analysis-Interface-Design/dp/0471178314
Hammer M. Reengineering Work: Don't Automate, Obliterate // Harvard Business Review 68 (4), 1990. PP. 104-112. — http://goo.gl/PB6VBa
1. ПРОЕКТИРОВАНИЕ ДЕЯТЕЛЬНОСТИ
[Главы 4, 7] Mayhew D.J. The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design. – Morgan Kaufmann, San Francisco, 1999. — http://goo.gl/vtnSDC
36
[Главы 4, 7] Mayhew D.J. The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design. – Morgan Kaufmann, San Francisco, 1999. — http://goo.gl/vtnSDC
Quesenbery W., Brooks K. Storytelling for user experience: Crafting stories for better de-sign. – Rosenfeld Media, 2010. — https://goo.gl/EW8hzX
2. ПРОЕКТИРОВАНИЕ ИНФ . АРХИТЕКТУРЫ
Rosenfeld L., Morville P. Information architecture for the world wide web. – O'Reilly Media, Inc., 2002.
Spencer D. Card sorting: Designing usable categories. – Rosenfeld Media, 2009. —https://goo.gl/eaah6Q
Mullet K., Sano D. Designing visual interfaces: Communication oriented techniques. – Englewood Cliffs NJ : SunSoft Press, 1995. — http://goo.gl/1UcSIE
3. ГРАФИЧЕСКИЙ ДИЗАЙН ПОЛЬЗ . ИНТЕРФЕЙСОВ
37
White J. V. Editing by Design: for designers, art directors, and editors: the classic guide to winning readers. – Skyhorse Publishing Inc., 2003. — http://goo.gl/rIJyJN
Williams R. The non-designer's design book. – Pearson Education, 2014. — http://goo.gl/1aniEy
38
К О Н Ц Е П Т У А Л Ь Н О Е П Р О Е К Т И Р О В Н И Е
39
П А Р А Л Л Е Л Ь Н О Е П Р О Е К Т И Р О В Н И Е
40
41
F R O N T - E N D D E S I G N W O R K
42
П Р О С Т Р А Н С Т В О Р Е Ш Е Н И Й
43
“The ultimate solutions to
problems are rational; the
process of finding them is not”
— J.P. Guilford
44
О Т Р Ы В О К И З Д С
«Интерфейс – совокупность средств и методов, при помощи которых пользователь взаимодействует с продуктом»
45
З А Д А Ч А
Спроектировать пользовательский интерфейс АРМ руководителя для планшета и настольного ПК
46
«А есть ли еще более общий
вопрос на который я
не обратил внимание»?
47
Чем ниже (уже/конкретнее) вопрос располагается в иерархии, тем ближе мы к детальному проектированию
48
«Главной особенностью дизайн-
мышления, в отличие
от аналитического мышления,
является не критический анализ,
а творческий процесс, в котором
порой самые неожиданные идеи
ведут к лучшему решению
проблемы.»
49
Юзабилити будет востребовано, покуда проектирование будет включать творческую часть работы
50
К А К И Е М Е Т О Д Ы
О Ц Е Н К И
Э Ф Ф Е К Т И В Н О С Т И
Р Е Ш Е Н И Й В Ы
З Н А Е Т Е ?
51
— «О, Боже, кто это вам сделал?»— «Что там?»— «Все НАДО переделать»
52
П Р А В И Л А Ш Н Е Й Д Е Р М А Н А
Стремитесь к логичности
Для опытных пользователей должен быть быстрый способ (сокращения, горячие клавиши, макросы)
Должна быть информативная обратная связь
Диалог должен быть законченным
Обработка ошибок должна быть простой
Должен быть простой способ отмены действий
Пользователь должен чувствовать, что все под его контролем
Как можно меньше загружайте кратковременную память
до 5 раз склоны
к покупке доп. услуг
в 3 раза реже готовы
к смене
в 41 раз дешевле
через прило- жение
Удобство интерфейса влияет на бизнес-эффективность
банковских сервисов
С Р А В Н И Т Е Л Ь Н О Е Т Е С Т И Р О В А Н И Е
Обещание заплатить
Информирован клиент
Информировано 3 лицо
Некорректный номер
Ответ машины
Поиск клиента
Новая система Старая система
54
И с с л е д о в а н и е C h a n g e S c i e n c e
55
56
Чем выше «юзабилити» сайта,
тем выше конверсия
(количество выполненных задач).
Они связаны линейно.
57
И Н Т Е Р Н Е Т - Б А Н К И Н Г
И С С Л Е Д О В А Н И Е O P T I M A U S A B I L I T Y
58
0
25
50
75
100
AKZ ASB BNZ KiWi bank MY WW O
SUS Score Total # of Features Usability Issues
61
П А Р Н О Е С Р А В Н Е Н И Е
Задача – определить, какой дизайн более привлекателен для пользователей.
Подходит для задач, когда все решения сравнимого качества, и нельзя прийти к общему экспертному мнению.
Просим пользователей сравнить варианты: каждый вариант сравнивается с каждым попарно и многократно. Мы вычисляем среднюю оценку для каждого варианта.
Достаточно 100-300 респондентов, каждый вариант сравнивается с каждым 3-4 раза (чтобы учесть колебание индивидуальных оценок).
Результат – рейтинг привлекательности графического дизайна.
62
Р Е З У Л Ь Т А Т
Нормализованная оценка
Вероятность выбора
Нормализованная оценка
Вероятность выбора
Нормализованная оценка
Вероятность выбора
Вариант 1 0,45 67% 0,6 73% 0,43 67%
Вариант 2 -0,23 42% -0,43 33% -0,18 43%
Вариант 3 0,19 57% 0,26 59% 0,1 54%
Контрольный -0,41 34% -0,43 34% -0,35 36%
ГЛАВНЙ ЭКРАН СПИСОК ПРОДУКТОВ ПЛАТЕЖ
П О П А Р Н А Я О Ц Е Н К А , N = 73
63
Р Е З У Л Ь Т А Т
Нормализованная оценкаВероятность
выбора Нормализованная оценкаВероятность
выбора
Вариант 1 0,49 69% 0,5 69%
Вариант 2 -0,42 34% -0,25 41%
Вариант 3 0,2 57% 0,18 57%
Контрольный -0,27 39% -0,43 34%
КЛИЕНТЫ БРС, N = 14
НЕ КЛИЕНТЫ БРС, N = 59
П О П А Р Н А Я О Ц Е Н К А , N = 73
64
К О М М Е Н Т А Р И И
темный, мрачный 10плохо читается текст 4
цвет нравится 3иконки не нравятся 2
красивый 2понятный 2
не в стиле банка 1слишком много разделов 1
простой 1легкий 1
спокойный 1
ВАРИАНТ №2
65
G O M S
Goals, operators, methods
and selection rules —
информационная модель,
позволяющая провести
моделирование выполнения той
или иной задачи пользователем
и на ее основе оценить качество
интерфейса.
66
П Р И М Е Р Р А С Ч Е Т А
нажатие клавиши K = 0, 2 c
указание P = 1, 1 c
перемещение H = 0, 4 c
ментальная подготовка M = 1, 3 5 c
ответ R
67
П Р И М Е Р Р А С Ч Е Т А
1. Выбрать тип документа
2. Ввести идентификатор
документа 3. Ввести фамилию
4. Считать карту клиента
1. Перенос правой руки на цифр.
клавиатуру
2. Ввод 4-х
цифр
3. Ввод 6-ти цифр
4. Ввод 7-ми цифр
1. Перенос правой руки на основную клавиатуру
2. Ввод n символов
1. Нажать кнопку
«Запустить терминал»
2. Провести картой по
считывающему
устройству
1. «Карта+Документ»
2. «ФИО+Документ»
1. Навести указатель мыши
2. Нажать левой кнопкой
4. Ввод 7-ми цифр
5.Нажать
«Enter»
3. Нажать «Enter»
4. Нажать левой кнопкой мыши
3. Навести указатель мыши на нужный тип документа
2. Нажать левой кнопкой мыши
1. Навести указатель мыши на выпадающий
список
1. Способ идентификации
0.Идентификация клиента
2. Ввод параметров идентификации
68
В Ы В О Д Ы
Проектирование — процесс или деятельность. Эту деятельность можно декомпозировать и управлять на каждом этапе.
Юзабилити превращает эмоциональные/творческие решения (я так думаю, я так чувствую, я эксперт) в бизнес-решения (это востребовано, так удобно пользователям, такой дизайн пользователи выберут чаще и им понравится больше).
69
U S A B I L I T Y B E N C H M A R K I N G
70
О Ц Е Н И Т Е С О Д Е Р Ж А Н И Е
Проектирование — процесс или деятельность. Эту деятельность можно декомпозировать и управлять на каждом этапе.
Юзабилити превращает эмоциональные/творческие решения (я так думаю, я так чувствую, я эксперт) в бизнес-решения (это востребовано, так удобно пользователям, такой дизайн пользователи выберут чаще и им понравится больше).
71
О Ц Е Н И Т Е С О Д Е Р Ж А Н И Е
Хорошо ли описаны проблемы?
Правильно ли выбраны методы?
Понятно ли описание методов?
Правильно ли применены методы?
Вы смогли бы воспроизвести исследование?
Насколько достоверными вам кажутся результаты?
Интересны ли результаты?
