User Пользовательский
Interface интерфейс
Бибичев Андрей
2009 год, апрель

Humane Гуманный
User Пользовательский
Interface интерфейс

«Мощность и сложность вычислительных систем
удваиваются каждые полтора года.
Но люди не роботы – они часто теряются,
ошибаются, и многое забывают.»

Книги, которые вдохновляют
ЧАСТЬ 0. ПРЕАМБУЛА

Семинар №1: Конкурентная работа в Oracle (2006 год)
I:docsSEMINARS2006-09-25-Конкурентная_работа_в_Oracle

Семинар №2: Agile (2007 год)
I:docsSEMINARS2007-07-09-Agile

Семинар №3: UML (2008 год)
I:docsSEMINARS 2008-06-17_24-UML

И наконец! (2009 год)
http://raskin-interface.narod.ru/interface/index.htm

Джеф Раскин (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

Своих героев надо знать в лицо!

В CustIS есть свои герои:

Похож?

А так?

Вы всё еще спите?!

тогда мы
идём к вам…

Очень фривольно
Очень субъективно
Очень кратко
Так что лучше прочтите книгу! 
ЧАСТЬ 2. ВЫЖИМКА ИЗ «РАСКИНА»

Итак, внимание!

ЛОКУС
ВНИМАНИЯ

Locus of control
• Психология
• Julian B. Rotter, 1954
• Locus – lat. "place" or "location―
• http://en.wikipedia.org/wiki/Locus_of_control
• Но Раскин использует чуть в другом смысле –
скорее, как замена «фокусу, куда направлено
внимание»

Свойства когнитивного сознательного и когнитивного бессознательного
Свойство Сознательное Бессознательное
Инициируется Чем-то новым Повторением
Нестандартными ситуациями Ожидаемыми событиями
Опасностью Безопасностью
Используется В новых обстоятельствах В привычных ситуациях
Решает задачи Принятие решений Работа с неветвящимися задачами
Логические или противоречивые
Принимает Логические утверждения
утверждения
Функционирует Последовательно Одновременно
Управляется Волей Привычными действиями
Производительность Небольшая Огромная
Период функционирования Десятки секунд Десятилетия (всю жизнь)

«Вы можете до некоторой степени
контролировать превращение
бессознательных мыслей в
сознательные, в чем вы убедились,
переместив знание последней буквы
вашего имени в сознательную
область. Однако вы не можете
намеренно перевести сознательные
мысли в бессознательную область.»

«Вы слышите и видите намного больше
того, что становится локусом вашего
внимания. Когда вы входите в
комнату, чтобы найти какой-то
потерянный предмет, он может лежать
прямо перед вами и, тем не менее,
остаться незамеченным.»

«Прислушавшись, я могу заметить, что
лампы дневного света в коридоре
рядом с моей комнатой раздражающе
жужжат. Но если этого не делать, я не
услышу этого звука. Чаще всего я
замечаю этот звук в тот момент, когда
свет включается или выключается.
Внезапное начало жужжания обращает
на него мое внимание.»

Работают по разному
при просмотре
TV и DVD
Пример

В ловушке автоматизма
«Когда вы выполняете какую-то задачу
многократно, то с каждым разом
делать это становится все проще. <…>
Любая привычка означает отказ от
внимания к деталям.»

Недостатки на службе у людей
«При постоянном использовании какого-
либо интерфейса у вас формируются
определенные привычки, которые
впоследствии трудно преодолеть. В этом
смысле задача дизайнеров заключается в
том, чтобы создавать интерфейсы,
которые не позволяют привычкам
вызывать проблемы у пользователей.»

Пример 1: CAPS LOCK, Scroll Lock
— ЗДРАВСТВУЙТЕ!
— Нажми Caps Lock!
— СПАСИБО, ТАК УДОБНЕЕ.

Пример 2: Rus/Lat

Пример 3

Пример 4

О вреде режимов
« Режимы (modes) являются важным источником
ошибок, путаницы, ненужных ограничений и
сложности в интерфейсе.»
« Возможности установки пользовательских
настроек являются одним из примеров режимов
и представляют собой большой источник
расстройств для пользователя. Как ни странно,
но такие возможности обычно подаются как
некие преимущества для пользователя.»

Фокус
с исчезновением
всех иконок
с Рабочего стола

А Shift – это режим?

Квазирежим
- это режим,
попадающий в
локус внимания

« Квазирежимы являются весьма
эффективными с точки зрения устранения
режимов. Однако излишнее использование
квазирежимов может привести к абсурдным
условностям, требующим запоминания
десятков команд, например Control↓ Alt↓
Shift↓ Esc↓ q↑↑↑. Для сохранения
эффективности число квазирежимов, скорее
всего, должно быть от 4 до 7. Тем не менее,
необходимо сказать, что один квазирежим
может решить сразу множество различных
проблем»

Примеры
• «Пружинный» модификатор
– eg. Shift
• N-кратный повтор действия
• Жесты

Еще раз
пульт…

MessageBox-ы – это страшное зло!

Сейчас mainstream:

Или хотя бы так:

Вообще,
модальных диалогов лучше избегать

---------------- промежуточная черта -----------------

«Я многое понял
про интерфейсы:
их usability
просчитывается!»
(с) один из сотрудников ЗИС

Давайте посмотрим,
что и как считается

Закон Фитса (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

http://www.yorku.ca/mack/phd.html
Как быть в двумерном
случае однозначного
ответа нет …

Следование траектории 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

Стандартная спекуляция:
край экрана…

Примеры

Если хотите проверить:
http://fww.few.vu.nl/hci/interactive/fitts/

Попробуем
применить
к лифту…

А как же клавиатура,
переход с клавиатуры к мышке
и обратно,
выбор из списка вариантов?

Закон Хика (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

http://www.psych.utoronto.ca/users/hollands/psy378s/L12.pdf

Примеры
Неудачно
Значительно удобнее

Примеры
Быстрее набрать здесь
Чем выбирать здесь

А как же клавиатура,
переход с клавиатуры к мышке
и обратно,
выбор из списка вариантов?

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)

Компоненты и операции в 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

Эмпирические значения
• 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

Уменьшение количества кликов
• Раскрытие пунктов меню по наведению
• «Запуск» по одинарному, а не двойному клику
• Минимизация вложенности меню
• Избегайте вложенных закладок
• Антипример: организация меню «Пуск»
• Пример: favorites, MRU

http://www.psych.utoronto.ca/users/hollands/psy378s/L12.pdf
Уменьшение ментальной задержки

Опять
лифт
…

--------------- еще промежуточная черта ----------------
Как и в любой оптимизации нужно знать меру!

Что еще есть в книге:

Приклад от сына Раскина
http://humanized.com/enso_demo.php

Поговорим о наших реалиях
ЧАСТЬ 2. НА НАШУ ГРЕШНУЮ…

Но прежде еще про книги

Методики

http://stuffthathappens.com/blog/2008/03/05/simplicity

Узнали себя? 

Пример 1:
ввод скидок в каталоге товаров

Пример 2: длинные сообщения
Сюда не поместились 
Пример 3: лишние действия

+ еще “косяк” от Usethics:
поведение поиска, когда
найдена ровно одна
корзина (а это большинтсво
случаев!) – лишний клик на
ровном месте…

Пример 4:
поиск товара по коду
• код товара – чаще всего заглавные буквы
• но есть немного товаров, где строчные
• код товара = код модели + цвет + размер
• в БД это просто VARCHAR2 поле с UNIQUE-индексом
• т.е. быстро работает только равенство и LIKE || ‘…%’

Пример 4:
поиск товара по коду
• вначале ищем по точному совпадению
• если не нашли, то делаем TO_UPPER(…)и опять ищем по
точному совпадению
• если опять не нашли, то ищем как
LIKE TO_UPPER(…) || ‘%’
• если нашли несколько, то показываем окошко с выбором
из списка
• если опять не нашли, то ищем ветку каталога с кодом,
совпадающим с TO_UPPER(…)

Пример 5:
поиск сотрудника в Plantime

Пример 6:
проводник по квотам и лимитам

Примеры 7 и 8:
особенности эксплуатации…
• кнопка управления экраном в конференц-зале
• управление звуком в мультивизоре Rolsen
иногда наше стремление к крутой функциональности делает
интерфейс неудобным в реальных условиях

Идея №1
• Логгирование действий пользователя
• Анализ лога
• Но не понятно как его анализировать 

Важная мысль
• Простой текстовый ввод – очень эффективный
инструмент
– готовые редакторы
– удобная работа через Clipboard (включая другие приклады)
– => бесплатная сшивка с Excel
(через Clipboard)
ABC 10
• Примеры: XYZ 20
– выборки товаров (Toyota) GFH12 1
– набор складов (по номерам) FDS 0
– импорт почасовки

Еще раз:
Быстрее набрать здесь
Чем выбирать здесь

Идея №2
• Интеллектуальные поиски и фильтры
• С «ad hoc» анализом введенной строки
– несложным, но эффективным
– Простейшие примеры:
• поиск товара
• поиск сотрудника

Пример: поиск корзины

К слову: самая большая ошибка
Usethics (ИМХО)

Из области фантастики,
но всё же:
• Текстовые фильтры в пользовательской формулировке:
– все красные за сегодня
– все красные за март
– все зеленые с товаром ABC
– c 01.03.2008 по 31.12.2008
– …
– справа от поля кнопка для вызова диалога-контруктора
– значения как строки легко запоминать как Favorites и как
MRU, причем легко показывать списком, работает
AutoComplete

---------- традиционно для запоминания ----------

Что на горизонте
ЧАСТЬ 3. ВЗГЛЯД В БУДУЩЕЕ

1. Веб
http://labs.mozilla.com/2009/02/introducing-bespin/
http://wiki.office.custis.ru/wiki/index.php/Участник:AndrewBibitchev/2008-11-
26_CustIS_Forms_для_Web

2. Моб
http://wiki.office.custis.ru/wiki/index.php/Участник:AndrewBibi
tchev/2008-12-17_Android_как_платформа_для_приложений

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

Спасибо за внимание!

Приходите еще! 