Download to read offline
Uploaded byYuri Ammosov
Human computer interfaces v8
Документ представляет собой учебный материал по человеко-машинным интерфейсам (HCI), охватывающий основные понятия и этапы дизайна, юзабилити и методы тестирования. Основное внимание уделяется семиотике, принципам прототипирования, юзабилити и безопасности, а также практическим методам решения задач через наблюдение и интервью с пользователями. Включены дискуссии о креативном процессе и эвристическом анализе для улучшения интерфейсов.
More Related Content
Similar to Human computer interfaces v8
Human computer interfaces v8
- 1. HUMAN COMPUTER INTERFACES Человеко-машинныеинтерфейсы Введение в принципы и методы HCI МФТИ 2016
- 2. Основные понятия иэтапы HCI • Занятие 1 • Семиотика • Юзабилити – Обучаемость – Эффективность – Безопасность • ЗАНЯТИЕ 2 • Нидфайндинг – Креативный процесс – Общение с пользователями – «Мозговой штурм» • Прототипирование – «Волшебник Оз», «бумажный» – A-B тестирование • ЗАНЯТИЕ 3 • Программная архитектура – Model-View-Controller – Интерфейс как древо • Архитектура дизайна – Разметка, грид, навигация – Шрифты, цвет – Пустое пространство • Специальные темы – Доступность для лиц с ограниченными возможностями – Интернационализация • Эвристический анализ – Нильсен, Тагнацини, Шнайдерман
- 3. Семиотика • Семиотика –наука о символах – Символы бывают не только визуальными, звуки и слова языка – тоже символы • В основе нашей коммуникации с машиной лежат знаки, которые обозначают действия и события • Интерфейс – это опосредование через символы логики управления машиной в действия и информацию, понятные человеку – Опосредование происходит путем МЕТАФОРЫ – свойство знакомого объекта переносится на объект незнакомый
- 4. Метафора Такой же длинный истремительный? ) Ты как поезд-экспресс А ты зато как батарея Нет, точно так же стоишь только одну минуту )= Такая же горячая? Нет, такая же ребристая ( Хорошая метафора обладает очевидностью и недвусмысленностью
- 5.
- 6. Юзабилити • Юзабилити –характеристика того, насколько эффективно пользователи могут использовать функциональность системы – Обучаемость (learnability) – Эффективность (efficiency) – Безопасность (safety) • Пользователь – не дизайнер! – Он не знает, что ему нужно – Но то, что ему нужно, должно быть ему доступно • А дизайнер – не пользователь! – Дизайнер не может увидеть систему чужими глазами («замыленный глаз») ЖМИ СЮДА! А ТУТ ЧЕТА ЕСТЬ! ГЛЯДИ СЮДА!
- 7. Обучаемость • Насколько легкопользователю дается понимание интерфейса • Что будет, если… ? – Система должна указывать юзеру через интерфейс на свою модель – Система должна обеспечивать обратную связь: юзер должен понимать, к каким последствиям привели его действия • Обучение – движение от цели через действия к желаемому результату – Help читают, чтобы вылезти из уже возникшей проблемы ПОНЯТНО… ЧЕГО CLOSE?
- 8. Обучаемость Тяжело в ученье Легко в бою Степеньосвоения системы ► Усилие ▲
- 9.
- 10.
- 11. Какое из двухдействий - нужное? Разумеется, HELP не предусмотрен – это ж Фейсбук
- 12. А вот тутуже без инструкции не разобраться
- 13. Составляющие обучаемости • Последовательность(consistency) – новые неизвестные интерфейсы должны следовать уже известным принципам – Внутренняя: внутри приложения – Внешняя: в логике системы, где приложение работает – Метафорическая: система символов должна быть общей для приложения • Привычность (affordance) – информация, транслируемая вне текста и символов! – Между «узнать» (recognize) и «вспомнить» (recall) есть большая разница! – «Вот это стол, за ним сидят, вот это стул, на нем сидят?» – Кнопки нажимают – Ручки крутят – Засветка показывает активный элемент • Обратная связь (Feedback) – система визуально сообщает свое состояние
- 14. Естественный маппинг • Естественныймаппинг (natural mapping) – организация контролей в соответствии с логикой происходящих действий – Руль вправо – едем вправо – Поворотник на руле вверх-вниз - почему? – А какая конфигурация ручек конфорок «естественна» для плиты?
- 15. Отклик системы • Мыне воспринимаем интервал короче 50-100 миллисекунд – Отсюда эмпирически полученные 25 кадров в секунду (40 миллисекунд) – 25 кадр – это легенда, на самом деле мы замечаем только неприятную рябь и напряжение в глазах • Психология восприятия – Отклик меньше 0,05 с – мгновенный – 0,1 – 1 с – «система подтормаживает» – 1 - 5 с. – – > 5 с. • Фазы получения фидбека – Поверхностный взгляд – Внимательное чтение – Наведение мыши или нажатие – Клик – Изучение результата 25%
- 16. Эффективность • Насколько опытныйпользователь легко решает в системе свои задачи • Рабочая память – 4 регистра – Срок хранения <10 сек • Что легче запомнить? – С К П Е O Т – КОТ ПЕС • Каждый регистр – один шаг – Начинающие делят в голове операцию на шаги – Профи держат операцию в голове как единый блок (так шахматисты запоминают позиции, а дизайнеры – работу в Фотошопе)
- 17. Закон Фитта N N N*m T =a + b log (D/S + 1) где D – расстояние до цели S – размер цели a,b – экспериментальные константы (~0,14, ~0.25) В маленькую цель рядом попадают так же быстро как в большую далеко Совсем просто: мы как бы последовательно сужаем в уме окружность вокруг цели
- 18. Следствие из законаФитта Меню 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 – ширина полосы
- 19. Адаптивный дизайн • Горячиеклавиши • Часто используемые кнопки - крупные • Автозаполнение форм • Автокорректор
- 20. KLM-анализ эффективности • KeyboardLevel 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 сек • Метод или операция описывается в действиях пошагово! – М – разделитель шагов! • Временные затраты суммируются
- 21. Безопасность • Безопасность –возможность не совершать ошибок и восстанавливаться после них • Виды человеческих ошибок • Тяп (slip): сделал не так – Целился в лайк, а попал в смайлик • Ляп (lapsus): забыл как надо – Не нажал CTRL при копировании • Оп (mistake) – вспомнил точно и сделал правильно… но не то, что надо было – Закрыл файл без сохранения
- 22. Методы защиты отошибок • UNDO и возможность отката в последнее состояние до ошибки • Возможность прекратить долгую операцию или закрыть диалог без изменений и последствий – Диалог подтверждения «Are you sure?» нужно использовать редко! К нему мгновенно привыкают • Уникальные ярлыки и описания действий и операций • Четкая идентификация текущего режима и самоотключение временных режимов по таймеру • Четкие сообщения об ошибках и о дальнейших действиях пользователя – Кратко и понятно! – И не пугать юзера страшными словами! Он и так напуган
- 23. Пример защищенного интерфейса Бюллетень Согласныли Вы с решением от 13 марта 1938 года О воссоединении Австрии с Германским Рейхом и голосуете ли Вы за партию нашего фюрера Адольфа Гитлера? Плебисцит и выборы рейхстага Великой Германии Да нет
- 24.
- 25.
- 26. Нидфайндинг • Аксиома: пользовательможет и не сказать, но точно может показать • Задачи – Объективные сведения о пользователях и их целях – Удачи и неудачи пользователей в решении задач – Не «как» они используют систему, а «что» они пытаются сделать! • Методы – Интервью (собеседование в контексте использования системы или о том, как они решают задачи) – Наблюдение (как они сами используют систему) – Участие (пользователь прямо входит в команду разработки) Design Implement Evaluate
- 27. Как думают инноваторы? •Ассоциация – Поиск общего в разных вопросах, проблемах или идеях – Совмещение идей и информации в уникальных комбинациях • Вопрос – Способность спрашивать: «что если?», «почему?», и «почему нет?» для решения сложных задач и рассматривания большей картины • Наблюдение – Способность увидеть детали, в особенности детали человеческого поведения • Эксперимент – Практическая попытка получить ответ на вопрос • Общение – Выслушать и сделать выводы
- 28. Ассоциация Make connections acrossseemingly 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? Решал ли кто-нибудь такую же проблему раньше? Могу ли я решить ее лучше?
- 29. Вопрос Почему мы всееще загружаем и апгрейдим ПО, когда мы можем делать все то же через интернет?
- 30. Наблюдение Делают так… Амогли б и так!
- 31. Эксперимент • Я непровалился • Я просто обнаружил 10000 способов, которые не работают
- 32. Общение Общение с умнымилюдьми, непохожими на тебя, но от кого ты можешь чему- нибудь научиться
- 33. Креативность • Креативность –процесс создания НОВОЙ и/или ПОЛЕЗНОЙ идеи
- 34. Фазы креативного процесса Подготовка Инкубация Инсайт Оценка Проработка Лучшийпуть к хорошей идее – иметь много идей Линус Полинг Лауреат Нобелевской премии
- 35. Мозговой штурм: порядокпроведения • Не качество излагаемых мыслей, а их количество! – Каждый участник должен высказать как можно больше различных идей • Идеи формулируются КОРОТКИМИ ФРАЗАМИ • НЕТ: Критика, иронические или неодобрительные реплики • Принимаются все идеи, даже самые абсурдные и непрактичные – Полет фантазии – да, логика – нет • Идеи общие – Каждый из участников может взять высказанную другим мысль, скомбинировать ее со своей собственной, дополнить или улучшить, и подать как новую идею • Все идеи записываются!
- 36. Прототипирование: подручные средства •Метод «Волшебника Оз» – Работу системы пользователю имитирует один из тестирующих • Бумажное прототипирование – Компоненты интерфейса нарезаются из картона или бумаги • Эскизы – Карандаш и бумага – Доска и маркеры Прототип первого планшетного компьютера DynaBook Модельный картон, бумага Allan Kay, Xerox PARC, 1972 Computer History Museum, #102716364 http://www.computerhistory.org/collections/catalog/102716364
- 37. Прототипирование: цифровое • Инструментарийдля прототипирования – Balsamiq, Stencil – Photoshop CC 2015 Design Space, Preview CC (mov.), Comp CC (mob.)
- 38. Анализ на пользователях Показатьтроим друзьям – не анализ! Пользователи должны быть реальными, а анализ – статистическим (с контрольной группой, доверительным интервалом и четкими метриками)
- 39. Техники наблюдения винтервью или лаборатории • Дебрифинг – Делаем, если хотим направить пользователя – Не делаем, если хотим увидеть, как он сам разберется • Запись – Письменная: можно использовать анкеты, онлайн-опросники или готовые формы – Видео: две камеры (или скринкаст+фронткамера): одна на экран, одна на лицо • Что пишем? – Действия – Комментарии – Эмоции: радость, задумчивость, гнев, огорчение • Что делаем? – Молчим и мотаем на ус … … …
- 40. A/B (сплит) тестирование •Тестовая группа элементов сравнивается с контрольной группой элементов • Вопрос: какие из изменений улучшают целевой показатель?
- 41. Различий не должнобыть несколько!
- 42.
- 43. Model-View-Controller (MVC) • Этапыработы юзера с системой – Ввод информации – Обработка информации – Получение информации • Эти задачи можно представить в виде трех компонентов • Модель – Структура системы, хранения и обработки данных • Контроллер – Механизмы, которыми вид снабжает систему информацией – Механизмы, которыми система манипулирует видами • Вид – Способ представления информации, возвращаемой системой – Способы ввода информации пользователем
- 44.
- 45. В чем задачиMVC ? • Один компонент – одно свойство системы – Ввод – контроллер – Обработка – модель – Вывод – вид • Модели, виды и контроллеры можно создавать и изменять независимо – Не нужно знать, как устроен каждый из компонентов, достаточно знать один • Одна модель может обслуживать много видов и контроллеров, а один вид – работать с несколькими моделями – Компоненты можно использовать повторно (UI Toolkits) Twitter Bootstrap
- 46.
- 47. Простейший текстовой редактор TextFile Последовательностьсимволов KeyListener Резидентный процесс TextField Последовательность символов .textGet(*) .textChange(*) .cursorMove(*) .textEdit(*) .keyPress(*) ??
- 48. А где тутM, V и С ?
- 49. Вид: меняем представление,мутируя дерево Структурно: дерево Визуально: прямоугольные области
- 50. Контроллер • Контроллер ввода– listener – Он «слушает» клавиатуру, мышь, тачскрин и т.д. на предмет начала ввода информации • Контроллер вывода – При получении команды от системы меняет дерево вида
- 51.
- 52. Эвристический анализ • Экспертныйанализ по формальным признакам – Экспертный – значит не пользователем, а независимым формальным оценщиком • Содержание эвристического анализа – Перечень проблем с указанием эвристики на каждую – Оценка серьезности проблемы
- 53. Эвристики Нильсена • Соответствиереальному миру • Последовательность и стандарты • Помощь и документация • Контроль и свобода юзера • Системный статус виден • Гибкость и эффективность • Защита от ошибок • Узнавание, а не вспоминание • Сообщения об ошибках, диагностика и восстановление • Эстетика и минимализм
- 54. Эвристика Тагнацини • Предвосхищение –предвосхищать действие пользователя • Независимость – пользователь сам все контролирует • Цветовая слепота • Последовательность • Стандартность • Эффективность • Объекты человекомашинного интерфейса – объекты на экране должны быть логичны и понятны, должны управляться физическими действиями • Закон Фитта • Сокращение задержек между действиями – уменьшение времени отклика • Обучаемость • Метафоры • Защищенные действия – не сбрасывать действия пользователя при ошибках • Читаемость текста • Отслеживание состояния • Видимая навигация
- 55. Эвристика Шнайдермана • Последовательность •Кратчайшие расстояния между действиями • Обратная связь • Законченность диалогов (последовательностей действий) • Простое исправление ошибок • Способность отменить действие • Пользователь контролирует интерфейс (а не наоборот) • Сокращение загрузки быстрой памяти
- 56.
- 57. Разберем этот интерфейс 1.Иконка корзины по цвету не сбалансирована с фоном (графический дизайн) 2. Хорошо: пользователя приветствуют по имени (обратная связь) 3. Красный цвет используется и для сообщений об ошибке и для вспомогательных сообщений (последовательность) 4. «С вашим заказом возникла проблема», но нет объяснений или предложений по исправлению (исправление ошибок) 5. ExtPrice и UnitPrice – непонятные лейблы 6. Кнопка Remove hardware другая, чем чекбокс Remove (последовательность) 7. “Click here” не является необходимым (простота) 8. Нет кнопки «продолжить покупки» (пользовательский контроль) 1 2 3 4 5 6 7 8 3
- 58. Практические занятия поэвристике Найдите самый ужасный (на ваш взгляд) интерфейс и разберите его по одной из представленных эвристик
- 59. Спасибо за вниманиеи успехов!
Editor's Notes
- #28 http://blogs.hbr.org/2009/09/how-do-innovators-think/ Searching – key skill?
- #29 Examples?
- #30 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
- #31 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
- #34 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
- #35 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