Человеко-машинный интерфейс

Магистратура 2020/2021

Лучший по критерию «Полезность курса для расширения кругозора и разностороннего развития»

Лучший по критерию «Новизна полученных знаний»

Статус: Курс по выбору (Информационные системы и взаимодействие человек-компьютер)

Направление: 01.04.02. Прикладная математика и информатика

Кто читает: Департамент информатики

Где читается: Санкт-Петербургская школа физико-математических и компьютерных наук

Когда читается: 2-й курс, 1, 2 модуль

Формат изучения: с онлайн-курсом

Преподаватели: Данилов Семен Васильевич, Суворова Алёна Владимировна

Прогр. обучения: Информационные системы и взаимодействие человек-компьютер

Язык: русский

Кредиты: 8

Контактные часы: 56

Полная версия программы учебной дисциплины

Аннотация

Является дисциплиной по выбору. Цель освоения дисциплины «Человеко-машинный интерфейс» - познакомить студентов с принципами разработки пользовательского интерфейса, причем как со стороны бэкенд разработчика, так и со стороны фронтенд разработчика, аналитика. В рамках курса студенты конструируют интерфейс для веб сервиса от прототипа до рабочего проекта. В финальной части курса студенты научатся методам оценки интерфейса как количественными, так и качественными методами.

Цель освоения дисциплины

Цель освоения дисциплины «Человеко-машинный интерфейс» -- познакомить студентов с принципами разработки пользовательского интерфейса, причем как со стороны бэкенд разработчика, так и со стороны фронтенд разработчика, аналитика. В рамках курса студенты конструируют интерфейс для веб сервиса от прототипа до рабочего проекта. В финальной части курса студенты научатся методам оценки интерфейса как количественными, так и качественными методами.

Планируемые результаты обучения

Формализовывает задачу по разработке интерфейса с учетом различных типов требований
Умеет работать с технологиями разработки интерфейсов, включая HTML, CSS, TypeScript
Обосновывает выбор инструментария в зависимости от целей заказчика
Умеет работать с современными фрейморками (React)
Планирует исследование по оценке дизайна интерфейса

Содержание учебной дисциплины

Основы дизайна интерфейсов
Дизайн, ориентированный на решение задач, Элементы интерфейсов, Дизайн-элементы с точки зрения предметной области, интерфейса, пользователя
Основы программирования веб-интерфейсов
Интерфейс как разметка; Языки визуального оформления; Основы TypeScript; Фреймворки для верстки
Разработка веб-интерфейсов
Интерактивные итерфейсы. Современные веб-фреймворки. Веб-компоненты. Хранение данных на сервере
Измерения и оценка дизайна интерфейсов
Подходы к оценке интерфейсов. Оценка удовлетворенности дизайном

Элементы контроля

Домашнее задание №1
Домашние задания представляют собой упражнения на программирование для отработки определенных тем курса. Для задания предоставляется шаблон, который нужно доработать в соответствии с темой. В частности, домашнее задание №1: обучение основам TypeScript и HTML-вёрстки. Необходимо разработать простое приложение
Домашнее задание №2
Домашние задания представляют собой упражнения на программирование для отработки определенных тем курса. Для задания предоставляется шаблон, который нужно доработать в соответствии с темой. В частности, домашнее задание №2: обучение основам вёрстки с помощью Twitter Bootstrap. Использование JQuery для обработки событий и внесения изменений в DOM-дерево.
Итоговый проект
Проект предполагает создание прототипа небольшого веб-приложения. В рамках проекта самостоятельно выбирают тему и проектируют интерфейс приложения, обладающий базовой функциональностью. Проект можно выполнять индивидуально или в парах. Прототип публикуется на платформе GitHub. Обязательные требования к прототипу: ● Минимум три экрана в приложении ● Использование бэкенда (например, json-server) ● Авторизация
Домашнее задание №3
Домашние задания представляют собой упражнения на программирование для отработки определенных тем курса. Для задания предоставляется шаблон, который нужно доработать в соответствии с темой. В частности, домашнее задание №3: закрепление навыков вёрстки с Twitter Bootstrap и использования JQuery.
Домашнее задание №4
Домашние задания представляют собой упражнения на программирование для отработки определенных тем курса. Для задания предоставляется шаблон, который нужно доработать в соответствии с темой. В частности, домашнее задание №4: знакомство с фреймворком React (переписать приложения домашнего задания №3 на React)
Домашнее задание №5
Домашние задания представляют собой упражнения на программирование для отработки определенных тем курса. Для задания предоставляется шаблон, который нужно доработать в соответствии с темой. В частности, домашнее задание №5: использование HTTP-клиента для связи приложения с бэкендом (реализовать связь с бэкендом, который реализует авторизацию и хранение данных приложения. Использовать ReactRouter для создания одностраничного приложения с несколькими экранами)
Тест
Часть материала осваивается в формате онлайн-курса. Рекомендованный курс Visual Elements of User Interface Design (https://www.coursera.org/learn/visual-elements-user-interface-design). По материалам курса студенты проходят тест, состоящий из 8-12 теоретических вопросов.

Промежуточная аттестация

Промежуточная аттестация (2 модуль)
0.05 * Домашнее задание №1 + 0.05 * Домашнее задание №2 + 0.05 * Домашнее задание №3 + 0.15 * Домашнее задание №4 + 0.2 * Домашнее задание №5 + 0.4 * Итоговый проект + 0.1 * Тест

Программа дисциплины