Проектирование мобильных интерфейсов и юзабилити

Краткое содержание учебной дисциплины, модуля / Brief summary

Создание информационной архитектуры веб-ресурса и сценариев работы.

Понятие информационной архитектуры. Диаграммы Венна. Список проблем и формулировка гипотезы. Информационные потребности пользователя. Исследование аналогов и анализ целевой аудитории, разработка персон (персонажей). Пользователи, заказчики и другие заинтересованные в разработке ресурса (стейкхолдеры), их типы, анализ интересов, взаимодействие. Создание профиля пользователя. Формирование JTBD-списка по результатам интервью. Паттерны сканирования экранов. Карты пути клиента — CJM, UJM, USM – и другие схемы представления пути пользователя. Проектирование и анализ сценариев использования для мобильных приложений. Проверка гипотез. Переход от сценария десктопного приложения к сценарию мобильного ресурса. Особенности разработки технического задания веб-ресурсов для мобильных устройств.

Проектирование интерфейса.

Понятие «дизайн-системы», ее место и роль в процессе проектирования интерфейса. Создание и внедрение дизайн-системы. Понятие «UI-кита», его значение для единообразия дизайна, узнаваемости визуального стиля, повышения эффективности и качества работы, снижения затрат на разработку. Понятие «СCSS-фреймворка», его использование для ускорения разработки, чистоты и масштабируемости шаблонов кода. Классификация, типы, фреймворки с коллекциями UI-компонентов. U-элементы и жесты в дизайне мобильных приложений. UI-паттерны повторяющиеся решения для типичных задач. Мобильные UX-паттерны. Технические ограничения продукта и гайдланы мобильных систем.

Создание макета мобильного ресурса и его прототипа.

Создание макетов интерфейсов мобильного приложения, согласно выявленным функциональным требованиям. Основы композиции, визуальная иерархия в макете экрана для мобильного ресурса. Модульные сетки, цветовые палитры, структурные и графические элементы, шрифты. Адаптация макета по гайдлайнам мобильных систем. Понятие интерактивного прототипа и обзор основных сервисов для его создания Составление структурной схемы проекта в виде ментальной карты. Переменные как токены дизайн-системы. Плагины Figma для упрощения навигации и организации дизайн-системы.

Юзабилити и UX.

Основные методы юзабилити-исследования: наблюдение, опросы и анкетирование, тестирование прототипа, анализ конкурентов. фокус-группы. Основные результаты юзабилитиисследования: карта пути пользователя, прототипы и макеты, рекомендации по улучшению, ключевые показатели эффективности и метрики. Тестирование интерактивного прототипа. Анализ результатов тестирования. Обработка обратной связи от реальных пользователей.

Creating a web resource’s information architecture and workflows.

The concept of information architecture. Venn diagrams. Listing problems and formulating a hypothesis. User information needs. Researching analogs and analyzing the target audience, developing personas. Users, customers, and other stakeholders (stakeholders), their types, analyzing their interests, and interactions. Creating a user profile. Creating a JTBD list based on interview results. Screen scanning patterns. Customer journey maps (CJM, UJM, USM) and other user journey representation schemes. Designing and analyzing use cases for mobile applications. Hypothesis testing. Transitioning from a desktop application scenario to a mobile resource scenario. Specific aspects of developing technical specifications for web resources for mobile devices.

Interface design.

The concept of a «design system,» its place and role in the interface design process. Creation and implementation of a design system. The concept of a «UI kit» and its importance for design consistency, visual style recognition, increased efficiency and quality of work, and reduced development costs. The concept of a «CSS framework» and its use for speeding up development, ensuring clean and scalable code templates. Classification, types, and frameworks with collections of UI components. U-elements and gestures in mobile app design. UI patterns: recurring solutions for common tasks. Mobile UX patterns. Technical product limitations and mobile system guidelines.

Creating a mobile resource mockup and its prototype.

Creating mobile app interface mockups based on identified functional requirements. Basic composition and visual hierarchy in mobile resource screen mockups. Modular grids, color palettes, structural and graphic elements, and fonts. Adapting the mockup to mobile system guidelines. Understanding the concept of an interactive prototype and an overview of the main services for its creation. Creating a project structural diagram in the form of a mind map. Variables as design system tokens. Figma plugins for simplifying navigation and organizing the design system.

Usability and UX.

Key usability research methods: observation, surveys and questionnaires, prototype testing, competitor analysis, and focus groups. Key usability research deliverables: user journey maps, prototypes and mockups, improvement recommendations, key performance indicators (KPIs), and metrics. Interactive prototype testing. Analysis of test results. Feedback from real users.

Формируемые компетенции / The formed competences

Специализированные компетенции: Осуществлять анализ контекста и поставленной проблемы, аргументированно выбирать оптимальный способ ее решения, согласовывать частичные проектные решения в общую согласованную архитектуру, выполнять реализацию проекта с учетом оценки накопленных и поступающих данных.

Выполнять проектирование, разработку, тестирование и маркетинг информационных решений в сети Интернет с учетом их последующего масштабирования и обработки возникающих больших объемов данных.

Specialized competencies:

Analyze the context and the problem, reasonably select the optimal solution, coordinate partial design solutions into a coherent overall architecture, and implement projects based on the assessment of accumulated and incoming data.

Design, develop, test, and market online information solutions, taking into account their subsequent scalability and processing of emerging large volumes of data.

Результаты обучения (знать, уметь, владеть) / Learning outcomes (know, can, be able)

В результате освоения учебной дисциплины студент должен:

знать:

– базовые понятия информационной архитектуры, создания пользовательских интерфейсов (UI), эргономики, пользовательского опыта (UX);

– математические модели, необходимые для анализа и реализации сценариев использования мобильных приложений;

– последовательность и содержание этапов проектирования и реализации интерфейсов мобильных ресурсов;

– методологию и методы исследования юзабилити;

– возможности современных и перспективных инструментов разработки интерфейсов и схем представления пути пользователя, создания ментальных карт и интерактивных прототипов ресурсов для мобильных устройств;

– CSS-фреймворки различных типов и коллекции UI-элементов и жестов, UI-паттерны и UX-паттерны для мобильных ресурсов;

– основные принципы построения композиции, выбора колористического решения, информационной архитектуры;

уметь:

– разрабатывать техническое задание на проектирование мобильного ресурса с учетом технических ограничений продукта и составляющих фирменного стиля (гайдлайнов) для различных систем;

– создавать персонажи и профили пользователей;

– формировать представления пути пользователя;

– применять и редактировать UI-кит, библиотеки UI-элементов, шаблонов, тем, мокапов, шрифтов и др.

– использовать CSS-фреймворки для ускорения разработки, достижения чистоты и масштабируемости шаблонов кода;

– разрабатывать интерактивные прототипы страниц и экранов мобильного ресурса, схем навигации и карты сайта для ресурса;

– создавать структурную схему проекта в виде ментальной карты;

владеть:

– реализации вариантов, переменных и интерактивных прототипов;

– составления структурной схемы проекта;

– формирования карт пути пользователя;

– создания макета интерфейсов мобильного приложения в определенной дизайн-системе с применением плагинов инструмента реализации;

– применения CSS-фреймворков, библиотек UI-элементов, шаблонов, тем, мокапов, шрифтов и др., UI- и UX-паттернов;

– тестирования интерактивных прототипов;

– анализа результатов тестирования.

As a result of mastering the academic discipline, the student must

know:

– Basic concepts of information architecture, user interface (UI) design, ergonomics, and user experience (UX);

– Mathematical models necessary for analyzing and implementing mobile application use cases;

– The sequence and content of the design and implementation stages of mobile resource interfaces;

– Usability research methodology and methods;

– The capabilities of modern and advanced tools for developing interfaces and user journey diagrams, creating mind maps and interactive resource prototypes for mobile devices;

– CSS frameworks of various types and collections of UI elements and gestures, UI patterns, and UX patterns for mobile resources;

– basic principles of composition, color scheme selection, and information architecture;

can:

– Develop technical specifications for the design of a mobile resource, taking into account the technical limitations of the product and the components of the corporate identity (guidelines) for various systems;

– Create user personas and profiles;

– Develop user journey representations;

– Apply and edit a UI kit, libraries of UI elements, templates, themes, mockups, fonts, etc.

– Use CSS frameworks to speed up development and achieve clean and scalable code templates;

– develop interactive prototypes of mobile resource pages and screens, navigation schemes, and a sitemap for the resource;

– create a project structural diagram in the form of a mind map;

be able to:

– implementing variants, variables, and interactive prototypes;

– creating a project structural diagram;

– creating user journey maps;

– creating a mobile app interface layout in a specific design system using implementation tool plugins;

– applying CSS frameworks, UI element libraries, templates, themes, mockups, fonts, and other UI and UX patterns;

– testing interactive prototypes;

– analyzing test results.

Семестр изучения учебной дисциплины, модуля / Semester of study

7

7

Пререквизиты / Prerequisites

– Веб-дизайн

– Основы облачных технологий

– Анализ и проектирование информационных систем

– Теория вероятностей и математическая статистика

– Web Design

– Cloud Computing Fundamentals

– Information Systems Analysis and Design

– Probability Theory and Mathematical Statistics

Трудоемкость в зачетных единицах (кредитах) / Credit units

3 зачетные единицы.

3 credit units.

Количество аудиторных часов и часов самостоятельной работы / Academic hour of students’ class work, 

hours of self-directed learning

Всего 90 часов, из них 54 аудиторных часа и 36 часов самостоятельной работы.

A total of 90 hours, of which 54 academic hours of students’ class work and 36 hours of self-directed learning.

Требования и формы текущей и промежуточной аттестации / Requirements and forms of current and interim certification

Опрос, защита лабораторных работ, контрольные работы.

Зачет.

Survey, lab work defense, tests.

End-of-term tests.