1. USABILITY
для программистов
Бибичев Андрей
@bibigine
январь 2012

3. Алан Купер

4. Хорошая
рецензия
Стаса
Фомина

6. Widely recognized as the “Father of Visual Basic"

7. Еще
рецензия
Стаса
Фомина

8. Джеф Раскин

9. best known for starting the Macintosh project
for Apple in the late 1970s

10. В электронном
виде

11. В usability есть место
системному мышлению
и математическому подходу

12. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

13. Логика взаимодействия
(FRIENDLY)
Трудоемкость
выполнения
действия

14. KEYSTROKE LEVEL MODE (KLM)
TEXECUTE = TK + TP + TH + TD + TM + TR
• K = key stroking (0.08 – 1.20 sec)
• P = pointing (1.10 sec)
• H = homing (0.40 sec)
• D = drawing
• M = mental operator (1.20 sec)
• R = system response time

17. Два мозга

19. KEYSTROKE LEVEL MODE (KLM)
TEXECUTE = TK + TP + TH + TD + TM + TR
• K = key stroking (0.08 – 1.20 sec)
• P = pointing (1.10 sec)
• H = homing (0.40 sec)
• D = drawing
• M = mental operator (1.20 sec)
• R = system response time

20. Должность: «Tap counter»

21. MySQL Workbench

22. ЗАКОН ХИКА (HICK’S LAW)
• Стимул <-> Реакция (1-к-1)
• n стимулов, n реакций
• дается стимул
• на реакцию затрачивается T
T = blog2(n + 1)
• Где b – эмпирический коэффициент
• H – энтропия информации T = bH
• pi – вероятность i-ого случая

23. A
FIT’S LAW T  a  b log 2 (  1)
W
• T - время для попадания в «мишень»
• a,b - эмпирические коэффициенты
• A - расстояние до «мишени»
• W - размер (ширина) «мишени»
W
A

25. Как быть в двумерном
случае однозначного
ответа нет …

26. ДЛЯ ТРАЕКТОРИИ: ds
TC  a  b 
C
W ( s)
– TC - время следования траектории C
– a,b - эмпирические коэффициенты
– W(s) - допустимая ширина «отклонения»
- от траектории в точке s
– s - точка на траектории
A
• Прямая линия TC  a  b
A
W
W
W
• Окружность 2R
TC  a  b R
W

30. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

31. Минимизация
ошибок при
выполнении
действия
Минимизация
вероятности
ошибки

32. ДЛЯ ТРАЕКТОРИИ: ds
TC  a  b 
C
W ( s)
Pошибки  TС

34. To be or, not to be –
that is the question…

35. Вы собираетесь выйти из программы,
но есть несохраненные документы.
Что делать?
Да – сохранить и выйти
Нет – не сохранять, но выйти
Отмена – не сохранять и не выходить

37. Есть несохраненные документы

38. Одного взгяда на
кнопку должно быть
достаточно, чтобы
понять, что она делает

41. Требуется перезагрузка системы!
Напомнить: через 10 минут

44. К сожалению,
логично  удобно

48. Любая настройка, влияющая
на интерпретацию действий
пользователя – это режим.

50. Сейчас модно иметь
минимум настроек.

51. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

52. Минимизация
ошибок при
выполнении
действия
Минимизация
последствий
ошибки

53. Вы сдвинули мышку с места.
Вы уверены в своих действиях?

55. Любое обыденное
действие должно быть
безопасно,
т.е. легко обратимо

56. В ИДЕАЛЕ ВЕЗДЕ ТОТАЛЬНО ДОЛЖНА
БЫТЬ ДОСТУПНА TIME-MACHINE

57. Если всё равно нужен дозапрос,
то формулировки должны быть
короткими, но емкими

58. Впереди, согласно данным с
бортового GPS и карте местности от
13.10.2010, ожидается обрыв,
ориентировочное расстояние до
которого равно 250 метров
плюс/минус 20 метров. Как вы
думаете, стоит тормозит?

59. Явившаяся на место происшествия
местная полиция арестовала восемь
человек демонстрантов.
„Местная“ — разве в Твери могла
явиться полиция не местная, а
казанская?
Затем — „явившаяся на место
происшествия“; разве могла она
арестовать, не явившись?
Редактор
А „полиция“ — кто же арестует, кроме
Ольминский
полиции?
Наконец, „человек демонстрантов“ —
конечно, не коров и не прохожих.
Арестовано восемь.

62. ВВОД СТРОК
• Наибольшие проблемы доставляют ПРОБЕЛЬНЫЕ
СИМВОЛЫ
– обычный пробел
– жесткий пробел &nbsp;
– табуляция TAB
user@login
WorldUsability  Day

63. НОРМАЛИЗАЦИЯ СТРОК
Step 1:
Лидирующие пробельные символы X
Step 2:
Концевые пробельные символы X
Step 3:
Пробельные символы  пробел
Step 4:
Несколько пробелов подряд  1 пробел

64. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

65. Возможность
выполнить
действие
Как это
сделать?

70. УСТОЯВШИЙСЯ ПОЛОЖИТЕЛЬНЫЙ
ПРИМЕР
• Поиск контакта в адресной книге
– одно поле
– ищет по мере набора (инкрементальный поиск)
– строит разные догадки:
• ФИО
• отдельные части ФИО
• E-mail
• телефон
• «прозвище»
• …

73. Пользователь хочет решить
задачу или получить ответ
непосредственно в том
месте и в то время, когда эта
задача/вопрос возникает

74. Введите номер телефона:

77. Link

78. 6 – 8

79. Расстояние Диаметр
до экрана четкой зоны
30 см 3,7 см
50 см 6 см
1м 12 см
1,5 м 18 см
2м 24 см
5м 60 см
10 м 120 см

80. 15’’, 1024 X 768, 50 СМ
• диагональ:
– 15’’ = 15 * 2.54 см = 38 см
– sqrt(1024 * 1024 + 768 * 768) = 1280 пикселей
• пятно:
– 50 см * sin( 7 градусов) = 6 см
– 6 / 38 * 100 = 15.8 % от диагонали
– 15.8 * 1280 / 100 = 200 пикселей

82. Поэтому пользователь
и не видит кнопку «Продолжить».

83. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

84. Возможность
выполнить
действие
Толерантность
к действиям
пользователя

87. « У меня есть для вас
посылка, только я вам её не отдам,
так как у вас документов нет »
(с) Печкин

88. « У меня есть для вас
Сообщения их покажу
посылка, только я вам её не отдам,
так как у вас документов нет »
вы ввели телефон в формате
8(xxx)xxx-xx-xx
а ожидался телефон в формате
+7-xxx-xxx-xxxx
(с) Печкин

89. UI
Визуальная подача Логика взаимодействия Алгоритмы
(SEXY) (FRIENDLY) (SMART)
Возможность Минимизация Трудоемкость
Статика Динамика ошибок при
выполнить выполнении
выполнения
действие действия действия
Толерантность Минимизация Минимизация
Как это
к действиям вероятности последствий
сделать?
пользователя ошибки ошибки

90. ПОЛЕЗНЫЕ СОВЕТЫ
• Избегайте группировок в иерархии
– плоские списки + MRU + favorites + инк. поиск = Love!
• Говорящие надписи на кнопках (чаще всего глаголы)
• Трим строк при вводе
• Защита от случайного повторного нажатия
• Действия над объектом – как можно ближе к объекту
• Повсеместная возможность Undo (где не супер-сложно)
• Не терять пользовательские данные
– то, что ввел пользователь – священно и не должно
внезапно исчезать
• Конструируйте толерантный софт
– не ругается на пользователя и не наказывает его, а
пытается «угадать», что тот имел ввиду
• Бойтесь режимов и настроек
– это костыли и признание собственной слабости
• Почаще смотрите на софт глазами пользователя
– его ментальная модель
– помогает «коридорное тестирование»

91. СПАСИБО ЗА ВНИМАНИЕ !
ВОПРОСЫ ?