Usability-for-programmers

2,279 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,279
On SlideShare
0
From Embeds
0
Number of Embeds
230
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Usability-for-programmers

  1. 1. USABILITYдля программистов Бибичев Андрей @bibigine январь 2012
  2. 2. Алан Купер
  3. 3. Хорошаярецензия Стаса Фомина
  4. 4. Widely recognized as the “Father of Visual Basic"
  5. 5. Ещерецензия Стаса Фомина
  6. 6. Джеф Раскин
  7. 7. best known for starting the Macintosh project for Apple in the late 1970s
  8. 8. В электронном виде
  9. 9. В usability есть место системному мышлениюи математическому подходу
  10. 10. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  11. 11. Логика взаимодействия (FRIENDLY) Трудоемкость выполнения действия
  12. 12. 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
  13. 13. Два мозга
  14. 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
  15. 15. Должность: «Tap counter»
  16. 16. MySQL Workbench
  17. 17. ЗАКОН ХИКА (HICK’S LAW)• Стимул <-> Реакция (1-к-1)• n стимулов, n реакций• дается стимул• на реакцию затрачивается T T = blog2(n + 1)• Где b – эмпирический коэффициент• H – энтропия информации T = bH• pi – вероятность i-ого случая
  18. 18. AFIT’S LAW T  a  b log 2 (  1) W• T - время для попадания в «мишень»• a,b - эмпирические коэффициенты• A - расстояние до «мишени»• W - размер (ширина) «мишени» W A
  19. 19. Как быть в двумерномслучае однозначногоответа нет …
  20. 20. ДЛЯ ТРАЕКТОРИИ: 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
  21. 21. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  22. 22. Минимизация ошибок при выполнении действияМинимизациявероятности ошибки
  23. 23. ДЛЯ ТРАЕКТОРИИ: ds TC  a  b  C W ( s) Pошибки  TС
  24. 24. To be or, not to be –that is the question…
  25. 25. Вы собираетесь выйти из программы, но есть несохраненные документы. Что делать?Да – сохранить и выйтиНет – не сохранять, но выйтиОтмена – не сохранять и не выходить
  26. 26. Есть несохраненные документы
  27. 27. Одного взгяда на кнопку должно быть достаточно, чтобыпонять, что она делает
  28. 28. Требуется перезагрузка системы!Напомнить: через 10 минут
  29. 29. К сожалению,логично  удобно
  30. 30. Любая настройка, влияющая на интерпретацию действий пользователя – это режим.
  31. 31. Сейчас модно иметьминимум настроек.
  32. 32. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  33. 33. Минимизация ошибок привыполнении действия Минимизация последствий ошибки
  34. 34. Вы сдвинули мышку с места.Вы уверены в своих действиях?
  35. 35. Любое обыденноедействие должно быть безопасно,т.е. легко обратимо
  36. 36. В ИДЕАЛЕ ВЕЗДЕ ТОТАЛЬНО ДОЛЖНА БЫТЬ ДОСТУПНА TIME-MACHINE
  37. 37. Если всё равно нужен дозапрос,то формулировки должны быть короткими, но емкими
  38. 38. Впереди, согласно данным сбортового GPS и карте местности от 13.10.2010, ожидается обрыв, ориентировочное расстояние до которого равно 250 метров плюс/минус 20 метров. Как вы думаете, стоит тормозит?
  39. 39. Явившаяся на место происшествия местная полиция арестовала восемь человек демонстрантов. „Местная“ — разве в Твери могла явиться полиция не местная, а казанская? Затем — „явившаяся на место происшествия“; разве могла она арестовать, не явившись? Редактор А „полиция“ — кто же арестует, кромеОльминский полиции? Наконец, „человек демонстрантов“ — конечно, не коров и не прохожих. Арестовано восемь.
  40. 40. ВВОД СТРОК• Наибольшие проблемы доставляют ПРОБЕЛЬНЫЕ СИМВОЛЫ – обычный пробел – жесткий пробел &nbsp; – табуляция TAB user@login WorldUsability  Day
  41. 41. НОРМАЛИЗАЦИЯ СТРОКStep 1:Лидирующие пробельные символы XStep 2:Концевые пробельные символы XStep 3:Пробельные символы  пробелStep 4:Несколько пробелов подряд  1 пробел
  42. 42. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  43. 43. Возможность выполнить действие Как этосделать?
  44. 44. УСТОЯВШИЙСЯ ПОЛОЖИТЕЛЬНЫЙПРИМЕР• Поиск контакта в адресной книге – одно поле – ищет по мере набора (инкрементальный поиск) – строит разные догадки: • ФИО • отдельные части ФИО • E-mail • телефон • «прозвище» • …
  45. 45. Пользователь хочет решить задачу или получить ответ непосредственно в томместе и в то время, когда эта задача/вопрос возникает
  46. 46. Введите номер телефона:
  47. 47. Link
  48. 48. 6 – 8
  49. 49. Расстояние Диаметр до экрана четкой зоны30 см 3,7 см50 см 6 см1м 12 см1,5 м 18 см2м 24 см5м 60 см10 м 120 см
  50. 50. 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 пикселей
  51. 51. Поэтому пользовательи не видит кнопку «Продолжить».
  52. 52. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  53. 53. Возможность выполнить действиеТолерантность к действиям пользователя
  54. 54. « У меня есть для васпосылка, только я вам её не отдам, так как у вас документов нет » (с) Печкин
  55. 55. « У меня есть для васСообщения их покажупосылка, только я вам её не отдам, так как у вас документов нет » вы ввели телефон в формате 8(xxx)xxx-xx-xx а ожидался телефон в формате +7-xxx-xxx-xxxx (с) Печкин
  56. 56. UI Визуальная подача Логика взаимодействия Алгоритмы (SEXY) (FRIENDLY) (SMART) Возможность Минимизация ТрудоемкостьСтатика Динамика ошибок при выполнить выполнении выполнения действие действия действия Толерантность Минимизация Минимизация Как это к действиям вероятности последствий сделать? пользователя ошибки ошибки
  57. 57. ПОЛЕЗНЫЕ СОВЕТЫ• Избегайте группировок в иерархии – плоские списки + MRU + favorites + инк. поиск = Love!• Говорящие надписи на кнопках (чаще всего глаголы)• Трим строк при вводе• Защита от случайного повторного нажатия• Действия над объектом – как можно ближе к объекту• Повсеместная возможность Undo (где не супер-сложно)• Не терять пользовательские данные – то, что ввел пользователь – священно и не должно внезапно исчезать• Конструируйте толерантный софт – не ругается на пользователя и не наказывает его, а пытается «угадать», что тот имел ввиду• Бойтесь режимов и настроек – это костыли и признание собственной слабости• Почаще смотрите на софт глазами пользователя – его ментальная модель – помогает «коридорное тестирование»
  58. 58. СПАСИБО ЗА ВНИМАНИЕ ! ВОПРОСЫ ?

×