SlideShare une entreprise Scribd logo
1  sur  74
Télécharger pour lire hors ligne
ПОЛЬЗОВАТЕЛЬСКИЙ АВТОМАТИЗМ
Андрей Бибичев
ноябрь 2010
«Задача дизайнеров
заключается в том, чтобы
создавать интерфейсы,
которые не позволяют
привычкам/“автоматизмам”
вызывать проблемы у
пользователей»
Джеф Раскин
To be or, not to be –
that is the question…
Вы собираетесь выйти из программы,
но есть несохраненные документы.
Что делать?
Да – сохранить и выйти
Нет – не сохранять, но выйти
Отмена – не сохранять и не выходить
У профессиональных геймеров во время
игры активность головного мозга близка к
фоновой – все реакции обрабатываются
спинным мозгом
KEYSTROKE LEVEL MODE (KLM)
• 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
TEXECUTE = TK + TP + TH + TD + TM + TR
Кроме задержки на ментальные операции
есть еще ментальный ступор
Пользователь –
это командир,
а не справочная
Есть несохраненные документы
Для названия действий
используйте глаголы
Вы сдвинули мышку с места.
Вы уверены в своих действиях?
Любое обыденное
действие должно быть
безопасно,
т.е. легко обратимо
В ИДЕАЛЕ ВЕЗДЕ ТОТАЛЬНО ДОЛЖНА
БЫТЬ ДОСТУПНА TIME-MACHINE
Если всѐ равно нужен дозапрос,
то формулировки должны быть
короткими, но емкими
Впереди, согласно данным с
бортового GPS и карте местности от
13.10.2010, ожидается обрыв,
ориентировочное расстояние до
которого равно 250 метров
плюс/минус 20 метров. Как вы
думаете, стоит тормозит?
Редактор
Ольминский
Явившаяся на место происшествия
местная полиция арестовала восемь
человек демонстрантов.
„Местная“ — разве в Твери могла
явиться полиция не местная, а
казанская?
Затем — „явившаяся на место
происшествия“; разве могла она
арестовать, не явившись?
А „полиция“ — кто же арестует,
кроме полиции?
Наконец, „человек демонстрантов“ —
конечно, не коров и не прохожих.
Арестовано восемь.
Требуется перезагрузка системы!
Напомнить: через 10 минут
В. ПЕЛЕВИН, «ШЛЕМ УЖАСА»
На самом деле никакой интерактивности не бывает –
она кажущаяся. Или, скажем так, она допускается в той
узкой зоне, где любой выбор не изменит сути дела.
Главная проблема как раз в том, чтобы избавиться от
свободы выбора, жестко подвести к нужному решению,
сохранив уверенность, что выбор свободный.
По-научному это называется принудительным
ориентированием.
… представляет собой площадку, где стоят три
одинаковые мраморные вазы. Чтобы сюжет
развивался нужным образом, наша задача – подвести
Шлемиля к средней вазе.
…
Ваза, которую следует выбрать, выделяется с
помощью таинственных знаков, будящих воображение
или интерес. Это может быть все что угодно –
отпечаток руки на ее поверхности, указывающие на
нее стрелки на земле, сидящий на ее краю белый
голубь, таинственное граффити и прочее.
Реверсивный метод - "Ле Пен Клуб". Это когда те вазы,
которые мы хотим исключить, оказываются густо
исписаны самым грязным матом
«Шлем ужаса» –
must read для UX-
специалистов
Любая настройка,
влияющая на интерпретацию
действий пользователя – это
режим.
РЕШЕНИЕ: КВАЗИ-РЕЖИМЫ
Link
Пользователь хочет решить
задачу или получить ответ
непосредственно в том
месте и в то время, когда
эта задача/вопрос возникает
ТРИ ПРИМЕРА:
• Сетевые настройки
• Поиск
• Опять терминал…
Введите номер телефона:
КОЛБОЧКИ И ПАЛОЧКИ
• На сетчатке имеется особое место, лежащее не на
оптической оси, а немного в стороне от нее, ближе к
височной части головы, называемое желтым
пятном вследствие своего цвета. Эта часть сетчатки
имеет в середине небольшое центральное углубление –
центральную ямку
• Диаметр желтого пятна – около 1 мм, а соответствующее
ему поле зрения глаза – 6-8°. Диаметр центральной ямки
– 0.4 мм, поле зрения – 1°
• В желтом пятне к большинству колбочек подходят
отдельные волокна зрительного нерва. Вне пределов
желтого пятна одно волокно зрительного нерва всегда
обслуживает целые группы колбочек или палочек.
Link
Link
6 – 8
Расстояние
до экрана
Диаметр
четкой зоны
30 см 3,7 см
50 см 6 см
1 м 12 см
1,5 м 18 см
2 м 24 см
5 м 60 см
10 м 120 см
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 пикселей
Поэтому пользователь
и не видит кнопку «Продолжить».
Но почему нам кажется,
что мы всѐ видим?
По возможности,
располагайте действия
рядом с объектом, при
"взгляде" на который
возникает необходимость в
этих действиях
Аккуратно используйте
анимацию, чтобы привлечь
внимание к изменениям в
периферических объектах
FIT’S LAW
• T - время для попадания в «мишень»
• a,b - эмпирические коэффициенты
• A - расстояние до «мишени»
• W - размер (ширина) «мишени»
)1(log 2
W
A
baT
A
W
– TC - время следования траектории C
– a,b - эмпирические коэффициенты
– W(s) - допустимая ширина «отклонения»
- от траектории в точке s
– s - точка на траектории
• Прямая линия
• Окружность
C
C
sW
ds
baT
)(
W
A
baTC
W
R
baTC
2
W
A
R
W
ДЛЯ ТРАЕКТОРИИ:
Подсознание не
подчиняется логике
«Привычка свыше нам дана,
Замена юзабилити счастию она»
А.С. Пушкин
Link
1984: Apache
Link
Не надейтесь на будущую эволюцию,
а учитывайте прошлую

Contenu connexe

Plus de Andrey Bibichev

Usability-for-programmers
Usability-for-programmersUsability-for-programmers
Usability-for-programmers
Andrey Bibichev
 

Plus de Andrey Bibichev (20)

Geeks vs Managers (part 2)
Geeks vs Managers (part 2)Geeks vs Managers (part 2)
Geeks vs Managers (part 2)
 
Быстрое введение в TDD от А до Я
Быстрое введение в TDD от А до ЯБыстрое введение в TDD от А до Я
Быстрое введение в TDD от А до Я
 
Фрактальная природа IT-проектов (блиц)
Фрактальная природа IT-проектов (блиц)Фрактальная природа IT-проектов (блиц)
Фрактальная природа IT-проектов (блиц)
 
Usability-for-programmers
Usability-for-programmersUsability-for-programmers
Usability-for-programmers
 
Tdd and decomposition
Tdd and decompositionTdd and decomposition
Tdd and decomposition
 
Mockist vs Classicist
Mockist vs ClassicistMockist vs Classicist
Mockist vs Classicist
 
Natural User Interface (WUDRU-2011)
Natural User Interface (WUDRU-2011)Natural User Interface (WUDRU-2011)
Natural User Interface (WUDRU-2011)
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
 
BDD
BDDBDD
BDD
 
DDD Workshop
DDD WorkshopDDD Workshop
DDD Workshop
 
Проектирование больших ИС в Agile (статья)
Проектирование больших ИС в Agile (статья)Проектирование больших ИС в Agile (статья)
Проектирование больших ИС в Agile (статья)
 
Проектирование больших ИС в Agile
Проектирование больших ИС в AgileПроектирование больших ИС в Agile
Проектирование больших ИС в Agile
 
Enterprise Level Agile The Art Of Start
Enterprise Level Agile   The Art Of StartEnterprise Level Agile   The Art Of Start
Enterprise Level Agile The Art Of Start
 
Humane Interface (Гуманный интерфейс)
Humane Interface (Гуманный интерфейс)Humane Interface (Гуманный интерфейс)
Humane Interface (Гуманный интерфейс)
 
Безудержный рефакторинг: как не убиться об стену
Безудержный рефакторинг: как не убиться об стенуБезудержный рефакторинг: как не убиться об стену
Безудержный рефакторинг: как не убиться об стену
 
Практика внедрения Scrum (статья)
Практика внедрения Scrum (статья)Практика внедрения Scrum (статья)
Практика внедрения Scrum (статья)
 
Практика внедрения Scrum
Практика внедрения ScrumПрактика внедрения Scrum
Практика внедрения Scrum
 
Аналитик в Agile (статья)
Аналитик в Agile (статья)Аналитик в Agile (статья)
Аналитик в Agile (статья)
 
А какой у вас Agile: свежевыжатый или порошковый?
А какой у вас Agile: свежевыжатый или порошковый?А какой у вас Agile: свежевыжатый или порошковый?
А какой у вас Agile: свежевыжатый или порошковый?
 
Аналитик в Agile (SEF-09)
Аналитик в Agile (SEF-09)Аналитик в Agile (SEF-09)
Аналитик в Agile (SEF-09)
 

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

  • 2. «Задача дизайнеров заключается в том, чтобы создавать интерфейсы, которые не позволяют привычкам/“автоматизмам” вызывать проблемы у пользователей» Джеф Раскин
  • 3.
  • 4. To be or, not to be – that is the question…
  • 5. Вы собираетесь выйти из программы, но есть несохраненные документы. Что делать? Да – сохранить и выйти Нет – не сохранять, но выйти Отмена – не сохранять и не выходить
  • 6.
  • 7. У профессиональных геймеров во время игры активность головного мозга близка к фоновой – все реакции обрабатываются спинным мозгом
  • 8. KEYSTROKE LEVEL MODE (KLM) • 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 TEXECUTE = TK + TP + TH + TD + TM + TR
  • 9. Кроме задержки на ментальные операции есть еще ментальный ступор
  • 10.
  • 14.
  • 15. Вы сдвинули мышку с места. Вы уверены в своих действиях?
  • 16.
  • 17. Любое обыденное действие должно быть безопасно, т.е. легко обратимо
  • 18. В ИДЕАЛЕ ВЕЗДЕ ТОТАЛЬНО ДОЛЖНА БЫТЬ ДОСТУПНА TIME-MACHINE
  • 19. Если всѐ равно нужен дозапрос, то формулировки должны быть короткими, но емкими
  • 20. Впереди, согласно данным с бортового GPS и карте местности от 13.10.2010, ожидается обрыв, ориентировочное расстояние до которого равно 250 метров плюс/минус 20 метров. Как вы думаете, стоит тормозит?
  • 21. Редактор Ольминский Явившаяся на место происшествия местная полиция арестовала восемь человек демонстрантов. „Местная“ — разве в Твери могла явиться полиция не местная, а казанская? Затем — „явившаяся на место происшествия“; разве могла она арестовать, не явившись? А „полиция“ — кто же арестует, кроме полиции? Наконец, „человек демонстрантов“ — конечно, не коров и не прохожих. Арестовано восемь.
  • 22.
  • 23.
  • 24.
  • 26. В. ПЕЛЕВИН, «ШЛЕМ УЖАСА» На самом деле никакой интерактивности не бывает – она кажущаяся. Или, скажем так, она допускается в той узкой зоне, где любой выбор не изменит сути дела. Главная проблема как раз в том, чтобы избавиться от свободы выбора, жестко подвести к нужному решению, сохранив уверенность, что выбор свободный. По-научному это называется принудительным ориентированием.
  • 27. … представляет собой площадку, где стоят три одинаковые мраморные вазы. Чтобы сюжет развивался нужным образом, наша задача – подвести Шлемиля к средней вазе. … Ваза, которую следует выбрать, выделяется с помощью таинственных знаков, будящих воображение или интерес. Это может быть все что угодно – отпечаток руки на ее поверхности, указывающие на нее стрелки на земле, сидящий на ее краю белый голубь, таинственное граффити и прочее. Реверсивный метод - "Ле Пен Клуб". Это когда те вазы, которые мы хотим исключить, оказываются густо исписаны самым грязным матом
  • 28. «Шлем ужаса» – must read для UX- специалистов
  • 29.
  • 30.
  • 31.
  • 32. Любая настройка, влияющая на интерпретацию действий пользователя – это режим.
  • 33.
  • 35.
  • 36. Пользователь хочет решить задачу или получить ответ непосредственно в том месте и в то время, когда эта задача/вопрос возникает
  • 37. ТРИ ПРИМЕРА: • Сетевые настройки • Поиск • Опять терминал…
  • 39.
  • 40.
  • 41. КОЛБОЧКИ И ПАЛОЧКИ • На сетчатке имеется особое место, лежащее не на оптической оси, а немного в стороне от нее, ближе к височной части головы, называемое желтым пятном вследствие своего цвета. Эта часть сетчатки имеет в середине небольшое центральное углубление – центральную ямку • Диаметр желтого пятна – около 1 мм, а соответствующее ему поле зрения глаза – 6-8°. Диаметр центральной ямки – 0.4 мм, поле зрения – 1° • В желтом пятне к большинству колбочек подходят отдельные волокна зрительного нерва. Вне пределов желтого пятна одно волокно зрительного нерва всегда обслуживает целые группы колбочек или палочек. Link
  • 42. Link
  • 44. Расстояние до экрана Диаметр четкой зоны 30 см 3,7 см 50 см 6 см 1 м 12 см 1,5 м 18 см 2 м 24 см 5 м 60 см 10 м 120 см
  • 45. 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 пикселей
  • 46.
  • 47. Поэтому пользователь и не видит кнопку «Продолжить». Но почему нам кажется, что мы всѐ видим?
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53. По возможности, располагайте действия рядом с объектом, при "взгляде" на который возникает необходимость в этих действиях
  • 54.
  • 55. Аккуратно используйте анимацию, чтобы привлечь внимание к изменениям в периферических объектах
  • 56.
  • 57. FIT’S LAW • T - время для попадания в «мишень» • a,b - эмпирические коэффициенты • A - расстояние до «мишени» • W - размер (ширина) «мишени» )1(log 2 W A baT A W
  • 58. – TC - время следования траектории C – a,b - эмпирические коэффициенты – W(s) - допустимая ширина «отклонения» - от траектории в точке s – s - точка на траектории • Прямая линия • Окружность C C sW ds baT )( W A baTC W R baTC 2 W A R W ДЛЯ ТРАЕКТОРИИ:
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 66.
  • 67. «Привычка свыше нам дана, Замена юзабилити счастию она» А.С. Пушкин
  • 68.
  • 69.
  • 70.
  • 71. Link
  • 73.
  • 74. Не надейтесь на будущую эволюцию, а учитывайте прошлую