1. User Пользовательский Interface интерфейс Бибичев Андрей 2009 год, апрель 2. Humane Гуманный User Пользовательский Interface интерфейс 3. «Мощность и сложность вычислительных систем удваиваются каждые полтора года. Но люди не роботы – они часто теряются, ошибаются, и многое забывают.» 4. Книги, которые вдохновляют ЧАСТЬ 0. ПРЕАМБУЛА 5. Семинар №1: Конкурентная работа в Oracle (2006 год) I:docsSEMINARS2006-09-25-Конкурентная_работа_в_Oracle 6. Семинар №2: Agile (2007 год) I:docsSEMINARS2007-07-09-Agile 7. Семинар №3: UML (2008 год) I:docsSEMINARS 2008-06-17_24-UML 8. И наконец! (2009 год) http://raskin-interface.narod.ru/interface/index.htm 9. Джеф Раскин (Jef Raskin) • 26 марта 1943 — 26 февраля 2005 • сотрудник №31 фирмы Apple Computer (1978 – 1982) • в 2000 году была издана книга Джефа Раскина «The Humane Interface» • в начале XXI века Раскин начал проект The Human Environment (THE) • сейчас это дело продолжается сыном – Азой Раскиным (Aza Raskin) – в компании Humanized (не так давно влилась в Mozilla) • http://ru.wikipedia.org/wiki/Раскин,_Джеф • http://en.wikipedia.org/wiki/Jef_Raskin 10. Своих героев надо знать в лицо! 11. В CustIS есть свои герои: 12. Похож? 13. А так? 14. Вы всё еще спите?! 15. тогда мы идём к вам… 16. Очень фривольно Очень субъективно Очень кратко Так что лучше прочтите книгу! ЧАСТЬ 2. ВЫЖИМКА ИЗ «РАСКИНА» 17. Итак, внимание! 18. ЛОКУС ВНИМАНИЯ 19. Locus of control • Психология • Julian B. Rotter, 1954 • Locus – lat. "place" or "location― • http://en.wikipedia.org/wiki/Locus_of_control • Но Раскин использует чуть в другом смысле – скорее, как замена «фокусу, куда направлено внимание» 20. Свойства когнитивного сознательного и когнитивного бессознательного Свойство Сознательное Бессознательное Инициируется Чем-то новым Повторением Нестандартными ситуациями Ожидаемыми событиями Опасностью Безопасностью Используется В новых обстоятельствах В привычных ситуациях Решает задачи Принятие решений Работа с неветвящимися задачами Логические или противоречивые Принимает Логические утверждения утверждения Функционирует Последовательно Одновременно Управляется Волей Привычными действиями Производительность Небольшая Огромная Период функционирования Десятки секунд Десятилетия (всю жизнь) 21. «Вы можете до некоторой степени контролировать превращение бессознательных мыслей в сознательные, в чем вы убедились, переместив знание последней буквы вашего имени в сознательную область. Однако вы не можете намеренно перевести сознательные мысли в бессознательную область.» 22. «Вы слышите и видите намного больше того, что становится локусом вашего внимания. Когда вы входите в комнату, чтобы найти какой-то потерянный предмет, он может лежать прямо перед вами и, тем не менее, остаться незамеченным.» 23. «Прислушавшись, я могу заметить, что лампы дневного света в коридоре рядом с моей комнатой раздражающе жужжат. Но если этого не делать, я не услышу этого звука. Чаще всего я замечаю этот звук в тот момент, когда свет включается или выключается. Внезапное начало жужжания обращает на него мое внимание.» 24. Работают по разному при просмотре TV и DVD Пример 25. В ловушке автоматизма «Когда вы выполняете какую-то задачу многократно, то с каждым разом делать это становится все проще. Любая привычка означает отказ от внимания к деталям.» 26. Недостатки на службе у людей «При постоянном использовании какого- либо интерфейса у вас формируются определенные привычки, которые впоследствии трудно преодолеть. В этом смысле задача дизайнеров заключается в том, чтобы создавать интерфейсы, которые не позволяют привычкам вызывать проблемы у пользователей.» 27. Пример 1: CAPS LOCK, Scroll Lock — ЗДРАВСТВУЙТЕ! — Нажми Caps Lock! — СПАСИБО, ТАК УДОБНЕЕ. 28. Пример 2: Rus/Lat 29. Пример 3 30. Пример 4 31. О вреде режимов « Режимы (modes) являются важным источником ошибок, путаницы, ненужных ограничений и сложности в интерфейсе.» « Возможности установки пользовательских настроек являются одним из примеров режимов и представляют собой большой источник расстройств для пользователя. Как ни странно, но такие возможности обычно подаются как некие преимущества для пользователя.» 32. Фокус с исчезновением всех иконок с Рабочего стола 33. А Shift – это режим? 34. Квазирежим - это режим, попадающий в локус внимания 35. « Квазирежимы являются весьма эффективными с точки зрения устранения режимов. Однако излишнее использование квазирежимов может привести к абсурдным условностям, требующим запоминания десятков команд, например Control↓ Alt↓ Shift↓ Esc↓ q↑↑↑. Для сохранения эффективности число квазирежимов, скорее всего, должно быть от 4 до 7. Тем не менее, необходимо сказать, что один квазирежим может решить сразу множество различных проблем» 36. Примеры • «Пружинный» модификатор – eg. Shift • N-кратный повтор действия • Жесты 37. Еще раз пульт… 38. MessageBox-ы – это страшное зло! 39. Сейчас mainstream: 40. Или хотя бы так: 41. Вообще, модальных диалогов лучше избегать 42. ---------------- промежуточная черта ----------------- 43. «Я многое понял про интерфейсы: их usability просчитывается!» (с) один из сотрудников ЗИС 44. Давайте посмотрим, что и как считается 45. Закон Фитса (Fitts’ Law) A T a b log 2 ( 1) W • T - время для попадания в «мишень» • a,b - эмпирические коэффициенты • A - расстояние до «мишени» • W - размер (ширина) «мишени» W A http://en.wikipedia.org/wiki/Fitts%27_law 46. http://www.yorku.ca/mack/phd.html Как быть в двумерном случае однозначного ответа нет … 47. Следование траектории T a b ds C – TC время следования траектории C C W (s) – a,b эмпирические коэффициенты – W(s) допустимая ширина «отклонения» от траектории в точке s – s точка на траектории A A • Прямая линия TC a b W W W 2 R • Окружность TC a b R W 48. Стандартная спекуляция: край экрана… 49. Примеры 50. Если хотите проверить: http://fww.few.vu.nl/hci/interactive/fitts/ 51. Попробуем применить к лифту… 52. А как же клавиатура, переход с клавиатуры к мышке и обратно, выбор из списка вариантов? 53. Закон Хика (Hick’s Law) • Стимул Реакция (1-к-1) • n стимулов, n реакций • дается стимул • на реакцию затрачивается T T = blog2(n + 1) • Где b – эмпирический коэффициент • H – энтропия информации T = bH • pi – вероятность i-ого случая http://en.wikipedia.org/wiki/Hick%27s_law 54. http://www.psych.utoronto.ca/users/hollands/psy378s/L12.pdf 55. Примеры Неудачно Значительно удобнее 56. Примеры Быстрее набрать здесь Чем выбирать здесь 57. А как же клавиатура, переход с клавиатуры к мышке и обратно, выбор из списка вариантов? 58. KLM-GOMS • KLM – Leystroke-Level Model • GOMS – Goals, Operations, Methods, Selection rules – Stuart Card, Thomas P. Moran and Allen Newell: «The Psychology of Human Computer Interaction», 1983 – Назначение: предсказание времени для выполнения задач сложного редактирования – Ограничения: только для опытных пользователей, без учета ошибок http://en.wikipedia.org/wiki/KLM_(Human_Computer_Interaction) 59. Компоненты и операции в KLM Компоненты: Операции: • Задачи (Tasks), подзадачи • K = key stroking (sub-tasks) • Методы (Methods) • P = pointing • Команды системы (Command language of system) • H = homing • Моторные характеристики • D = drawing пользователя (Motor skill • M = mental operator parameters of the user) • Время отклика системы • R = system response (Response time parameters time of the system) TEXECUTE = TK + TP + TH + TD + TM + TR 60. Эмпирические значения • K, key press and release (keyboard) Best Typist (135 wpm) --- 0.08 seconds Good Typist (90 wpm) --- 0.12 seconds Poor Typist (40 wpm) --- 0.28 seconds Average Skilled Typist (55 wpm) --- 0.20 seconds Average Non-secretary Typist (40 wpm) --- 0.28 seconds Typing Random Letters --- 0.50 seconds Typing Complex Codes --- 0.75 seconds Worst Typist (unfamiliar with keyboard) --- 1.20 seconds • P, Point the mouse to an object on screen --- 1.10 seconds • B, Button press or release (mouse) --- 0.10 seconds • H, Hand from keyboard to mouse or vice versa --- 0.40 seconds • M, Mental Preparation --- 1.20 seconds • T(n), Type string of characters (n * K sec.) • W(t), User waiting for the system to respond • D(n0,l0), Draw n0 straight line segment with mouse of total length l0 centimeters 61. Уменьшение количества кликов • Раскрытие пунктов меню по наведению • «Запуск» по одинарному, а не двойному клику • Минимизация вложенности меню • Избегайте вложенных закладок • Антипример: организация меню «Пуск» • Пример: favorites, MRU 62. http://www.psych.utoronto.ca/users/hollands/psy378s/L12.pdf Уменьшение ментальной задержки 63. Опять лифт … 64. --------------- еще промежуточная черта ---------------- Как и в любой оптимизации нужно знать меру! 65. Что еще есть в книге: 66. Приклад от сына Раскина http://humanized.com/enso_demo.php 67. Поговорим о наших реалиях ЧАСТЬ 2. НА НАШУ ГРЕШНУЮ… 68. Но прежде еще про книги 69. Методики 70. http://stuffthathappens.com/blog/2008/03/05/simplicity 71. Узнали себя? 72. Пример 1: ввод скидок в каталоге товаров 73. Пример 2: длинные сообщения Сюда не поместились Пример 3: лишние действия 74. + еще “косяк” от Usethics: поведение поиска, когда найдена ровно одна корзина (а это большинтсво случаев!) – лишний клик на ровном месте… 75. Пример 4: поиск товара по коду • код товара – чаще всего заглавные буквы • но есть немного товаров, где строчные • код товара = код модели + цвет + размер • в БД это просто VARCHAR2 поле с UNIQUE-индексом • т.е. быстро работает только равенство и LIKE || ‘…%’ 76. Пример 4: поиск товара по коду • вначале ищем по точному совпадению • если не нашли, то делаем TO_UPPER(…)и опять ищем по точному совпадению • если опять не нашли, то ищем как LIKE TO_UPPER(…) || ‘%’ • если нашли несколько, то показываем окошко с выбором из списка • если опять не нашли, то ищем ветку каталога с кодом, совпадающим с TO_UPPER(…) 77. Пример 5: поиск сотрудника в Plantime 78. Пример 6: проводник по квотам и лимитам 79. Примеры 7 и 8: особенности эксплуатации… • кнопка управления экраном в конференц-зале • управление звуком в мультивизоре Rolsen иногда наше стремление к крутой функциональности делает интерфейс неудобным в реальных условиях 80. Идея №1 • Логгирование действий пользователя • Анализ лога • Но не понятно как его анализировать 81. Важная мысль • Простой текстовый ввод – очень эффективный инструмент – готовые редакторы – удобная работа через Clipboard (включая другие приклады) – => бесплатная сшивка с Excel (через Clipboard) ABC 10 • Примеры: XYZ 20 – выборки товаров (Toyota) GFH12 1 – набор складов (по номерам) FDS 0 – импорт почасовки 82. Еще раз: Быстрее набрать здесь Чем выбирать здесь 83. Идея №2 • Интеллектуальные поиски и фильтры • С «ad hoc» анализом введенной строки – несложным, но эффективным – Простейшие примеры: • поиск товара • поиск сотрудника 84. Пример: поиск корзины 85. К слову: самая большая ошибка Usethics (ИМХО) 86. Из области фантастики, но всё же: • Текстовые фильтры в пользовательской формулировке: – все красные за сегодня – все красные за март – все зеленые с товаром ABC – c 01.03.2008 по 31.12.2008 – … – справа от поля кнопка для вызова диалога-контруктора – значения как строки легко запоминать как Favorites и как MRU, причем легко показывать списком, работает AutoComplete 87. ---------- традиционно для запоминания ---------- 88. Что на горизонте ЧАСТЬ 3. ВЗГЛЯД В БУДУЩЕЕ 89. 1. Веб http://labs.mozilla.com/2009/02/introducing-bespin/ http://wiki.office.custis.ru/wiki/index.php/Участник:AndrewBibitchev/2008-11- 26_CustIS_Forms_для_Web 90. 2. Моб http://wiki.office.custis.ru/wiki/index.php/Участник:AndrewBibi tchev/2008-12-17_Android_как_платформа_для_приложений 91. 3. Тач Электронная подпись : http://www.vesti.ru/videos?vid=204164&p=6&sort=1&sub_sort=0&cid=7 (1:24) Красота мульти-тач: http://www.perceptivepixel.com/ http://www.youtube.com/watch?v=O7ENumwMohs http://www.techcrunch.com/2008/05/14/microsoft-touchwall-can-inexpensively- turn-any-flat-surface-into-a-multi-touch-display/ Но будут сдерживать патентные войны: http://filearchive.cnews.ru/img/cnews/2009/01/27/pat_b_ba9e4.jpg 92. Спасибо за внимание! 93. Приходите еще!