Usability-for-programmers

U S A B I L I T Y

для программистов

Бибичев Андрей

@bibigine

январь 2012

Алан Купер

Хорошая

рецензия

Стаса

Фомина

Widely recognized as the “Father of Visual Basic"

Еще

рецензия

Стаса

Фомина

Джеф Раскин

best known for starting the Macintosh project

for Apple in the late 1970s

В электронном

виде

В usability есть место

системному мышлению

и математическому подходу

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

Логика взаимодействия

(FRIENDLY)

Трудоемкость

выполнения

действия

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

Два мозга

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

Должность: «Tap counter»

MySQL Workbench

ЗАКОН ХИКА (HICK’S LAW)

• Стимул <-> Реакция (1-к-1)

• n стимулов, n реакций

• дается стимул

• на реакцию затрачивается T

• Где b – эмпирический коэффициент

T = blog2(n + 1)

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

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

FIT’S LAW

• T - время для попадания в «мишень»

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

• A - расстояние до «мишени»

• W - размер (ширина) «мишени»

)1(log2 W

AbaT

A W

Как быть в двумерном

случае однозначного

ответа нет …

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

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

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

- от траектории в точке s

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

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

• Окружность

C

CsW

dsbaT

)(

W

AbaTC

W

RbaTC

2

W

A

R

W

ДЛЯ ТРАЕКТОРИИ:

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

Минимизация

ошибок при

выполнении

действия

Минимизация

вероятности

ошибки

C

CsW

dsbaT

)(

ДЛЯ ТРАЕКТОРИИ:

Pошибки TС

To be or, not to be –

that is the question…

Вы собираетесь выйти из программы,

но есть несохраненные документы.

Что делать?

Да – сохранить и выйти

Нет – не сохранять, но выйти

Отмена – не сохранять и не выходить

Есть несохраненные документы

Одного взгяда на

кнопку должно быть

достаточно, чтобы

понять, что она делает

Требуется перезагрузка системы!

Напомнить:

через 10 минут

К сожалению,

логично удобно

Любая настройка, влияющая

на интерпретацию действий

пользователя – это режим.

Сейчас модно иметь

минимум настроек.

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

Минимизация

ошибок при

выполнении

действия

Минимизация

последствий

ошибки

Вы сдвинули мышку с места.

Вы уверены в своих действиях?

Любое обыденное

действие должно быть

безопасно,

т.е. легко обратимо

В ИДЕАЛЕ ВЕЗДЕ ТОТАЛЬНО ДОЛЖНА

БЫТЬ ДОСТУПНА TIME-MACHINE

Если всё равно нужен дозапрос,

то формулировки должны быть

короткими, но емкими

Впереди, согласно данным с

бортового GPS и карте местности от

13.10.2010, ожидается обрыв,

ориентировочное расстояние до

которого равно 250 метров

плюс/минус 20 метров. Как вы

думаете, стоит тормозит?

Редактор

Ольминский

Явившаяся на место происшествия

местная полиция арестовала восемь

человек демонстрантов.

„Местная“ — разве в Твери могла

явиться полиция не местная, а

казанская?

Затем — „явившаяся на место

происшествия“; разве могла она

арестовать, не явившись?

А „полиция“ — кто же арестует, кроме

полиции?

Наконец, „человек демонстрантов“ —

конечно, не коров и не прохожих.

Арестовано восемь.

ВВОД СТРОК

• Наибольшие проблемы доставляют ПРОБЕЛЬНЫЕ

СИМВОЛЫ

– обычный пробел

– жесткий пробел &nbsp;

– табуляция TAB

user@login

WorldUsability Day

НОРМАЛИЗАЦИЯ СТРОК

Step 1:

Лидирующие пробельные символы X

Step 2:

Концевые пробельные символы X

Step 3:

Пробельные символы пробел

Step 4:

Несколько пробелов подряд 1 пробел

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

Возможность

выполнить

действие

Как это

сделать?

УСТОЯВШИЙСЯ ПОЛОЖИТЕЛЬНЫЙ

ПРИМЕР

• Поиск контакта в адресной книге

– одно поле

– ищет по мере набора (инкрементальный поиск)

– строит разные догадки:

• ФИО

• отдельные части ФИО

• E-mail

• телефон

• «прозвище»

• …

Пользователь хочет решить

задачу или получить ответ

непосредственно в том

месте и в то время, когда эта

задача/вопрос возникает

Введите номер телефона:

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 пикселей

Поэтому пользователь

и не видит кнопку «Продолжить».

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

Возможность

выполнить

действие

Толерантность

к действиям

пользователя

« У меня есть для вас

посылка, только я вам её не отдам,

так как у вас документов нет »

(с) Печкин

« У меня есть для вас

Сообщения их покажу посылка, только я вам её не отдам,

так как у вас документов нет » вы ввели телефон в формате 8(xxx)xxx-xx-xx а ожидался телефон в формате +7-xxx-xxx-xxxx

(с) Печкин

UI

Визуальная подача

(SEXY)

Логика взаимодействия

(FRIENDLY)

Алгоритмы

(SMART)

Статика Динамика Возможность

выполнить

действие

Минимизация

ошибок при

выполнении

действия

Трудоемкость

выполнения

действия

Как это

сделать?

Толерантность

к действиям

пользователя

Минимизация

вероятности

ошибки

Минимизация

последствий

ошибки

ПОЛЕЗНЫЕ СОВЕТЫ

• Избегайте группировок в иерархии

– плоские списки + MRU + favorites + инк. поиск = Love!

• Говорящие надписи на кнопках (чаще всего глаголы)

• Трим строк при вводе

• Защита от случайного повторного нажатия

• Действия над объектом – как можно ближе к объекту

• Повсеместная возможность Undo (где не супер-сложно)

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

– то, что ввел пользователь – священно и не должно внезапно исчезать

• Конструируйте толерантный софт

– не ругается на пользователя и не наказывает его, а пытается «угадать», что тот имел ввиду

• Бойтесь режимов и настроек

– это костыли и признание собственной слабости

• Почаще смотрите на софт глазами пользователя

– его ментальная модель

– помогает «коридорное тестирование»

СПАСИБО ЗА ВНИМАНИЕ !

ВОПРОСЫ ?