BSc: B1.V.DV.06.01 MFAI 2024 UX UI Design
UX/UI Дизайн
Квалификация выпускника: бакалавр
Направление подготовки: 09.03.01 Информатика и вычислительная техника
Направленность (профиль) образовательной программы: Математические основы искусственного интеллекта
Программу разработал(а): Жирош О. М.
1. Краткая характеристика дисциплины
Изучение дисциплины (модуля) «UX/UI Дизайн» обеспечивает формирование и развитие компетенций обучающихся в области дизайн продукции, их применение для решения различных прикладных задач в рамках профессиональной деятельности. Этот курс фокусируется на области дизайна пользовательского опыта (UX) и пользовательского интерфейса (UI), с особым акцентом на уникальные потребности и проблемы, с которыми сталкиваются стартапы. С помощью серии лекций и практических лабораторных занятий обучающиеся изучают принципы и лучшие практики UX/UI-дизайна и узнают, как эффективно применять их в контексте стартапов.
2. Перечень планируемых результатов обучения
Целью освоения дисциплины (модуля) является формирование знаний, умений и навыков в рамках профессиональной деятельности, позволяющих успешно работать в избранной отрасли, а также обладать компетенциями, способствующими социальной мобильности, устойчивости и конкурентоспособности обучающегося в условиях современных рыночных отношений.
Задачами дисциплины являются рассмотрение проектирования и исследования пользовательского опыта; изучение визуального дизайна и прототипирования пользовательского интерфейса, а также изучение итеративного дизайна, тестирования юзабилити и примера портфолио.
Общая характеристика результата обучения по дисциплине
Знания: сформированы систематические знания дизайна, ориентированного на пользователя; знания Design Thinking и других концепций, и подходов к проектированию; знания техник Wireframing и Prototyping; знания принципов визуального дизайна и брендинга; знания тестирования юзабилити и итеративного дизайна.
Умения: сформированы умения проводить исследования пользователей; умения создавать каркасы и прототипы; умения проектировать визуальные интерфейсы; умения проводить юзабилити-тестирование; умения применять принципы отзывчивого дизайна; умения сотрудничать с заинтересованными сторонами.
Навыки (владения): сформировано владение навыками вести процесс проектирования, ориентированный на пользователя; навыками применять дизайн-мышление; навыками синтезировать цели бизнеса и дизайна; навыками применять стратегические дизайнерские решения; навыками итерации и адаптации дизайна: навыками коммуникации и презентации проектных решений.
3. Структура и содержание дисциплины
| № раздела | Наименование раздела дисциплины (модуля) | Содержание дисциплины (модуля) по темам |
| 1. | Проектирование и исследование пользовательского опыта | Введение в проектирование пользовательского опыта.
Важность проектирования, ориентированного на пользователя, в стартапах. Методы и техника исследования пользователей. Создание персон пользователей. Информационная архитектура и пользовательский поток. Проведение интервью с пользователями. Тестирование пользователей и сбор отзывов. Создание схемы и прототипов. |
| 2. | Визуальный дизайн и прототипирование пользовательского интерфейса | Введение в визуальный дизайн в UX/UI.
Принципы визуальной иерархии и компоновки. Типографика в дизайне пользовательского интерфейса. Теория и применение цвета. Программное обеспечение Figma. Создание макетов высокой точности. Визуальная согласованность и системы дизайна. |
| 3. | Итеративный дизайн, тестирование юзабилити и пример портфолио | Циклы итеративного проектирования и петли обратной связи.
Методы и приемы тестирования удобства использования. Сбор и анализ отзывов пользователей. Эффективность дизайна. Кликабельные прототипы с высокой степенью достоверности. Передача дизайна. Основы презентации портфолио и кейсов. |
4. Методические и оценочные материалы
Задания для практических занятий:
| №
п/п |
Наименование раздела дисциплины (модуля) | Перечень рассматриваемых тем (вопросов) |
| 1. | Проектирование и исследование пользовательского опыта | Выберите правильный вариант перевода:
Что из перечисленного ниже является основной целью дизайна пользовательского опыта (UX)? a) Повышение визуальной привлекательности продукта b) Увеличение посещаемости веб-сайта в) Повышение удовлетворенности пользователей и удобства использования d) Максимизация доходов Ответ: c) Повышение удовлетворенности пользователей и улучшение юзабилити Что из перечисленного ниже НЕ является методом исследования пользователей, обычно используемым в UX/UI-дизайне? а) Опросы б) Сортировка карточек в) Фокус-группы г) Анимация Ответ: б) Для определения целей и поведения пользователей Какова основная цель создания пользовательских персон в процессе проектирования? a) Определение демографических характеристик целевого рынка б) Определить цели и поведение пользователей в) Для создания визуально привлекательного дизайна г) Для проведения A/B-тестирования Ответ: б) Для определения целей и поведения пользователей Какова цель проведения интервью с пользователями в исследовании пользовательского опыта? a) Сбор количественных данных о поведении пользователей б) Выявление болевых точек и разочарований пользователей в) Для создания визуально привлекательных концепций дизайна г) Определение целевого рынка для продукта Ответ: б) Для выявления болевых точек и разочарований пользователей В контексте пользовательского опыта, что означает термин «доступность»? a) Эстетическая привлекательность дизайна б) Простота навигации по сайту c) Воспринимаемая функциональность или назначение объекта г) отзывчивость мобильного приложения Ответ: в) Воспринимаемая функциональность или назначение объекта |
| 2. | Визуальный дизайн и прототипирование пользовательского интерфейса | Выберите правильный вариант перевода:
Что из перечисленного ниже НЕ является принципом визуального дизайна? а) Контраст б) Выравнивание в) Единство г) Комплексность модели Ответ: г) Комплексность модели Что означает термин «типографика» в дизайне пользовательского интерфейса? a) Использование цветов и визуальных элементов б) Расположение визуальных элементов на странице в) Выбор и стилизация шрифтов г) Организация информации на сайте Ответ: в) Выбор и стилизация шрифтов В какой цветовой схеме используются цвета, соседствующие друг с другом на цветовом круге? а) Аналоговая б) Монохроматический в) Комплементарные г) Триадическая модель Ответ: а) Аналоговая Каково назначение системы сетки в визуальном дизайне? a) Создать ощущение глубины в дизайне б) Добавить визуальный интерес за счет сложных узоров c) Обеспечить основу для организации контента г) Улучшить использование белого пространства Ответ: в) Обеспечить основу для организации контента В чем заключается основное преимущество использования систем проектирования в визуальном дизайне? a) Создание визуально потрясающих дизайнов б) Упрощение сотрудничества между дизайнерами и разработчиками в) Для реализации передовых визуальных эффектов и анимации г) Для проведения пользовательского тестирования и сбора обратной связи Ответ: б) Для оптимизации сотрудничества между дизайнерами и разработчиками Какова основная цель использования системы сетки в дизайне интерфейса? a) Чтобы добавить визуальный интерес и эстетику б) Обеспечить совместимость на различных устройствах c) Обеспечить структуру для организации контента г) Улучшить доступность для дальтоников Ответ: в) Обеспечить структуру для организации контента Какой элемент дизайна связан с пространственным расположением визуальных элементов по отношению друг к другу? a) Выравнивание б) Повторение в) Визуальная иерархия г) Типографика Ответ: а) Выравнивание |
| 33. | Итеративный дизайн, тестирование юзабилити и пример портфолио | Выберите правильный вариант перевода:
Какова основная цель итеративного дизайна в процессе проектирования? a) Создание визуально привлекательного дизайна б) Сбор отзывов пользователей и доработка дизайна в ходе нескольких итераций в) Провести исследование рынка и анализ конкурентов г) Окончательная доработка дизайна без дальнейших изменений Ответ: б) Для сбора отзывов пользователей и доработки дизайна в ходе нескольких итераций Юзабилити-тестирование проводится для: a) Подтверждения предположений и сбора информации о потребностях пользователей b) Оценить визуальную привлекательность дизайна c) Определить рыночную жизнеспособность продукта г) анализа стратегий конкурентов Ответ: a) проверки предположений и сбора информации о потребностях пользователей Передача в процессе проектирования означает: a) Обмен файлами дизайна с заинтересованными сторонами и разработчиками для реализации б) Проведение сеансов юзабилити-тестирования с пользователями в) Анализ поведения пользователей с помощью аналитики данных г) проведение мозговых штурмов и идейных сессий с командой дизайнеров. Ответ: a) Обмен файлами дизайна с заинтересованными сторонами и разработчиками для реализации Какова основная цель создания портфолио дизайнера? a) Демонстрация дизайнерских навыков и предыдущих работ потенциальным работодателям или клиентам б) Оценить успешность дизайн-проекта c) Генерировать идеи и концепции дизайна г) Проведение исследований пользователей и сбор отзывов Ответ: a) Для демонстрации дизайнерских навыков и предыдущих работ потенциальным работодателям или клиентам Тематическое исследование в портфолио дизайнера обычно включает: a) Подробное описание процесса проектирования и возникших проблем b) Список технических спецификаций и требований c) Визуальные активы без сопроводительного текста г) краткое описание окончательного дизайна без каких-либо подтверждающих доказательств Ответ: a) Подробное описание процесса проектирования и возникших проблем Что означает термин «поворот» в контексте итеративного дизайна? a) Внесение незначительных изменений в визуальные элементы дизайна б) Изменение всего направления или подхода к дизайну на основе отзывов пользователей в) Завершить разработку дизайна и перейти к фазе разработки г) Создание вариаций дизайна для целей A/B-тестирования Ответ: b) Для изменения всего направления или подхода к дизайну на основе отзывов пользователей |
Текущий контроль успеваемости обучающихся по дисциплине:
| №
п/п |
Наименование раздела дисциплины (модуля) | Форма текущего контроля | Материалы текущего контроля |
| 4. | Проектирование и исследование пользовательского опыта | Проверка выполнения домашних заданий; Устный / письменный опрос;
Доклад; Защита проекта; Коллоквиум |
Задание. Выберите проблему проектирования:
Это может быть практически все, что угодно, лишь бы ее можно было решить с помощью приложения (в частности, приложения, которое может работать на мобильном телефоне или веб-платформе). При выборе общего пространства проектирования у вас есть два варианта: Вы можете либо выбрать заранее определенную проблему (вариант 1), либо выбрать свою собственную (вариант 2). Вариант 1: Приложение для курсов Университета Иннополис Университет Иннополиса рассматривает возможность разработки специального приложения для курсов, чтобы повысить эффективность обучения студентов. Приложение будет служить платформой для доступа студентов к материалам курса, совместной работы с коллегами и участия в различных учебных мероприятиях. Среди возможных функций приложения можно выделить следующие: ● Запись на курсы: Студенты могут просматривать и записываться на курсы, предлагаемые Университетом Иннополис, выбирая желаемые занятия на семестр. ● Материалы курса: Доступ к слайдам лекций, материалам для чтения. ● Дискуссионные форумы: Специальные дискуссионные форумы для каждого курса, позволяющие студентам участвовать в академических дискуссиях, задавать вопросы и получать разъяснения от преподавателей и сокурсников. ● События на кампусе: Интеграция с календарем событий университета, отображение предстоящих академических мероприятий, мастер-классов, семинаров и приглашенных лекций для информирования студентов и поощрения их участия. У вас есть возможность выбрать конкретные функции для реализации, если они соответствуют основным потребностям: эффективное управление курсами, развитие сотрудничества и повышение качества обучения для студентов. Хотя этот вариант предоставляет определенное проблемное пространство, имейте в виду, что другие студенты могут выбрать тот же вариант, что приведет к меньшей уникальности по сравнению с вариантом 2. Вариант 2: Выберите свою собственную проблему проектирования Изучите проблемное пространство, которое вас интересует. Есть ли конкретное приложение, о котором вы всегда мечтали, но которое еще не разработано? Это может быть планирование отпуска, удобная служба химчистки или даже платформа для торговли комиксами. Выбор проблемы для собственного дизайна сопряжен с определенными трудностями, но имеет ряд преимуществ. Во-первых, процесс определения подходящей проблемы - ценный навык для UX-дизайнеров, и этот вариант позволяет вам практиковать и совершенствовать этот навык. Во-вторых, выбрав свою собственную проблему, вы создадите проект, который будет совершенно уникальным и не похожим на другие. Эта уникальность потенциально может привести к созданию привлекательного портфолио. Поэтому, если вы хотите продемонстрировать впечатляющее портфолио, выбор собственной проблемы может стать для вас идеальным вариантом. Вам необходимо предварительно определить сферу деятельности: ● Выбрать область/отрасль ○ Выбрать более нишевый рынок ● Выбрать группу пользователей (только одну) ○ Сузить круг пользователей ● Выберите один критический путь пользователя Задание. A) План исследования Google Docs - Word A.1 Составьте план исследования, включая цели исследования, критерии набора и сценарии. Ваш план исследования должен содержать следующие разделы: ● Короткий абзац, описывающий историю проекта ● Основные цели исследования ● Ключевые вопросы исследования ● Метод: краткое объяснение того, как будет применяться метод ● Критерии рекрутинга ● Список вопросов для интервью/опроса Примечание: Убедитесь, что цели вашего исследования сформулированы четко и имеют разумный масштаб (не пытайтесь втиснуть в одно исследование слишком много вещей). A.2 Создайте сценарии интервью, которые должны отвечать целям исследования. Раздел сценария содержит: Вводный раздел руководство по вопросам краткое резюме. Рядом с каждым вопросом интервью написано его обоснование. A.3 Разработайте опрос, чтобы ответить на вопросы исследования. Рядом с каждым вопросом опроса написано его обоснование. Формат вопросов опроса гибкий: они могут быть с множественным выбором, шкалой Лайкерта, ранжированием и т. д. Б) Отчет об исследовании Google Slides - PowerPoint B.1 Напишите краткое и информативное резюме. ● Резюме содержит краткое описание исследовательского проекта ● В резюме кратко изложены основные выводы и рекомендации. B.2 Представьте результаты исследования, подкрепленные данными, и дайте действенные рекомендации или следующие шаги. ● Ключевые выводы выделены (укажите не менее 2 ключевых выводов) ● В отчете представлены данные, подтверждающие выводы (например, цитаты/наблюдения пользователей) ● В отчете представлены рекомендации, основанные на полученных результатах C) Черновой дизайн Google Slides – PowerPoint Набросайте дизайн от руки и улучшите его, основываясь на принципах дизайна и результатах исследований ● Представление включает в себя дизайн как минимум одного экрана, нарисованный от руки или созданный с помощью цифровых инструментов ● Дизайн содержит аннотации, в которых указывается: О чем этот дизайн? Какие ключевые действия могут предпринять пользователи? ● В дизайн включен как минимум один принцип проектирования и как минимум один ключевой вывод из отчета об исследовании ● На каждом экране есть короткий абзац, объясняющий обоснование дизайна и поясняющий, какие принципы дизайна и результаты исследования были применены. По желанию можно включить две итерации одного и того же дизайна, одна из которых представляет собой версию "до" (оригинальный дизайн), а другая - версию "после" (дизайн, который был улучшен). Какие методики и инструменты используются при проектировании пользовательского опыта для определения потребностей пользователей и создания пользовательских сценариев? Как связаны эти методики с основами управления проектами и контроля исполнения поручений? (ПК-3) Каким образом проведение анализа взаимодействия пользователей с продуктом или сервисом способствует принятию эффективных решений в организации? Какие методы и инструменты исследования пользовательского опыта могут быть использованы для оптимизации бизнес-процессов и управления организационными изменениями? (ПК-3) Каким образом проектирование и исследование пользовательского опыта влияют на формирование моделей бизнес-процессов в организации? Какие методики и инструменты могут быть использованы для выявления требований к информационным системам и анализа их? (ПК-3) Каким образом управление эффективностью персонала и организация обучения персонала могут быть связаны с процессом проектирования пользовательского опыта? (ПК-3) Каким образом проектирование и исследование пользовательского опыта способствуют определению первоначальных требований к информационным системам и их реализации в типовой ИС на этапе предконтрактных работ? Какие методики и инструменты могут быть использованы для согласования и утверждения требований к типовой ИС? (ПК-3) Каким образом командообразование, развитие персонала и управление эффективностью работы персонала влияют на успешное выполнение проектов по ИС в предметной области Интернет-торговли, Интернет-рекламы, логистики и управления складом? (ПК-3) |
| 2. | Визуальный дизайн и прототипирование пользовательского интерфейса | Проверка выполнения домашних заданий; Устный / письменный опрос;
Доклад; Защита проекта; Коллоквиум |
Задание.
А) Фигма-страница синтеза исследований Требование: 2-3 интервью с реальными пользователями, используя предыдущее задание (вы можете взять интервью у своих коллег, друзей, родственников, если они являются вашими потенциальными пользователями). Вы будете использовать интервью с пользователями, чтобы лучше понять потенциальных пользователей и сопереживать им. Вы выйдете из этой фазы с идеями функций для вашего продукта. Вы должны создать страницу Figma для Синтеза исследований, которая будет содержать следующие разделы: A.1 Секция Figma "Заметки об интервью Рамка должна включать отдельные разделы заметок для каждого из предоставленных интервью. У каждого респондента должна быть своя цветная карточка для заметок. В заметках должны быть описаны основные моменты, проблемы, возможности и другие наблюдения. A.2 Раздел фигмы "Темы и возможности" (или "Синтез интервью") Заметки из раздела "Заметки об интервью" копируются в раздел "Синтез интервью". Заметки должны быть сгруппированы и иметь четко определенные обозначения, представляющие темы и возможности. A.3 Секция фигмы "Идейный замысел Рамка Feature Ideation должна включать не менее 10 идей функций. Идеи должны быть самодостаточными, а заметки должны содержать достаточно информации для того, чтобы понять, что это такое. A.4 Секция фигмы "Приоритезация функций Рамка приоритезации функций должна копировать записи идей из Feature Ideation. Функции должны быть в пределах возможностей разработки, основанных на инженерном потенциале клиента. Заметки в Feature Prioritization должны быть организованы с использованием одной из следующих схем: ● Матрица приоритетов функций ● Квадранты "ценность vs сложность". Выбранные функции должны быть четко обозначены с помощью примечаний другого цвета. Эти заметки должны содержать текст, описывающий, почему данная функция важна с учетом результатов исследования. Б) Страница Figma быстрого прототипирования (Wireframming) Вы добавите две секции в свой файл Figma. Эти разделы должны выглядеть примерно так (не забывайте, что ваш файл должен включать больше эскизов и подробных цифровых экранов): Вы должны создать страницу Figma для быстрого прототипирования, которая будет содержать следующие разделы: B.1 Исследование удобства использования - секция Figma итерации 1 Раздел "Исследование юзабилити" должен включать в себя поток пользователей (простую карту путешествия), где каждый этап разбит на более мелкие задачи. B.2 Бумажные эскизы - Iteration 1 Figma Section На странице дизайна есть рамка с надписью Paper Sketches - Iteration 1. Раздел должен содержать сканы готовых бумажных эскизов в стиле ультра-лоу-фай. Вспомните техники создания эскизов: ● Crazy-8 (8 небольших, грубых набросков на одном листе бумаги) ● Детальные эскизы, когда вы многократно прорисовываете свои лучшие идеи. ● Макетные наброски, чтобы показать, как все будет сочетаться на экране. Каждый эскиз должен содержать краткое текстовое описание функциональности. B.3 Цифровой прототип - итерация 1 Figma-секция Раздел должен включать в себя прототип с низкой точностью 3-4 экранов, созданный с помощью Figma. Каждый экран должен содержать краткое текстовое описание функциональности. Прототип должен включать в себя общие шаблоны дизайна пользовательского интерфейса, такие как кнопки, навигация и ссылки. |
| 3. | Итеративный дизайн, тестирование юзабилити и пример портфолио | Проверка выполнения домашних заданий; Устный / письменный опрос;
Доклад; Защита проекта; Коллоквиум |
Задание.
A) Исследование удобства использования - итерация 2 Google Docs - Word Подготовьте руководство по исследованию юзабилити со следующими разделами: ● Информация о респонденте ● Параметры настройки исследования (очная / удаленная сессия) ● Вводный сценарий ● Вступительная этнография/вопросы ● Задачи юзабилити (пункты задач из предыдущего пользовательского потока) Предоставленный файл DOCX/PDF должен включать: Копия шаблона руководства по юзабилити с заполненным разделом задач, соответствующим вашему исследованию. Как минимум одна копия шаблона руководства по юзабилити с заметками из сессии РЕАЛЬНОГО тестирования. B) Цифровой прототип - итерация 2 Figma Page Вы будете использовать цифровой дизайн, который вы сделали для мобильного или веб-приложения в середине семестра, чтобы найти вдохновение для визуального дизайна и создать руководство по стилю. Затем вы создадите лист компонентов, который будете использовать для разработки высокоточных макетов с помощью Figma. Наконец, вы возьмете свои высокоточные макеты и создадите кликабельный прототип. B.1 Источник вдохновения для визуального дизайна Figma-страницы Ниже перечислены шаги, необходимые/предполагаемые для подготовки вашего прототипа к созданию прототипа высокой точности: ● Узнайте о своих конкурентах и других. Сделайте скриншоты шаблонов и элементов дизайна, которые вам нравятся в других приложениях/решениях. ● Организуйте их и сгруппируйте по стилям или функциям. ● Вы можете использовать Mobbin, Dribble и т. д. Ниже приведены результаты, которые должны быть включены в ваш прототип для прототипа высокой точности: B.2 Макеты высокой точности Figma Page/Section ● Созданные фреймы для дизайна приложения в Figma (3-5 экранов). ● Созданные экраны должны итерироваться и обновляться в соответствии с вашими юзабилити-тестами и на основе новых пользовательских потоков. B.3 Руководство по стилю страницы/раздела Figma Создайте раздел, включающий следующий список визуальных элементов, которые вы использовали в макете Hi-Fi: ● Типографика (размеры, вес и стили) ● Цвета ● Элементы и стили пользовательского интерфейса ● Изображения/иллюстрации ● Иконки B.3 Лист библиотеки шаблонов Figma Page/Section Создайте фрейм, содержащий список компонентов, которые вы собираетесь использовать для создания дизайна пользовательского интерфейса, в том числе: ● Кнопки ● Навигация ● Другие элементы, применимые конкретно к вашему дизайну (строки поиска, поля ввода, списки, диалоги) C) Кликабельный/интерактивный прототип Figma Prototype Link ● Свяжите экраны вместе на основе вашего пользовательского потока C2 ● Проверьте поток на несоответствие и убедитесь, что у пользователя есть способ вернуться к началу прототипа |
Контрольные вопросы для подготовки к промежуточной аттестации:
| №
п/п |
Наименование раздела дисциплины (модуля) | Вопросы |
| 1. | Проектирование и исследование пользовательского опыта | Что такое пользовательский опыт (User Experience) и почему он важен для успешного дизайна продукта?
Какие методы исследования пользовательского опыта вы знаете? Опишите их основные принципы и применение. Какой процесс включает в себя проектирование пользовательского опыта? Объясните этапы и ключевые задачи каждого этапа. Каким образом тестирование юзабилити помогает улучшить пользовательский опыт? Приведите примеры методов тестирования и их влияние на дизайн продукта. Почему проектирование, ориентированное на пользователя, играет ключевую роль в успешном стартапе? Какие преимущества это может принести компании? Методы исследования пользовательского опыта, которые могут быть особенно полезны для стартапов. Какие инструменты помогут собрать ценные данные о потребностях и предпочтениях целевой аудитории? Как важно тестирование пользовательского опыта для стартапов? Какие риски могут возникнуть при недостаточном внимании к UX/UI дизайну? Как можно интегрировать процессы проектирования пользовательского опыта в рабочий процесс стартапа? Какие этапы следует уделить особое внимание, чтобы обеспечить успешное взаимодействие с пользователями и удовлетворение их потребностей? Методы исследования пользователей, которые можно использовать для выявления их потребностей и предпочтений. Как провести пользовательские интервью и какие вопросы следует задавать для получения ценной информации? Какие инструменты и техники наблюдения за поведением пользователей могут быть эффективными при проведении исследований? Каким образом можно анализировать и интерпретировать полученные данные из исследований пользовательского опыта для дальнейшего улучшения UX/UI дизайна продукта или сервиса? Что такое персона пользователей и почему создание персон является важным этапом в проектировании пользовательского опыта? Какие основные компоненты включает в себя персона пользователей, и какие методы можно использовать для их создания? Какие преимущества может принести использование персон пользователей при разработке продукта или сервиса с точки зрения улучшения UX/UI дизайна? Как провести исследование пользователей для создания персон, и какие шаги следует предпринять для анализа и интерпретации полученных данных при формировании персон? Что такое информационная архитектура и какие основные принципы следует учитывать при её разработке для обеспечения удобного пользовательского потока? Какие инструменты и методы могут быть использованы для создания эффективной информационной архитектуры и оптимизации пользовательского потока на веб-сайтах или мобильных приложениях? Как влияет правильная информационная архитектура на пользовательский опыт и удовлетворенность пользователя продуктом или сервисом? Как провести анализ пользовательского потока с целью оптимизации информационной архитектуры и улучшения пользовательского опыта, и какие шаги следует предпринять для решения выявленных проблем? Какие цели можно достичь при проведении интервью с пользователями в рамках проектирования пользовательского опыта? Какие основные типы вопросов следует задавать при проведении интервью с пользователями для получения ценной обратной связи и понимания их потребностей? Какие методы анализа и интерпретации данных из интервью с пользователями могут помочь выявить ключевые проблемы и потребности пользователей? Как использовать результаты интервью с пользователями для улучшения дизайна продукта или сервиса и создания более удовлетворительного пользовательского опыта? Каким образом тестирование пользователей может помочь улучшить пользовательский опыт продукта или сервиса? Какие методы сбора отзывов от пользователей можно использовать для получения ценной обратной связи о продукте или сервисе? Опишите критерии, которые следует учитывать при выборе участников для тестирования пользователей. Каким образом результаты тестирования пользователей могут быть использованы для оптимизации дизайна продукта или сервиса с учетом потребностей пользователей? Какие инструменты можно использовать для создания схемы и прототипов в процессе проектирования пользовательского опыта? Каким образом создание схемы и прототипов помогает улучшить понимание пользовательских потребностей и предпочтений? Какие основные этапы следует пройти при разработке прототипа для тестирования пользователей? Как можно оценить эффективность созданной схемы или прототипа на основе обратной связи от пользователей? |
| 2. | Визуальный дизайн и прототипирование пользовательского интерфейса | Какие основные принципы визуального дизайна следует учитывать при разработке пользовательского интерфейса?
Каким образом цвет, шрифты и композиция влияют на восприятие пользователем интерфейса? Какие инструменты используются для создания визуального дизайна и прототипов в UX/UI дизайне? Почему важно тестировать визуальный дизайн и прототипы на пользователях перед окончательной реализацией продукта? Основные принципы визуальной иерархии, которые следует учитывать при разработке пользовательского интерфейса. Каким образом композиция элементов влияет на восприятие и понимание информации пользователем? Как можно создать эффективную визуальную иерархию с использованием различных типов шрифтов и размеров? Почему важно соблюдать принципы композиции и баланса при разработке дизайна пользовательского интерфейса? Какие основные принципы типографики следует учитывать при разработке дизайна пользовательского интерфейса? Как выбор шрифтов влияет на читаемость и восприятие информации пользователем? Как можно использовать различные стили и веса шрифтов для создания эффективного пользовательского интерфейса? Почему важно соблюдать принципы выравнивания и отступов при работе с текстом в дизайне пользовательского интерфейса? Существующие основные принципы цветовой гармонии. И как они могут быть применены при разработке пользовательского интерфейса? Как влияет выбор цветовой палитры на эмоциональное восприятие пользователем интерфейса и какие цвета чаще всего ассоциируются с определенными эмоциями? Какие техники использования цвета для выделения важных элементов интерфейса можно применить для улучшения пользовательского опыта? Почему важно учитывать особенности восприятия цвета различными категориями пользователей (например, людьми с дефектами зрения) при разработке дизайна интерфейса? Какие основные функциональные возможности предоставляет программное обеспечение Figma для создания визуального дизайна пользовательского интерфейса? Какие инструменты и функции Figma можно использовать для прототипирования пользовательского интерфейса и создания интерактивных элементов? Каким образом в Figma можно организовать совместную работу над дизайном интерфейса, обменяться комментариями и отслеживать изменения? Какие преимущества имеет использование программного обеспечения Figma для дизайнеров интерфейсов по сравнению с другими инструментами и какие особенности его интерфейса способствуют удобству работы? Какие методы и инструменты используются для создания макетов высокой точности в дизайне пользовательского интерфейса? Каким образом определяется и поддерживается единый стиль и консистентность элементов в макете высокой точности? Какие принципы и техники помогают добиться высокой точности в размещении элементов, размерах, отступах и цветах в дизайне интерфейса? Как важно учитывать адаптивность и реактивность макетов высокой точности для обеспечения удобства использования на различных устройствах и разрешениях экранов? Какие принципы визуальной согласованности следует соблюдать при разработке системы дизайна для пользовательского интерфейса? Каким образом система дизайна помогает обеспечить единый стиль и консистентность элементов в интерфейсе? Какие инструменты и методы можно использовать для создания и поддержания системы дизайна в процессе разработки интерфейса? Почему важно тщательно следить за визуальной согласованностью элементов интерфейса и как это влияет на пользовательский опыт? |
| 3. | Итеративный дизайн, тестирование юзабилити и пример портфолио | Какие этапы включает цикл итеративного проектирования и как они взаимодействуют друг с другом?
Почему петли обратной связи являются важным элементом итеративного дизайна и как они помогают улучшить пользовательский опыт? Какие методы тестирования юзабилити можно использовать на разных этапах цикла итеративного проектирования и как они помогают выявить проблемы интерфейса? Какой подход к созданию портфолио в UX/UI дизайне может быть наиболее эффективным для демонстрации навыков и опыта в области итеративного дизайна? Какие методы тестирования удобства использования вы знаете и как они могут быть применены в процессе итеративного дизайна? Какие приемы сбора обратной связи от пользователей могут быть использованы для улучшения юзабилити продукта? Инструменты и техники анализа данных, которые можно применить для интерпретации результатов тестирования юзабилити. Как можно использовать результаты тестирования удобства использования для оптимизации пользовательского опыта и создания более эффективного интерфейса? Какие методы сбора обратной связи от пользователей можно использовать в процессе итеративного дизайна для улучшения пользовательского опыта? Какие инструменты анализа отзывов пользователей могут помочь выявить основные проблемы в юзабилити продукта? Какой подход к анализу отзывов пользователей будет наиболее эффективным для определения приоритетов в улучшении интерфейса? Как можно использовать отзывы пользователей для создания примеров портфолио, демонстрирующих процесс и результаты работы над улучшением юзабилити продукта? Как итеративный дизайн способствует повышению эффективности пользовательского опыта и какие методы тестирования юзабилити могут быть использованы в этом процессе? Критерии эффективности дизайна, которые можно использовать для оценки результатов тестирования юзабилити и определения необходимых улучшений. Какие преимущества может принести создание примеров портфолио на основе работы над улучшением юзабилити продукта, и какие элементы следует включить в такие примеры? Какие методы анализа отзывов пользователей могут помочь определить успешность улучшений юзабилити продукта и как эти данные могут быть использованы для дальнейшего совершенствования дизайна? Какие преимущества предоставляют кликабельные прототипы с высокой степенью достоверности в процессе итеративного дизайна, и как они помогают улучшить пользовательский опыт? Какие методы тестирования юзабилити можно применить для оценки кликабельных прототипов с высокой степенью достоверности, и какие критерии эффективности следует учитывать при проведении таких тестов? Какие элементы кликабельных прототипов с высокой степенью достоверности можно использовать в примерах портфолио для демонстрации навыков работы над улучшением юзабилити продукта? Какие методы анализа данных о поведении пользователей при взаимодействии с кликабельными прототипами с высокой степенью достоверности могут помочь определить успешность улучшений юзабилити продукта и провести дальнейшую оптимизацию дизайна? Какие методы передачи дизайна используются в процессе итеративного дизайна, и как они способствуют улучшению пользовательского опыта? Какие критерии эффективности следует учитывать при выборе методов тестирования юзабилити для передачи дизайна, и какие преимущества предоставляют кликабельные прототипы с высокой степенью достоверности? Какие элементы передачи дизайна можно использовать в примерах портфолио для демонстрации навыков работы над улучшением юзабилити продукта, и какие особенности следует учитывать при подготовке таких примеров? Какие методы анализа данных о поведении пользователей при взаимодействии с переданным дизайном могут помочь определить успешность улучшений юзабилити продукта и провести дальнейшую оптимизацию дизайна? Основные принципы, которые следует учитывать при создании презентации портфолио и кейсов для демонстрации навыков работы в области UX/UI дизайна. Какие элементы стоит включить в презентацию кейсов проектов, чтобы эффективно передать процесс работы над улучшением юзабилити и дизайном продукта? Какие методы подготовки и оформления презентации портфолио помогут привлечь внимание потенциальных работодателей или клиентов и продемонстрировать свои профессиональные достижения? Каким образом можно использовать примеры кейсов из портфолио для поддержки своих решений и доказательства успешности улучшений юзабилити продукта при проведении интервью или презентаций? |
Вопросы/Задания к промежуточной аттестации в устной/письменной форме:
1. Проектирование пользовательского опыта.
2. Важность проектирования, ориентированного на пользователя, в стартапах.
3. Методы и техника исследования пользователей.
4. Создание персон пользователей.
5. Информационная архитектура и пользовательский поток.
6. Проведение интервью с пользователями.
7. Тестирование пользователей и сбор отзывов.
8. Создание схемы и прототипов.
9. Визуальный дизайн в UX/UI.
10. Принципы визуальной иерархии и компоновки.
11. Типографика в дизайне пользовательского интерфейса.
12. Теория и применение цвета.
13. Программное обеспечение Figma.
14. Создание макетов высокой точности.
15. Визуальная согласованность и системы дизайна.
16. Циклы итеративного проектирования и петли обратной связи.
17. Методы и приемы тестирования удобства использования.
18. Сбор и анализ отзывов пользователей.
19. Эффективность дизайна.
20. Кликабельные прототипы с высокой степенью достоверности.
21. Передача дизайна.
22. Основы презентации портфолио и кейсов.
Перечень учебно-методического обеспечения дисциплины
Основная литература:
1. Баканов, А. С. Проектирование пользовательского интерфейса: эргономический подход / А. С. Баканов, А. А. Обознов. — 2-е изд. — Москва: Издательство «Институт психологии РАН», 2019. — 184 c. — Режим доступа: https://www.iprbookshop.ru/88367.html — ЭБС «IPRbooks».
2. Назаркин, О. А. Разработка графического пользовательского интерфейса в соответствии с паттерном Model-View-Viewmodel на платформе Windows Presentation Foundation. Основные средства WPF: учебное пособие по дисциплине «Проектирование человеко-машинного интерфейса» / О. А. Назаркин. — Липецк: Липецкий государственный технический университет, ЭБС АСВ, 2014. — 61 c. — Режим доступа: https://www.iprbookshop.ru/55141.html — ЭБС «IPRbooks».
Дополнительная литература:
1. Баканов, А. С. Эргономика пользовательского интерфейса. От проектирования к моделированию человеко-компьютерного взаимодействия / А. С. Баканов, А. А. Обознов. — Москва: Институт психологии РАН, 2011. — 176 c. — Режим доступа: https://www.iprbookshop.ru/15677.html — ЭБС «IPRbooks».
2. Hillmann, C. UX for XR. User Experience Design and Strategies for Immersive Technologies. — Publishing House: Apress Berkeley, CA, 2021. — 255 p. — Режим доступа: https://link.springer.com/book/10.1007/978-1-4842-7020-2 — Полнотекстовая англоязычная БД Springer.
3. Thymé-Gobbel, А., Jankowski, С. Mastering Voice Interfaces. Creating Great Voice Apps for Real Users. — Publishing House: Apress Berkeley, CA, 2021. — 689 p. — Режим доступа: https://link.springer.com/book/10.1007/978-1-4842-7005-9 — Полнотекстовая англоязычная БД Springer.
Методические указания для обучающихся по освоению дисциплины
| Вид учебных занятий/деятельности | Деятельность обучающегося |
|---|---|
| Лекция | Написание конспекта лекций: кратко, схематично, последовательно фиксировать основные положения лекции, выводы, формулировки, обобщения; помечать важные мысли, выделять ключевые слова, термины. Обозначить вопросы, термины или другой материал, который вызывает трудности, пометить и попытаться найти ответ в рекомендуемой литературе. Если самостоятельно не удается разобраться в материале, необходимо сформулировать вопрос и задать преподавателю на консультации, во время семинарского (практического) занятия. |
| Практическое (семинарское) занятие | При подготовке к семинарскому (практическому) занятию необходимо проработать материалы лекций, основной и дополнительной литературы по заданной теме. На основании обработанной информации постараться сформировать собственное мнение по выносимой на обсуждение тематике. Обосновать его аргументами, сформировать список источников, подкрепляющих его.
Во время семинарского (практического) занятия активно участвовать в обсуждении вопросов, высказывать аргументированную точку зрения на проблемные вопросы. Приводить примеры из источниковой базы и научной и/или исследовательской литературы. |
| Устный/письменный опрос | Отвечать, максимально полно, логично и структурировано, на поставленный вопрос. Основная цель – показать всю глубину знаний по конкретной теме или ее части. |
| Подготовка к промежуточной аттестации | При подготовке к промежуточной аттестации необходимо проработать вопросы по темам, которые рекомендуются для самостоятельной подготовки. При возникновении затруднений с ответами следует ориентироваться на конспекты лекций, семинаров, рекомендуемую литературу, материалы электронных и информационных справочных ресурсов, статей.
Если тема вызывает затруднение, четко сформулировать проблемный вопрос и задать его преподавателю. |
| Практические (лабораторные) занятия | Практические занятия предназначены прежде всего для разбора отдельных сложных положений, тренировки аналитических навыков, а также для развития коммуникационных навыков. Поэтому на практических занятиях необходимо участвовать в тех формах обсуждения материала, которые предлагает преподаватель: отвечать на вопросы преподавателя, дополнять ответы других студентов, приводить примеры, задавать вопросы другим выступающим, обсуждать вопросы и выполнять задания в группах. Работа на практических занятиях подразумевает домашнюю подготовку и активную умственную работу на самом занятии. Работа на практических занятиях в форме устного опроса заключается прежде всего в тренировке навыков применять теоретические положения к самому разнообразному материалу. В ходе практических занятий студенты работают в группах для обсуждения предлагаемых вопросов. |
| Самостоятельная работа | Самостоятельная работа состоит из следующих частей: 1) чтение учебной, справочной, научной литературы; 2) повторение материала лекций; 3) составление планов устных выступлений; 4) подготовка видеопрезентации. При чтении учебной литературы нужно разграничивать для себя материал на отдельные проблемы, концепции, идеи. Учебную литературу можно найти в электронных библиотечных системах, на которые подписан АНО Университет Иннополис. |
| Видеопрезентация | Подготовка видеопрезентаций по курсу. Видеопрезентации могут быть сделаны на любую тему, затронутую в ходе курса. Темы должны быть заранее согласованы с преподавателем. Видеопрезентации продолжительностью около 5 минут (300 секунд) должны быть подготовлены в группах, определяемых преподавателем. Несмотря на то, что это групповая работа, должен явно присутствовать вклад каждого члена группы. |
| Доклад | Публичное, развернутое сообщение по определенной теме или вопросу, основанное на документальных данных. При подготовке доклада рекомендуется использовать разнообразные источники, позволяющие глубже разобраться в теме. Учебную литературу можно найти в электронных библиотечных системах, на которые подписан АНО Университет Иннополис. |
| Дискуссия | Публичное обсуждение спорного вопроса, проблемы. Каждая сторона должна оппонировать мнение собеседника, аргументируя свою позицию. |
| Тестирование (устное/письменное) | При подготовке к тестированию необходимо проработать материалы лекций, семинаров, основной и дополнительной литературы по заданной теме. Основная цель тестирования – показать уровень сформированности знаний по конкретной теме или ее части. |
| Индивидуальная работа | При выполнение индивидуальной работы необходимо взять задание у преподавателя, ознакомиться с требованиями к выполнению работы, изучить поставленную проблему, найти решение проблемы. Если самостоятельно не удается разобраться в материале, необходимо сформулировать вопрос и задать преподавателю на консультации, во время семинарского (практического) занятия. Оформить результаты работы. |
| Разработка отдельных частей кода | Разработать часть кода, исходя из поставленной задачи и рекомендаций преподавателя. При выполнении работы рекомендуется обращаться к материалам лекций и семинарских (практических) занятий. Если возникают затруднения, необходимо проконсультироваться с преподавателем. |
| Выполнение домашних заданий и групповых проектов | Для выполнения домашних заданий и групповых проектов необходимо получить формулировку задания от преподавателя и убедиться в понимании задания. При выполнение домашних заданий и групповых проектов необходимо проработать материалы лекций, основной и дополнительной литературы по заданной теме. |