2. Основные понятия и этапы HCI
• Семиотика
• Юзабилити
– Обучаемость
– Эффективность
– Безопасность
• Нидфайндинг
– A
– B
– C
• Прототипирование
– A
– B
– C
• Программная архитектура
– Software Architecture
– Model-View-Controller
• Архитектура дизайна
– Разметка, грид, навигация
– Шрифты, цвет
– Пустое пространство
• Специальные темы
– Доступность для лиц с
ограниченными возможностями
– Интернационализация
• Эвристический анализ
– Эвристика Нильсена
– Эвристика Б
– Эвристика С
3. Семиотика
• Семиотика – наука о символах
– Символы бывают не только
визуальными, звуки и слова языка
– тоже символы
• В основе нашей коммуникации с
машиной лежат знаки, которые
обозначают действия и события
• Интерфейс – это опосредование
через символы логики управления
машиной в действия и
информацию, понятные человеку
– Опосредование происходит путем
МЕТАФОРЫ – свойство знакомого
объекта переносится на объект
незнакомый
4. Метафора
Такой же длинный
и стремительный? )
Ты как
поезд-экспресс
А ты зато
как батарея
Нет, точно так же
стоишь только
одну минуту )=
Такая же горячая?
Нет, такая же
ребристая (
Хорошая метафора обладает очевидностью и недвусмысленностью
6. Юзабилити
• Юзабилити – характеристика того,
насколько эффективно пользователи
могут использовать
функциональность системы
– Обучаемость (learnability)
– Эффективность (efficiency)
– Безопасность (safety)
• Пользователь – не дизайнер!
– Он не знает, что ему нужно
– Но то, что ему нужно, должно быть
ему доступно
• А дизайнер – не пользователь!
– Дизайнер не может увидеть систему
чужими глазами («замыленный глаз»)
ЖМИ СЮДА!
А ТУТ ЧЕТА ЕСТЬ!
ГЛЯДИ СЮДА!
7. Обучаемость
• Насколько легко пользователю
дается понимание интерфейса
• Что будет, если… ?
– Система должна указывать юзеру
через интерфейс на свою модель
– Система должна обеспечивать
обратную связь: юзер должен
понимать, к каким последствиям
привели его действия
• Обучение – движение от цели через
действия к желаемому результату
– Help читают, чтобы вылезти из уже
возникшей проблемы
• Learning curve – функция от
понимания системы во времени
Тяжело
в ученье Легко
в бою
ПОНЯТНО…
ЧЕГО CLOSE?
11. Составляющие обучаемости
• Последовательность (consistency) – новые
неизвестные интерфейсы должны
следовать уже известным принципам
– Внутренняя: внутри приложения
– Внешняя: в логике системы, где
приложение работает
– Метафорическая: система символов
должна быть общей для приложения
• Привычность (affordance) – информация,
транслируемая вне текста и символов!
– Между «узнать» (recognize) и «вспомнить»
(recall) есть большая разница!
– «Вот это стол, за ним сидят,
вот это стул, на нем сидят?»
– Кнопки нажимают
– Ручки крутят
– Засветка показывает активный элемент
• Обратная связь (Feedback) – система
визуально сообщает свое состояние
12. Естественный маппинг
• Естественный маппинг (natural
mapping) – организация контролей в
соответствии с логикой
происходящих действий
– Руль вправо – едем вправо
– Поворотник на руле вверх-вниз -
почему?
– А какая конфигурация ручек конфорок
«естественна» для плиты?
13. Отклик системы
• Мы не воспринимаем интервал короче
50-100 миллисекунд
– Отсюда эмпирически полученные 25
кадров в секунду (40 миллисекунд)
– 25 кадр – это легенда, на самом деле мы
замечаем только неприятную рябь и
напряжение в глазах
• Психология восприятия
– Отклик меньше 0,05 с – мгновенный
– 0,1 – 1 с – «система подтормаживает»
– 1 - 5 с. –
– > 5 с.
• Фазы получения фидбека
– Поверхностный взгляд
– Внимательное чтение
– Наведение мыши или нажатие
– Клик
– Изучение результата
25%
14. Эффективность
• Насколько опытный пользователь
легко решает в системе свои задачи
• Рабочая память
– 4 регистра
– Срок хранения <10 сек
• Что легче запомнить?
– С К П Е O Т
– КОТ ПЕС
• Каждый регистр – один шаг
– Начинающие делят в голове
операцию на шаги
– Профи держат операцию в голове как
единый блок (так шахматисты
запоминают позиции, а дизайнеры –
работу в Фотошопе)
15. Закон Фитта
N
N
N*m
T = a + b log (D/S + 1)
где D – расстояние до цели
S – размер цели
a,b – экспериментальные константы
(~0,14, ~0.25)
В маленькую цель рядом
попадают так же быстро
как в большую далеко
Совсем просто: мы как бы
последовательно сужаем в уме
окружность вокруг цели
16. Следствие из закона Фитта
Меню 2-1
Меню 2-2
Меню 2-3 ► Подменю 2-3-1
Подменю 2-3-2
Подменю 2-3-3
Меню 1 Меню 2 Меню 3 Меню 4 Меню 5
Самые нажимабельные кнопки – на кромке экрана
( ЕСЛИ там происходит автокорректировка ! )
Время для операции drag T = a + b D/S, где D – длина, а S – ширина полосы
17. Адаптивный дизайн
• Горячие клавиши
• Часто используемые кнопки -
крупные
• Автозаполнение форм
• Автокорректор
18. KLM-анализ эффективности
• Keyboard Level Model
– K = клавиатура
– B = mouse button press
– P = mouse point
– D = mouse drag (draw)
– H = homing (перенос рук с мышь-клавиатура)
– M = mental preparation (что дальше делать?)
• Скорость ввода
– K – 0,28 сек профи, 1,20 сек новичок
– B – 0,1 сек за клик
– P = закон Фитта (аппроксим.1,1 сек)
– D = функция от ширины полосы (см.)
– H = 0,4 сек
– M = 1,2 сек
• Метод или операция описывается в
действиях пошагово!
– М – разделитель шагов!
• Временные затраты суммируются
19. Безопасность
• Безопасность – возможность не
совершать ошибок и
восстанавливаться после них
• Виды человеческих ошибок
• Тяп (slip): сделал не так
– Целился в лайк, а попал в смайлик
• Ляп (lapsus): забыл как надо
– Не нажал CTRL при копировании
• Оп (mistake) – вспомнил точно и
сделал правильно… но не то, что
надо было
– Закрыл файл без сохранения
20. Методы защиты от ошибок
• UNDO и возможность отката в
последнее состояние до ошибки
• Возможность прекратить долгую
операцию или закрыть диалог без
изменений и последствий
– Диалог подтверждения «Are you
sure?» нужно использовать редко! К
нему мгновенно привыкают
• Уникальные ярлыки и описания
действий и операций
• Четкая идентификация текущего
режима и самоотключение
временных режимов по таймеру
• Четкие сообщения об ошибках и о
дальнейших действиях пользователя
– Кратко и понятно!
– И не пугать юзера страшными
словами! Он и так напуган
21. Пример защищенного интерфейса
Бюллетень
Согласны ли Вы с решением
от 13 марта 1938 года
О воссоединении
Австрии с
Германским Рейхом
и голосуете ли Вы за партию
нашего фюрера
Адольфа Гитлера?
Плебисцит и выборы
рейхстага Великой
Германии
Да нет
24. Нидфайндинг
• Аксиома: пользователь может и не
сказать, но точно может показать
• Задачи
– Объективные сведения о
пользователях и их целях
– Удачи и неудачи пользователей в
решении задач
– Не «как» они используют систему, а
«что» они пытаются сделать!
• Методы
– Интервью (собеседование в
контексте использования системы
или о том, как они решают задачи)
– Наблюдение (как они сами
используют систему)
– Участие (пользователь прямо входит
в команду разработки)
Design
Implement
Evaluate
25. Как думают инноваторы?
• Ассоциация
– Поиск общего в разных вопросах,
проблемах или идеях
– Совмещение идей и информации в
уникальных комбинациях
• Вопрос
– Способность спрашивать: «что
если?», «почему?», и «почему нет?»
для решения сложных задач и
рассматривания большей картины
• Наблюдение
– Способность увидеть детали, в
особенности детали человеческого
поведения
• Эксперимент
– Практическая попытка получить ответ
на вопрос
• Общение
– Выслушать и сделать выводы
26. Ассоциация
Make connections across seemingly
unrelated questions, problems, or ideas.
Put together ideas and information in
unique combinations
Has somebody else in the world solved a
problem like this before?
Could I do it better?
Решал ли кто-нибудь такую же
проблему раньше?
Могу ли я решить ее лучше?
27. Вопрос
Почему мы все еще загружаем и апгрейдим ПО,
когда мы можем делать все то же через интернет?
33. Мозговой штурм: порядок проведения
• Не качество излагаемых мыслей, а
их количество!
– Каждый участник должен высказать
как можно больше различных идей
• Идеи формулируются КОРОТКИМИ
ФРАЗАМИ
• НЕТ: Критика, иронические или
неодобрительные реплики
• Принимаются все идеи, даже самые
абсурдные и непрактичные
– Полет фантазии – да, логика – нет
• Идеи общие
– Каждый из участников может взять
высказанную другим мысль,
скомбинировать ее со своей
собственной, дополнить или
улучшить, и подать как новую идею
• Все идеи записываются!
34. Прототипирование
• Метод «Волшебника Оз»
– Работу системы пользователю
имитирует один из тестирующих
• Бумажное прототипирование
– Компоненты интерфейса
нарезаются из картона или
бумаги
• Эскизы
– Карандаш, доска, Фотошоп и пр.
• Инструментарий для
прототипирования
– Balsamiq, Stencil и проч.
35. Анализ на пользователях
Показать троим друзьям – не анализ!
Пользователи должны быть реальными, а анализ – статистическим
(с контрольной группой, доверительным интервалом и четкими метриками)
36. Техники наблюдения в интервью или лаборатории
• Дебрифинг
– Делаем, если хотим направить
пользователя
– Не делаем, если хотим увидеть, как
он сам разберется
• Запись
– Письменная: можно использовать
анкеты, онлайн-опросники или
готовые формы
– Видео: две камеры (или
скринкаст+фронткамера): одна на
экран, одна на лицо
• Что пишем?
– Действия
– Комментарии
– Эмоции: радость, задумчивость, гнев,
огорчение
• Что делаем?
– Молчим и мотаем на ус
… … …
37. A/B (сплит) тестирование
• Тестовая группа элементов сравнивается с контрольной группой элементов
• Вопрос: какие из изменений улучшают целевой показатель?
40. Model-View-Controller (MVC)
• Этапы работы юзера с системой
– Ввод информации
– Обработка информации
– Получение информации
• Эти задачи можно представить в
виде трех компонентов
• Модель
– Структура системы, хранения и
обработки данных
• Контроллер
– Механизмы, которыми вид снабжает
систему информацией
– Механизмы, которыми система
манипулирует видами
• Вид
– Способ представления информации,
возвращаемой системой
– Способы ввода информации
пользователем
42. В чем задачи MVC ?
• Один компонент – одно свойство
системы
– Ввод – контроллер
– Обработка – модель
– Вывод – вид
• Модели, виды и контроллеры
можно создавать и изменять
независимо
– Не нужно знать, как устроен
каждый из компонентов,
достаточно знать один
• Одна модель может
обслуживать много видов и
контроллеров, а один вид –
работать с несколькими
моделями
– Компоненты можно
использовать повторно (UI
Toolkits) Twitter Bootstrap
47. Контроллер
• Контроллер ввода – listener
– Он «слушает» клавиатуру, мышь,
тачскрин и т.д. на предмет начала
ввода информации
• Контроллер вывода
– При получении команды от системы
меняет дерево вида
49. Эвристический анализ
• Экспертный анализ по
формальным признакам
– Экспертный – значит не
пользователем, а
независимым формальным
оценщиком
• Содержание эвристического
анализа
– Перечень проблем с
указанием эвристики на
каждую
– Оценка серьезности
проблемы
50. Эвристики Нильсена
• Соответствие реальному миру
• Последовательность и стандарты
• Помощь и документация
• Контроль и свобода юзера
• Системный статус виден
• Гибкость и эффективность
• Защита от ошибок
• Узнавание, а не вспоминание
• Сообщения об ошибках, диагностика
и восстановление
• Эстетика и минимализм
51. Эвристика Тагнацини
• Предвосхищение
– предвосхищать действие
пользователя
• Независимость
– пользователь сам все контролирует
• Цветовая слепота
• Последовательность
• Стандартность
• Эффективность
• Объекты человекомашинного
интерфейса
– объекты на экране должны быть
логичны и понятны, должны
управляться физическими
действиями
• Закон Фитта
• Сокращение задержек между
действиями
– уменьшение времени отклика
• Обучаемость
• Метафоры
• Защищенные действия
– не сбрасывать действия
пользователя при ошибках
• Читаемость текста
• Отслеживание состояния
• Видимая навигация
52. Эвристика Шнайдермана
• Последовательность
• Кратчайшие расстояния между
действиями
• Обратная связь
• Законченность диалогов
(последовательностей действий)
• Простое исправление ошибок
• Способность отменить действие
• Пользователь контролирует
интерфейс (а не наоборот)
• Сокращение загрузки быстрой
памяти
54. Разберем этот интерфейс
1. Иконка корзины по цвету не
сбалансирована с фоном (графический
дизайн)
2. Хорошо: пользователя приветствуют по
имени (обратная связь)
3. Красный цвет используется и для
сообщений об ошибке и для
вспомогательных сообщений
(последовательность)
4. «С вашим заказом возникла проблема»,
но нет объяснений или предложений по
исправлению (исправление ошибок)
5. ExtPrice и UnitPrice – непонятные
лейблы
6. Кнопка Remove hardware другая, чем
чекбокс Remove (последовательность)
7. “Click here” не является необходимым
(простота)
8. Нет кнопки «продолжить покупки»
(пользовательский контроль)
1 2
3
4
5
6
7
8
3
55. Практические занятия по эвристике
Найдите самый ужасный (на ваш взгляд) интерфейс
и разберите его по одной из представленных эвристик
Salesforce.com debuted in 1999 and was the first site to deliver business applications from a ‘normal’ website – what is now called cloud computing
Marc Benioff, the founder of the online sales software provider Salesforce.com, was full of questions after witnessing the emergence of Amazon and eBay, two companies built on services delivered via the internet
Ratan Tata got the inspiration that led to the world’s cheapest car by observing the plight of a family of four packed onto a single motorized scooter. After years of product development, Tata Group launched in 2009 the $2,500 Nano using a modular production method that may disrupt the entire automobile distribution system in India
What is it? http://psychcentral.com/blog/archives/2013/04/14/9-illuminating-lessons-on-creativity/
Where to take creative ideas? http://www.newandimproved.com/newsletter/1075.php
What is it? http://psychcentral.com/blog/archives/2013/04/14/9-illuminating-lessons-on-creativity/
Where to take creative ideas? http://www.newandimproved.com/newsletter/1075.php