Бибичев Андрей2009 год, апрель

UserInterface

Пользовательский

интерфейс

UserInterface

Пользовательский

интерфейс

Humane Гуманный

«Мощность и сложность вычислительных системудваиваются каждые полтора года.

Но люди не роботы – они часто теряются,ошибаются, и многое забывают.»

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

Семинар №1: Конкурентная работа в Oracle (2006 год)

I:\docs\SEMINARS\2006-09-25-Конкурентная_работа_в_Oracle

Семинар №2: Agile (2007 год)

I:\docs\SEMINARS\2007-07-09-Agile

Семинар №3: UML (2008 год)

I:\docs\SEMINARS\ 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)

)1(log2W

AbaT

AW

• T - время для попадания в «мишень»• a,b - эмпирические коэффициенты• A - расстояние до «мишени»• W - размер (ширина) «мишени»

http://en.wikipedia.org/wiki/Fitts%27_law

http://www.yorku.ca/mack/phd.html

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

Следование траектории– TC время следования траектории C

– a,b эмпирические коэффициенты

– W(s) допустимая ширина «отклонения»от траектории в точке s

– s точка на траектории

• Прямая линия

• Окружность

C

CsW

dsbaT

)(

W

AbaTC

W

RbaTC

2

W

A

R

W

Ста

нд

артн

ая с

пек

уляц

ия:

край

экр

ана…

Примеры

Если хотите проверить:

http://fww.few.vu.nl/hci/interactive/fitts/

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

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

и обратно,выбор из списка вариантов?

Закон Хика (Hick’s Law)• Стимул <-> Реакция (1-к-1)• n стимулов, n реакций• дается стимул• на реакцию затрачивается T• Где b – эмпирический коэффициент

T = blog2(n + 1)

http://en.wikipedia.org/wiki/Hick%27s_law

T = bH• H – энтропия информации

• pi – вероятность i-ого случая

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), подзадачи

(sub-tasks)• Методы (Methods)• Команды системы (Command

language of system)• Моторные характеристики

пользователя (Motor skill parameters of the user)

• Время отклика системы (Response time parametersof the system)

Операции:• K = key stroking• P = pointing• H = homing• D = drawing• M = mental operator• R = system response

time

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:ввод скидок в каталоге товаров

Пример 3: лишние действия

Пример 2: длинные сообщения

Сюда не поместились

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

Пример 4:поиск товара по коду

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

Пример 4:поиск товара по коду

• вначале ищем по точному совпадению• если не нашли, то делаем TO_UPPER(…)и опять ищем по точному совпадению• если опять не нашли, то ищем как

LIKE TO_UPPER(…) || ‘%’

• если нашли несколько, то показываем окошко с выбором из списка• если опять не нашли, то ищем ветку каталога с кодом, совпадающим с TO_UPPER(…)

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

Пр

им

ер 6

:п

ро

водн

ик п

о кво

там и

ли

ми

там

Примеры 7 и 8:особенности эксплуатации…

• кнопка управления экраном в конференц-зале• управление звуком в мультивизоре Rolsen

иногда наше стремление к крутой функциональности делает интерфейс неудобным в реальных условиях

Идея №1

• Логгирование действий пользователя

• Анализ лога

• Но не понятно как его анализировать

Важная мысль• Простой текстовый ввод – очень эффективный

инструмент– готовые редакторы– удобная работа через Clipboard (включая другие приклады)– => бесплатная сшивка с Excel

(через Clipboard)

• Примеры:– выборки товаров (Toyota)– набор складов (по номерам)– импорт почасовки

ABC 10

XYZ 20

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/Участник:AndrewBibitchev/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

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

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