Современный подход к проектированию

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

О Ц Е Н И Т Е С О Д Е Р Ж А Н И Е

Хорошо ли описаны проблемы?

Правильно ли выбраны методы?

Понятно ли описание методов?

Правильно ли применены методы?

Вы смогли бы воспроизвести исследование?

Насколько достоверными вам кажутся результаты?

Интересны ли результаты?

72

С П А С И Б О

d.silaev@usabilitylab.net Mob: + 7 926 492 05 50 Skype: silaev_usabilitylab