Файл: Курсовая Фамилия Чепик Имя Владимир Отчество Сергеевич Группа пб12з Проверил.docx

МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕУЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»(СПбГУТ)ИНСТИТУТ НЕПРЕРЫВНОГО ОБРАЗОВАНИЯДисциплина: Разработка интерфейса цифрового продуктаКурсоваяФамилия: ЧепикИмя: ВладимирОтчество: СергеевичГруппа №: ПБ-12зПроверил:______________Санкт-Петербург2023

Введение

Разработка цифровых интерфейсов является одним из ключевых направлений в области информационных технологий. Сегодня они присутствуют во всех сферах жизни человека, от бытовых устройств до сложных систем управления производством. Цифровые интерфейсы позволяют пользователям взаимодействовать с устройствами и программными продуктами, делая этот процесс более удобным, эффективным и управляемым. В данной курсовой работе мы рассмотрим основные аспекты разработки цифровых интерфейсов, включая проектирование, интерфейсный дизайн, анализ пользовательского опыта и тестирование. Мы также рассмотрим современные тенденции и проблемы в области цифровых интерфейсов.Целью данной курсовой работы является получение навыков разработки интерфейса цифрового продукта с типовой технологией проектирования и с учетом принципов создания дружественных интерфейсов. Интерфейс будет создан для сайта для тренировки скорости печати.

1. Исследование современных направлений развития в области разработки интерфейса цифрового продукта.

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

---

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

2. Исследование предметной области

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

---

3. Сравнительный анализ существующих интерфейсов сайтов для тренировки скорости печати.

Проведем сравнительный анализ двух сайтов для тренировки скорости печати: typerun.top и stamina-online.com.

1. Анализ интерфейса сайта typerun.top

При входе на сайт, пользователь сразу попадает в режим тренировки (Приложение Рис.1). Дизайн сайта очень лаконичный и выверенный. В левом верхнем углу отображается текущий режим и сложность тренировки в виде выпадающего списка. При нажатии на селектор режима/сложности на весь экран разворачивается табло со всеми возможными значениями (Приложение Рис.3). Также в верхней части сайта отображаются текущие показатели скорости ввода и процента ошибок. Ниже располагается поле ввода текста, под которым отображены значения, которые должны быть введены. В центре экрана изображена клавиатура и ней подсвечена клавиша, которая должна быть нажата для ввода символа из тренировки. Также над этой же клавишей обозначена условная ладонь, у которой выделен синим цветом палец, которым по технике ввода правильно было бы нажать на подсвеченную клавишу. Пользователю предлагается 2 варианта цветовой схемы сайта: тёмная и светлая. Светлый режим преимущественно белый, со светло-серыми границами клавиш, сами символы на них становятся чёрными, как и текст для ввода и вводимый текст. В тёмной теме (Приложение Рис.2) фон страницы и клавиш меняется на чёрный, а текст принимает белый цвет. Для обозначения скорости печати и процента ошибок применяются пиктограммы: условный зеленый спидометр и оранжевый щит с восклицательным знаком соответственно.В процессе тренировки при ошибочно введенных символах, поле ввода подсвечивается желтым цветом.Цветовая палитра.Сайт предлагает лаконичный дизайн в базовых цветах, белом и чёрном, с небольшими вкраплениями нескольких других цветов для создания акцентов на важных элементах интерфейса, это действует как некоторые якоря. Никакие яркие и «кричащие» цвета не отвлекают пользователя от главной задачи – ввода текста для тренировки без надобности в этом.Для создания мотивации «спидометр» окрашен в ярко зеленый цвет. Этот цвет воспринимается как одобрительный, как положительный показатель. Современные интерфейсы приучили пользователя так воспринимать зеленый цвет. Правильные ответы обычно помечаются зеленым в различных тестах. Но главное влияние на создание этого контекста оказал светофор. Зеленый – иди, желтый – приготовиться, красный – стой. Последний из перечисленных к тому же отвечает за отрицательный показатель тренировки – процент ошибок пользователя. Желтый же цвет, цвет внимания в описанном выше контексте, сигнализирует пользователю о том, что он совершил ошибку.

---

2. Анализ интерфейса сайта stamina-online.com

Рассматриваемый сайт встречает нас приветственным баннером, который, как и остальные на главной странице (Приложение Рис.4), выполнен в одном из оттенков синего цвета. Кнопка начать обучение в этом баннере окрашена в тёмно-зеленый цвет с белым текстом внутри. На остальных баннерах размещена информация о преимуществах этого сайта.Нажав на кнопку начать обучение, мы попадаем на страницу выбора режимов тренировки (Приложение Рис.5). Страница оформлена в стиле блокнота с закладками на синем фоне. Каждая «закладка» - язык раскладки для тренировки. Выбранная становится одного, белого, цвета с основной частью «блокнота». В основной же части располагаются ряды карточек, озаглавленных кратким обозначением того материала, который находится внутри. Карточки разделяются на 3 части. Название тренировки, посередине количество очков, в нижней части статистика тренировки, выраженная во времени, затраченном на неё и процент безошибочно введенного текста. Карточки разделены на категории – по сложности.При нажатии на одну из карточек, начинается тренировка (Приложение Рис.6). Эта страница окрашена в голубой цвет. В верхней части располагается таймер, отсчитывающий время с начала тренировки. Ниже располагается название урока, а под ним поле ввода. Посередине изображены условные ладони, а между ними клавиатура. Пальцы на ладонях окрашены в различные цвета, которым соответствуют клавиши, выкрашенные в соответствующие цвета в зависимости от того, какими пальцами предполагается нажатие конкретной клавиши. Текущая предполагаемая для нажатия клавиша окрашивается в красный цвет.Цветовая палитраСиний цвет и его оттенки идут единой нитью через все страницы сайта. Синий цвет – один из самых популярных цветов в дизайне. Он ассоциируется с небом и водой, а также с доверием, стабильностью и профессионализмом. Синий цвет может быть использован в различных оттенках, от голубого темно-синего до светло-голубого, и каждый оттенок может вызывать разные эмоции и ассоциации. На главной странице, продающей, использование синего и голубого цвета оправдано ассоциациями с профессионализмом, доверием и стабильностью, но во время тренировки печати, особенно в сочетании с пёстрой клавиатурой (для условных обозначений пальцев и их мест на клавиатуре использовано 8 ярких и контрастных цветов), создаётся слишком много ложных акцентов, отвлекающих от ввода текста.

---

3. Вывод по сравнительному анализу интерфейсов

Stamina-online.com выделяется на фоне своего конкурента тем, что имеет более основательную систему учёта предыдущих достижений пользователя. Листая карточки с пройденными тренировками, человек получает мотивацию пройти все из них, получить как можно больше очков и в конечном счете более продолжительное время пользоваться ресурсом. Отпугнуть от продолжения получения навыка набора текста пользователя может только пёстрый дизайн страницы самой тренировки. Яркие цвета смещают внимание с текста, который вводит человек на сами кнопки на клавиатуре. Внимание к правильному распределению зон ответственности пальцев на клавиатуре важно лишь на первых этапах, но в дальнейшем нагроможденность цветами начинает отвлекать и в конечном счете снижает скорость печати. Typerun.top использует более сдержанный и лаконичный дизайн для своей главной страницы и этим выгодно выделяется на фоне конкурента. Удобный режим тренировки в совокупности с системой достижений, грамотно выстроенной с точки зрения дизайна, помогли бы получить эффективный интерфейс для сайта, подходящего под наши задачи.

4. Критерии эффективного интерфейса

Интерфейс – это ключевой элемент любого программного продукта, который позволяет пользователю взаимодействовать с ним. В настоящее время число программных продуктов и сайтов продолжает расти, важность эффективного интерфейса становится всё более явной. В этом контексте, создание эффективного интерфейса является важной задачей для разработчиков ПО и дизайнеров, которые должны учитывать потребности пользователей и следить за современными тенденциями в области дизайна интерфейсов.Ниже перечислены 6 качеств эффективного интерфейса:

1. 
   Интуитивность
   

Интерфейс должен быть понятным без дополнительного обучения пользователей.

2. 
   Согласованность
   

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

3. 
   Эстетичность
   

Интерфейс должен быть привлекательным и эстетичным, чтобы удовлетворить эстетические потребности пользователя.

4. 
   Надежность
   

Интерфейс должен быть стабильным и надежным, не допускать ошибок и сбоев.

---