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

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

Макетирование общей структуры взаимодействия

Опираясь на концептуальное проектирование в предыдущей главе, создадим макет общей структуры сайта. В нем покажем в общих чертах расположение элементов на каждой странице сайта и то, как эти элементы будут взаимодействовать между собой (Приложение Рис.7).Используем закон Фиттса для оценки эффективности взаимодействия пользователя с интерфейсом. Закон Фиттса – это эмпирический закон, описывающий время, необходимое для движения курсора на экране компьютера или мобильного устройства к целевому объекту. Закон Фиттса формулируется следующим образом: время, необходимое для движения курсора к целевому объекту, пропорционально расстоянию до него и обратно пропорционально размеру целевого объекта (ЦО).То есть чем дальше находится ЦО, тем больше времени потребуется, чтобы двигать курсор на нужное расстояние. Однако, если размер целевого объекта увеличится, то время движения курсора к нему сокращается.

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

Применение принципов и шаблонов проектирования взаимодействия.

Проектируемый интерфейс интуитивно понятен, поскольку все его элементы заимствуют контексты из общеизвестных интерфейсов.

Представление визуального решения

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

Цветовая палитра.На сайте преобладают голубой, зеленый и белые цвета. Состояние покоя, расслабленности, безмятежность, море, небесная лазурь - именно такие ассоциации вызывает спектр голубых тонов.Зеленый цвет ассоциируется с природой, свежестью и весной. Также он символизирует рост, стабильность, богатство, жизнелюбие.Белый цвет является нейтральным. Он не вызывает эмоций, не принадлежит к холодной или теплой гамме оттенков. В его свойствах подчеркивать яркость любого цвета из всего спектра.

Оценка проектного решения

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

Заключение

В ходе работы мы создали интерфейс сайта для тренировки навыка печати. Провели исследование предметной области и анализировали уже существующие интерфейсы сайтов этой тематики, выявили основные достоинства и недостатки, проанализировали их и использовали полученные данные для собственной разработки. Выявили основные критерии эффективного интерфейса, с дальнейшим применением их в работе. Опираясь на закон Фиттса и закон Хика, смогли

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

Список литературы

Беркун С. Разработка цифровых интерфейсов. - СПб.: Питер, 2018. – 281 с.
Харви С. Цифровые интерфейсы: разработка и применение. - М.: ДМК Пресс, 2021. - 397 с.
Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем. — СПб.: Символ-плюс, 2010. — 272 с.
Яблонски Д. Законы UX-дизайна . — СПб.: БВХ-Петербург, 2022. — 149 с.