Курс «Человеко-машинное взаимодействие» Вводный семинар

1.

2025 год
Курс «Человеко-машинное взаимодействие»
Вводный семинар
«Человек — это особенность, а не баг»
© Алан Купер, отец «Visual Basic»

2. 2. Знакомство

Тимофеев Дмитрий
Старост групп прошу направить
Александрович
в телегу в лс @TimofeevDmitry
Работаю системным аналитиком
1.
простым текстом или xlsx
удалённо в банке
Образование:
ГУД, САУ, выпуск 2002 года
Список студентов группы (ФИО)
2.
Список пройденных курсов по
требованиям, проектированию,
документированию ИС
в Университете.
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

3. 3. Что на семинарах?

Цель: Научиться проектировать пользовательский интерфейс (ЧМВ)
Задача 1: Изучать проектирование пользовательского интерфейса
(ПИ) – цвета, расположение, взаимодействие, поведение и т.п.
Задача 2: Создавать проектную документацию для разработки
программного обеспечения (ПО), то есть разработка артефактов для
создания ПО с акцентом на изучение ПИ!
В конце семестра зачет! Автомат тому, кто:
1. набрал баллы за артефакты с домашних заданий
2. посещал занятия
3. задавал вопросы на семинарах
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

4. 4. Правила человеко-человеческого взаимодействия

Правила поведения на семинаре
1. Сделал сам – помоги товарищу!
2. Выйти можно без вопросов и предупреждений
3. Презентации и материалы к семинару ищите в Телеге ->
Правила оформления домашнего задания (ДЗ)
В телеграм - канале ->
1.
2.
3.
4.
5.
Шрифт Times New Roman или Verdana или Tahoma,
не менее 12 пт
Файлы в формате docx (MS Word) или xlsx (MS Excel)
Название файла по формату
ДЗ_[Номер ДЗ]_[Название ДЗ]_[Номер вашей группы]
_[Ваши Имя Фамилия].docx
Например, ДЗ_01_Резюме_Сергей_Петров.docx
Номер и название ДЗ - в презентации к семинару,
презентации должны быть выложены в ТГ-канале
Присылать файлы ДЗ в личку @TimofeevDmitry или
можно в комментарии к выложенной презентации в ТГ-канале
Телеграм канал –
для домашки,
инфы и вопросов
Какие у вас остались вопросы?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

5. 5. План на этот семинар

1.
Поговорим про интерфейс
Уметь рассказать, что такое интерфейс
Чтобы был контекст для
выбора своего продукта
2.
Практика
Придумаем свой продукт
для изучения проектирования ПО
с акцентом на интерфейс
Зафиксировать свою идею
в VISION (кратком резюме продукта)
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

6. 6. Приступим

ЧМВ или Человеко-машинное взаимодействие или
Человеко-компьютерное взаимодействие (ЧКВ)
o HMI Human-Machine Interface
o HCI Human-Computer Interaction
o CHI Computer-human interaction
Порассуждаем:
1.
Что такое ЧМВ?
2.
Какие термины из этой области знаете?
3.
Назовите примеры ЧМВ
4.
Для кого ЧМВ нужно?
ЧМВ – это дизайн?
«Если думать, что дизайн —
это то, как продукт
выглядит, вы глубоко
заблуждаетесь. Дизайн —
это то, как продукт
работает»
(с) Стив Джобс
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

7. 7. Зачем ЧМВ нужно?

Люди разрабатывают ПО,
и получается не идеально!
Наша цель - обучиться
принципам и подходам к
проектированию интерфейса
Чтобы не делать интерфейсов,
от которых пользователь
стрессует
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

8. 8. Пользовательский Интерфейс (ПИ)

Ваше мнение:
что такое
пользовательский
интерфейс,
User Interface,
UI / ПИ ?
ПИ – это
совокупность
средств
взаимодействия из
аппаратного и
программного
обеспечения
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

9. 9. Типы интерфейсов

Ваше мнение: Какие еще есть типы интерфейсов? Чем ПИ отличается от других типов интерфейса?
Тип интерфейса
Кто взаимодействует?
Примеры
Цель
Пользовательский
(UI)
Человек ↔ Машина
Веб-сайт, мобильное приложение, экран
микроволновки, руль автомобиля, Станок
ЧПУ, интерфейс диспетчера на
электростанции
Быть понятным и
эффективным для
человека
Программный
(API)
Программа ↔
Программа
Быть надежным,
стандартизированным и
эффективным для машин
Устройство ↔
Устройство
USB-порт, HDMI-кабель, слот PCI Express в
материнской плате, RS232, порт,
интерфейс датчика
Аппаратный
(Hardware Interface)
REST API различные сервисы
ADO, ODBC, JDBC
Платежный шлюз
Быть надежным,
стандартизированным и
эффективным для
устройств
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

10. 10. Наш тип интерфейса

На семинарах будем изучать графический пользовательский
интерфейс (GUI) программного обеспечения с использованием:
- Мыши
- Клавиатуры
- Монитора
Считаем такие средства взаимодействия между человеком и
компьютером, то есть такой интерфейс - это исходные данные.
И в основном будем говорить про веб-интерфейсы и интерфейсы
мобильных приложений
При этом,
обсуждаемые
принципы и
подходы к
проектированию
можно переносить
на любые другие
типы интерфейсов
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

11. 11. Что такое UX

Ваше мнение: что такое UX?
User Experience (UX, «пользовательский опыт») – это опыт и чувства использования интерфейса
пользователем. Опыт пользователя по использованию процесса и без автоматизации, и с автоматизацией
этого процесса, и опыт от вообще всей и всякой автоматизации. Всё есть UX
Ваше мнение: Чем UX отличается от UI?
UX-дизайн
отвечает за то,
как интерфейс
работает.
UI-дизайн (User
Interface)
отвечает за то,
как интерфейс
выглядит.
Взято с https://practicum.yandex.ru/blog/chto-takoe-ux-ui-dizayn/
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

12. 12. Мем про UX

ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

13. 13. Пример UX и UI. Жибер из фильма Такси 4 Люка Бессона

ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

14. 14. Пример UX и UI. Жибер из фильма Такси 4 Люка Бессона

ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

15. 15. Ключевые черты современного интерфейса

1.
Компьютерный экранный интерфейс
2.
Мультимодальный интерфейс – и мышь, и клавиатура, и микрофон, и звук, и тачскрин
3.
Междисциплинарность: информатики, дизайна, психологии, лингвистики,
эргономики
4.
Человеко-центричность:
1. Отталкиваемся от потребностей человека (пользовательские требования)
2. Обратная связь с пользователем
3. Персонализируем под пользователя
5.
Этика и социальная ответственность: вопросы приватности, доступности,
цифрового благополучия, влияния технологий на общество.
6.
Безопасность интерфейса – физическая, эмоциональная, информационная,
системная, финансовая и т.д.
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

16. 16. Качественный интерфейс. Есть такой?

Ваше мнение: какие есть «хорошие» пользовательские
интерфейсы?
Приведите примеры...
Какие критерии «хорошего» интерфейса? На основании чего
интерфейсы можно назвать качественными? Почему?
Мнений из Интернета о «хороших» интерфейсах мало:
1. Гугол
2. Сбербанк ONLINE
3. Википедия
4. Spotify https://www.spotify.com/
5. airbnb https://www.airbnb.ru/
«Качественный» ПИ
облегчает работу:
• Увеличивает
производительность
работы как
пользователя, так и
ИС
• Уменьшает усталость
пользователя
Ваше мнение: Сможем все вместе выбрать качественный ПИ ?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

17. 17. Примеры «некачественных» интерфейсов

Не делать интерфейсов, от которых
пользователь в стрессе и шоках
Наша цель - научиться принципам и методам проектирования интерфейса
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

18. 18. Сможете «запилить» хороший интерфейс?

Как считаете, почему 40+ лет существуют теории и
методологии проектирования интерфейсов, но
практически интерфейсы получаются далекими от
совершенства? Причины?
1. Сможете спроектировать качественный интерфейс? Кто
из вас думает, что сможет?
2. Вокруг 95% плохих интерфейсов – а вы сделаете
хороший. Почему? На чем основана ваша уверенность?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

19. 19. Закрепим материал семинара

Своими словами:
1. Что такое ЧМВ ?
2. Что такое интерфейс?
3. Какие бывают типы интерфейсов?
4. Критерии «качественного» интерфейса?
5. Что такое UX ?
6. Чем UX отличается от UI ?
7. Чем информационная система (ИС) отличается от программы?
8. Зачем учить ЧМВ?
9. Что должно стать результатом курса?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

20. 20. Что почитать, литература

Интернет
• История GUI https://en.wikipedia.org/wiki/History_of_the_graphical_user_interface
• Про ЧМВ https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
• 58 признаков хорошего интерфейса https://habr.com/ru/articles/247367/
• 10 принципов удобного интерфейса
https://habr.com/ru/companies/sportmaster_lab/articles/935418/
Книги про ЧМВ
1. Интерфейс. Основы проектирования взаимодействия / Купер А., Рейманн Р.М., Кронин Д.,
Носсел К.
2. Человеко-машинное взаимодействие / Акчурин Э.А.
3. «Не заставляйте меня думать» / Стив Круг
4. Веб-дизайн / Якоб Нильсен
5. Дизайн привычных вещей / Дональд Норман
* презентация должна быть выложена в телеграм-канал
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

21. 21. Итоги первой части семинара

До этого момента
информация на семинаре была для того,
чтобы «погрузиться» в контекст, в проблематику
Проектирования
Пользовательского
Интерфейса
Чтобы теоретически познакомиться с ППИ и проблемами, которые перед ним стоят
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

22. 22. Практика. Выбор продукта

Цель семинара и ближайшей недели
–
придумать продукт для проектирования
в течении семестра
Ваши варианты продуктов?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

23. 23. Советы по выбору Продукта

A. Выбирайте душой, чтобы вам
было интересно
B. Должны быть аналоги продукта
для сравнения
C. Задумывайте простой, понятный
продукт, чтобы можно было
реализовать. Делай проще,
студент! ->
«Простота — это наивысшая утонченность» —
Леонардо да Винчи
«Совершенство достигнуто не тогда, когда нечего
добавить, а тогда, когда нечего убрать» — Антуан
де Сент-Экзюпери.
«Я написал бы короче, но у меня не было
времени» — Блез Паскаль
KISS (Keep it simple, stupid) — «Делай проще,
дурак». Принцип проектирования и разработки,
призывающий избегать ненужных усложнений.
Цитаты известных людей о простоте ->
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

24. 24. Примеры продуктов

1. Анализ голоса на ложь
2. Распознавание фото с помощью ИИ (грибы по фото, котики, песики)
3. Анализ картинок с ИИ (распознавание накладных)
4. Дайджест по книге, реферату, статье, войсу
5. Распознавание текста из voice (как в мессенджерах транскрипт)
6. Оформление и предоставление госуслуги
7. Работа с заявками горожан про уборку снега
8. Меню кафе в смартфоне
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

25. 25. Что такое Vision (резюме продукта)

Vision (видение продукта) —
документ, цель которого объяснить:
1. Что строим (проектируем и кодим)
2. Какую проблему мы решаем? Для чего это делаем?
3. Зачем это строим?
4. Как мы поймем, что достигли успеха?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

26. 26. Структура Vision

1. Наименование
2. Краткое описание до 500 символов
3. Бизнес-проблема (что решаем)
4. Цели и задачи
5. Критерии успеха (достижения результата), метрики
6. Основные возможности (фичи, функции)
7. Ограничения (техн, интегр, юрид)
8. Аналоги
9. Конкурентные преимущества
10.Целевая аудитория, заинтересованные стороны
11.Краткий план работ
12.Команда – функции участников
Требования к
оформлению
1. Объем документа:
2-3 страницы А4
2. Шрифт во всех
артефактах(докумен
тах) проекта: Times
New Roman или
Verdana или
Tahoma, 12 пт
Где найти все
требования к оформлению?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

27. 27. Задача на семинаре

Составить артефакт Vision
(Видение продукта)
Шаблон vision в Телеге
На каждый пункт – не более 1 минуты!
Детально прорабатывать – дома
Важно хорошо понимать и четко представлять что вы делаете, что автоматизируете
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

28. 28. Домашнее задание №00. Vision - резюме продукта

A. Составить VISION - резюме вашего продукта. Vision - краткое,
вдохновляющее описание желаемого будущего продукта!
Объем документа: 2-3 страницы А4
Минимум – для 2 (двух) продуктов, два Vision,
придумать пару продуктов, первый был на семинаре
B. Привести примеры в MS Word, именно на ваш взгляд:
1. 3-5 «хороших» интерфейсов
2. 3-5 «плохих» интерфейсов
C. Домашку в ЛС в Телегу
Презентация семинара и материалы
должны быть в Телеграм-канале
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар

29. 29. В сухом остатке

1.
Узнали больше про пользовательские интерфейсы (ПИ) и ЧМВ
2.
Поняли, что хороших интерфейсов мало!
3.
Хороший интерфейс – результат огромного труда!
Кредо проектировщика интерфейсов:
«Не заставляйте меня думать»
(с) Стив Круг
Есть вопросы?
ЧМВ или Проектирование Пользовательского Интерфейса - Тимофеев Дмитрий Александрович - Вводный семинар